/* global React, ReactDOM */
// Main entry — composes the landing page

const { useEffect } = React;

function App() {
  // Reveal-on-scroll for sections
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add('in');
      });
    }, { threshold: 0.1 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <NicheMarquee />
      <div id="how"><HowItWorks /></div>
      <Pillars />
      <CLISection />
      <Pricing />
      <BlogTeaser />
      <FinalCTA />
      <Footer />
      <MeceTweaks />
    </>
  );
}

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