// speedo.jsx — corner speedometer that reflects scroll velocity.
// Smoothed via exponential moving average; mapped to a fake mph value.

function Speedo({ velocity, max = 100, lap = 1, totalLaps = 3 }) {
  // velocity is px/s of scroll. Scaled so a brisk scroll reaches ~100 mph;
  // max is 100 so the displayed number IS the bar's % fill — keeps the big
  // readout and the bar visually in sync.
  const v = Math.min(max, Math.max(0, velocity * 0.025));
  const pct = v / max;
  return (
    <div className="speedo" role="status" aria-label="Speed">
      <div className="speedo-head">
        <span className="speedo-lbl">SPEED</span>
        <span className="speedo-led" />
      </div>
      <div className="speedo-num">
        <span className="v">{Math.round(v)}</span>
        <span className="u">mph</span>
      </div>
      <div className="speedo-bar">
        <div className="speedo-bar-fill" style={{ width: `${pct * 100}%` }} />
      </div>
      <div className="speedo-foot">
        <span>LAP {String(lap).padStart(2, "0")}/{String(totalLaps).padStart(2, "0")}</span>
        <span>{Math.round(pct * 100)}%</span>
      </div>
    </div>
  );
}

window.Speedo = Speedo;