// Kestral v2 — composition + scroll reveal.

const useReveal = () => {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll('.rv'));
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      els.forEach((el) => el.classList.add('in'));
      return;
    }
    let pending = els.slice();
    const check = () => {
      const limit = window.innerHeight * 0.92;
      pending = pending.filter((el) => {
        if (el.getBoundingClientRect().top < limit) { el.classList.add('in'); return false; }
        return true;
      });
      if (!pending.length) detach();
    };
    const onScroll = check;
    const detach = () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    check();
    return detach;
  }, []);
};

const App = () => {
  useReveal();
  return (
    <div className="min-h-screen bg-ink text-paper">
      <CursorAtmosphere />
      <Nav />
      <main className="relative" style={{ zIndex: 1 }}>
        <Hero />
        <PitchVideo />
        <HowItWorks />
        <Features />
        <PostBuild />
        <Agents />
        <Download />
      </main>
      <Footer />
    </div>
  );
};

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