// Kestral v2 — cursor atmosphere: an ambient indigo glow that tracks the
// pointer, and a kestrel silhouette that glides after it with lag + banking,
// like a bird riding a thermal. Pointer-only (hidden on touch / reduced-motion).

const CursorAtmosphere = () => {
  const layerRef = React.useRef(null);
  const glowRef = React.useRef(null);
  const birdRef = React.useRef(null);

  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const fine = window.matchMedia('(pointer: fine)').matches;
    if (reduce || !fine) {
      if (layerRef.current) layerRef.current.style.display = 'none';
      return;
    }

    const cx = window.innerWidth / 2;
    const cy = window.innerHeight * 0.32;
    const s = {
      tx: cx, ty: cy,            // pointer target
      gx: cx, gy: cy,            // glow position (tracks tightly)
      bx: cx, by: cy,            // bird position (lags / glides)
      angle: 0,                  // bank angle
      flip: 1,                   // facing direction
      raf: 0,
      t: 0,
      seen: false,
    };

    const onMove = (e) => {
      s.tx = e.clientX;
      s.ty = e.clientY;
      s.seen = true;
    };
    window.addEventListener('pointermove', onMove, { passive: true });

    const tick = () => {
      s.t += 0.016;

      // Glow eases toward the pointer fairly quickly.
      s.gx += (s.tx - s.gx) * 0.09;
      s.gy += (s.ty - s.gy) * 0.09;

      // Bird glides · slower follow so it trails behind the cursor.
      const px = s.bx, py = s.by;
      s.bx += (s.tx - s.bx) * 0.04;
      s.by += (s.ty - 26 - s.by) * 0.04;

      const dx = s.bx - px;
      const dy = s.by - py;

      // Bank with horizontal speed; flip to face travel direction.
      if (Math.abs(dx) > 0.15) s.flip = dx < 0 ? -1 : 1;
      const targetAngle = Math.max(-24, Math.min(24, dx * 2.4)) + Math.max(-12, Math.min(12, dy * 1.2));
      s.angle += (targetAngle - s.angle) * 0.08;

      // Gentle idle bob so it never feels frozen.
      const bob = Math.sin(s.t * 1.4) * 4;

      if (glowRef.current) {
        glowRef.current.style.transform =
          `translate(${s.gx}px, ${s.gy}px) translate(-50%, -50%)`;
      }
      if (birdRef.current) {
        birdRef.current.style.transform =
          `translate(${s.bx}px, ${s.by + bob}px) translate(-50%, -50%) rotate(${s.angle}deg) scaleX(${s.flip})`;
        if (s.seen) birdRef.current.style.opacity = '';
      }

      s.raf = requestAnimationFrame(tick);
    };
    s.raf = requestAnimationFrame(tick);

    return () => {
      window.removeEventListener('pointermove', onMove);
      cancelAnimationFrame(s.raf);
    };
  }, []);

  return (
    <div
      ref={layerRef}
      aria-hidden="true"
      className="fixed inset-0 pointer-events-none overflow-hidden"
      style={{ zIndex: 0 }}
    >
      {/* Ambient indigo glow tracking the pointer */}
      <div
        ref={glowRef}
        style={{
          position: 'absolute', top: 0, left: 0,
          width: 620, height: 620,
          background: 'radial-gradient(circle, rgba(91,95,255,0.16) 0%, rgba(91,95,255,0.06) 35%, transparent 68%)',
          filter: 'blur(8px)',
          willChange: 'transform',
        }}
      ></div>

      {/* Kestrel silhouette gliding after the pointer */}
      <img
        ref={birdRef}
        src="assets/kestral-icon-indigo.png"
        alt=""
        style={{
          position: 'absolute', top: 0, left: 0,
          width: 126, height: 'auto',
          opacity: 0.07,
          filter: 'blur(1px) drop-shadow(0 24px 40px rgba(91,95,255,0.25))',
          willChange: 'transform, opacity',
          transition: 'opacity 1.2s ease',
        }}
      />
    </div>
  );
};

Object.assign(window, { CursorAtmosphere });