/* PulseMascot — 1:1 port of src/app/components/PulseMascot.tsx
   (accessories omitted; moods + variants + sizes + eye animations fully covered). */

const SIZES = {
  sm: { w: 40, h: 55 },
  md: { w: 52, h: 73 },
  lg: { w: 90, h: 115 },
  xl: { w: 120, h: 160 },
};

const GRADIENTS = {
  spark:   { start: '#BBEEFF', end: '#66E5FF', stroke: '#66E5FF', accent: '#FFD700' },
  glow:    { start: '#99ECFF', end: '#00D4FF', stroke: '#00D4FF', accent: '#FFD700' },
  flash:   { start: '#66E5FF', end: '#0096C7', stroke: '#0096C7', accent: '#FFD700' },
  beam:    { start: '#4DD4FF', end: '#14B8A6', stroke: '#14B8A6', accent: '#00D4FF' },
  strike:  { start: '#0891B2', end: '#0369A1', stroke: '#0369A1', accent: '#F97316' },
  surge:   { start: '#14B8A6', end: '#9D4EDD', stroke: '#9D4EDD', accent: '#00D4FF' },
  thunder: { start: '#A855F7', end: '#7C3AED', stroke: '#7C3AED', accent: '#00D4FF' },
  storm:   { start: '#6B21A8', end: '#4C1D95', stroke: '#4C1D95', accent: '#FFD700' },
  nova:    { start: '#FFFFFF', end: '#FCD34D', stroke: '#FCD34D', accent: '#FF6B6B' },
  master:  { start: '#FFD700', end: '#F59E0B', stroke: '#F59E0B', accent: '#00D4FF' },
};

const MOOD_ANIM = {
  happy: 'animate-happy-bounce',
  sad: 'animate-sad-droop',
  thinking: 'animate-thinking-tilt',
  celebrate: 'animate-celebrate-jump',
  encouraging: 'animate-encouraging-nod',
  'encouraging-wink': 'animate-encouraging-wink',
  'encouraging-stars': 'animate-encouraging-stars',
  'encouraging-warm': 'animate-encouraging-warm',
  proud: 'animate-proud-puff',
  sleeping: 'animate-sleeping-breathe',
  confused: 'animate-confused-wobble',
  excited: 'animate-excited-gentle',
  curious: 'animate-thinking-tilt',
  shy: 'animate-sad-droop',
  surprised: 'animate-surprised-gentle',
  focused: 'animate-float',
  giggling: 'animate-happy-bounce',
  love: 'animate-float',
  disappointed: 'animate-sad-droop',
  zen: 'animate-sleeping-breathe',
  mischievous: 'animate-thinking-tilt',
  amazed: 'animate-float',
  cheerful: 'animate-happy-bounce',
  neutral: 'animate-float',
};

const EYE_ANIM = {
  peekUp: 'animate-eye-peek-up',
  blink: 'animate-eye-blink',
  lookAround: 'animate-eye-look-around',
  lookUpDown: 'animate-eye-look-updown',
  idle: 'animate-eye-idle',
  widen: 'animate-eye-widen',
  none: '',
};

