// Main app — wires everything together

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "lime",
  "displayFont": "\"Space Grotesk\", sans-serif",
  "showTerminal": true,
  "lang": "es"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useStateA(tweaks.lang || "es");

  // Sync language with tweak default change
  useEffectA(() => { setLang(tweaks.lang); }, [tweaks.lang]);

  const t = window.I18N[lang];

  // Reveal-on-scroll
  useEffectA(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add("in");
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".reveal:not(.in)").forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, [lang]);

  return (
    <>
      <Nav t={t} lang={lang} setLang={(l) => { setLang(l); setTweak("lang", l); }} />
      <Hero t={t} variant={tweaks.heroVariant} />
      <div className="reveal"><Services t={t} /></div>
      <div className="reveal"><Plans t={t} /></div>
      <div className="reveal"><MonthlyPlans t={t} /></div>
      <div className="reveal"><Portfolio t={t} /></div>
      <div className="reveal"><Process t={t} /></div>
      <div className="reveal"><Contact t={t} /></div>
      <Footer t={t} />
      <NRTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

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