const { useEffect } = React;

function App() {
  // Scroll reveal
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.08 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <TopNav />
      <main style={{ paddingTop: 56 }}>
        <Hero />
        <Ticker />
        <div id="how" />
        <ThreeUp />
        <FeatureBrief />
        <FeatureScheduling />
        <FeatureChat />
        <Onboarding />
        <HelpSection />
        <Polish />
        <FAQ />
        <InviteCTA />
      </main>
      <Footer />
    </>
  );
}

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