/* global React, ReactDOM, GCB_I18N, GCB_LANGS, GCB_PROPS, GCB_TESTI,
   TopBar, Header, Hero, Featured, WhyUs, HowItWorks, Testimonials, AITeaser, Chatbot, FinalCTA, Footer */
const { useState, useEffect, useCallback } = React;

function useScrollReveal(deps) {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, deps);
}

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("gcb_lang") || "es");
  const [scrolled, setScrolled] = useState(false);
  const [chatOpen, setChatOpen] = useState(false);
  const [favs, setFavs] = useState(() => {
    try { return JSON.parse(localStorage.getItem("gcb_favs") || "[]"); } catch (e) { return []; }
  });

  const t = GCB_I18N[lang] || GCB_I18N.es;

  useEffect(() => { localStorage.setItem("gcb_lang", lang); document.documentElement.lang = lang; }, [lang]);
  useEffect(() => { localStorage.setItem("gcb_favs", JSON.stringify(favs)); }, [favs]);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const toggleFav = useCallback((id) => {
    setFavs((f) => (f.includes(id) ? f.filter((x) => x !== id) : [...f, id]));
  }, []);

  // re-run reveal observer when language changes (new nodes / layout)
  useScrollReveal([lang]);

  return (
    <div>
      <TopBar t={t} lang={lang} setLang={setLang} langs={GCB_LANGS} />
      <Header t={t} lang={lang} setLang={setLang} langs={GCB_LANGS} scrolled={scrolled} favCount={favs.length} />
      <main>
        <Hero t={t} />
        <Featured t={t} lang={lang} props={GCB_PROPS} favs={favs} onToggle={toggleFav} />
        <WhyUs t={t} />
        <HowItWorks t={t} />
        <Testimonials t={t} lang={lang} items={GCB_TESTI} />
        <AITeaser t={t} onOpen={() => setChatOpen(true)} />
        <FinalCTA t={t} />
      </main>
      <Footer t={t} lang={lang} setLang={setLang} langs={GCB_LANGS} />
      <Chatbot t={t} lang={lang} open={chatOpen} setOpen={setChatOpen} />
    </div>
  );
}

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