/* global React, ReactDOM, NavBar, Hero, WhyEnglider, Pricing, Reviews, FinalCTA, Footer */
const { useEffect: useEffectApp, useState: useStateApp } = React;

function App() {
  const [scrolled, setScrolled] = useStateApp(false);

  useEffectApp(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const goPricing = () => {
    const el = document.getElementById("membership");
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <div className="page">
      <NavBar scrolled={scrolled} onCta={goPricing} />
      <Hero />
      <WhyEnglider />
      <Pricing />
      <Reviews />
      <FinalCTA onCta={goPricing} />
      <Footer />
    </div>
  );
}

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