/* App — composes the page, handles nav scroll-state, reveal-on-scroll,
   active-section tracking, and in-page navigation. */

function App() {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState('top');

  // Nav background + active-section via scroll position
  React.useEffect(() => {
    const ids = ['about', 'services', 'projects', 'process', 'why', 'contact'];
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      let cur = 'top';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= 140) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Reveal-on-scroll
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    const scan = () => document.querySelectorAll('[data-reveal]:not(.is-in)').forEach((el) => io.observe(el));
    scan();
    const t = setInterval(scan, 600); // catch nodes mounted after filtering
    return () => { clearInterval(t); io.disconnect(); };
  }, []);

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

  return (
    <React.Fragment>
      <Nav scrolled={scrolled} active={active} onNav={onNav} />
      <main>
        <BlueprintHero onNav={onNav} />
        <Marquee />
        <About />
        <Services />
        <Projects />
        <Process />
        <WhyUs />
        <Contact />
      </main>
      <Footer onNav={onNav} />
      <Cookie />
    </React.Fragment>
  );
}

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