// car.jsx — cute Q-version top-down car SVG
function Car(props) {
  const { color, dark, soft, avatar, boost, winner } = props;
  let className = "car";
  if (boost) className += " boosting";
  if (winner) className += " winner";
  return (
    <svg
      viewBox="0 0 140 80"
      className={className}
      preserveAspectRatio="xMidYMid meet"
    >
      {/* exhaust / boost flames behind the car (left side, since car faces right) */}
      {boost && (
        <g className="boost-flame">
          <path d="M 14 30 Q -10 35 -18 40 Q -10 45 14 50 Z" fill="#FF8C42" />
          <path d="M 14 33 Q -2 37 -6 40 Q -2 43 14 47 Z" fill="#FFD93D" />
          <path d="M 14 36 Q 6 38 4 40 Q 6 42 14 44 Z" fill="#FFF6C6" />
        </g>
      )}

      {/* drop shadow */}
      <ellipse cx="70" cy="76" rx="56" ry="3.5" fill="rgba(0,0,0,0.28)" />

      {/* back wheels */}
      <rect x="22" y="3" width="26" height="10" rx="3" fill="#1a1a25" />
      <rect x="22" y="67" width="26" height="10" rx="3" fill="#1a1a25" />
      {/* front wheels */}
      <rect x="88" y="3" width="26" height="10" rx="3" fill="#1a1a25" />
      <rect x="88" y="67" width="26" height="10" rx="3" fill="#1a1a25" />

      {/* body */}
      <rect x="10" y="11" width="120" height="58" rx="18" fill={color} />
      {/* body darker bottom (subtle 3D) */}
      <rect x="10" y="55" width="120" height="14" rx="18" fill={dark} opacity="0.35" />
      {/* roof shine */}
      <rect x="18" y="15" width="104" height="6" rx="3" fill="rgba(255,255,255,0.55)" />

      {/* windshield (front trapezoid) */}
      <path d="M 60 19 L 100 25 L 100 55 L 60 61 Z" fill="#1f3a5a" opacity="0.9" />
      <path d="M 60 19 L 100 25 L 96 27 L 60 22 Z" fill="rgba(255,255,255,0.35)" />

      {/* avatar sticker on roof */}
      <circle cx="42" cy="40" r="17" fill="white" stroke={dark} strokeWidth="2.5" />
      <text
        x="42" y="40"
        fontSize="22"
        textAnchor="middle"
        dominantBaseline="central"
        style={{fontFamily: "'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif"}}
      >{avatar}</text>

      {/* number badge on side */}
      <circle cx="20" cy="40" r="6" fill="white" stroke={dark} strokeWidth="1.5" />

      {/* headlights (front, right side) */}
      <ellipse cx="126" cy="22" rx="4" ry="3" fill="#FFEC9F" stroke={dark} strokeWidth="1" />
      <ellipse cx="126" cy="58" rx="4" ry="3" fill="#FFEC9F" stroke={dark} strokeWidth="1" />
      {/* tiny smile bumper */}
      <path d="M 124 36 Q 130 40 124 44" stroke={dark} strokeWidth="2" fill="none" strokeLinecap="round" />
    </svg>
  );
}

window.Car = Car;