// home.jsx — home page sections
const { useState: useS_h, useEffect: useE_h, useRef: useR_h } = React;

// ──────────────────────────────────────────────────────────────────────
// Atlichinoli glyph — two intertwined currents (water + fire)
// ──────────────────────────────────────────────────────────────────────
function AtlichinoliGlyph({ width = 220, height = 60, water = "var(--c-indigo)", fire = "var(--c-oxblood)", strokeWidth = 1.4 }) {
  // Two sinuous lines that weave: ATL (water, indigo) and TLACHINOLLI (fire, guinda).
  return (
    <svg viewBox="0 0 220 60" width={width} height={height} aria-hidden="true">
      <path d="M2 30 C 22 10, 42 10, 62 30 S 102 50, 122 30 S 162 10, 182 30 S 218 50, 218 30"
            fill="none" stroke={water} strokeWidth={strokeWidth} strokeLinecap="round" />
      <path d="M2 30 C 22 50, 42 50, 62 30 S 102 10, 122 30 S 162 50, 182 30 S 218 10, 218 30"
            fill="none" stroke={fire} strokeWidth={strokeWidth} strokeLinecap="round" />
      {/* tiny droplet + flame markers at endpoints */}
      <circle cx="2" cy="30" r="2.4" fill={water} />
      <circle cx="218" cy="30" r="2.4" fill={fire} />
    </svg>
  );
}

// pole symbol — small icon for water/fire/both
function PoleSymbol({ kind, size = 36, color = "currentColor" }) {
  if (kind === "water") {
    return (
      <svg viewBox="0 0 40 40" width={size} height={size} aria-hidden="true">
        <path d="M20 6 C 14 16, 9 22, 9 28 a 11 11 0 0 0 22 0 C 31 22, 26 16, 20 6 z"
              fill="none" stroke={color} strokeWidth="1.4" strokeLinejoin="miter" />
      </svg>
    );
  }
  if (kind === "fire") {
    return (
      <svg viewBox="0 0 40 40" width={size} height={size} aria-hidden="true">
        <path d="M20 4 C 22 12, 28 14, 28 22 a 8 8 0 0 1 -16 0 C 12 16, 16 14, 20 4 z M20 18 C 21 22, 24 23, 24 27 a 4 4 0 0 1 -8 0 C 16 24, 19 22, 20 18 z"
              fill="none" stroke={color} strokeWidth="1.4" strokeLinejoin="miter" />
      </svg>
    );
  }
  // both
  return (
    <svg viewBox="0 0 40 40" width={size} height={size} aria-hidden="true">
      <circle cx="20" cy="20" r="14" fill="none" stroke={color} strokeWidth="1.2" />
      <path d="M20 6 C 12 14, 28 26, 20 34" fill="none" stroke={color} strokeWidth="1.2" />
    </svg>
  );
}

// ──────────────────────────────────────────────────────────────────────
// HERO
// ──────────────────────────────────────────────────────────────────────
function Hero({ t, lang, logoTreatment }) {
  return (
    <section style={{ position: "relative", paddingTop: 60, paddingBottom: 100 }}>
      <div className="wrap">
        <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 80, alignItems: "center", minWidth: 0 }}>
          <div style={{ minWidth: 0 }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>{t(COPY.hero.eyebrow)}</div>
            <div style={{ marginBottom: 28, opacity: .85 }}>
              <AtlichinoliGlyph width={180} height={48} />
            </div>
            <h1 className="display" style={{ fontSize: "clamp(40px, 7vw, 104px)", margin: 0, maxWidth: "100%", overflowWrap: "break-word", hyphens: "manual" }}>
              {t(COPY.hero.titleA)} <em>{t(COPY.hero.titleB)}</em>
              <br />
              <span style={{ color: "var(--c-oxblood)" }}>{t(COPY.hero.titleSub)}</span>
            </h1>
            <p className="lead" style={{ marginTop: 36, maxWidth: 540 }}>{t(COPY.hero.body)}</p>
            <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
              <button className="btn dark solid" onClick={() => {
                const el = document.getElementById("agaves");
                if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
              }}>{t(COPY.hero.cta1)}</button>
              <button className="btn dark" onClick={() => {
                const el = document.getElementById("story");
                if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
              }}>{t(COPY.hero.cta2)}</button>
            </div>
          </div>
          <LogoComposition treatment={logoTreatment} />
        </div>
      </div>
    </section>
  );
}

