const STYLES = {
  1: { faceLight: '#FFF1A8', faceMid: '#F1B53A', faceDark: '#8A6310', ring: '#6B4A0C', text: '#3D2A00', ribbonFront: '#CC2231', ribbonBack: '#8C141F' },
  2: { faceLight: '#F8F8F8', faceMid: '#C2C2C2', faceDark: '#7C7C7C', ring: '#555555', text: '#2C2C2C', ribbonFront: '#1E5BA8', ribbonBack: '#143F76' },
  3: { faceLight: '#F3C492', faceMid: '#B8722E', faceDark: '#5E3608', ring: '#41260A', text: '#2A1300', ribbonFront: '#1F7A45', ribbonBack: '#13502C' },
} as const;

export function Medal({ place }: { place: 1 | 2 | 3 }) {
  const s = STYLES[place];
  const gradId = `medal-grad-${place}`;
  return (
    <svg width="28" height="40" viewBox="0 0 36 48" role="img" aria-label={`Place ${place}`}
      className="inline-block align-middle flex-shrink-0">
      <defs>
        <radialGradient id={gradId} cx="35%" cy="30%" r="75%">
          <stop offset="0%"   stopColor={s.faceLight} />
          <stop offset="55%"  stopColor={s.faceMid} />
          <stop offset="100%" stopColor={s.faceDark} />
        </radialGradient>
      </defs>
      <polygon points="24,0 32,0 22,26 14,26" fill={s.ribbonBack} />
      <polygon points="4,0 12,0 22,26 14,26" fill={s.ribbonFront} />
      <circle cx="18" cy="33" r="13" fill={`url(#${gradId})`} stroke={s.ring} strokeWidth="1.4" />
      <circle cx="18" cy="33" r="10" fill="none" stroke={s.faceLight} strokeWidth="0.5" opacity="0.7" />
      <text x="18" y="38" textAnchor="middle" fontSize="14" fontWeight="800"
        fontFamily='"Helvetica Neue", Arial, sans-serif' fill={s.text} style={{ paintOrder: 'stroke', userSelect: 'none' }}>
        {place}
      </text>
    </svg>
  );
}