/* Icons + small primitives. Shared via window. */

const Icon = {
  Arrow: ({ size = 16 }) => (
    <svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M3 8h10" />
      <path d="M9 4l4 4-4 4" />
    </svg>
  ),
  ArrowUR: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M4 10L10 4" />
      <path d="M4.5 4h5.5v5.5" />
    </svg>
  ),
  Check: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M2.5 7.5L5.5 10.5L11.5 3.5" />
    </svg>
  ),
  Dot: ({ size = 6 }) => (
    <svg width={size} height={size} viewBox="0 0 6 6" aria-hidden="true">
      <circle cx="3" cy="3" r="3" fill="currentColor" />
    </svg>
  ),
  Calendar: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="2" y="3.5" width="12" height="10.5" rx="1.5" />
      <path d="M2 6.5h12" />
      <path d="M5 2v3M11 2v3" />
    </svg>
  ),
  Clock: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="8" cy="8" r="6.25" />
      <path d="M8 4.5V8l2.5 1.5" />
    </svg>
  ),
  Video: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="1.5" y="4" width="10" height="8" rx="1.5" />
      <path d="M11.5 7l3-1.5v5L11.5 9z" />
    </svg>
  ),
  Close: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
      <path d="M3 3l8 8M11 3l-8 8" />
    </svg>
  ),
  ChevL: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M8.5 3.5L5 7l3.5 3.5" /></svg>
  ),
  ChevR: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5.5 3.5L9 7l-3.5 3.5" /></svg>
  ),
  Whistle: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M3 12a6 6 0 0 1 6-6h11l-3 3v6l3 3H9a6 6 0 0 1-6-6z" />
      <circle cx="9" cy="12" r="2.5" />
    </svg>
  ),
  Trophy: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M7 4h10v4a5 5 0 0 1-10 0z" />
      <path d="M7 5H4v2a3 3 0 0 0 3 3" />
      <path d="M17 5h3v2a3 3 0 0 1-3 3" />
      <path d="M9 21h6" />
      <path d="M12 13v8" />
    </svg>
  ),
  Compass: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <circle cx="12" cy="12" r="9" />
      <path d="M15.5 8.5L13 13l-4.5 2.5L11 11z" />
    </svg>
  ),
};

/* Subtle field-line SVG decoration */
function FieldArc({ className, style }) {
  return (
    <svg className={className} style={style} viewBox="0 0 320 320" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <circle cx="160" cy="160" r="155" />
      <circle cx="160" cy="160" r="80" />
      <path d="M5 160h310" />
      <path d="M160 5v310" />
    </svg>
  );
}

function PenaltyArc({ className, style }) {
  return (
    <svg className={className} style={style} viewBox="0 0 240 320" fill="none" stroke="currentColor" strokeWidth="1" aria-hidden="true">
      <rect x="0" y="40" width="180" height="240" />
      <rect x="0" y="100" width="80" height="120" />
      <path d="M180 130 A 55 55 0 0 1 180 190" />
      <circle cx="120" cy="160" r="2.5" fill="currentColor" />
    </svg>
  );
}

Object.assign(window, { Icon, FieldArc, PenaltyArc });
