// needle.jsx — custom needle cursor. Natural "pen held in right hand" orientation:
// the tip is at the bottom-LEFT of the SVG (8, 72), and the body / eye extends
// up-RIGHT toward (60, 16). The cursor follower positions the div so the tip
// (offset -8, -72 from the div origin) sits exactly under the mouse coordinate.

(function () {
  function NeedleCursor({ color = '#f4c97a', threadColor = '#d39d80' }) {
    return (
      <svg width="80" height="80" viewBox="0 0 80 80" style={{
        position: 'absolute', left: '-8px', top: '-72px', overflow: 'visible'
      }}>
        <defs>
          <linearGradient id="needleBody" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stopColor="#fff5da" />
            <stop offset="22%" stopColor={color} />
            <stop offset="60%" stopColor="#b88748" />
            <stop offset="100%" stopColor="#8a5e30" />
          </linearGradient>
          <linearGradient id="needleHi" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stopColor="#ffeec8" stopOpacity="1" />
            <stop offset="100%" stopColor="#ffeec8" stopOpacity="0" />
          </linearGradient>
          <radialGradient id="tipGlow" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0%" stopColor={color} stopOpacity="0.9" />
            <stop offset="35%" stopColor={color} stopOpacity="0.35" />
            <stop offset="100%" stopColor={color} stopOpacity="0" />
          </radialGradient>
          <filter id="softBlur"><feGaussianBlur stdDeviation="1.2" /></filter>
        </defs>

        {/* Halo around tip */}
        <circle cx="8" cy="72" r="15" fill="url(#tipGlow)" />

        {/* Thread tail trailing back from the eye, with a gentle loop */}
        <path d="M 60 16 Q 70 10 68 4 Q 64 -2 56 2"
              stroke={threadColor} strokeWidth="1" fill="none"
              strokeLinecap="round" opacity="0.85" />
        <path d="M 60 16 Q 68 22 64 30"
              stroke={threadColor} strokeWidth="0.8" fill="none"
              strokeLinecap="round" opacity="0.6" />

        {/* Needle body — slim diamond from tip (8,72) up-right to eye-end (60,16) */}
        <path d="M 8 72 L 60 16 L 64 20 L 12 76 Z"
              fill="url(#needleBody)" stroke="rgba(60,30,15,.5)" strokeWidth="0.4" />

        {/* Highlight stripe on the upper face */}
        <path d="M 11 70 L 59 21"
              stroke="url(#needleHi)" strokeWidth="0.7" opacity="0.85"
              strokeLinecap="round" />

        {/* The eye — small oblique slit near the upper-right end */}
        <ellipse cx="56" cy="20" rx="3" ry="1.3" transform="rotate(-45 56 20)"
                 fill="#1a130c" stroke={color} strokeWidth="0.5" />

        {/* Sharp tip — bright pinpoint at the bottom-left */}
        <circle cx="8" cy="72" r="1.6" fill="#fff" opacity="0.95" filter="url(#softBlur)" />
        <circle cx="8" cy="72" r="0.7" fill="#fff" />
      </svg>
    );
  }

  window.NeedleCursor = NeedleCursor;
})();