/* global React, ReactDOM, Nav, Hero, Problem, Process, Proof, Plans, Eco, ServiceArea, ClosingCta, Footer */
// ---------------------------------------------------------------
// STERLING — App root
// Wires up sections + in-view reveal observer
// ---------------------------------------------------------------

const { useEffect: useEffectA } = React;

function App() {
  // In-view reveal for everything below the fold
  useEffectA(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      document.querySelectorAll(".iv").forEach((el) => el.classList.add("is-in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-in");
            io.unobserve(entry.target);
          }
        });
      },
      { rootMargin: "0px 0px -10% 0px", threshold: 0.04 }
    );
    document.querySelectorAll(".iv").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Problem />
        <Process />
        <Proof />
        <Plans />
        <Eco />
        <ServiceArea />
        <ClosingCta />
      </main>
      <Footer />
    </>
  );
}

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