/* FEDUCCE Catálogo — Inicio, Catálogo, Ficha de pieza. → window.CAT_SCREENS */
const XDS = window.FEDUCCEDesignSystem_349cd6;
const { Button: XButton, LinkArrow: XLink, Label: XLabel, Badge: XBadge, Divider: XDivider, Icon: XIcon } = XDS;
const { CFrame, WAButton: XWA, CImageSlot: XSlot } = window.FEDCAT_UI;
const cmoney = window.CAT_money;
const cfull = window.CAT_full;

/* ------------------------------------------------------------ PieceTile -- */
function PieceTile({ p, index, go, showPrice = true, ratio = "3 / 4" }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: "relative", cursor: "pointer" }} onClick={() => go("product", { id: p.id })}>
      <div style={{ position: "relative" }}>
        <CFrame src={p.image} alt={cfull(p)} index={index} label={"Foto · " + p.size} ratio={ratio} />
        <a href={window.CAT_waProduct(p)} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}
          style={{
            position: "absolute", left: 0, right: 0, bottom: 0, padding: "13px",
            background: "var(--ink-900)", color: "var(--bone-50)", textDecoration: "none",
            display: "flex", alignItems: "center", justifyContent: "center", gap: "9px",
            fontFamily: "var(--font-sans)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase",
            transform: hover ? "translateY(0)" : "translateY(100%)", opacity: hover ? 1 : 0,
            transition: "transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out)",
          }}>
          <WAGlyph size={15} /> Consultar por WhatsApp
        </a>
      </div>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: "12px",
        paddingTop: "12px", marginTop: "12px", borderTop: "1px solid var(--border-hairline)",
      }}>
        <div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-900)" }}>{p.name}</div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-400)", marginTop: "5px" }}>{p.size} · Oro 18k</div>
        </div>
        {showPrice && <span style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.04em", color: "var(--ink-500)", whiteSpace: "nowrap" }}>{cmoney(p.price)}</span>}
      </div>
    </div>
  );
}

