// app.jsx — root, page router, tweaks panel
const { useState, useEffect, useMemo } = React;

// Palette pulled from brand bible: Hueso #F2ECE3, Arena #E8DDD0, Tinta #1A1410,
// Guinda #6B1A1A, Azul Codex #1E2D5A, Barro #C4A882
const PALETTES = {
  ivory: {
    name: "Ivory",
    "--c-bg": "#f2ece3",        // Hueso
    "--c-paper": "#e8ddd0",     // Arena
    "--c-ink": "#1a1410",       // Tinta
    "--c-ink-2": "#3a2d24",
    "--c-ink-3": "rgba(26,20,16,.55)",
    "--c-rule": "rgba(26,20,16,.16)",
    "--c-oxblood": "#6b1a1a",   // Guinda — fuego
    "--c-indigo": "#1e2d5a",    // Azul Codex — agua
    "--c-barro": "#c4a882",     // Barro
    "--c-rose": "#c4a882",
  },
  codex: {
    name: "Codex",
    "--c-bg": "#efe6da",
    "--c-paper": "#f5ede1",
    "--c-ink": "#1a1410",
    "--c-ink-2": "#3a2d24",
    "--c-ink-3": "rgba(26,20,16,.55)",
    "--c-rule": "rgba(26,20,16,.18)",
    "--c-oxblood": "#6b1a1a",
    "--c-indigo": "#1e2d5a",
    "--c-barro": "#c4a882",
    "--c-rose": "#c4a882",
  },
  ember: {
    name: "Ember",
    "--c-bg": "#1a1410", "--c-paper": "#241b15",
    "--c-ink": "#f2ece3", "--c-ink-2": "#d8ccba", "--c-ink-3": "rgba(242,236,227,.55)",
    "--c-rule": "rgba(242,236,227,.14)",
    "--c-oxblood": "#c4a882", "--c-indigo": "#7a8fc4",
    "--c-barro": "#c4a882", "--c-rose": "#c4a882",
  },
  earth: {
    name: "Earth",
    "--c-bg": "#e8ddd0", "--c-paper": "#f2ece3",
    "--c-ink": "#241a14", "--c-ink-2": "#4a3526", "--c-ink-3": "rgba(36,26,20,.55)",
    "--c-rule": "rgba(36,26,20,.18)",
    "--c-oxblood": "#6b1a1a", "--c-indigo": "#5c3a1f",
    "--c-barro": "#c4a882", "--c-rose": "#c4a882",
  },
};

const TYPE_PAIRS = {
  editorial: { name: "Editorial", "--serif": "'Cormorant Garamond', Georgia, serif", "--sans": "'Crimson Pro', Georgia, serif", "--mono": "'DM Mono', ui-monospace, monospace" },
  brand:     { name: "Brand",     "--serif": "'Cinzel', Georgia, serif",              "--sans": "'Crimson Pro', Georgia, serif",          "--mono": "'DM Mono', ui-monospace, monospace" },
  modern:    { name: "Modern",    "--serif": "'Fraunces', Georgia, serif",            "--sans": "'Space Grotesk', system-ui, sans-serif", "--mono": "'IBM Plex Mono', ui-monospace, monospace" },
  classic:   { name: "Classic",   "--serif": "'Playfair Display', Georgia, serif",    "--sans": "'EB Garamond', Georgia, serif",          "--mono": "'IBM Plex Mono', ui-monospace, monospace" },
};

function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  const [page, setPage] = useState("home");
  const [lang, setLang] = useState("es");
  const [gated, setGated] = useState(() => !sessionStorage.getItem("ce_pass"));

  const t = (pair) => Array.isArray(pair) ? pair[lang === "es" ? 0 : 1] : pair;

  // Apply palette + type vars to :root
  useEffect(() => {
    const pal = PALETTES[tweaks.palette] || PALETTES.codex;
    const tp = TYPE_PAIRS[tweaks.typePair] || TYPE_PAIRS.editorial;
    const root = document.documentElement;
    Object.entries({ ...pal, ...tp }).forEach(([k, v]) => {
      if (k.startsWith("--")) root.style.setProperty(k, v);
    });
  }, [tweaks.palette, tweaks.typePair]);

  const passGate = () => { sessionStorage.setItem("ce_pass", "1"); setGated(false); };

  return (
    <>
      {gated && <AgeGate onPass={passGate} />}

      <Nav page={page} setPage={setPage} lang={lang} setLang={setLang} t={t} />

      {page === "home" && (
        <main>
          <Hero t={t} lang={lang} logoTreatment={tweaks.logoTreatment} />
          <Ticker items={[
            t(["Mezcal artesanal", "Artisanal mezcal"]),
            t(["Hecho en Puebla", "Made in Puebla"]),
            t(["100 % agave", "100 % agave"]),
            t(["Alambique de cobre", "Copper still"]),
            t(["Denominación de Origen", "Designation of Origin"]),
            t(["Cosecha 2025", "2025 harvest"]),
          ]} />
          <Story t={t} />
          <Agaves t={t} lang={lang} />
          <Process t={t} />
          <Ritual t={t} />
        </main>
      )}
      {page === "blog" && <BlogPage t={t} lang={lang} />}
      {page === "contact" && <ContactPage t={t} lang={lang} />}

      <Footer t={t} lang={lang} />

      {new URLSearchParams(window.location.search).has("dev") && (
      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakRadio label="Theme" value={tweaks.palette}
          options={Object.keys(PALETTES)}
          onChange={(v) => setTweak("palette", v)} />

        <TweakSection label="Typography" />
        <TweakRadio label="Pairing" value={tweaks.typePair}
          options={Object.keys(TYPE_PAIRS)}
          onChange={(v) => setTweak("typePair", v)} />

        <TweakSection label="Logo treatment" />
        <TweakRadio label="Hero" value={tweaks.logoTreatment}
          options={["sacred", "subtle", "animated"]}
          onChange={(v) => setTweak("logoTreatment", v)} />

        <TweakSection label="Demo" />
        <TweakSelect label="Page" value={page}
          options={[["home", "Home"], ["blog", "Journal"], ["contact", "Contact"]]}
          onChange={(v) => { setPage(v); window.scrollTo({ top: 0 }); }} />
        <TweakRadio label="Language" value={lang}
          options={["es", "en"]}
          onChange={setLang} />
        <TweakButton onClick={() => { sessionStorage.removeItem("ce_pass"); setGated(true); }}>
          Show age gate
        </TweakButton>
      </TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);