function LogoComposition({ treatment }) {
  if (treatment === "subtle") {
    return (
      <div style={{ position: "relative" }}>
        <div style={{ aspectRatio: "4/5", background: "url(assets/photo-bottle-field.png) center/cover", border: "1px solid var(--c-rule)" }} />
        <div style={{ position: "absolute", top: 16, right: 16, background: "var(--c-paper)", padding: "10px 12px", display: "flex", alignItems: "center", gap: 10, border: "1px solid var(--c-rule)" }}>
          <img src="assets/coyote-mark.png" alt="" style={{ width: 28, height: 28, objectFit: "contain" }} />
          <div style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: ".22em", textTransform: "uppercase" }}>Coyote<br/>Emplumado</div>
        </div>
      </div>
    );
  }
  if (treatment === "animated") {
    return (
      <div style={{ position: "relative", aspectRatio: "1", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <style>{`
          @keyframes logo-rise { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
          @keyframes logo-glow { 0%,100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 12px 32px rgba(107,26,26,.18)); } }
          .logo-anim { animation: logo-rise 1.4s cubic-bezier(.2,.8,.2,1) both, logo-glow 6s ease-in-out infinite 1.4s; }
        `}</style>
        <img className="logo-anim" src="assets/coyote-mark.png" alt="Coyote Emplumado" style={{ width: "84%", maxWidth: 480 }} />
      </div>
    );
  }
  // sacred (default)
  return (
    <div style={{ position: "relative", aspectRatio: "1", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <img src="assets/coyote-mark.png" alt="Coyote Emplumado" style={{ width: "84%", maxWidth: 520, position: "relative", zIndex: 1 }} />
      <Crop pos="tl" /><Crop pos="tr" /><Crop pos="bl" /><Crop pos="br" />
      <div style={{ position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)", fontFamily: "var(--mono)", fontSize: 9, letterSpacing: ".3em", textTransform: "uppercase", color: "var(--c-ink-3)", whiteSpace: "nowrap" }}>
        Atl · Tlachinolli
      </div>
    </div>
  );
}
function Crop({ pos }) {
  const styles = {
    tl: { top: 0, left: 0, borderTop: "1px solid var(--c-ink)", borderLeft: "1px solid var(--c-ink)" },
    tr: { top: 0, right: 0, borderTop: "1px solid var(--c-ink)", borderRight: "1px solid var(--c-ink)" },
    bl: { bottom: 0, left: 0, borderBottom: "1px solid var(--c-ink)", borderLeft: "1px solid var(--c-ink)" },
    br: { bottom: 0, right: 0, borderBottom: "1px solid var(--c-ink)", borderRight: "1px solid var(--c-ink)" },
  };
  return <span style={{ position: "absolute", width: 14, height: 14, ...styles[pos] }} />;
}

// ──────────────────────────────────────────────────────────────────────
// STORY
// ──────────────────────────────────────────────────────────────────────
function Story({ t }) {
  return (
    <section id="story" style={{ padding: "120px 0 100px", borderTop: "1px solid var(--c-rule)", position: "relative" }}>
      <div className="wrap">
        <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }}>
          <div>
            <div className="eyebrow">{t(COPY.story.eyebrow)}</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "32px 0 24px", maxWidth: 360 }}>
              {t(COPY.story.title)}
            </h2>
            <AtlichinoliGlyph width={160} height={42} />
          </div>
          <div>
            <p className="lead" style={{ margin: "0 0 28px" }}>{t(COPY.story.body1)}</p>
            <p style={{ fontSize: 16, lineHeight: 1.75, color: "var(--c-ink-2)", margin: 0, maxWidth: 620 }}>{t(COPY.story.body2)}</p>
            <blockquote style={{
              fontFamily: "var(--serif)", fontStyle: "italic", fontSize: "clamp(26px, 2.4vw, 36px)",
              fontWeight: 300, color: "var(--c-oxblood)", borderLeft: "1px solid var(--c-oxblood)",
              padding: "8px 0 8px 28px", margin: "56px 0 0", maxWidth: 620, lineHeight: 1.3,
            }}>
              {t(COPY.story.pull)}
            </blockquote>

            <div className="dualities" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--c-rule)", border: "1px solid var(--c-rule)" }}>
              {[
                ["Atl", "Atl", "Tlachinolli", "Tlachinolli"],
                ["Agua", "Water", "Fuego", "Fire"],
                ["Mayahuel", "Mayahuel", "Huehuecóyotl", "Huehuecóyotl"],
                ["Vida", "Life", "Transformación", "Transformation"],
                ["Fertilidad", "Fertility", "Destrucción", "Destruction"],
                ["Femenino", "Feminine", "Masculino", "Masculine"],
              ].map((d, i) => (
                <div key={i} style={{ background: "var(--c-bg)", padding: "20px 18px", display: "flex", flexDirection: "column", gap: 4 }}>
                  <span style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", color: "var(--c-indigo)" }}>{t([d[0], d[1]])}</span>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--c-ink-3)" }}>↔ <span style={{ color: "var(--c-oxblood)" }}>{t([d[2], d[3]])}</span></span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// AGAVES — all three on one page (no tabs, no buy button)
// ──────────────────────────────────────────────────────────────────────
function Agaves({ t, lang }) {
  const items = COPY.agaves.items;
  return (
    <section id="agaves" style={{ padding: "120px 0", borderTop: "1px solid var(--c-rule)", background: "var(--c-paper)", position: "relative" }}>
      <div className="wrap">
        {/* header */}
        <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, marginBottom: 64, alignItems: "end" }}>
          <div>
            <div className="eyebrow">{t(COPY.agaves.eyebrow)}</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "28px 0 0" }}>
              {t(COPY.agaves.title)}
            </h2>
          </div>
          <div style={{ maxWidth: 460 }}>
            <p className="lead" style={{ margin: 0 }}>{t(COPY.agaves.sub)}</p>
          </div>
        </div>

        {/* axis diagram */}
        <div style={{ position: "relative", padding: "32px 0 40px", marginBottom: 32 }}>
          <div style={{ position: "absolute", left: 0, right: 0, top: "50%", height: 1, background: "var(--c-rule)" }} />
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr 1fr" }}>
            {items.map((a, i) => (
              <div key={a.key} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
                <div style={{ width: 12, height: 12, borderRadius: "50%", background: a.symbol === "water" ? "var(--c-indigo)" : a.symbol === "fire" ? "var(--c-oxblood)" : "var(--c-ink)", border: "3px solid var(--c-paper)" }} />
                <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--c-ink-3)" }}>{t(a.pole).split(" — ")[0]}</div>
              </div>
            ))}
          </div>
          <div style={{ position: "absolute", left: 0, top: 0, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--c-oxblood)" }}>
            ← {t(["fuego", "fire"])}
          </div>
          <div style={{ position: "absolute", right: 0, top: 0, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--c-indigo)" }}>
            {t(["agua", "water"])} →
          </div>
        </div>

        {/* three cards stacked side by side */}
        <div className="agave-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--c-rule)", border: "1px solid var(--c-rule)" }}>
          {items.map((a, i) => <AgaveCard key={a.key} item={a} index={i} t={t} />)}
        </div>
      </div>
    </section>
  );
}

