// Falta Palta — root app.

const { useState, useEffect } = React;

function App() {
  const [lang, setLang] = useState('en');
  const [progress, setProgress] = useState(0);
  const [active, setActive] = useState('top');

  useEffect(() => {
    const sections = ['top', 'services', 'about', 'fit', 'contact'];
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? Math.min(1, h.scrollTop / max) : 0);
      const center = h.scrollTop + window.innerHeight * 0.35;
      let cur = 'top';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= center) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const onLang = () => setLang((l) => (l === 'en' ? 'es' : 'en'));

  const copy = COPY[lang];

  return (
    <>
      <Nav t={copy} lang={lang} onLang={onLang} active={active} progress={progress} />
      <main>
        <Hero t={copy} lang={lang} />
        <Services t={copy} lang={lang} />
        <About t={copy} lang={lang} />
      </main>
      <Contact t={copy} lang={lang} />
      <Footer t={copy} lang={lang} />
    </>
  );
}

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