/* app.jsx — main composition */

function App() {
  // Scroll reveal — basic
  React.useEffect(() => {
    const els = document.querySelectorAll('.section, .hero');
    els.forEach(el => el.classList.add('reveal'));
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Agency />
        <Process />
        <Stack />
        <CreditLines />
        <Lab />
        <Vision />
        <Cases />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

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