function PulseMascot({ variant = 'strike', mood = 'neutral', size = 'md', animated = true, eyeAnimation = 'none', accessories = [], className = '' }) {
  const g = GRADIENTS[variant] || GRADIENTS.strike;
  const dim = SIZES[size];
  const gid = `pg-${variant}-${mood}-${size}-${eyeAnimation}`;
  const eyeCls = animated ? (EYE_ANIM[eyeAnimation] || '') : '';
  const bodyCls = animated ? (MOOD_ANIM[mood] || 'animate-float') : '';

  const wrapEyes = (content) => eyeCls
    ? <g className={eyeCls}>{content}</g>
    : content;

  const M = mood;
  let inner = null;

  // Shared feet at bottom — most moods use gradient.stroke, a few use solid tones.
  const feet = (color = g.stroke, ry = 4, rx = 7) => (
    <>
      <ellipse cx="38" cy="105" rx={rx} ry={ry} fill={color}/>
      <ellipse cx="62" cy="105" rx={rx} ry={ry} fill={color}/>
    </>
  );

  if (M === 'neutral') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="48" fill="rgba(0,212,255,0.1)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="42" fill="none" stroke="rgba(0,212,255,0.25)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M18,70 L8,66 L16,70 L8,74 Z" fill={g.accent}/>
        <path d="M82,70 L92,66 L84,70 L92,74 Z" fill={g.accent}/>
      </g>
      {wrapEyes(
        <g className={animated && !eyeCls ? 'animate-blink' : ''}>
          <ellipse cx="38" cy="65" rx="9" ry="11" fill="white"/>
          <ellipse cx="62" cy="65" rx="9" ry="11" fill="white"/>
          <circle cx="41" cy="67" r="5" fill="#1f2937"/>
          <circle cx="65" cy="67" r="5" fill="#1f2937"/>
          <circle cx="43" cy="64" r="2" fill="white"/>
          <circle cx="67" cy="64" r="2" fill="white"/>
        </g>
      )}
      <path d="M42,86 Q50,90 58,86" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      {feet()}
    </>
  );

  else if (M === 'happy') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(0,212,255,0.15)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(0,212,255,0.35)" strokeWidth="3"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#0099CC" strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M15,70 L3,64 L12,70 L3,76 Z" fill="#FFD700"/>
        <path d="M85,70 L97,64 L88,70 L97,76 Z" fill="#FFD700"/>
        <path d="M50,28 L45,16 L50,25 L55,16 Z" fill="#FFD700"/>
      </g>
      {wrapEyes(
        <>
          <path d="M30,65 Q38,58 46,65" stroke="#1f2937" strokeWidth="3" fill="none" strokeLinecap="round"/>
          <path d="M54,65 Q62,58 70,65" stroke="#1f2937" strokeWidth="3" fill="none" strokeLinecap="round"/>
        </>
      )}
      <path d="M38,84 Q50,98 62,84" stroke="#1f2937" strokeWidth="3" fill="none" strokeLinecap="round"/>
      {feet('#0099CC')}
    </>
  );

  else if (M === 'sad') inner = (
    <>
      <circle cx="50" cy="70" r="45" fill="rgba(0,212,255,0.08)"/>
      <circle cx="50" cy="70" r="40" fill="none" stroke="rgba(0,212,255,0.15)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#007A99" strokeWidth="2"/>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="67" rx="9" ry="11" fill="white"/>
          <ellipse cx="62" cy="67" rx="9" ry="11" fill="white"/>
          <circle cx="40" cy="70" r="5" fill="#1f2937"/>
          <circle cx="64" cy="70" r="5" fill="#1f2937"/>
          <path d="M30,58 L46,62" stroke="#1f2937" strokeWidth="2" strokeLinecap="round"/>
          <path d="M70,58 L54,62" stroke="#1f2937" strokeWidth="2" strokeLinecap="round"/>
        </>
      )}
      <path d="M40,92 Q50,84 60,92" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <ellipse className={animated ? 'animate-tear' : ''} cx="28" cy="78" rx="3" ry="5" fill="rgba(255,215,0,0.6)"/>
      {feet('#007A99', 3, 6)}
    </>
  );

  else if (M === 'thinking') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="48" fill="rgba(0,212,255,0.1)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="42" fill="none" stroke="rgba(0,212,255,0.2)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#0099CC" strokeWidth="2"/>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="9" ry="11" fill="white"/>
          <ellipse cx="62" cy="65" rx="9" ry="11" fill="white"/>
          <circle cx="42" cy="62" r="5" fill="#1f2937"/>
          <circle cx="66" cy="62" r="5" fill="#1f2937"/>
          <circle cx="44" cy="60" r="2" fill="white"/>
          <circle cx="68" cy="60" r="2" fill="white"/>
        </>
      )}
      <ellipse cx="50" cy="88" rx="4" ry="3" fill="#1f2937"/>
      <text className={animated ? 'animate-question' : ''} x="78" y="45" fill="#FFD700" fontSize="18" fontWeight="bold">?</text>
      {feet('#0099CC')}
    </>
  );

  else if (M === 'celebrate') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="52" fill="rgba(0,212,255,0.2)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="46" fill="none" stroke="rgba(255,215,0,0.4)" strokeWidth="3"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#0099CC" strokeWidth="2"/>
      <g className={animated ? 'animate-confetti' : ''}>
        <path d="M10,55 L0,50 L8,55 L0,60 Z" fill="#FFD700"/>
        <path d="M90,55 L100,50 L92,55 L100,60 Z" fill="#FFD700"/>
      </g>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M50,18 L45,6 L50,15 L55,6 Z" fill="#FFD700"/>
        <path d="M25,35 L18,28 L23,35 L18,42 Z" fill="#9D4EDD"/>
        <path d="M75,35 L82,28 L77,35 L82,42 Z" fill="#9D4EDD"/>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="10" ry="10" fill="white"/>
          <ellipse cx="62" cy="65" rx="10" ry="10" fill="white"/>
          <text x="33" y="70" fontSize="14" fill="#FFD700">★</text>
          <text x="57" y="70" fontSize="14" fill="#FFD700">★</text>
        </>
      )}
      <path d="M35,84 Q50,102 65,84" stroke="#1f2937" strokeWidth="3" fill="none" strokeLinecap="round"/>
      {feet('#0099CC')}
    </>
  );

  else if (M === 'encouraging') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="48" fill="rgba(0,212,255,0.12)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="42" fill="none" stroke="rgba(0,212,255,0.25)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#0099CC" strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M15,70 L5,66 L13,70 L5,74 Z" fill="#FFD700"/>
        <path d="M85,70 L95,66 L87,70 L95,74 Z" fill="#FFD700"/>
      </g>
      <g className={animated ? 'animate-cheer-arms' : ''}>
        <path d="M22,65 L15,45" stroke="#0099CC" strokeWidth="5" strokeLinecap="round"/>
        <circle cx="15" cy="42" r="5" fill="#0099CC"/>
        <path d="M78,65 L85,45" stroke="#0099CC" strokeWidth="5" strokeLinecap="round"/>
        <circle cx="85" cy="42" r="5" fill="#0099CC"/>
      </g>
      {wrapEyes(
        <g className={animated && !eyeCls ? 'animate-blink' : ''}>
          <ellipse cx="38" cy="65" rx="9" ry="11" fill="white"/>
          <ellipse cx="62" cy="65" rx="9" ry="11" fill="white"/>
          <circle cx="41" cy="67" r="5" fill="#1f2937"/>
          <circle cx="65" cy="67" r="5" fill="#1f2937"/>
          <circle cx="43" cy="64" r="2" fill="white"/>
          <circle cx="67" cy="64" r="2" fill="white"/>
        </g>
      )}
      <path d="M40,85 Q50,94 60,85" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      {feet('#0099CC')}
    </>
  );

  else if (M === 'encouraging-wink') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="48" fill="rgba(255,183,77,0.10)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="42" fill="none" stroke="rgba(255,183,77,0.25)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M78,42 C78,38 82,36 84,38 C86,36 90,38 90,42 C90,47 84,51 84,51 C84,51 78,47 78,42 Z" fill="#FF6B9D" opacity="0.85"/>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="9" ry="11" fill="white"/>
          <circle cx="41" cy="67" r="5" fill="#1f2937"/>
          <circle cx="43" cy="64" r="2" fill="white"/>
          <path d="M55,66 Q62,60 69,66" stroke="#1f2937" strokeWidth="3" fill="none" strokeLinecap="round"/>
        </>
      )}
      <path d="M38,85 Q50,96 62,85" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <circle cx="28" cy="78" r="5" fill="rgba(255,107,157,0.15)"/>
      <circle cx="72" cy="78" r="5" fill="rgba(255,107,157,0.15)"/>
      {feet()}
    </>
  );

  else if (M === 'encouraging-stars') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(0,212,255,0.14)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(255,215,0,0.25)" strokeWidth="2.5"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <text x="8" y="58" fontSize="10" fill="#FFD700">✦</text>
        <text x="86" y="52" fontSize="8" fill="#FFD700">✦</text>
        <text x="20" y="38" fontSize="7" fill="#00D4FF">✦</text>
        <text x="74" y="34" fontSize="9" fill="#FFD700">✦</text>
        <text x="48" y="26" fontSize="6" fill="#00D4FF">✦</text>
      </g>
      <g className={animated ? 'animate-confetti' : ''}>
        <text x="90" y="80" fontSize="7" fill="#9D4EDD">✦</text>
        <text x="4" y="82" fontSize="6" fill="#9D4EDD">✦</text>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="9" ry="10" fill="white"/>
          <ellipse cx="62" cy="65" rx="9" ry="10" fill="white"/>
          <circle cx="40" cy="63" r="5" fill="#1f2937"/>
          <circle cx="64" cy="63" r="5" fill="#1f2937"/>
          <circle cx="43" cy="60" r="2.5" fill="white"/>
          <circle cx="67" cy="60" r="2.5" fill="white"/>
          <circle cx="38" cy="64" r="1" fill="white"/>
          <circle cx="62" cy="64" r="1" fill="white"/>
        </>
      )}
      <path d="M40,85 Q50,93 60,85" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      {feet()}
    </>
  );

  else if (M === 'encouraging-warm') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(255,150,100,0.10)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(255,150,100,0.22)" strokeWidth="2.5"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M15,70 L7,67 L13,70 L7,73 Z" fill="#FFD700"/>
        <path d="M85,70 L93,67 L87,70 L93,73 Z" fill="#FFD700"/>
      </g>
      {wrapEyes(
        <g className={animated && !eyeCls ? 'animate-blink' : ''}>
          <ellipse cx="38" cy="65" rx="9" ry="11" fill="white"/>
          <ellipse cx="62" cy="65" rx="9" ry="11" fill="white"/>
          <circle cx="40" cy="66" r="5" fill="#1f2937"/>
          <circle cx="64" cy="66" r="5" fill="#1f2937"/>
          <circle cx="42" cy="63" r="2" fill="white"/>
          <circle cx="66" cy="63" r="2" fill="white"/>
          <path d="M32,56 Q38,52 44,55" stroke="#1f2937" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
          <path d="M56,55 Q62,52 68,56" stroke="#1f2937" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
        </g>
      )}
      <path d="M40,85 Q50,94 60,85" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <g className={animated ? 'animate-pulse-glow' : ''}>
        <path d="M46,88 C46,86 48,85 50,87 C52,85 54,86 54,88 C54,91 50,94 50,94 C50,94 46,91 46,88 Z" fill="#FF6B9D" opacity="0.7"/>
      </g>
      <circle cx="28" cy="76" r="4.5" fill="rgba(255,107,157,0.12)"/>
      <circle cx="72" cy="76" r="4.5" fill="rgba(255,107,157,0.12)"/>
      {feet()}
    </>
  );

  else if (M === 'proud') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(0,212,255,0.15)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(255,215,0,0.3)" strokeWidth="3"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#0099CC" strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M50,22 L42,35 L35,22 L50,32 L65,22 L58,35 Z" fill="#FFD700" stroke="#FFA500" strokeWidth="1"/>
        <path d="M15,70 L5,66 L13,70 L5,74 Z" fill="#FFD700"/>
        <path d="M85,70 L95,66 L87,70 L95,74 Z" fill="#FFD700"/>
      </g>
      {wrapEyes(
        <>
          <path d="M32,67 L46,67" stroke="#1f2937" strokeWidth="3" strokeLinecap="round"/>
          <path d="M54,67 L68,67" stroke="#1f2937" strokeWidth="3" strokeLinecap="round"/>
        </>
      )}
      <path d="M42,86 Q50,92 58,86" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      {feet('#0099CC')}
    </>
  );

  else if (M === 'sleeping') inner = (
    <>
      <circle cx="50" cy="70" r="45" fill="rgba(0,212,255,0.08)"/>
      <circle cx="50" cy="70" r="40" fill="none" stroke="rgba(0,212,255,0.12)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#007A99" strokeWidth="2"/>
      <path d="M30,67 L46,67" stroke="#1f2937" strokeWidth="3" strokeLinecap="round"/>
      <path d="M54,67 L70,67" stroke="#1f2937" strokeWidth="3" strokeLinecap="round"/>
      <ellipse cx="50" cy="88" rx="4" ry="5" fill="#1f2937"/>
      <text className={animated ? 'animate-z' : ''} x="72" y="48" fill="#FFD700" fontSize="12" fontWeight="bold">z</text>
      <text className={animated ? 'animate-z-delay1' : ''} x="80" y="38" fill="#FFD700" fontSize="14" fontWeight="bold">z</text>
      <text className={animated ? 'animate-z-delay2' : ''} x="88" y="26" fill="#FFD700" fontSize="16" fontWeight="bold">z</text>
      {feet('#007A99', 3, 6)}
    </>
  );

  else if (M === 'confused') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="48" fill="rgba(0,212,255,0.1)"/>
      <circle cx="50" cy="70" r="42" fill="none" stroke="rgba(0,212,255,0.2)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#0099CC" strokeWidth="2"/>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="9" ry="11" fill="white"/>
          <ellipse cx="62" cy="65" rx="9" ry="11" fill="white"/>
          <text x="33" y="70" fontSize="14" fill="#1f2937">@</text>
          <text x="57" y="70" fontSize="14" fill="#1f2937">@</text>
        </>
      )}
      <path d="M38,88 Q44,84 50,88 Q56,92 62,88" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <text className={animated ? 'animate-question' : ''} x="75" y="42" fill="#FFD700" fontSize="14" fontWeight="bold">?</text>
      <text className={animated ? 'animate-question' : ''} style={{ animationDelay: '0.5s' }} x="18" y="48" fill="#FFD700" fontSize="12" fontWeight="bold">?</text>
      {feet('#0099CC')}
    </>
  );

  else if (M === 'excited') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="52" fill="rgba(0,212,255,0.2)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="46" fill="none" stroke="rgba(0,212,255,0.4)" strokeWidth="3"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke="#0099CC" strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M10,70 L-2,64 L8,70 L-2,76 Z" fill="#FFD700"/>
        <path d="M90,70 L102,64 L92,70 L102,76 Z" fill="#FFD700"/>
        <path d="M50,22 L45,8 L50,18 L55,8 Z" fill="#FFD700"/>
        <path d="M25,42 L18,35 L23,42 L18,49 Z" fill="#00D4FF"/>
        <path d="M75,42 L82,35 L77,42 L82,49 Z" fill="#00D4FF"/>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="11" ry="13" fill="white"/>
          <ellipse cx="62" cy="65" rx="11" ry="13" fill="white"/>
          <circle cx="41" cy="67" r="6" fill="#1f2937"/>
          <circle cx="65" cy="67" r="6" fill="#1f2937"/>
          <circle cx="44" cy="63" r="3" fill="white"/>
          <circle cx="68" cy="63" r="3" fill="white"/>
        </>
      )}
      <ellipse cx="50" cy="90" rx="8" ry="7" fill="#1f2937"/>
      {feet('#0099CC')}
    </>
  );

  else if (M === 'curious') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="48" fill="rgba(0,212,255,0.1)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="42" fill="none" stroke="rgba(0,212,255,0.22)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M82,70 L92,66 L84,70 L92,74 Z" fill={g.accent}/>
      </g>
      {wrapEyes(
        <g className={animated && !eyeCls ? 'animate-blink' : ''}>
          <ellipse cx="38" cy="65" rx="9" ry="11" fill="white"/>
          <ellipse cx="62" cy="65" rx="9" ry="11" fill="white"/>
          <circle cx="44" cy="66" r="5" fill="#1f2937"/>
          <circle cx="68" cy="66" r="5" fill="#1f2937"/>
          <circle cx="46" cy="63" r="2" fill="white"/>
          <circle cx="70" cy="63" r="2" fill="white"/>
          <path d="M54,54 Q62,50 70,55" stroke="#1f2937" strokeWidth="2" fill="none" strokeLinecap="round"/>
        </g>
      )}
      <ellipse cx="48" cy="88" rx="3.5" ry="3" fill="#1f2937"/>
      <text className={animated ? 'animate-question' : ''} x="76" y="44" fill="#FFD700" fontSize="16" fontWeight="bold">?</text>
      {feet()}
    </>
  );

  else if (M === 'shy') inner = (
    <>
      <circle cx="50" cy="70" r="46" fill="rgba(0,212,255,0.08)"/>
      <circle cx="50" cy="70" r="41" fill="none" stroke="rgba(0,212,255,0.15)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="8" ry="10" fill="white"/>
          <ellipse cx="62" cy="65" rx="8" ry="10" fill="white"/>
          <circle cx="36" cy="70" r="4.5" fill="#1f2937"/>
          <circle cx="60" cy="70" r="4.5" fill="#1f2937"/>
          <circle cx="34" cy="68" r="1.5" fill="white"/>
          <circle cx="58" cy="68" r="1.5" fill="white"/>
        </>
      )}
      <path d="M44,86 Q50,90 56,86" stroke="#1f2937" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <circle cx="26" cy="78" r="6" fill="rgba(255,107,157,0.18)"/>
      <circle cx="74" cy="78" r="6" fill="rgba(255,107,157,0.18)"/>
      {feet(g.stroke, 3.5, 6)}
    </>
  );

  else if (M === 'surprised') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(0,212,255,0.15)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(0,212,255,0.3)" strokeWidth="2.5"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <text x="78" y="40" fontSize="14" fill="#FFD700" fontWeight="bold">!</text>
        <text x="14" y="44" fontSize="12" fill="#FFD700" fontWeight="bold">!</text>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="11" ry="13" fill="white"/>
          <ellipse cx="62" cy="65" rx="11" ry="13" fill="white"/>
          <circle cx="40" cy="66" r="5" fill="#1f2937"/>
          <circle cx="64" cy="66" r="5" fill="#1f2937"/>
          <circle cx="42" cy="64" r="2.5" fill="white"/>
          <circle cx="66" cy="64" r="2.5" fill="white"/>
        </>
      )}
      <ellipse cx="50" cy="89" rx="5" ry="6" fill="#1f2937"/>
      {feet()}
    </>
  );

  else if (M === 'focused') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="48" fill="rgba(0,212,255,0.1)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="42" fill="none" stroke="rgba(0,212,255,0.2)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M18,70 L8,66 L16,70 L8,74 Z" fill={g.accent}/>
        <path d="M82,70 L92,66 L84,70 L92,74 Z" fill={g.accent}/>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="66" rx="9" ry="7" fill="white"/>
          <ellipse cx="62" cy="66" rx="9" ry="7" fill="white"/>
          <circle cx="41" cy="66" r="4.5" fill="#1f2937"/>
          <circle cx="65" cy="66" r="4.5" fill="#1f2937"/>
          <circle cx="43" cy="64" r="1.5" fill="white"/>
          <circle cx="67" cy="64" r="1.5" fill="white"/>
          <path d="M28,57 L46,58" stroke="#1f2937" strokeWidth="2.2" strokeLinecap="round"/>
          <path d="M54,58 L72,57" stroke="#1f2937" strokeWidth="2.2" strokeLinecap="round"/>
        </>
      )}
      <path d="M42,87 L58,87" stroke="#1f2937" strokeWidth="2.5" strokeLinecap="round"/>
      <ellipse className={animated ? 'animate-tear' : ''} cx="76" cy="50" rx="2.5" ry="4" fill="rgba(0,212,255,0.5)"/>
      {feet()}
    </>
  );

  else if (M === 'giggling') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(0,212,255,0.14)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(0,212,255,0.3)" strokeWidth="2.5"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M15,62 L5,58 L13,62 L5,66 Z" fill="#FFD700"/>
        <path d="M85,62 L95,58 L87,62 L95,66 Z" fill="#FFD700"/>
      </g>
      {wrapEyes(
        <>
          <path d="M29,64 Q38,56 47,64" stroke="#1f2937" strokeWidth="3" fill="none" strokeLinecap="round"/>
          <path d="M53,64 Q62,56 71,64" stroke="#1f2937" strokeWidth="3" fill="none" strokeLinecap="round"/>
        </>
      )}
      <path d="M36,84 Q50,102 64,84" stroke="#1f2937" strokeWidth="2.5" fill="#1f2937" strokeLinecap="round"/>
      <circle cx="26" cy="76" r="5" fill="rgba(255,107,157,0.15)"/>
      <circle cx="74" cy="76" r="5" fill="rgba(255,107,157,0.15)"/>
      <text className={animated ? 'animate-spark' : ''} x="74" y="44" fill="#FFD700" fontSize="10" fontWeight="bold">ha</text>
      {feet()}
    </>
  );

  else if (M === 'love') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(255,107,157,0.10)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(255,107,157,0.22)" strokeWidth="2.5"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M10,50 C10,46 14,44 16,46 C18,44 22,46 22,50 C22,55 16,59 16,59 C16,59 10,55 10,50 Z" fill="#FF6B9D" opacity="0.7"/>
        <path d="M80,40 C80,37 83,35.5 84.5,37 C86,35.5 89,37 89,40 C89,43.5 84.5,46 84.5,46 C84.5,46 80,43.5 80,40 Z" fill="#FF6B9D" opacity="0.6"/>
        <path d="M72,90 C72,88 74,87 75,88 C76,87 78,88 78,90 C78,92.5 75,94 75,94 C75,94 72,92.5 72,90 Z" fill="#FF6B9D" opacity="0.5"/>
      </g>
      {wrapEyes(
        <>
          <path d="M32,64 C32,60 35,58 38,61 C41,58 44,60 44,64 C44,69 38,73 38,73 C38,73 32,69 32,64 Z" fill="#FF6B9D"/>
          <path d="M56,64 C56,60 59,58 62,61 C65,58 68,60 68,64 C68,69 62,73 62,73 C62,73 56,69 56,64 Z" fill="#FF6B9D"/>
        </>
      )}
      <path d="M38,85 Q50,97 62,85" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <circle cx="26" cy="78" r="5.5" fill="rgba(255,107,157,0.18)"/>
      <circle cx="74" cy="78" r="5.5" fill="rgba(255,107,157,0.18)"/>
      {feet()}
    </>
  );

  else if (M === 'disappointed') inner = (
    <>
      <circle cx="50" cy="70" r="46" fill="rgba(0,212,255,0.07)"/>
      <circle cx="50" cy="70" r="41" fill="none" stroke="rgba(0,212,255,0.12)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''} opacity="0.5">
        <ellipse cx="50" cy="30" rx="12" ry="6" fill="#94A3B8"/>
        <ellipse cx="42" cy="32" rx="7" ry="5" fill="#94A3B8"/>
        <ellipse cx="58" cy="32" rx="7" ry="5" fill="#94A3B8"/>
        <line x1="44" y1="37" x2="44" y2="42" stroke="#94A3B8" strokeWidth="1.5" strokeLinecap="round"/>
        <line x1="50" y1="37" x2="50" y2="44" stroke="#94A3B8" strokeWidth="1.5" strokeLinecap="round"/>
        <line x1="56" y1="37" x2="56" y2="41" stroke="#94A3B8" strokeWidth="1.5" strokeLinecap="round"/>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="66" rx="9" ry="10" fill="white"/>
          <ellipse cx="62" cy="66" rx="9" ry="10" fill="white"/>
          <circle cx="40" cy="69" r="4.5" fill="#1f2937"/>
          <circle cx="64" cy="69" r="4.5" fill="#1f2937"/>
          <circle cx="42" cy="67" r="1.5" fill="white"/>
          <circle cx="66" cy="67" r="1.5" fill="white"/>
          <path d="M28,60 L44,63" stroke="#1f2937" strokeWidth="1.8" strokeLinecap="round"/>
          <path d="M72,60 L56,63" stroke="#1f2937" strokeWidth="1.8" strokeLinecap="round"/>
        </>
      )}
      <path d="M40,89 L60,89" stroke="#1f2937" strokeWidth="2.5" strokeLinecap="round"/>
      {feet(g.stroke, 3.5, 6)}
    </>
  );

  else if (M === 'zen') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(157,78,221,0.08)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(157,78,221,0.18)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''} opacity="0.6">
        <text x="12" y="56" fontSize="7" fill="#9D4EDD">✦</text>
        <text x="84" y="56" fontSize="7" fill="#9D4EDD">✦</text>
        <text x="48" y="28" fontSize="6" fill="#9D4EDD">✦</text>
      </g>
      <path d="M30,66 Q38,60 46,66" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <path d="M54,66 Q62,60 70,66" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <path d="M42,86 Q50,92 58,86" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      {feet()}
    </>
  );

  else if (M === 'mischievous') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="48" fill="rgba(0,212,255,0.12)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="42" fill="none" stroke="rgba(0,212,255,0.25)" strokeWidth="2"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M82,70 L92,66 L84,70 L92,74 Z" fill={g.accent}/>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="9" ry="11" fill="white"/>
          <circle cx="42" cy="66" r="5" fill="#1f2937"/>
          <circle cx="44" cy="63" r="2" fill="white"/>
          <ellipse cx="62" cy="66" rx="9" ry="6" fill="white"/>
          <circle cx="65" cy="66" r="4" fill="#1f2937"/>
          <circle cx="67" cy="64" r="1.5" fill="white"/>
          <path d="M28,54 Q38,48 48,54" stroke="#1f2937" strokeWidth="2" fill="none" strokeLinecap="round"/>
        </>
      )}
      <path d="M40,86 Q50,90 60,83" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      {feet()}
    </>
  );

  else if (M === 'amazed') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="52" fill="rgba(255,215,0,0.10)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="46" fill="none" stroke="rgba(255,215,0,0.25)" strokeWidth="2.5"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <line x1="50" y1="25" x2="50" y2="15" stroke="#FFD700" strokeWidth="2" strokeLinecap="round"/>
        <line x1="25" y1="42" x2="18" y2="35" stroke="#FFD700" strokeWidth="1.5" strokeLinecap="round"/>
        <line x1="75" y1="42" x2="82" y2="35" stroke="#FFD700" strokeWidth="1.5" strokeLinecap="round"/>
        <line x1="12" y1="65" x2="4" y2="63" stroke="#FFD700" strokeWidth="1.5" strokeLinecap="round"/>
        <line x1="88" y1="65" x2="96" y2="63" stroke="#FFD700" strokeWidth="1.5" strokeLinecap="round"/>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="65" rx="11" ry="12" fill="white"/>
          <ellipse cx="62" cy="65" rx="11" ry="12" fill="white"/>
          <circle cx="40" cy="66" r="5.5" fill="#1f2937"/>
          <circle cx="64" cy="66" r="5.5" fill="#1f2937"/>
          <text x="37" y="64" fontSize="7" fill="white">★</text>
          <text x="61" y="64" fontSize="7" fill="white">★</text>
        </>
      )}
      <ellipse cx="50" cy="89" rx="7" ry="7" fill="#1f2937"/>
      {feet()}
    </>
  );

  else if (M === 'cheerful') inner = (
    <>
      <circle className={animated ? 'animate-pulse-glow' : ''} cx="50" cy="70" r="50" fill="rgba(0,212,255,0.15)"/>
      <circle className={animated ? 'animate-ring-pulse' : ''} cx="50" cy="70" r="44" fill="none" stroke="rgba(0,212,255,0.3)" strokeWidth="2.5"/>
      <circle cx="50" cy="70" r="32" fill={`url(#${gid})`} stroke={g.stroke} strokeWidth="2"/>
      <g className={animated ? 'animate-spark' : ''}>
        <path d="M15,62 L5,58 L13,62 L5,66 Z" fill="#FFD700"/>
        <path d="M85,62 L95,58 L87,62 L95,66 Z" fill="#FFD700"/>
        <path d="M50,25 L46,15 L50,22 L54,15 Z" fill="#FFD700"/>
      </g>
      {wrapEyes(
        <>
          <ellipse cx="38" cy="64" rx="10" ry="11" fill="white"/>
          <ellipse cx="62" cy="64" rx="10" ry="11" fill="white"/>
          <circle cx="41" cy="64" r="5" fill="#1f2937"/>
          <circle cx="65" cy="64" r="5" fill="#1f2937"/>
          <circle cx="43" cy="61" r="2.5" fill="white"/>
          <circle cx="67" cy="61" r="2.5" fill="white"/>
        </>
      )}
      <path d="M38,84 Q50,96 62,84" stroke="#1f2937" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
      <ellipse cx="52" cy="92" rx="4" ry="3" fill="#FF6B9D" opacity="0.7"/>
      {feet()}
    </>
  );

  // Render accessories in slot order: EFFECT (back) → BADGE → GLASSES → HAT (front)
  const registry = (typeof window !== 'undefined' && window.ACCESSORY_REGISTRY) || {};
  const order = (typeof window !== 'undefined' && window.ACCESSORY_RENDER_ORDER) || ['EFFECT','BADGE','GLASSES','HAT'];
  const accList = Array.isArray(accessories) ? accessories : [];
  const slotted = order.map(slot => accList.find(id => registry[id] && registry[id].slot === slot)).filter(Boolean);

  return (
    <svg
      width={dim.w}
      height={dim.h}
      viewBox="0 0 100 140"
      className={`${bodyCls} ${className}`}
      style={{ animationDelay: '-1s' }}
    >
      <defs>
        <radialGradient id={gid} cx="50%" cy="50%" r="50%">
          <stop offset="0%" style={{ stopColor: g.start }}/>
          <stop offset="100%" style={{ stopColor: g.end }}/>
        </radialGradient>
      </defs>
      {slotted.filter(id => registry[id].slot === 'EFFECT').map(id => {
        const C = registry[id].Render; return <C key={id} gid={`${gid}-${id}`}/>;
      })}
      {inner}
      {slotted.filter(id => registry[id].slot !== 'EFFECT').map(id => {
        const C = registry[id].Render; return <C key={id} gid={`${gid}-${id}`}/>;
      })}
    </svg>
  );
}

window.PulseMascot = PulseMascot;