/* global React, ReactDOM, Cursor, TopBar, MenuOverlay, Hero, Servicios, Clientes, Proceso, PorQue, Equipo, Contacto, Footer */
const { useState, useEffect, useRef } = React;

function App() {
  const [lang, setLangState] = useState(() => { try { return localStorage.getItem('fz-lang') || 'es'; } catch (_) { return 'es'; } });
  const setLang = (v) => { try { localStorage.setItem('fz-lang', v); } catch (_) {} setLangState(v); };
  useEffect(() => { const on = (e) => { if (e.key === 'fz-lang' && e.newValue) setLangState(e.newValue); }; window.addEventListener('storage', on); return () => window.removeEventListener('storage', on); }, []);
  const [menuOpen, setMenuOpen] = useState(false);
  const [onCream, setOnCream] = useState(false);

  // detect background under the top nav
  useEffect(() => {
    const handle = () => {
      const y = 50;
      const x = window.innerWidth / 2;
      const el = document.elementFromPoint(x, y);
      if (!el) return;
      const section = el.closest('section, footer');
      setOnCream(section && section.classList.contains('bg-cream'));
    };
    handle();
    window.addEventListener('scroll', handle, { passive: true });
    window.addEventListener('resize', handle);
    return () => { window.removeEventListener('scroll', handle); window.removeEventListener('resize', handle); };
  }, []);

  useEffect(() => { document.documentElement.lang = lang; }, [lang]);
  useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; }, [menuOpen]);

  return (
    <>
      <Cursor />
      <TopBar lang={lang} setLang={setLang} onMenu={() => setMenuOpen(true)} onCream={onCream && !menuOpen} />
      <MenuOverlay open={menuOpen} onClose={() => setMenuOpen(false)} lang={lang} />
      <main>
        <Hero lang={lang} />
        <Servicios lang={lang} />
        <Clientes lang={lang} />
        <Proceso lang={lang} />
        <PorQue lang={lang} />
        <Equipo lang={lang} />
        <Contacto lang={lang} />
      </main>
      <Footer lang={lang} />
    </>
  );
}

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