// app.jsx — root component. Tweaks have been finalized into the design.

// Reveal-on-scroll. IO + rAF scroll fallback for environments where IO doesn't fire.
function useReveal() {
  React.useEffect(() => {
    const reveal = (el) => el.classList.add('in');

    const sweep = () => {
      const vh = window.innerHeight;
      document.querySelectorAll('.reveal:not(.in)').forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92) reveal(el);
      });
    };

    let io = null;
    try {
      io = new IntersectionObserver(
        (entries) => {
          for (const e of entries) {
            if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); }
          }
        },
        { threshold: 0.08, rootMargin: '0px 0px -5% 0px' }
      );
      document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
    } catch (_) { /* ignore */ }

    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => { sweep(); ticking = false; });
    };
    sweep();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });

    const mo = new MutationObserver(() => {
      if (io) {
        document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
      }
      sweep();
    });
    mo.observe(document.body, { childList: true, subtree: true });

    return () => {
      if (io) io.disconnect();
      mo.disconnect();
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);
}

function App() {
  useReveal();
  return (
    <div className="page">
      <Nav logoVariant="brackets" />
      <Hero logoVariant="brackets" layout="asymmetric" headline="" />
      <Marquee />
      <Services />
      <Process />
      <Products />
      <Contact />
      <Footer logoVariant="brackets" />
    </div>
  );
}

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