// ===== Flying-man cursor (appears only on interactive elements) =====
const { useEffect, useRef, useState } = React;

function FlyingCursor({ enabled }) {
  const ref = useRef(null);
  const [pose, setPose] = useState('fly'); // fly | point | grab
  const pos = useRef({ x: -100, y: -100, tx: -100, ty: -100 });
  const active = useRef(false);

  useEffect(() => {
    if (!enabled) { document.body.classList.remove('custom-cursor-on'); return; }
    document.body.classList.add('custom-cursor-on');

    let raf;
    const onMove = (e) => {
      pos.current.tx = e.clientX;
      pos.current.ty = e.clientY;
      const t = e.target;
      if (t.closest && t.closest('a, button, [data-interactive], input, textarea, select, .sticker, .service-row, .chip, .client-cell, .tweak-swatch button, .tweak-toggle')) {
        if (!active.current) { active.current = true; ref.current?.classList.add('active'); }
        const isGrab = t.closest('.sticker');
        setPose(isGrab ? 'grab' : 'point');
      } else {
        if (active.current) { active.current = false; ref.current?.classList.remove('active'); }
        setPose('fly');
      }
    };
    const onDown = () => setPose('grab');
    const onUp = () => setPose((p) => p === 'grab' ? 'point' : p);
    const onLeave = () => { active.current = false; ref.current?.classList.remove('active'); };

    window.addEventListener('mousemove', onMove);
    window.addEventListener('mousedown', onDown);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('mouseleave', onLeave);

    const tick = () => {
      const p = pos.current;
      p.x += (p.tx - p.x) * 0.22;
      p.y += (p.ty - p.y) * 0.22;
      if (ref.current) {
        ref.current.style.left = p.x + 'px';
        ref.current.style.top = p.y + 'px';
      }
      raf = requestAnimationFrame(tick);
    };
    tick();

    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mousedown', onDown);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('mouseleave', onLeave);
      cancelAnimationFrame(raf);
      document.body.classList.remove('custom-cursor-on');
    };
  }, [enabled]);

  if (!enabled) return null;

  return (
    <div ref={ref} className="flying-cursor" aria-hidden="true">
      <FlyingMan pose={pose} />
    </div>
  );
}

function FlyingMan({ pose }) {
  // Little dude with a cape, arm out, based on navy + coral palette
  // pose: fly (default), point, grab
  const tilt = pose === 'fly' ? -15 : pose === 'grab' ? 5 : -5;
  return (
    <svg viewBox="0 0 64 64" style={{ transform: `rotate(${tilt}deg)` }}>
      {/* cape */}
      <path d="M18 28 Q10 34 14 44 Q22 40 26 34 Z" fill="#E85A3C" stroke="#1E3A6F" strokeWidth="2" strokeLinejoin="round"/>
      {/* body */}
      <rect x="24" y="26" width="18" height="14" rx="3" fill="#5AC4B9" stroke="#1E3A6F" strokeWidth="2"/>
      {/* head */}
      <circle cx="36" cy="20" r="7" fill="#F5C23C" stroke="#1E3A6F" strokeWidth="2"/>
      {/* goggles */}
      <circle cx="34" cy="20" r="1.8" fill="#1E3A6F"/>
      <circle cx="39" cy="20" r="1.8" fill="#1E3A6F"/>
      {/* smile */}
      <path d="M33 23 Q36 25 39 23" stroke="#1E3A6F" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      {/* arm out — front */}
      {pose === 'grab'
        ? <path d="M40 32 Q50 30 52 24" stroke="#1E3A6F" strokeWidth="3.5" fill="none" strokeLinecap="round"/>
        : <path d="M40 30 Q52 28 58 22" stroke="#1E3A6F" strokeWidth="3.5" fill="none" strokeLinecap="round"/>
      }
      <circle cx={pose==='grab'?52:58} cy={pose==='grab'?24:22} r="2.5" fill="#F5C23C" stroke="#1E3A6F" strokeWidth="1.5"/>
      {/* legs trailing */}
      <path d="M30 40 Q22 46 16 50" stroke="#1E3A6F" strokeWidth="3" fill="none" strokeLinecap="round"/>
      <path d="M36 40 Q30 48 24 52" stroke="#1E3A6F" strokeWidth="3" fill="none" strokeLinecap="round"/>
      {/* speed lines */}
      <path d="M6 20 L14 20" stroke="#1E3A6F" strokeWidth="1.5" strokeLinecap="round" opacity="0.6"/>
      <path d="M4 26 L12 26" stroke="#1E3A6F" strokeWidth="1.5" strokeLinecap="round" opacity="0.4"/>
    </svg>
  );
}

window.FlyingCursor = FlyingCursor;
window.FlyingMan = FlyingMan;