/* ─── SPONSOR LOGO ART (themed SVG by tier) ─── */
function SponsorArt({ tier, accent, style = {}, size = 80 }) {
  // Each tier gets a unique iconographic motif tied to the race
  const w = size * 1.6;
  const h = size;
  const common = { width: w, height: h, viewBox: `0 0 ${w} ${h}`, fill: "none", "aria-hidden": true, style };
  if (tier === "gold") {
    // Mountain peaks (Las Bardas)
    return (
      <svg {...common}>
        <defs>
          <linearGradient id="mtg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={accent} stopOpacity="0.9"/>
            <stop offset="100%" stopColor={accent} stopOpacity="0.3"/>
          </linearGradient>
        </defs>
        <path d={`M0 ${h} L${w*0.18} ${h*0.45} L${w*0.32} ${h*0.6} L${w*0.45} ${h*0.25} L${w*0.6} ${h*0.55} L${w*0.78} ${h*0.4} L${w*0.92} ${h*0.65} L${w} ${h*0.5} L${w} ${h} Z`}
          fill="url(#mtg)"/>
        <path d={`M0 ${h} L${w*0.18} ${h*0.45} L${w*0.32} ${h*0.6} L${w*0.45} ${h*0.25} L${w*0.6} ${h*0.55} L${w*0.78} ${h*0.4} L${w*0.92} ${h*0.65} L${w} ${h*0.5}`}
          stroke={accent} strokeWidth="2" strokeLinejoin="round" fill="none"/>
        <circle cx={w*0.45} cy={h*0.18} r="3.5" fill={accent}/>
      </svg>
    );
  }
  if (tier === "silver") {
    // Compass / bearing
    return (
      <svg {...common}>
        <circle cx={w/2} cy={h/2} r={h*0.35} stroke={accent} strokeWidth="2" opacity="0.8"/>
        <circle cx={w/2} cy={h/2} r={h*0.22} stroke={accent} strokeWidth="1" opacity="0.4"/>
        <polygon points={`${w/2},${h*0.18} ${w/2-h*0.08},${h/2} ${w/2},${h*0.42} ${w/2+h*0.08},${h/2}`} fill={accent}/>
        <polygon points={`${w/2},${h*0.58} ${w/2-h*0.08},${h/2} ${w/2},${h*0.82} ${w/2+h*0.08},${h/2}`} fill={accent} opacity="0.4"/>
        <line x1={w*0.25} y1={h/2} x2={w*0.32} y2={h/2} stroke={accent} strokeWidth="1.5"/>
        <line x1={w*0.68} y1={h/2} x2={w*0.75} y2={h/2} stroke={accent} strokeWidth="1.5"/>
      </svg>
    );
  }
  if (tier === "bronze") {
    // Pine forest line
    return (
      <svg {...common}>
        {[0.15, 0.35, 0.55, 0.75].map((x, i) => {
          const cx = w * x, baseY = h * 0.85;
          const trH = h * (0.5 + (i % 2) * 0.15);
          return (
            <g key={i} stroke={accent} strokeWidth="1.8" fill="none" strokeLinejoin="round">
              <path d={`M${cx} ${baseY - trH} L${cx - trH*0.25} ${baseY - trH*0.55} L${cx - trH*0.18} ${baseY - trH*0.55} L${cx - trH*0.32} ${baseY - trH*0.25} L${cx - trH*0.22} ${baseY - trH*0.25} L${cx - trH*0.4} ${baseY} L${cx + trH*0.4} ${baseY} L${cx + trH*0.22} ${baseY - trH*0.25} L${cx + trH*0.32} ${baseY - trH*0.25} L${cx + trH*0.18} ${baseY - trH*0.55} L${cx + trH*0.25} ${baseY - trH*0.55} Z`} />
            </g>
          );
        })}
        <line x1="0" y1={h*0.85} x2={w} y2={h*0.85} stroke={accent} strokeWidth="1" opacity="0.4"/>
      </svg>
    );
  }
  if (tier === "media") {
    // River — fluid horizontal lines
    return (
      <svg {...common}>
        {[0.3, 0.45, 0.6, 0.75].map((y, i) => (
          <path key={i}
            d={`M0 ${h*y} Q${w*0.2} ${h*(y - 0.08)} ${w*0.4} ${h*y} T${w*0.8} ${h*y} T${w} ${h*y}`}
            stroke={accent} strokeWidth={2 - i*0.3} fill="none" strokeLinecap="round"
            opacity={1 - i*0.18}/>
        ))}
        <circle cx={w*0.85} cy={h*0.3} r="2.5" fill={accent}/>
      </svg>
    );
  }
  return null;
}

window.SponsorArt = SponsorArt;