function AgaveCard({ item, index, t }) {
  const accent = item.symbol === "water" ? "var(--c-indigo)" : item.symbol === "fire" ? "var(--c-oxblood)" : "var(--c-ink)";
  return (
    <div style={{ background: "var(--c-bg)", padding: "40px 32px 36px", display: "flex", flexDirection: "column", gap: 20 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--c-ink-3)", letterSpacing: ".18em" }}>0{index + 1}</span>
        <div style={{ color: accent }}>
          <PoleSymbol kind={item.symbol} size={32} color={accent} />
        </div>
      </div>

      <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", color: accent }}>
        {t(item.pole)}
      </div>

      <h3 className="display" style={{ fontSize: "clamp(40px, 4vw, 56px)", margin: 0, lineHeight: 1 }}>
        {t(item.name)}
      </h3>
      <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 15, color: "var(--c-ink-3)", marginTop: -8 }}>
        {item.latin}
      </div>

      <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--c-ink-2)", margin: "8px 0 0" }}>
        {t(item.body)}
      </p>

      <div style={{ marginTop: "auto", paddingTop: 28, borderTop: "1px solid var(--c-rule)", display: "flex", flexDirection: "column", gap: 14 }}>
        <CardSpec label={t(["Notas", "Notes"])} value={t(item.notes)} />
        <CardSpec label={t(["Graduación", "ABV"])} value={item.abv} />
      </div>
    </div>
  );
}
function CardSpec({ label, value }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--c-ink-3)", marginBottom: 4 }}>{label}</div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 17, lineHeight: 1.35 }}>{value}</div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────
// PROCESS
// ──────────────────────────────────────────────────────────────────────
function Process({ t }) {
  return (
    <section style={{ padding: "120px 0 100px", borderTop: "1px solid var(--c-rule)" }}>
      <div className="wrap">
        <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80 }}>
          <div style={{ position: "sticky", top: 100, alignSelf: "start" }}>
            <div className="eyebrow">{t(COPY.process.eyebrow)}</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: "32px 0 24px" }}>
              {t(COPY.process.title)}
            </h2>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--c-ink-2)", maxWidth: 320 }}>
              {t([
                "Cuatro pasos. Cinco días en el horno. Veinticinco años en la tierra. Y al final, una botella.",
                "Four steps. Five days in the oven. Twenty-five years in the earth. At the end, a bottle.",
              ])}
            </p>
          </div>
          <div>
            {COPY.process.steps.map((s, i) => (
              <div key={s.n} className="process-step" style={{
                display: "grid", gridTemplateColumns: "120px 1fr",
                gap: 32, padding: "32px 0",
                borderTop: i === 0 ? "1px solid var(--c-rule)" : "none",
                borderBottom: "1px solid var(--c-rule)",
              }}>
                <div className="step-num" style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 56, fontWeight: 300, color: "var(--c-oxblood)", lineHeight: 1 }}>{s.n}</div>
                <div>
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 36, fontWeight: 400, margin: "0 0 12px" }}>{t(s.t)}</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.7, margin: 0, color: "var(--c-ink-2)", maxWidth: 520 }}>{t(s.d)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────
// RITUAL
// ──────────────────────────────────────────────────────────────────────
function Ritual({ t }) {
  return (
    <section style={{ padding: "120px 0", borderTop: "1px solid var(--c-rule)", background: "var(--c-ink)", color: "var(--c-bg)" }}>
      <div className="wrap">
        <div className="mobile-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ color: "rgba(242,236,227,.5)" }}>{t(COPY.ritual.eyebrow)}</div>
            <h2 className="display" style={{ fontSize: "clamp(48px, 5.4vw, 80px)", margin: "32px 0 32px", color: "var(--c-bg)" }}>
              {t(COPY.ritual.title)}
            </h2>
            <p className="lead" style={{ color: "rgba(242,236,227,.78)", maxWidth: 480 }}>
              {t(COPY.ritual.body)}
            </p>
            <div style={{ display: "flex", gap: 32, marginTop: 40, flexWrap: "wrap" }}>
              {[["Sin hielo", "No ice"], ["Sin coctel", "No cocktail"], ["Sin prisa", "No rush"]].map((x, i) => (
                <div key={i} style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--c-barro)" }}>
                  ✕ {t(x)}
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "1" }}>
            <div className="ph" style={{ position: "absolute", inset: 0, background:
              "repeating-linear-gradient(135deg, transparent 0 14px, rgba(242,236,227,.06) 14px 15px)",
              borderColor: "rgba(242,236,227,.2)", color: "rgba(242,236,227,.4)" }}>
              <span>{t(["Foto · ritual de mezcal", "Photo · mezcal ritual"])}</span>
            </div>
            <div style={{ position: "absolute", top: 14, left: 14, right: 14, bottom: 14, border: "1px dashed rgba(242,236,227,.18)" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Story, Agaves, Process, Ritual, AtlichinoliGlyph });