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

const ACCENTS = {
  violet: '#6B6BE8',
  teal: '#1FB5A8',
  slate: '#9aa3bd',
};

const App = () => {
  const init = window.TWEAKS || {};
  const [lang, setLang] = useStateA(localStorage.getItem('uf_lang') || 'es');
  const [tweaks, setTweaks] = useStateA({
    accentMode: init.accentMode || 'violet',
    showColorShift: init.showColorShift !== false,
    density: init.density || 'comfortable',
  });
  const [activeSection, setActiveSection] = useStateA('top');

  useEffectA(() => { localStorage.setItem('uf_lang', lang); document.documentElement.lang = lang; }, [lang]);

  useEffectA(() => {
    document.documentElement.style.setProperty('--accent', ACCENTS[tweaks.accentMode] || ACCENTS.violet);
    document.body.dataset.density = tweaks.density;
  }, [tweaks]);

  // Scroll spy
  useEffectA(() => {
    const ids = ['top', 'services', 'clients', 'team', 'contact'];
    const onScroll = () => {
      let cur = 'top';
      for (const id of ids) {
        const el = id === 'top' ? document.body : document.getElementById(id);
        if (!el) continue;
        const r = el.getBoundingClientRect();
        if (r.top <= 160) cur = id;
      }
      setActiveSection(cur);
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Scroll reveal — fade/slide each section in as it enters the viewport
  useEffectA(() => {
    const skip = new Set(['top']); // hero stays visible
    const sections = Array.from(document.querySelectorAll('section')).filter(
      (s) => !s.classList.contains('hero-slider') && !skip.has(s.id)
    );
    sections.forEach((s) => s.setAttribute('data-reveal', 'out'));

    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.setAttribute('data-reveal', 'in');
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }
    );
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);

  const onNav = (id) => {
    if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  const setTweak = (k, v) => setTweaks((t) => ({ ...t, [k]: v }));

  return (
    <>
      <window.Nav lang={lang} setLang={setLang} activeSection={activeSection} onNav={onNav} />
      <window.Slider lang={lang} />
      <div aria-hidden="true" style={{ height: 120, background: '#0a0c0f' }} />
      <window.Hero lang={lang} onNav={onNav} />
      <window.Services lang={lang} />
      <window.Clients lang={lang} />
      <window.Founders lang={lang} />
      <window.Contact lang={lang} />
      <window.Footer lang={lang} />
      <window.Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
};

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