// Shared page chrome: nav + footer, reused across subpages.
const { useState: useStateShell, useEffect: useEffectShell } = React;

function PageShell({ children, active }) {
  const [lang, setLang] = useStateShell(() => (window.detectInitialLang ? window.detectInitialLang() : (localStorage.getItem("ns_lang") || "es")));
  useEffectShell(() => { localStorage.setItem("ns_lang", lang); document.documentElement.lang = lang; }, [lang]);
  useEffectShell(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("visible"); });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [lang, children]);

  const t = { ...window.TR[lang], _lang: lang };

  const navItems = [
    { k: "casos-de-uso", href: lang === "en" ? "use-cases.html" : "casos-de-uso.html", label: { es: "Casos de uso", en: "Use cases" } },
    { k: "integraciones", href: lang === "en" ? "integrations.html" : "integraciones.html", label: { es: "Integraciones", en: "Integrations" } },
    { k: "bancos", href: lang === "en" ? "banks.html" : "bancos.html", label: { es: "Bancos", en: "Banks" } },
    { k: "modelos-financieros", href: lang === "en" ? "financial-models.html" : "modelos-financieros.html", label: { es: "Modelos financieros", en: "Financial models" } },
    { k: "forecast", href: lang === "en" ? "forecast.html" : "forecast-ventas.html", label: { es: "Forecast", en: "Forecast" } },
    { k: "cashflow", href: "cashflow.html", label: { es: "Cashflow", en: "Cashflow" } },
    { k: "pricing", href: lang === "en" ? "/pricing.html" : "/es/precios.html", label: { es: "Precios", en: "Pricing" } }
  ];

  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <a href="index.html" className="logo"><span className="logo-mark" /> NextScenario</a>
          <div className="nav-links">
            {navItems.map(n => (
              <a key={n.k} href={n.href} style={active === n.k ? { opacity: 1, color: "var(--ink)", fontWeight: 500 } : {}}>{n.label[lang]}</a>
            ))}
          </div>
          <div className="nav-right">
            <div className="lang-toggle">
              <button className={lang === "es" ? "active" : ""} onClick={() => window.switchLang("es")}>ES</button>
              <button className={lang === "en" ? "active" : ""} onClick={() => window.switchLang("en")}>EN</button>
            </div>
            <a className="btn btn-primary" href={window.appRegisterURL(t._lang)} style={{ padding: "8px 14px", fontSize: 13 }}>{t.cta.start}</a>
          </div>
        </div>
      </nav>

      {typeof children === "function" ? children({ t, lang }) : children}

      <Footer t={t} />
    </>
  );
}
window.PageShell = PageShell;