/* ----------------------------------------------------------------- Home -- */
function Home({ go, t = {} }) {
  const pieces = window.CAT_PRODUCTS;
  const editorialHero = t.heroLayout === "Editorial";
  const showFrame = t.cornerFrame !== false;
  const showPrice = t.showPrices !== false;
  const steps = [
    ["01", "Elige tu par", "Tres piezas en el catálogo. Esmeralda de 4 mm, esmeralda de 3 mm, diamante de 3 mm — todas en oro 18k."],
    ["02", "Escríbenos por WhatsApp", "Desde la pieza que te gustó. Resolvemos dudas de piedra, medida y presentación por chat."],
    ["03", "La hacemos y te la entregamos", "Confirmamos tiempo de elaboración, forma de pago y envío a cualquier ciudad de Colombia."],
  ];
  return (
    <div>
      <section style={{ borderBottom: "1px solid var(--border-hairline)" }}>
        {showFrame && (
          <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "26px 40px 0", display: "grid", gridTemplateColumns: "1fr auto 1fr" }}>
            <XLabel brackets={false} size="frame" tone="muted">FEDUCCE</XLabel>
            <XLabel brackets={false} size="frame" tone="muted" style={{ textAlign: "center", lineHeight: 1.5 }}>{"CASA DE JOYERÍA EN ESMERALDA"}</XLabel>
            <span></span>
          </div>
        )}
        {editorialHero ? (
          <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "40px 40px 0" }}>
            <div style={{ textAlign: "center", padding: "24px 0 40px" }}>
              <XLabel brackets={false} size="frame" tone="muted" style={{ marginBottom: "22px", display: "block" }}>Colombia</XLabel>
              <h1 style={{ fontSize: "clamp(48px, 8vw, 132px)" }}>Joyería contemporánea<br />en esmeralda.</h1>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", color: "var(--ink-500)", marginTop: "24px", lineHeight: 1.6 }}>Formas escultóricas. Materiales atemporales. Hecha para vivirse.</p>
              <div style={{ marginTop: "32px", display: "flex", justifyContent: "center", gap: "16px", alignItems: "center" }}>
                <XWA variant="primary" message="Hola FEDUCCE, vengo del catálogo y quisiera información sobre los topos en oro 18k.">Consultar por WhatsApp</XWA>
                <XLink onClick={(e) => { e.preventDefault(); go("catalogo"); }}>Ver el catálogo</XLink>
              </div>
            </div>
            <div style={{ overflow: "hidden", aspectRatio: "21 / 8", boxShadow: "var(--shadow-emerald)" }}>
              <img src="assets/img/emerald-crystals.jpg" alt="Cristales de esmeralda" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          </div>
        ) : (
          <div style={{
            maxWidth: "var(--container-wide)", margin: "0 auto", display: "grid",
            gridTemplateColumns: "1fr 1.12fr", gap: "56px", alignItems: "center", padding: "48px 40px 64px",
          }}>
            <div>
              <XLabel brackets={false} size="frame" tone="muted" style={{ marginBottom: "22px", display: "block" }}>Colombia</XLabel>
              <h1 style={{ fontSize: "clamp(46px, 5.4vw, 88px)" }}>Joyería<br />contemporánea<br />en esmeralda.</h1>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", color: "var(--ink-500)", marginTop: "26px", maxWidth: "34ch", lineHeight: 1.6 }}>
                Tres piezas en oro 18k, elaboradas a mano en Colombia. Se encargan por WhatsApp.
              </p>
              <div style={{ marginTop: "36px", display: "flex", gap: "22px", alignItems: "center", flexWrap: "wrap" }}>
                <XWA variant="primary" message="Hola FEDUCCE, vengo del catálogo y quisiera información sobre los topos en oro 18k.">Consultar por WhatsApp</XWA>
                <XLink onClick={(e) => { e.preventDefault(); go("catalogo"); }}>Ver el catálogo</XLink>
              </div>
            </div>
            <div style={{ overflow: "hidden", aspectRatio: "4 / 3.1", boxShadow: "var(--shadow-emerald)" }}>
              <img src="assets/img/emerald-crystals.jpg" alt="Cristales de esmeralda" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          </div>
        )}
      </section>

      <section style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "64px 40px 88px" }}>
        <XDivider label="Las tres piezas" action="Ver el catálogo" style={{ marginBottom: "30px", cursor: "pointer" }} onClick={() => go("catalogo")} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "26px" }}>
          {pieces.map((p, i) => (
            <PieceTile key={p.id} p={p} index={"0" + (i + 1) + " / 03"} go={go} showPrice={showPrice} />
          ))}
        </div>
      </section>

      <section data-surface="invert" style={{ background: "var(--ink-900)", position: "relative", overflow: "hidden" }}>
        <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 1fr", minHeight: "520px" }}>
          <div style={{ padding: "104px 40px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <XLabel tone="onDark" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ Belleza escultórica ]</XLabel>
            <h2 style={{ fontSize: "clamp(40px, 5.4vw, 74px)", color: "var(--bone-50)", marginTop: "20px", maxWidth: "14ch" }}>Formas de esmeralda.<br />Belleza atemporal.</h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--text-on-dark-muted)", marginTop: "26px", maxWidth: "42ch", lineHeight: 1.7 }}>
              Cada par comienza con una piedra de millones de años, extraída de las minas de Colombia y engastada a mano en oro 18k. No hay producción en serie: cada encargo se hace uno por uno.
            </p>
            <div style={{ marginTop: "36px" }}>
              <XLink tone="onDark" onClick={(e) => { e.preventDefault(); go("about"); }}>Conocer la casa</XLink>
            </div>
          </div>
          <div style={{ overflow: "hidden" }}>
            <img src="assets/img/emerald-cluster.jpg" alt="Racimo de esmeraldas" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
      </section>

      <section style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "88px 40px" }}>
        <XDivider label="Cómo comprar" style={{ marginBottom: "36px" }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "48px" }}>
          {steps.map(([n, title, body]) => (
            <div key={n}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.2em", color: "var(--ink-400)" }}>[{n}]</div>
              <h3 style={{ fontSize: "24px", marginTop: "14px" }}>{title}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--ink-500)", marginTop: "12px", lineHeight: 1.7 }}>{body}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: "44px", display: "flex", gap: "18px", alignItems: "center" }}>
          <XWA variant="emerald" message="Hola FEDUCCE, quisiera hacer un pedido. ¿Me ayudas?">Escribir ahora</XWA>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: "10.5px", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-400)" }}>{window.CAT_WHATSAPP_LABEL}</span>
        </div>
      </section>

      <section style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "0 40px 96px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "64px", alignItems: "center" }}>
        <div style={{ overflow: "hidden", aspectRatio: "1 / 1" }}>
          <img src="assets/img/gold-mask.jpg" alt="Artefacto ancestral de oro" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
        <div>
          <XLabel tone="emerald" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ Forma ancestral ]</XLabel>
          <h2 style={{ fontSize: "clamp(34px, 3.8vw, 58px)", marginTop: "20px", maxWidth: "13ch" }}>Todo comienza en Colombia.</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--ink-500)", marginTop: "24px", maxWidth: "46ch", lineHeight: 1.7 }}>
            Desde las minas de Muzo, Chivor y Coscuez hasta el banco del orfebre, cada pieza FEDUCCE lleva la herencia de su origen. Trabajamos en oro 18k y piedra natural, invocando los artefactos ancestrales de los Andes como un lenguaje vivo de la forma.
          </p>
          <div style={{ marginTop: "30px" }}>
            <XLink onClick={(e) => { e.preventDefault(); go("about"); }}>Leer la historia de la casa</XLink>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ------------------------------------------------------------- Catálogo -- */
