function App() {
  const [open, setOpen] = React.useState(false);
  const onCTA = () => {
    if (window.fbq) fbq('track', 'Contact');
    setOpen(true);
  };

  React.useEffect(() => {
    const handler = () => { if (window.fbq) fbq('track', 'Contact'); setOpen(true); };
    document.addEventListener('open-estimate', handler);
    return () => document.removeEventListener('open-estimate', handler);
  }, []);

  // Lock body scroll while modal is open
  React.useEffect(() => {
    if (!open) return;
    const scrollY = window.scrollY;
    const prevOverflow = document.body.style.overflow;
    const prevPos = document.body.style.position;
    const prevTop = document.body.style.top;
    const prevWidth = document.body.style.width;
    document.body.style.position = 'fixed';
    document.body.style.top = `-${scrollY}px`;
    document.body.style.width = '100%';
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = prevOverflow;
      document.body.style.position = prevPos;
      document.body.style.top = prevTop;
      document.body.style.width = prevWidth;
      window.scrollTo(0, scrollY);
    };
  }, [open]);

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

  return (
    <>
      <Nav onCTA={onCTA} />
      <Hero onCTA={onCTA} tweaks={{}} />
      <TrustBar />
      <Guarantees onCTA={onCTA} />
      <Gallery tweaks={{}} onCTA={onCTA} />
      <WhyUs />
      <Process />
      <Testimonials />
      <ServiceArea onCTA={onCTA} />
      <FAQ />
      {/* FinalCTA removed */}
      <Footer />
      <div className="mobile-cta">
        <button className="btn btn-primary btn-lg mobile-cta-main" onClick={onCTA}>
          Get Free Estimate &amp; Offer <Ic.arrow />
        </button>
      </div>
      <EstimateModal open={open} onClose={() => setOpen(false)} ctaLabel="Get My Free Estimate & Offer Now" />
    </>
  );
}

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