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

  React.useEffect(() => {
    document.body.dataset.accent = tweaks.accentIntensity || "balanced";
  }, [tweaks.accentIntensity]);

  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 (prevents scroll chaining on mobile)
  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();
  }, []);

  const persist = (edits) => {
    window.parent.postMessage({type: '__edit_mode_set_keys', edits}, '*');
  };

  // Determine section order
  const order = tweaks.sectionOrder || "default";

  let sections;
  if (order === "social-first") {
    sections = (
      <>
        <TrustBar />
        <Guarantees onCTA={onCTA} />
        <Gallery tweaks={tweaks} onCTA={onCTA} />
        <Testimonials />
        <WhyUs />
        <Process />
        <ServiceArea />
        <FAQ />
      </>
    );
  } else if (order === "gallery-first") {
    sections = (
      <>
        <TrustBar />
        <Guarantees onCTA={onCTA} />
        <Gallery tweaks={tweaks} onCTA={onCTA} />
        <WhyUs />
        <Process />
        <Testimonials />
        <ServiceArea />
        <FAQ />
      </>
    );
  } else {
    sections = (
      <>
        <TrustBar />
        <Guarantees onCTA={onCTA} />
        <Gallery tweaks={tweaks} onCTA={onCTA} />
        <WhyUs />
        <Process />
        <Testimonials />
        <ServiceArea />
        <FAQ />
      </>
    );
  }

  return (
    <>
      <Nav onCTA={onCTA} />
      <Hero onCTA={onCTA} tweaks={tweaks} />
      {sections}
      <Footer />
      <div className="mobile-cta">
        <a href="tel:+12065550199" className="btn btn-ghost btn-lg mobile-cta-call" aria-label="Call (206) 555-0199">
          <Ic.phone size={18} />
          <span>Call</span>
        </a>
        <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={tweaks.formCta} />
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} persist={persist} />
    </>
  );
}

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