function Catalogo({ go, t = {} }) {
  const pieces = window.CAT_PRODUCTS;
  const showPrice = t.showPrices !== false;
  return (
    <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "26px 40px 96px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", marginBottom: "48px" }}>
        <XLabel brackets={false} size="frame" tone="muted">FEDUCCE</XLabel>
        <XLabel brackets={false} size="frame" tone="muted" style={{ textAlign: "center" }}>COLOMBIA</XLabel>
        <span></span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "64px", alignItems: "end", marginBottom: "44px" }}>
        <div>
          <XLabel tone="muted" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ El catálogo ]</XLabel>
          <h1 style={{ fontSize: "clamp(40px, 5.2vw, 82px)", marginTop: "18px" }}>Tres piezas.</h1>
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--ink-500)", lineHeight: 1.75, maxWidth: "46ch", paddingBottom: "8px" }}>
          Topos en oro 18k con piedra natural. Se elaboran por encargo, uno a uno. Para comprar, escríbenos por WhatsApp desde la pieza que te interese.
        </p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "26px" }}>
        {pieces.map((p, i) => (
          <PieceTile key={p.id} p={p} index={"0" + (i + 1) + " / 03"} go={go} showPrice={showPrice} ratio="4 / 5" />
        ))}
      </div>
      <div style={{
        marginTop: "56px", paddingTop: "20px", borderTop: "1px solid var(--border-hairline)",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: "24px", flexWrap: "wrap",
      }}>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--ink-500)", maxWidth: "52ch", lineHeight: 1.7 }}>
          ¿Buscas otra medida, otra piedra o un par a la medida? Lo conversamos por chat y te confirmamos si es posible.
        </p>
        <XWA variant="ghost" message="Hola FEDUCCE, quisiera consultar por una medida o una piedra distinta a las del catálogo.">Consultar otra medida</XWA>
      </div>
    </div>
  );
}

