/* global React, Hero, Pain, HowItWorks, WhyDifferent, FeatureList, Quotes, FAQ, FinalCTA, Nav, Ticker, Footer */
// App entrypoint

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

  return (
    <>
      <Nav />
      <Ticker />
      <Hero />
      <Ticker />
      <Pain />
      <HowItWorks />
      <WhyDifferent />
      <FeatureList />
      <Quotes />
      <FAQ />
      <FinalCTA />
      <Footer />
    </>
  );
};

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