// App root
const { useState: useStateApp, useEffect: useEffectApp } = React;

function App() {
  const [lang, setLang] = useStateApp(() => localStorage.getItem("ns_lang") || "es");
  const [tweaks, setTweaks] = useStateApp(() => ({ ...(window.TWEAK_DEFAULTS || {}) }));

  useEffectApp(() => {
    localStorage.setItem("ns_lang", lang);
    document.documentElement.lang = lang;
  }, [lang]);

  useEffectApp(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette || "navy-electric");
  }, [tweaks.palette]);

  // Scroll reveal
  useEffectApp(() => {
    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]);

  const t = { ...window.TR[lang], _lang: lang };
  // fallback hero h1 if tweaks empty
  if (!tweaks.headline_es) tweaks.headline_es = "Tus datos de negocio, en tiempo real. Sin Excel.";
  if (!tweaks.headline_en) tweaks.headline_en = "Your business data, in real time. No spreadsheets.";
  if (!tweaks.subhead_es) tweaks.subhead_es = "NextScenario conecta tus bancos, ERPs y canales de venta para automatizar cashflow, P&L y métricas clave. Decide con datos frescos, no con el cierre del mes pasado.";
  if (!tweaks.subhead_en) tweaks.subhead_en = "NextScenario connects your banks, ERPs and sales channels to automate cashflow, P&L and key metrics. Decide on fresh data, not last month's close.";

  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <a href="#" className="logo"><span className="logo-mark" /> NextScenario</a>
          <div className="nav-links">
            <a href="index.html#product">{t.nav.product}</a>
            <a href="integrations.html">{t.nav.integrations}</a>
            <a href="financial-models.html">{t._lang === "en" ? "Financial models" : "Modelos financieros"}</a>
            <a href="forecast.html">{t._lang === "en" ? "Forecast" : "Forecast"}</a>
            <a href="cashflow.html">Cashflow</a>
            <a href="#pricing">{t.nav.pricing}</a>
          </div>
          <div className="nav-right">
            <div className="lang-toggle">
              <button className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
              <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            </div>
            <a className="btn btn-primary" href={window.appLoginURL(t._lang)} style={{ padding: "8px 14px", fontSize: 13 }}>{t.cta.start}</a>
          </div>
        </div>
      </nav>

      <Hero t={t} tweaks={tweaks} />
      <Integrations t={t} />
      <Dashboard t={t} tweaks={tweaks} />
      <Features t={t} />
      <ForecastSection t={t} />
      <Roles t={t} />
      <WhatsApp t={t} />
      <Social t={t} />
      <Pricing t={t} />
      <FAQ t={t} />
      <Footer t={t} />
      <Tweaks tweaks={tweaks} setTweaks={setTweaks} lang={lang} />
    </>
  );
}

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