function MiniMap({ checkpoints }) {
  return (
    <div className="card" style={{ background: 'var(--night-2)', borderColor: 'var(--night-line)', color: 'var(--night-fg)' }}>
      <div className="card-head" style={{ background: 'var(--night-3)', borderColor: 'var(--night-line)' }}>
        <h3 style={{ color: 'var(--night-fg)' }}>Course schematic</h3>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--night-fg-3)' }}>10.0 km · 6 mats</span>
      </div>
      <div style={{ padding: 24, position: 'relative' }}>
        <svg viewBox="0 0 600 160" style={{ width: '100%', height: 'auto' }}>
          <path d="M 30 120 Q 120 30, 220 80 T 420 70 T 570 110" fill="none" stroke="var(--night-line)" strokeWidth="2" strokeDasharray="4 4" />
          <path d="M 30 120 Q 120 30, 220 80 T 420 70" fill="none" stroke="var(--flag)" strokeWidth="3" />
          {checkpoints.map((cp, i) => (
            <g key={i}>
              <circle cx={cp.x} cy={cp.y} r="6" fill={cp.passed ? 'var(--flag)' : 'var(--night-2)'} stroke={cp.passed ? 'var(--flag)' : 'var(--night-fg-3)'} strokeWidth="2" />
              <text x={cp.x} y={cp.y - 14} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill="var(--night-fg-2)">{cp.label}</text>
              <text x={cp.x} y={cp.y + 22} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="var(--night-fg-3)">{cp.km} km</text>
            </g>
          ))}
        </svg>
      </div>
    </div>
  );
}
window.MiniMap = MiniMap;