/* Main app: assemble landing page */

const App = () => {
  const contactRef = React.useRef(null);

  const onConsultation = () => {
    document.querySelector("#kontakt")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // Scroll-reveal observer
  React.useEffect(() => {
    const els = document.querySelectorAll("section > .container > *, .pillar, .benefit, .faq__item, .how__step");
    els.forEach((el) => el.classList.add("reveal"));
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-visible");
            obs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.08, rootMargin: "0px 0px -8% 0px" }
    );
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav onConsultation={onConsultation} />
      <main>
        <Hero onConsultation={onConsultation} />
        <Pillars />
        <HowItWorks />
        <Benefits />
        <Cases />
        <FAQ />
        <Contact ref={contactRef} />
      </main>
      <Footer />
      <KorysolTweaks />
    </React.Fragment>
  );
};

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