/* FEDUCCE Catálogo — La Casa + Contacto. → window.CAT_PAGES */
const YDS = window.FEDUCCEDesignSystem_349cd6;
const { LinkArrow: YLink, Label: YLabel, Badge: YBadge, Divider: YDivider } = YDS;
const { WAButton: YWA } = window.FEDCAT_UI;

function Casa({ go }) {
  const mines = [
    ["Muzo", "La fuente de esmeraldas más legendaria del mundo. Verde cálido y saturado, con una profundidad que define a la piedra colombiana.", "assets/img/emerald-crystals.jpg"],
    ["Chivor", "En lo alto de la cordillera oriental. Cristales más fríos, de verde azulado, apreciados por su claridad y su luz.", "assets/img/emerald-spike.jpg"],
    ["Coscuez", "Áspera y prolífica. La piedra con carácter: viva, variada, con inclusiones que prueban su naturaleza.", "assets/img/emerald-cluster.jpg"],
  ];
  return (
    <div>
      <section style={{ borderBottom: "1px solid var(--border-hairline)" }}>
        <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "26px 40px 0", display: "grid", gridTemplateColumns: "1fr auto 1fr" }}>
          <YLabel brackets={false} size="frame" tone="muted">La Casa</YLabel>
          <YLabel brackets={false} size="frame" tone="muted" style={{ textAlign: "center" }}>COLOMBIA</YLabel>
          <span></span>
        </div>
        <div style={{ maxWidth: "1100px", margin: "0 auto", padding: "72px 40px 80px", textAlign: "center" }}>
          <YLabel tone="emerald" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ Hecha para vivirse ]</YLabel>
          <h1 style={{ fontSize: "clamp(44px, 6vw, 104px)", marginTop: "24px" }}>Forma desde<br />la naturaleza.</h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", color: "var(--ink-500)", marginTop: "30px", maxWidth: "54ch", marginLeft: "auto", marginRight: "auto", lineHeight: 1.75 }}>
            FEDUCCE es una casa contemporánea de joyería en esmeralda. Empezamos por la piedra — natural, colombiana, de millones de años — y dejamos que su forma guíe la mano. Cada par se hace por encargo, para llevarse, conservarse y vivirse.
          </p>
        </div>
      </section>

      <section style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "88px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "64px", alignItems: "end", marginBottom: "48px" }}>
          <div>
            <YLabel tone="muted" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ Origen ]</YLabel>
            <h2 style={{ fontSize: "clamp(32px, 3.8vw, 58px)", marginTop: "18px", maxWidth: "12ch" }}>Todo comienza en Colombia.</h2>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--ink-500)", lineHeight: 1.75, maxWidth: "48ch", paddingBottom: "6px" }}>
            Las tres minas legendarias del país dan cada una un verde distinto. Extraemos de forma consciente, tallamos de forma tradicional y nombramos el origen de cada piedra que engastamos, porque de dónde viene una pieza es el corazón de su historia.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "26px" }}>
          {mines.map(([name, desc, img], i) => (
            <div key={name}>
              <div style={{ overflow: "hidden", aspectRatio: "4 / 5" }}>
                <img src={img} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: "16px", paddingTop: "12px", borderTop: "1px solid var(--border-hairline)" }}>
                <h3 style={{ fontSize: "22px" }}>{name}</h3>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.16em", color: "var(--ink-400)" }}>0{i + 1} / 03</span>
              </div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "13.5px", color: "var(--ink-500)", marginTop: "12px", lineHeight: 1.65 }}>{desc}</p>
            </div>
          ))}
        </div>
      </section>

      <section style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "32px 40px 96px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "64px", alignItems: "center" }}>
        <div>
          <YLabel tone="muted" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ El oficio ]</YLabel>
          <h2 style={{ fontSize: "clamp(32px, 3.8vw, 56px)", marginTop: "18px", maxWidth: "12ch" }}>Engastado enteramente a mano.</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--ink-500)", marginTop: "24px", maxWidth: "46ch", lineHeight: 1.75 }}>
            Trabajamos en oro 18k. Nada se produce en serie: un solo orfebre lleva cada par de la cera al acabado, para que el metal guarde la memoria de la mano que lo hizo.
          </p>
          <div style={{ display: "flex", gap: "48px", marginTop: "36px" }}>
            {[["18k", "Oro macizo"], ["03", "Piezas en catálogo"], ["100%", "Hecho a mano"]].map(([n, l]) => (
              <div key={l}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "32px", color: "var(--ink-900)", letterSpacing: "-0.02em" }}>{n}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-400)", marginTop: "8px" }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ overflow: "hidden", aspectRatio: "4 / 5" }}>
          <img src="assets/img/gold-face.jpg" alt="Artefacto ancestral de oro" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
      </section>

      <section data-surface="invert" style={{ background: "var(--ink-900)" }}>
        <div style={{ maxWidth: "var(--container-wide)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", alignItems: "stretch", minHeight: "520px" }}>
          <div style={{ overflow: "hidden" }}>
            <img src="assets/img/gold-mask.jpg" alt="Artefacto de oro precolombino" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div style={{ padding: "96px 40px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <YLabel tone="onDark" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ Forma ancestral ]</YLabel>
            <h2 style={{ fontSize: "clamp(34px, 4.4vw, 64px)", color: "var(--bone-50)", marginTop: "20px", maxWidth: "13ch" }}>Un lenguaje más antiguo que nosotros.</h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--text-on-dark-muted)", marginTop: "24px", maxWidth: "44ch", lineHeight: 1.75 }}>
              Nuestras formas responden a la orfebrería de los antiguos Andes: máscaras, narigueras y tocados trabajados en el mismo metal cálido que usamos hoy. No los reproducimos; los escuchamos. El resultado es contemporáneo, pero lleva una memoria.
            </p>
            <div style={{ marginTop: "34px" }}>
              <YLink tone="onDark" onClick={(e) => { e.preventDefault(); go("catalogo"); }}>Ver el catálogo</YLink>
            </div>
          </div>
        </div>
      </section>

      <section style={{ maxWidth: "1000px", margin: "0 auto", padding: "96px 40px" }}>
        <div style={{ border: "1px solid var(--border-hairline)", padding: "clamp(32px, 5vw, 64px)", textAlign: "center", position: "relative" }}>
          <div style={{ position: "absolute", top: "16px", left: "18px", fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.2em", color: "var(--ink-400)" }}>FEDUCCE</div>
          <div style={{ position: "absolute", top: "16px", right: "18px", fontFamily: "var(--font-sans)", fontSize: "10px", letterSpacing: "0.2em", color: "var(--ink-400)" }}>COLOMBIA</div>
          <YLabel tone="emerald" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ Piedra natural ]</YLabel>
          <h2 style={{ fontSize: "clamp(28px, 3.4vw, 48px)", marginTop: "20px", maxWidth: "18ch", marginLeft: "auto", marginRight: "auto" }}>Cada par, hecho uno por uno.</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--ink-500)", marginTop: "22px", maxWidth: "52ch", marginLeft: "auto", marginRight: "auto", lineHeight: 1.75 }}>
            Te contamos el origen de la piedra, su medida y el tiempo de elaboración antes de empezar. Sin catálogo infinito y sin intermediarios: hablas directamente con la casa.
          </p>
          <div style={{ marginTop: "30px", display: "flex", gap: "10px", justifyContent: "center", flexWrap: "wrap" }}>
            <YBadge tone="ink" variant="outline">Oro 18k</YBadge>
            <YBadge tone="ink" variant="outline">Esmeralda colombiana</YBadge>
            <YBadge tone="ink" variant="outline">Hecho a mano</YBadge>
          </div>
          <div style={{ marginTop: "32px", display: "flex", justifyContent: "center" }}>
            <YWA variant="primary" message="Hola FEDUCCE, quisiera saber más sobre sus piezas en oro 18k.">Escribir por WhatsApp</YWA>
          </div>
        </div>
      </section>
    </div>
  );
}

