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

  return (
    <>
      <Nav />
      <Hero />
      <Services />
      <Approach />
      <Vision />
      <WorksLink />
      <Price />
      <About />
      <Profile />
      <Beans />
      <Contact />
      <Footer />
    </>
  );
};

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