// App shell + scroll-driven reveal observer
const App = () => {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    // Immediately mark anything already in viewport (or near it) as 'in'.
    const markIfVisible = (el) => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || 800;
      if (r.top < vh * 0.95 && r.bottom > 0) {
        el.classList.add('in');
        return true;
      }
      return false;
    };
    els.forEach(markIfVisible);

    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0, rootMargin: '0px 0px -5% 0px' });
    els.forEach(el => { if (!el.classList.contains('in')) obs.observe(el); });

    // Safety net: ensure everything reveals within 2s even if observer misfires.
    const t = setTimeout(() => {
      document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
    }, 2000);

    return () => { obs.disconnect(); clearTimeout(t); };
  }, []);

  return (
    <div className="relative">
      <Nav />
      <main>
        <Hero />
        <Bento />
        <Perf />
        <Ecosystem />
        <FAQ />
        <CTA />
      </main>
      <Footer />
    </div>
  );
};

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