/* Chiketto — Landing root. Composes the multi-product sections, manages the
   active language (persisted), scroll-reveal (production build — no tweaks panel). */

const { Nav, Hero, Pillars, Labs, Enterprise, Philosophy, Contact, Footer } = window.ChikettoSections;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "Oscuro",
  "accent": "Magenta"
}/*EDITMODE-END*/;

const ACCENTS = {
  "Magenta": { "--text-brand": "var(--magenta-600)", "--brand-soft": "var(--magenta-50)", "--brand-soft-border": "var(--magenta-200)" },
  "Púrpura": { "--text-brand": "var(--purple-600)", "--brand-soft": "var(--purple-50)", "--brand-soft-border": "var(--purple-200)" },
};

const LANG_KEY = "chiketto.lang";

function useLang() {
  const [lang, setLangState] = React.useState(() => {
    try { return localStorage.getItem(LANG_KEY) || "es"; } catch (e) { return "es"; }
  });
  const setLang = React.useCallback((v) => {
    setLangState(v);
    try { localStorage.setItem(LANG_KEY, v); } catch (e) {}
    document.documentElement.lang = v;
  }, []);
  React.useEffect(() => { document.documentElement.lang = lang; }, [lang]);
  return [lang, setLang];
}

function useReveal(dep) {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll(".ck-reveal:not(.ck-in)"));
    if (!("IntersectionObserver" in window) || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      els.forEach((e) => e.classList.add("ck-in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) { en.target.classList.add("ck-in"); io.unobserve(en.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, [dep]);
}

function Landing() {
  const t = TWEAK_DEFAULTS;
  const [lang, setLang] = useLang();
  useReveal(lang);

  const accentVars = ACCENTS[t.accent] || ACCENTS["Magenta"];
  const tr = window.CHIKETTO_I18N[lang] || window.CHIKETTO_I18N.es;

  return (
    <div style={{ background: "var(--bg-page)", ...accentVars }}>
      <Nav t={tr} lang={lang} setLang={setLang} />
      <Hero t={tr} theme={t.heroStyle === "Claro" ? "light" : "dark"} />
      <Pillars t={tr} />
      <Labs t={tr} />
      <Enterprise t={tr} />
      <Philosophy t={tr} />
      <Contact t={tr} />
      <Footer t={tr} />

      <style>{`
        @media (max-width: 920px) {
          [data-hero-grid] { grid-template-columns: 1fr !important; gap: 36px !important; padding-top: 72px !important; padding-bottom: 80px !important; }
          .ck-herovisual { height: 420px !important; }
          [data-phil-grid] { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
        @media (max-width: 760px) {
          .ck-navlinks, .ck-navcta { display: none !important; }
          .ck-burger { display: inline-flex !important; }
          .ck-mobilemenu { display: flex !important; }
          [data-footer-grid] { grid-template-columns: 1fr 1fr !important; }
          h1 { font-size: 42px !important; }
          h2 { font-size: 32px !important; }
        }
        @media (max-width: 480px) {
          [data-footer-grid] { grid-template-columns: 1fr !important; }
          .ck-herovisual { transform: scale(0.82); transform-origin: top left; }
        }
      `}</style>
    </div>
  );
}

window.Landing = Landing;