// Stylized penguin mascot — simple geometric shapes (not Tux, but a kin).
// Holds a microphone, body curves around it, eyes glance up. Coins float around (composed by parent).
function Penguin({ wink = false, pose = "mic" }) {
  // pose: "mic" | "wallet" | "wave"
  return (
    <svg viewBox="0 0 480 520" width="100%" height="100%" aria-label="PikFin penguin" style={{ display: "block" }}>
      <defs>
        <radialGradient id="bellyG" cx="50%" cy="40%" r="70%">
          <stop offset="0%" stopColor="#FBF7EC" />
          <stop offset="100%" stopColor="#EAE2CE" />
        </radialGradient>
        <linearGradient id="bodyG" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#1A2331" />
          <stop offset="100%" stopColor="#0E1622" />
        </linearGradient>
      </defs>

      {/* shadow */}
      <ellipse cx="240" cy="490" rx="150" ry="14" fill="#0E1622" opacity=".12" />

      {/* feet */}
      <ellipse cx="200" cy="478" rx="34" ry="10" fill="#FF6A3D" stroke="#0E1622" strokeWidth="3" />
      <ellipse cx="280" cy="478" rx="34" ry="10" fill="#FF6A3D" stroke="#0E1622" strokeWidth="3" />

      {/* body */}
      <path
        d="M240 60
           C 360 60 410 170 410 280
           C 410 400 340 470 240 470
           C 140 470 70 400 70 280
           C 70 170 120 60 240 60 Z"
        fill="url(#bodyG)"
      />

      {/* belly */}
      <path
        d="M240 130
           C 320 130 350 210 350 290
           C 350 380 300 440 240 440
           C 180 440 130 380 130 290
           C 130 210 160 130 240 130 Z"
        fill="url(#bellyG)"
      />

      {/* left wing (flipper) */}
      <path d="M86 240 C 60 290, 70 380, 120 410 C 130 380, 130 320, 120 270 Z" fill="#0E1622" />
      {/* right wing */}
      <path d="M394 240 C 420 290, 410 380, 360 410 C 350 380, 350 320, 360 270 Z" fill="#0E1622" />

      {/* eyes */}
      <g>
        <ellipse cx="200" cy="200" rx="22" ry="26" fill="#FBF7EC" />
        <ellipse cx="280" cy="200" rx="22" ry="26" fill="#FBF7EC" />
        {wink ? (
          <path d="M188 200 Q 200 192 212 200" stroke="#0E1622" strokeWidth="4" fill="none" strokeLinecap="round" />
        ) : (
          <ellipse cx="204" cy="204" rx="8" ry="11" fill="#0E1622" />
        )}
        <ellipse cx="284" cy="204" rx="8" ry="11" fill="#0E1622" />
        {/* eye sparkles */}
        <circle cx="207" cy="200" r="2.6" fill="#FBF7EC" />
        <circle cx="287" cy="200" r="2.6" fill="#FBF7EC" />
      </g>

      {/* cheek blush */}
      <ellipse cx="160" cy="248" rx="14" ry="6" fill="#FF6A3D" opacity=".35" />
      <ellipse cx="320" cy="248" rx="14" ry="6" fill="#FF6A3D" opacity=".35" />

      {/* beak */}
      <path d="M222 244 L258 244 L240 274 Z" fill="#FF6A3D" stroke="#0E1622" strokeWidth="3" strokeLinejoin="round" />
      <path d="M226 258 L254 258" stroke="#0E1622" strokeWidth="2" opacity=".6" />

      {/* microphone in left flipper */}
      {pose === "mic" && (
        <g>
          {/* cable */}
          <path d="M118 380 C 80 420, 90 460, 130 470" stroke="#0E1622" strokeWidth="4" fill="none" strokeLinecap="round" />
          {/* mic body */}
          <g transform="translate(118 320) rotate(-18)">
            <rect x="-22" y="-50" width="44" height="78" rx="22" fill="#0E1622" stroke="#0E1622" strokeWidth="3" />
            {/* grille */}
            <line x1="-14" y1="-40" x2="14" y2="-40" stroke="#FF6A3D" strokeWidth="2" opacity=".7" />
            <line x1="-14" y1="-30" x2="14" y2="-30" stroke="#FBF7EC" strokeWidth="2" opacity=".4" />
            <line x1="-14" y1="-20" x2="14" y2="-20" stroke="#FBF7EC" strokeWidth="2" opacity=".4" />
            <line x1="-14" y1="-10" x2="14" y2="-10" stroke="#FBF7EC" strokeWidth="2" opacity=".4" />
            {/* mic stand */}
            <rect x="-4" y="28" width="8" height="22" fill="#0E1622" />
            <rect x="-18" y="48" width="36" height="6" rx="3" fill="#0E1622" />
            {/* red light */}
            <circle cx="0" cy="20" r="3" fill="#FF6A3D" />
          </g>
        </g>
      )}

      {/* bowtie / collar with ₽ pendant */}
      <g transform="translate(240 282)">
        <path d="M-22 0 L-6 -10 L-6 10 Z" fill="#FF6A3D" stroke="#0E1622" strokeWidth="2.5" />
        <path d="M22 0 L6 -10 L6 10 Z" fill="#FF6A3D" stroke="#0E1622" strokeWidth="2.5" />
        <rect x="-6" y="-6" width="12" height="12" rx="2" fill="#0E1622" />
        <text x="0" y="3" fontFamily="Bricolage Grotesque, serif" fontWeight="700" fontSize="11" fill="#FF6A3D" textAnchor="middle">₽</text>
      </g>
    </svg>
  );
}

window.Penguin = Penguin;