// Original cartoon Simp mascot — upgraded with better detail and expression.
const SimpMascot = ({ accent = "#e5553a" }) => (
  <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" aria-label="Simp mascot">
    <defs>
      <radialGradient id="blush2" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="#ff8aa0" stopOpacity=".95"/>
        <stop offset="100%" stopColor="#ff8aa0" stopOpacity="0"/>
      </radialGradient>
      <linearGradient id="eyeshine2" x1="0" x2="1" y1="0" y2="1">
        <stop offset="0%" stopColor="#9945ff"/>
        <stop offset="50%" stopColor="#14f195"/>
        <stop offset="100%" stopColor="#9945ff"/>
      </linearGradient>
      <linearGradient id="hairshade" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="#ffe27a"/>
        <stop offset="100%" stopColor="#f2b535"/>
      </linearGradient>
      <pattern id="dots2" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="2" cy="2" r="1.2" fill="#2a2320" opacity=".08"/>
      </pattern>
      <filter id="soft" x="-10%" y="-10%" width="120%" height="120%">
        <feGaussianBlur stdDeviation="1"/>
      </filter>
    </defs>

    {/* background */}
    <rect width="400" height="400" fill="#f7d675"/>
    <rect width="400" height="400" fill="url(#dots2)"/>

    {/* background sparkles */}
    <g opacity=".65" fill="#fff6c0" stroke="#2a2320" strokeWidth="2">
      <path d="M60 80 l 4 -14 l 4 14 l 14 4 l -14 4 l -4 14 l -4 -14 l -14 -4 z"/>
      <path d="M340 320 l 3 -10 l 3 10 l 10 3 l -10 3 l -3 10 l -3 -10 l -10 -3 z"/>
      <circle cx="330" cy="70" r="4" fill="#fff"/>
      <circle cx="50" cy="340" r="3" fill="#fff"/>
    </g>

    {/* hair back layer */}
    <path d="M64 220 C 50 90, 350 80, 340 230 L 340 360 L 60 360 Z"
          fill="url(#hairshade)" stroke="#2a2320" strokeWidth="5" strokeLinejoin="round"/>

    {/* neck */}
    <path d="M170 320 L 170 360 L 230 360 L 230 320"
          fill="#fde3c8" stroke="#2a2320" strokeWidth="5"/>
    <path d="M170 360 C 180 358, 220 358, 230 360" fill="none" stroke="#2a2320" strokeWidth="4" opacity=".4"/>

    {/* face */}
    <ellipse cx="200" cy="220" rx="118" ry="130" fill="#fde3c8" stroke="#2a2320" strokeWidth="5"/>

    {/* ears */}
    <path d="M82 228 q -12 8 -8 26 q 12 -4 16 -18 z" fill="#fde3c8" stroke="#2a2320" strokeWidth="4"/>
    <circle cx="82" cy="240" r="3" fill="#2a2320"/>
    <path d="M318 228 q 12 8 8 26 q -12 -4 -16 -18 z" fill="#fde3c8" stroke="#2a2320" strokeWidth="4"/>
    <circle cx="318" cy="240" r="3" fill="#2a2320"/>

    {/* hair front bangs — messier, more shape */}
    <g stroke="#2a2320" strokeWidth="5" strokeLinejoin="round">
      <path d="M88 205 C 95 120, 175 85, 220 108
               C 260 118, 300 145, 312 215
               C 302 190, 278 166, 250 168
               C 262 188, 260 212, 244 222
               C 228 198, 200 192, 178 208
               C 172 200, 155 200, 142 212
               C 132 202, 108 205, 92 218 Z"
            fill="url(#hairshade)"/>
      {/* side lock */}
      <path d="M100 228 C 92 250, 94 290, 110 310
               L 118 300 C 108 278, 108 258, 116 238 Z"
            fill="url(#hairshade)"/>
      <path d="M300 228 C 308 250, 306 290, 290 310
               L 282 300 C 292 278, 292 258, 284 238 Z"
            fill="url(#hairshade)"/>
    </g>

    {/* hair highlights */}
    <path d="M140 130 q 20 -15 60 -15" stroke="#fff6c0" strokeWidth="3" fill="none" strokeLinecap="round" opacity=".7"/>
    <path d="M215 120 q 30 -5 55 10" stroke="#fff6c0" strokeWidth="3" fill="none" strokeLinecap="round" opacity=".7"/>

    {/* blush */}
    <ellipse cx="138" cy="272" rx="30" ry="16" fill="url(#blush2)"/>
    <ellipse cx="262" cy="272" rx="30" ry="16" fill="url(#blush2)"/>
    {/* blush cross-hatch */}
    <g stroke="#e07080" strokeWidth="1.5" strokeLinecap="round" opacity=".6">
      <line x1="122" y1="270" x2="154" y2="270"/>
      <line x1="126" y1="276" x2="150" y2="276"/>
      <line x1="246" y1="270" x2="278" y2="270"/>
      <line x1="250" y1="276" x2="274" y2="276"/>
    </g>

    {/* eyes — bigger, sparklier */}
    <g>
      {/* left eye */}
      <ellipse cx="150" cy="232" rx="34" ry="40" fill="#fff" stroke="#2a2320" strokeWidth="5"/>
      <ellipse cx="150" cy="232" rx="26" ry="32" fill="url(#eyeshine2)"/>
      <ellipse cx="150" cy="232" rx="18" ry="24" fill="#1a0533" opacity=".35"/>
      <circle cx="150" cy="232" r="10" fill="#2a2320"/>
      <ellipse cx="156" cy="222" rx="6" ry="8" fill="#fff"/>
      <circle cx="142" cy="244" r="3" fill="#fff"/>
      <circle cx="160" cy="246" r="1.5" fill="#fff"/>
      {/* star shine */}
      <path d="M145 218 l 2 -5 l 2 5 l 5 2 l -5 2 l -2 5 l -2 -5 l -5 -2 z" fill="#fff"/>

      {/* right eye */}
      <ellipse cx="250" cy="232" rx="34" ry="40" fill="#fff" stroke="#2a2320" strokeWidth="5"/>
      <ellipse cx="250" cy="232" rx="26" ry="32" fill="url(#eyeshine2)"/>
      <ellipse cx="250" cy="232" rx="18" ry="24" fill="#1a0533" opacity=".35"/>
      <circle cx="250" cy="232" r="10" fill="#2a2320"/>
      <ellipse cx="256" cy="222" rx="6" ry="8" fill="#fff"/>
      <circle cx="242" cy="244" r="3" fill="#fff"/>
      <circle cx="260" cy="246" r="1.5" fill="#fff"/>
      <path d="M245 218 l 2 -5 l 2 5 l 5 2 l -5 2 l -2 5 l -2 -5 l -5 -2 z" fill="#fff"/>
    </g>

    {/* eyelashes */}
    <g stroke="#2a2320" strokeWidth="4" fill="none" strokeLinecap="round">
      <path d="M120 200 q 6 -8 14 -8"/>
      <path d="M180 200 q -6 -8 -14 -8"/>
      <path d="M220 200 q 6 -8 14 -8"/>
      <path d="M280 200 q -6 -8 -14 -8"/>
    </g>

    {/* eyebrows — gentle arch with a cope curve */}
    <path d="M118 185 q 20 -8 44 2" stroke="#8a6a18" strokeWidth="6" fill="none" strokeLinecap="round"/>
    <path d="M238 187 q 24 -10 44 -2" stroke="#8a6a18" strokeWidth="6" fill="none" strokeLinecap="round"/>

    {/* nose */}
    <path d="M198 278 q 3 8 7 12 q -5 3 -12 0" stroke="#2a2320" strokeWidth="3" fill="none" strokeLinecap="round"/>

    {/* mouth — gentle smile with a tiny tongue */}
    <path d="M175 312 q 25 18 50 0" stroke="#2a2320" strokeWidth="5" fill="#fff" strokeLinejoin="round"/>
    <path d="M190 318 q 10 6 20 0" fill="#ff8aa0" stroke="#2a2320" strokeWidth="2.5"/>

    {/* sweat drop */}
    <path d="M308 168 q -7 12 -3 22 q 10 -2 10 -14 z" fill="#7fdcff" stroke="#2a2320" strokeWidth="3"/>
    <path d="M306 170 q -2 4 -1 8" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round"/>

    {/* floating SOL heart */}
    <g transform="translate(56 100) rotate(-15)">
      <path d="M0 16 C -7 4, 8 -6, 17 4 C 26 -6, 41 4, 34 16 L 17 34 Z"
            fill={accent} stroke="#2a2320" strokeWidth="3"/>
      <text x="17" y="20" textAnchor="middle" fontFamily="Rubik Mono One" fontSize="9" fill="#fff">SOL</text>
    </g>

    {/* little $ floating */}
    <g transform="translate(330 150) rotate(12)">
      <circle r="14" fill="#14f195" stroke="#2a2320" strokeWidth="3"/>
      <text x="0" y="5" textAnchor="middle" fontFamily="Rubik Mono One" fontSize="16" fill="#2a2320">$</text>
    </g>
  </svg>
);

window.SimpMascot = SimpMascot;