/* --------------------------------------------------------- Ficha de pieza -- */
function Pieza({ p, go }) {
  const [frame, setFrame] = React.useState(0);
  const [open, setOpen] = React.useState("detalles");
  const gallery = p.gallery && p.gallery.length ? p.gallery : [p.image];
  const others = window.CAT_others(p.id);
  const rows = [["Metal", p.material], ["Piedra", p.stone], ["Medida", p.size], ["Presentación", "Par de topos"]];
  const accordion = (id, title, body) => {
    const isOpen = open === id;
    return (
      <div key={id} style={{ borderTop: "1px solid var(--border-hairline)" }}>
        <button onClick={() => setOpen(isOpen ? null : id)} style={{
          width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
          background: "none", border: 0, padding: "16px 0", cursor: "pointer",
          fontFamily: "var(--font-sans)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em",
          textTransform: "uppercase", color: "var(--ink-900)",
        }}>
          {title}
          <span style={{ fontSize: "14px", color: "var(--ink-400)", transform: isOpen ? "rotate(180deg)" : "none", transition: "transform var(--dur-base) var(--ease-standard)" }}>⌄</span>
        </button>
        {isOpen && <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--ink-500)", lineHeight: 1.75, paddingBottom: "18px", maxWidth: "52ch" }}>{body}</p>}
      </div>
    );
  };
  return (
    <div>
      <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "22px 40px 0" }}>
        <button onClick={() => go("catalogo")} style={{
          background: "none", border: 0, padding: 0, cursor: "pointer", display: "flex", alignItems: "center", gap: "7px",
          fontFamily: "var(--font-sans)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-500)",
        }}>
          <XIcon name="chevronLeft" size={15} /> El catálogo
        </button>
      </div>
      <section style={{
        maxWidth: "var(--container-wide)", margin: "0 auto", padding: "26px 40px 88px",
        display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: "64px", alignItems: "start",
      }}>
        <div>
          <CFrame src={gallery[frame]} alt={cfull(p)} label={p.name + " " + p.size} ratio="4 / 5" hoverZoom={false} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "12px", marginTop: "12px" }}>
            {gallery.map((g, i) => (
              <button key={i} onClick={() => setFrame(i)} style={{
                padding: 0, border: i === frame ? "1px solid var(--ink-900)" : "1px solid transparent",
                background: "none", cursor: "pointer",
              }}>
                <CFrame src={g} alt="" label="Ángulo" ratio="1 / 1" hoverZoom={false} />
              </button>
            ))}
          </div>
        </div>
        <div style={{ position: "sticky", top: "110px" }}>
          <XLabel tone="emerald" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ {p.tag} ]</XLabel>
          <h1 style={{ fontSize: "clamp(34px, 4vw, 60px)", marginTop: "16px" }}>{p.name}<br />· {p.size}</h1>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: "15px", letterSpacing: "0.04em", color: "var(--ink-700)", marginTop: "18px" }}>{window.CAT_moneyFull(p.price)}</div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--ink-500)", marginTop: "20px", lineHeight: 1.75, maxWidth: "44ch" }}>{p.blurb}</p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "18px 26px", margin: "30px 0 6px" }}>
            {rows.map(([k, v]) => (
              <div key={k}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: "9.5px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-400)" }}>{k}</div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--ink-900)", marginTop: "6px" }}>{v}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "12px", marginTop: "32px" }}>
            <XWA variant="primary" product={p} style={{ justifyContent: "center", padding: "17px 22px" }}>Consultar por WhatsApp</XWA>
            <XWA variant="ghost" message={"Hola FEDUCCE, quisiera consultar por los " + cfull(p) + " en otra medida o con otro acabado."} style={{ justifyContent: "center", padding: "16px 22px" }}>Preguntar otra medida</XWA>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "12.5px", color: "var(--ink-400)", marginTop: "14px", lineHeight: 1.6 }}>
            No vendemos en línea. Todo pedido se coordina por WhatsApp: disponibilidad, pago y envío dentro de Colombia.
          </p>
          <div style={{ display: "flex", gap: "8px", marginTop: "22px", flexWrap: "wrap" }}>
            <XBadge tone="ink" variant="outline">Oro 18k</XBadge>
            <XBadge tone="ink" variant="outline">Piedra natural</XBadge>
            <XBadge tone="ink" variant="outline">Hecho a mano</XBadge>
          </div>
          <div style={{ marginTop: "34px" }}>
            {accordion("detalles", "Detalles", "Par de topos elaborados a mano en oro 18k. Piedra " + p.stone.toLowerCase() + ", medida " + p.size + ". Cada par se engasta, ajusta y pule individualmente en el taller.")}
            {accordion("origen", "Origen y materiales", "Las esmeraldas son piedras colombianas naturales de las minas de Muzo, Chivor y Coscuez, sin más tratamiento que el corte tradicional. El oro es de 18k.")}
            {accordion("encargo", "Encargo y entrega", "Cada par se elabora por encargo. Escríbenos por WhatsApp y confirmamos disponibilidad, tiempo de elaboración, forma de pago y envío a cualquier ciudad de Colombia.")}
          </div>
        </div>
      </section>
      <section style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "0 40px 96px" }}>
        <XDivider label="Las otras piezas" style={{ marginBottom: "28px" }} />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "26px", maxWidth: "760px" }}>
          {others.map((o, i) => <PieceTile key={o.id} p={o} index={"0" + (i + 1)} go={go} />)}
        </div>
      </section>
    </div>
  );
}

window.CAT_SCREENS = { Home, Catalogo, Pieza, PieceTile };
