function App() {
  const [tweaks, setTweaks] = useState(window.TWEAKS);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [showFloat, setShowFloat] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const glowRef = useRef(null);

  // Scroll-to-contact helper
  const toContact = useCallback(() => {
    const el = document.getElementById('contact');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, []);

  const openModal = useCallback(() => setShowModal(true), []);
  const closeModal = useCallback(() => setShowModal(false), []);

  // ── Hash scroll on load (handles index.html#section from other pages) ──────
  useEffect(() => {
    const hash = window.location.hash;
    if (!hash) return;
    // Small delay to let React finish rendering all sections
    const t = setTimeout(() => {
      const el = document.querySelector(hash);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 120);
    return () => clearTimeout(t);
  }, []); // runs once on mount

  // Floating CTA appears after hero
  useEffect(() => {
    const h = () => setShowFloat(window.scrollY > window.innerHeight * 0.9);
    h();
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  // ── Scroll nail progress ──────────────────────────
  const [scrollPct, setScrollPct] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      setScrollPct(docHeight > 0 ? Math.min(100, (scrollTop / docHeight) * 100) : 0);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Cursor-follow glow
  useEffect(() => {
    if (window.matchMedia('(pointer: coarse)').matches) return;
    let rafId = 0;
    let tx = 0, ty = 0, cx = 0, cy = 0;
    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    const animate = () => {
      cx += (tx - cx) * 0.12;
      cy += (ty - cy) * 0.12;
      if (glowRef.current) glowRef.current.style.transform = `translate(${cx}px, ${cy}px) translate(-50%, -50%)`;
      rafId = requestAnimationFrame(animate);
    };
    window.addEventListener('mousemove', onMove);
    rafId = requestAnimationFrame(animate);
    return () => { window.removeEventListener('mousemove', onMove); cancelAnimationFrame(rafId); };
  }, []);

  // Edit mode bridge
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data;
      if (!d || typeof d !== 'object') return;
      if (d.type === '__activate_edit_mode') setTweaksOpen(true);
      if (d.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (err) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // Apply accent theme
  useEffect(() => {
    window.applyAccentTheme(tweaks.accentHue);
  }, [tweaks.accentHue]);

  return (
    <>
      <div ref={glowRef} className="cursor-glow" />

      {/* ── Scroll progress nail ── */}
      <div className={`scroll-nail ${scrollPct > 95 ? 'active' : ''}`} aria-hidden="true">
        <div className="scroll-nail-head" />
        <div className="scroll-nail-track">
          <div className="scroll-nail-fill" style={{ height: `${scrollPct}%` }} />
        </div>
        <div className="scroll-nail-tip" />
        <span className="scroll-nail-pct">{Math.round(scrollPct)}%</span>
      </div>
      <Header onConsult={toContact} onEstimate={openModal} />
      <Hero onConsult={toContact} onEstimate={openModal} headline={tweaks.heroHeadline} />
      <Stats />
      <Services />
      <BeforeAfter />
      <WhyUs />
      <Process />
      <Testimonials />
      <FinalCTA />
      <Footer />
      {tweaks.showFloatingCTA && (
        <button className={`float-cta ${showFloat ? 'show' : ''}`} onClick={openModal}>
          Send Us Your Problem <Icon name="arrow" size={12} />
        </button>
      )}
      {tweaksOpen && <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} onClose={() => setTweaksOpen(false)} />}
      {showModal && <EstimateModal onClose={closeModal} />}
    </>
  );
}

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