// Main App
function App() {
  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.1 });
    els.forEach(el => io.observe(el));
    // also add reveal to sections by default
    document.querySelectorAll('section').forEach(s => {
      if (!s.classList.contains('reveal') && !s.classList.contains('hero')) {
        s.classList.add('reveal');
        io.observe(s);
      }
    });
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav/>
      <Hero/>
      <Logos/>
      <Features/>
      <Showcase/>
      <Benefits/>
      <Pricing/>
      <Testimonials/>
      <FAQ/>
      <FinalCTA/>
      <Footer/>
    </>
  );
}

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