/* global React, ReactDOM, Header, Hero, TrustBar, Services, Process, WhyChoose, QuoteForm, Footer */
function App() {
  const scrollToQuote = () => {
    const el = document.getElementById("contact");
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
  };

  React.useEffect(() => {
    // gentle entrance: fade sections up shortly after mount (content stays visible if JS is slow)
    const els = document.querySelectorAll(".cl-section .cl-container > *");
    els.forEach((el) => el.classList.add("cl-reveal"));
    requestAnimationFrame(() => requestAnimationFrame(() => {
      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 -8% 0px" });
      els.forEach((el) => io.observe(el));
    }));
    if (window.lucide) window.lucide.createIcons();
  }, []);

  return (
    <React.Fragment>
      <Header onQuote={scrollToQuote} />
      <Hero onQuote={scrollToQuote} />
      <TrustBar />
      <Services />
      <Process />
      <WhyChoose onQuote={scrollToQuote} />
      <QuoteForm />
      <Footer />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);