/* global React, Placeholder, Eyebrow, Arr, useUI */

// Hero A — Foto editorial full-bleed con frase ancla en overlay
function HeroA({ setPage }) {
  return (
    <section className="hero-a">
      <Placeholder
        ratio="auto"
        tone="dark"
        label="/ASSETS/HERO-EDITORIAL.JPG"
        corner="◯ FOTO EDITORIAL · MECEDORA EN AMBIENTE"
        ring="◯ HERO"
        fill
      />
      <div className="top-rail">
        <span>DAVA'S · ARTE & DISEÑO</span>
        <span>EDICIÓN MMXXVI · COLOMBIA</span>
      </div>
      <div className="core">
        <h1>
          Tu pieza<br />
          se empieza <span className="you">a tejer</span><br />
          <em>cuando tú</em><br />
          la pides.
        </h1>
        <div className="bottom-rail">
          <p className="lead">
            Muebles tejidos a mano en taller propio.
            Cada pedido enciende la producción — listos en ~15 días, sin bodega y sin atajos.
          </p>
          <div className="ctas">
            <button className="btn bone" onClick={() => setPage("home")}>
              Ver catálogo
              <Arr />
            </button>
            <a className="btn line on-dark" href="https://wa.me/573005260637" target="_blank" rel="noopener">
              WhatsApp directo
            </a>
          </div>
        </div>
      </div>
      <div className="scroll-cue">SCROLL · DESCUBRE</div>
    </section>
  );
}

// Hero B — Producto aislado sobre bone con tipo grande
function HeroB({ setPage, openProduct }) {
  return (
    <section className="hero-b">
      <div className="top-rail">
        <span>PIEZA DEL MES · N°. 047</span>
        <span>HECHA A PEDIDO · 15 DÍAS</span>
      </div>
      <div className="stage">
        <div className="left">
          <div>
            <Eyebrow>Modelo destacado</Eyebrow>
            <h1>
              Mecedoras<br />
              <em>tejidas</em><br />
              a mano.
              <span className="small">— en 8 patrones, sobre teca curada</span>
            </h1>
          </div>
          <div>
            <p className="lead">
              Tu pieza se empieza a tejer cuando tú la pides. Una sola mano por respaldo,
              un solo respaldo por semana — el ritmo del oficio, no el de la fábrica.
            </p>
            <div className="meta-grid">
              <div><div className="k">Desde</div><div className="v">$ 580.000</div></div>
              <div><div className="k">Patrones</div><div className="v">8</div></div>
              <div><div className="k">Producción</div><div className="v">~ 15 d</div></div>
            </div>
            <div className="ctas">
              <button className="btn solid" onClick={() => openProduct({ id: "pavo-real-precolombino", name: "Pavo Real", family: "Mecedora", pattern: "Precolombino", price: "580.000", model: "Pavo Real", wood: "Teca", tone: "dark", variants: ["Lineal", "Precolombino", "Diamante", "Pirámide"] })}>
                Ver esta pieza <Arr />
              </button>
              <button className="btn line">Catálogo completo →</button>
            </div>
          </div>
        </div>
        <div className="product-frame">
          <Placeholder ratio="auto" tone="bone" label="/ASSETS/HERO-PRODUCTO-CUTOUT.PNG" corner="◯ CUTOUT · FONDO BONE" ring="PIEZA" fill />
          <div className="product-tag">N°. 047 / PAVO REAL</div>
          <div className="product-cite">
            <em>Pavo Real</em>
            <span>Patrón · Precolombino</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// Hero C — Mosaico de productos con tipografía dominante
function HeroC({ setPage, openProduct }) {
  const tiles = [
    { cls: "t1", tone: "dark",  name: "Pavo Real",  family: "Mecedora",  label: "/ASSETS/HERO-MOS-01.JPG", id: "pavo-real-hero" },
    { cls: "t2", tone: "bone",  name: "Colibrí",    family: "Silla",     label: "/ASSETS/HERO-MOS-02.JPG", id: "colibri-hero" },
    { cls: "t3", tone: "terra", name: "Sirena",     family: "Mecedora",  label: "/ASSETS/HERO-MOS-03.JPG", id: "sirena-hero" },
    { cls: "t4", tone: "verde", name: "Acapulco",   family: "Silla",     label: "/ASSETS/HERO-MOS-04.JPG", id: "acapulco-hero" },
    { cls: "t5", tone: "paper", name: "Diamante",   family: "Sofá",      label: "/ASSETS/HERO-MOS-05.JPG", id: "diamante-hero" },
  ];
  return (
    <section className="hero-c">
      <div className="top-rail">
        <span>DAVA'S · 212+ PIEZAS EN CATÁLOGO</span>
        <span>VOL. MMXXVI / 04</span>
      </div>
      <div className="head">
        <h1>
          Hechas a<br />
          mano, <em>una</em><br />
          por una.
        </h1>
        <div className="right">
          <Eyebrow>Lo que estamos tejiendo ahora</Eyebrow>
          <p>
            Tu pieza se empieza a tejer cuando tú la pides. Mecedoras, sillas, comedores y sofás
            sobre teca y pino — todo el catálogo a un toque de WhatsApp.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button className="btn solid" onClick={() => setPage("home")}>Ver catálogo <Arr /></button>
            <button className="btn line">Modelos icónicos</button>
          </div>
        </div>
      </div>
      <div className="grid">
        {tiles.map((t) => (
          <div className={`tile ${t.cls}`} key={t.cls} onClick={() => openProduct({ id: t.id, name: t.name, family: t.family, pattern: "Precolombino", price: "—", tone: t.tone })}>
            <Placeholder ratio="auto" tone={t.tone} label={t.label} corner={t.family} fill />
            <div className="info">
              <h4>{t.name}</h4>
              <span>{t.family} →</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Hero({ variant, setPage, openProduct }) {
  if (variant === "B") return <HeroB setPage={setPage} openProduct={openProduct} />;
  if (variant === "C") return <HeroC setPage={setPage} openProduct={openProduct} />;
  return <HeroA setPage={setPage} />;
}

window.Hero = Hero;