function App() {
  const [scrolled, setScrolled] = React.useState(false);
  const [overPhoto, setOverPhoto] = React.useState(true);
  const [drawer, setDrawer] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setScrolled(y > 40);
      // Hero height roughly viewport
      setOverPhoto(y < window.innerHeight - 100);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = drawer ? "hidden" : "";
  }, [drawer]);

  // Fade-up on intersection
  React.useEffect(() => {
    const els = document.querySelectorAll(".fade-up");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { rootMargin: "-10% 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div className="app">
      <Nav scrolled={scrolled} overPhoto={overPhoto} drawerOpen={drawer} onBurger={() => setDrawer(o => !o)}/>
      <Drawer open={drawer} onClose={() => setDrawer(false)}/>
      <Hero/>
      <Marquee/>
      <Philosophy/>
      <Services/>
      <Works/>
      <Trust/>
      <Process/>
      <Area/>
      <Contact/>
      <Footer/>
      <MobileCTA/>
    </div>
  );
}

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