// Root composition — mount the whole site
function App() {
  // Reveal-on-scroll observer
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <window.Header />
      <main>
        <window.Hero />
        <window.Marquee />
        <window.Steps />
        <window.EssaiShowcase />
        <window.Impact />
        <window.Stylist />
        <window.Brands />
        <window.Social />
        <window.Compare />
        <window.Faq />
        <window.CtaFooter />
      </main>
      <window.MyrraeTweaks />
    </React.Fragment>
  );
}

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