/* global React, ReactDOM, Nav, Hero, Services, About, Gallery, Community, Testimonials, ServiceArea, VapiAssistant, Quote, FAQ, Footer, FloatingAssistant */

const App = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".section, .hero-grid, .footer");
    els.forEach(el => el.classList.add("fade-up"));
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: "0px 0px -60px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Services />
      <About />
      <Gallery />
      <Community />
      <Testimonials />
      <ServiceArea />
      <VapiAssistant />
      <Quote />
      <FAQ />
      <Footer />
      <FloatingAssistant />
    </>
  );
};

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