// Cursor with damped, intentful motion (Screen Studio-style).
// Takes an array of waypoints {time, x, y, click?} and interpolates between
// them with smooth easing. No bounces, no ripples — just confident movement.

function Cursor({ waypoints = [] }) {
  const time = useTime();

  // Find current segment.
  let i = 0;
  for (let k = 0; k < waypoints.length - 1; k++) {
    if (time >= waypoints[k].time && time < waypoints[k + 1].time) { i = k; break; }
    if (k === waypoints.length - 2) i = k;
  }

  const a = waypoints[i];
  const b = waypoints[Math.min(i + 1, waypoints.length - 1)];

  let x, y, clickT = 0;
  if (a === b || time <= waypoints[0].time) {
    x = waypoints[0].x;
    y = waypoints[0].y;
  } else if (time >= waypoints[waypoints.length - 1].time) {
    x = waypoints[waypoints.length - 1].x;
    y = waypoints[waypoints.length - 1].y;
  } else {
    const span = b.time - a.time;
    const local = clamp((time - a.time) / span, 0, 1);
    // Tween position with easeInOutCubic — quiet and intentful.
    // Hold segments (where x/y don't change) don't need any easing.
    const stationary = a.x === b.x && a.y === b.y;
    const eased = stationary ? local : Easing.easeInOutCubic(local);
    x = a.x + (b.x - a.x) * eased;
    y = a.y + (b.y - a.y) * eased;

    // Click pulse: if `b` has click=true, briefly squash near arrival.
    if (b.click && local > 0.82) {
      clickT = (local - 0.82) / 0.18; // 0..1 in last 18% of segment
    }
  }

  // Squash effect on click — tiny scale-down on the cursor.
  const scale = 1 - 0.08 * Math.sin(clickT * Math.PI);

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      transform: `translate(-2px, -2px) scale(${scale})`,
      transformOrigin: '0 0',
      pointerEvents: 'none',
      zIndex: 1000,
      willChange: 'transform, left, top',
    }}>
      <CursorArrow/>
    </div>
  );
}

// macOS-style default arrow cursor.
function CursorArrow() {
  return (
    <svg width="28" height="34" viewBox="0 0 28 34" style={{ display: 'block', filter: 'drop-shadow(0 2px 3px rgba(0,0,0,0.25))' }}>
      <path
        d="M3 2 L3 26 L9.5 20 L13 28.5 L16.5 27 L13 18.5 L21 18.5 Z"
        fill="#0b1230"
        stroke="#ffffff"
        strokeWidth="1.4"
        strokeLinejoin="round"
      />
    </svg>
  );
}

Object.assign(window, { Cursor, CursorArrow });