/* -------------------------------------------------------------- Contacto -- */
function Contacto({ go }) {
  const faqs = [
    ["¿Cómo hago un pedido?", "Escríbenos por WhatsApp con la pieza que te interesa. Confirmamos disponibilidad, tiempo de elaboración y forma de pago por chat."],
    ["¿Hacen envíos?", "Sí, a cualquier ciudad de Colombia. Coordinamos el envío al confirmar el pedido."],
    ["¿Puedo pedir otra medida?", "Sí. Además de las tres piezas del catálogo, podemos evaluar otras medidas o piedras. Cuéntanos qué buscas."],
    ["¿Cuánto tardan?", "Cada par se elabora por encargo. El tiempo depende de la pieza y te lo confirmamos antes de empezar."],
  ];
  return (
    <div>
      <section style={{ maxWidth: "var(--container-wide)", margin: "0 auto", padding: "26px 40px 0", display: "grid", gridTemplateColumns: "1fr auto 1fr" }}>
        <YLabel brackets={false} size="frame" tone="muted">Contacto</YLabel>
        <YLabel brackets={false} size="frame" tone="muted" style={{ textAlign: "center" }}>COLOMBIA</YLabel>
        <span></span>
      </section>
      <section style={{
        maxWidth: "var(--container-wide)", margin: "0 auto", padding: "64px 40px 88px",
        display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: "72px", alignItems: "start",
      }}>
        <div>
          <YLabel tone="emerald" size="md" brackets={false} style={{ whiteSpace: "nowrap" }}>[ Atención directa ]</YLabel>
          <h1 style={{ fontSize: "clamp(40px, 5.4vw, 84px)", marginTop: "18px" }}>Escríbenos.</h1>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", color: "var(--ink-500)", marginTop: "24px", maxWidth: "42ch", lineHeight: 1.75 }}>
            No vendemos en línea. Cada pedido se conversa por WhatsApp, directamente con la casa: la piedra, la medida, el tiempo y el envío.
          </p>
          <div style={{ marginTop: "34px", display: "flex", gap: "16px", alignItems: "center", flexWrap: "wrap" }}>
            <YWA variant="emerald" message="Hola FEDUCCE, quisiera información sobre sus piezas." style={{ padding: "17px 24px" }}>Abrir WhatsApp</YWA>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-500)" }}>{window.CAT_WHATSAPP_LABEL}</span>
          </div>
          <div style={{ marginTop: "44px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "26px", maxWidth: "440px" }}>
            {[["Atención", "Lunes a sábado"], ["Ciudad", "Bogotá, Colombia"], ["Envíos", "Todo el país"], ["Pago", "Se coordina por chat"]].map(([k, v]) => (
              <div key={k} style={{ borderTop: "1px solid var(--border-hairline)", paddingTop: "12px" }}>
                <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>
        <div>
          <YDivider label="Preguntas frecuentes" style={{ marginBottom: "8px" }} />
          {faqs.map(([q, a]) => (
            <div key={q} style={{ borderBottom: "1px solid var(--border-hairline)", padding: "20px 0" }}>
              <h3 style={{ fontSize: "17px" }}>{q}</h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--ink-500)", marginTop: "10px", lineHeight: 1.7, maxWidth: "48ch" }}>{a}</p>
            </div>
          ))}
          <div style={{ marginTop: "28px" }}>
            <YLink onClick={(e) => { e.preventDefault(); go("catalogo"); }}>Ver las tres piezas</YLink>
          </div>
        </div>
      </section>
    </div>
  );
}

window.CAT_PAGES = { Casa, Contacto };
