const { useRef, useEffect } = React;

// ── CUSTOM CURSOR ─────────────────────────────────────────────────────────────
const CustomCursor = () => {
  const dotRef  = useRef(null);
  const lblRef  = useRef(null);

  useEffect(() => {
    let cx = -100, cy = -100, tx = -100, ty = -100;
    let raf;

    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    window.addEventListener('mousemove', onMove);

    const lerp = () => {
      raf = requestAnimationFrame(lerp);
      cx += (tx - cx) * 0.11;
      cy += (ty - cy) * 0.11;
      const dot = dotRef.current;
      const lbl = lblRef.current;
      if (dot) { dot.style.left = cx + 'px'; dot.style.top = cy + 'px'; }
      if (lbl) { lbl.style.left = cx + 'px'; lbl.style.top = cy + 'px'; }
    };
    lerp();

    const onOver = (e) => {
      const interactive = e.target.closest('a, button, [data-cursor]');
      if (!interactive) return;
      dotRef.current?.classList.add('expanded');
      const label = e.target.closest('[data-cursor-label]')?.getAttribute('data-cursor-label');
      if (label && lblRef.current) {
        lblRef.current.textContent = label;
        lblRef.current.classList.add('visible');
      }
    };
    const onOut = (e) => {
      if (e.target.closest('a, button, [data-cursor]') && !e.relatedTarget?.closest('a, button, [data-cursor]')) {
        dotRef.current?.classList.remove('expanded');
        if (lblRef.current) lblRef.current.classList.remove('visible');
      }
    };
    document.addEventListener('mouseover', onOver);
    document.addEventListener('mouseout', onOut);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseover', onOver);
      document.removeEventListener('mouseout', onOut);
    };
  }, []);

  return (
    <>
      <div ref={dotRef} className="cursor-dot" />
      <div ref={lblRef} className="cursor-label" />
    </>
  );
};

// ── DIVIDER — jaali geometric ─────────────────────────────────────────────────
const JaaliDivider = ({ flip = false }) => (
  <div style={{ overflow: 'hidden', height: 64, display: 'flex', alignItems: 'center', background: flip ? '#F5F1EA' : '#0A0A0A' }}>
    <svg width="100%" height="64" viewBox="0 0 1440 64" preserveAspectRatio="none" fill="none">
      {Array.from({ length: 25 }).map((_, i) => {
        const x = (i / 24) * 1440;
        return (
          <g key={i} transform={`translate(${x}, 32)`}>
            <polygon points="0,-28 16,-14 16,14 0,28 -16,14 -16,-14" fill="none" stroke="rgba(212,175,55,0.12)" strokeWidth="0.8" />
            <circle cx="0" cy="0" r="3" fill="none" stroke="rgba(212,175,55,0.18)" strokeWidth="0.8" />
          </g>
        );
      })}
      <line x1="0" y1="32" x2="1440" y2="32" stroke="rgba(212,175,55,0.08)" strokeWidth="1" />
    </svg>
  </div>
);

// ── APP ───────────────────────────────────────────────────────────────────────
const App = () => {
  // Scroll-reveal for .fu elements
  useEffect(() => {
    const els = document.querySelectorAll('.fu:not(.hero-fu)');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('vis'); });
    }, { threshold: 0.15 });
    els.forEach(el => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <>
      <CustomCursor />
      <main>
        <window.HeroSection />
        <window.KineticIntro />
        <JaaliDivider />
        <window.ServicesSection />
        <window.IndustriesSection />
        <JaaliDivider flip />
        <window.WorkSection />
        <window.ProcessSection />
        <window.WowSection />
        <window.TestimonialsSection />
        <window.AboutSection />
        <window.ContactSection />
        <window.FooterSection />
      </main>
    </>
  );
};

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