// mascot.jsx — Chopstick mascot + glyphs (theme-aware).

function Mascot({ theme, mood = 'idle', size = 120, wink = false }) {
  const wood = theme.mascotWood, shade = theme.mascotShade, ink = theme.mascotInk;
  const w = size, h = size * 1.6;

  const mouths = {
    idle:    'M44 86 Q50 90 56 86',
    happy:   'M40 84 Q50 96 60 84',
    excited: 'M38 82 Q50 102 62 82 Q50 92 38 82 Z',
    sad:     'M40 92 Q50 84 60 92',
    wow:     'M44 86 Q50 96 56 86 Q50 92 44 86 Z',
    thinking:'M44 88 Q50 86 56 88',
  };

  const armsUp = mood === 'excited' || mood === 'happy';
  const eyeY = mood === 'sad' ? 70 : 68;
  const blink = mood === 'excited';

  return (
    <svg viewBox="0 0 100 160" width={w} height={h} style={{ display: 'block', overflow: 'visible' }}>
      <ellipse cx="50" cy="154" rx="22" ry="3" fill={ink} opacity="0.18" />

      <path d="M30 26 Q30 18 38 18 L62 18 Q70 18 70 26 L66 138 Q66 148 50 152 Q34 148 34 138 Z"
            fill={wood} stroke={ink} strokeWidth="3" strokeLinejoin="round" />
      <path d="M40 132 L60 132 L56 146 Q50 150 44 146 Z"
            fill={shade} stroke={ink} strokeWidth="2.5" strokeLinejoin="round" />
      <path d="M40 30 L40 110" stroke={ink} strokeWidth="1.5" opacity="0.18" />

      {armsUp ? (
        <>
          <path d="M30 70 Q14 50 18 30" stroke={ink} strokeWidth="3" fill="none" strokeLinecap="round" />
          <path d="M70 70 Q86 50 82 30" stroke={ink} strokeWidth="3" fill="none" strokeLinecap="round" />
          <circle cx="18" cy="28" r="4.5" fill={wood} stroke={ink} strokeWidth="2.5" />
          <circle cx="82" cy="28" r="4.5" fill={wood} stroke={ink} strokeWidth="2.5" />
        </>
      ) : (
        <>
          <path d="M30 78 Q22 86 22 96" stroke={ink} strokeWidth="3" fill="none" strokeLinecap="round" />
          <path d="M70 78 Q78 86 78 96" stroke={ink} strokeWidth="3" fill="none" strokeLinecap="round" />
          <circle cx="22" cy="98" r="4.5" fill={wood} stroke={ink} strokeWidth="2.5" />
          <circle cx="78" cy="98" r="4.5" fill={wood} stroke={ink} strokeWidth="2.5" />
        </>
      )}

      {blink ? (
        <>
          <path d={`M40 ${eyeY} Q44 ${eyeY-3} 48 ${eyeY}`} stroke={ink} strokeWidth="3" fill="none" strokeLinecap="round" />
          <path d={`M52 ${eyeY} Q56 ${eyeY-3} 60 ${eyeY}`} stroke={ink} strokeWidth="3" fill="none" strokeLinecap="round" />
        </>
      ) : (
        <>
          {wink
            ? <path d={`M40 ${eyeY} Q44 ${eyeY-3} 48 ${eyeY}`} stroke={ink} strokeWidth="3" fill="none" strokeLinecap="round" />
            : <circle cx="44" cy={eyeY} r="3.5" fill={ink} />}
          <circle cx="56" cy={eyeY} r="3.5" fill={ink} />
        </>
      )}

      {(mood === 'happy' || mood === 'excited') && (
        <>
          <circle cx="34" cy="78" r="3" fill={theme.primary} opacity="0.55" />
          <circle cx="66" cy="78" r="3" fill={theme.primary} opacity="0.55" />
        </>
      )}

      <path d={mouths[mood] || mouths.idle}
            stroke={ink} strokeWidth="3"
            fill={mood === 'excited' || mood === 'wow' ? ink : 'none'}
            strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Coin({ theme, size = 18 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'inline-block', verticalAlign: '-3px' }}>
      <circle cx="12" cy="12" r="10" fill={theme.yellow} stroke={theme.fg} strokeWidth="2" />
      <circle cx="12" cy="12" r="6.5" fill="none" stroke={theme.fg} strokeWidth="1.5" opacity="0.7" />
      <text x="12" y="16" textAnchor="middle" fontFamily={theme.fontHead} fontSize="9" fontWeight="900" fill={theme.fg}>¥</text>
    </svg>
  );
}

function Star({ theme, size = 18, filled = true }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'inline-block', verticalAlign: '-3px' }}>
      <path d="M12 2 L14.6 9 L22 9.5 L16.4 14.2 L18.4 21.5 L12 17.3 L5.6 21.5 L7.6 14.2 L2 9.5 L9.4 9 Z"
            fill={filled ? theme.primary : 'transparent'} stroke={theme.fg} strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  );
}

function Flame({ theme, size = 18 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} style={{ display: 'inline-block', verticalAlign: '-3px' }}>
      <path d="M12 2 C 14 6, 18 8, 18 13 C 18 17, 15 21, 12 21 C 9 21, 6 17, 6 13 C 6 10, 8 9, 9 7 C 10 9, 11 9, 12 7 Z"
            fill={theme.red} stroke={theme.fg} strokeWidth="2" strokeLinejoin="round"/>
      <path d="M12 11 C 13 13, 15 14, 15 16 C 15 18, 13.5 19.5, 12 19.5 C 10.5 19.5, 9 18, 9 16 C 9 15, 10 14.5, 11 13.5 Z"
            fill={theme.yellow} stroke="none"/>
    </svg>
  );
}

function Speaker({ theme, size = 28, color }) {
  const c = color || theme.fg;
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}>
      <path d="M3 9 L3 15 L7 15 L12 19 L12 5 L7 9 Z" fill={c} stroke={c} strokeWidth="1.5" strokeLinejoin="round"/>
      <path d="M15 8 Q18 12 15 16" stroke={c} strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M18 5 Q23 12 18 19" stroke={c} strokeWidth="2" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

function Mic({ theme, size = 28, color }) {
  const c = color || theme.fg;
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}>
      <rect x="9" y="3" width="6" height="12" rx="3" fill={c} stroke={c} strokeWidth="1.5"/>
      <path d="M5 12 Q5 19 12 19 Q19 19 19 12" stroke={c} strokeWidth="2" fill="none" strokeLinecap="round"/>
      <line x1="12" y1="19" x2="12" y2="22" stroke={c} strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );
}

function Sparkle({ theme, size = 18, color }) {
  const c = color || theme.primary;
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}>
      <path d="M12 2 L13.5 9 L20 10.5 L13.5 12 L12 19 L10.5 12 L4 10.5 L10.5 9 Z" fill={c} stroke={theme.fg} strokeWidth="1.2"/>
      <circle cx="19" cy="5"  r="1.5" fill={c}/>
      <circle cx="5"  cy="19" r="1.2" fill={c}/>
    </svg>
  );
}

Object.assign(window, { Mascot, Coin, Star, Flame, Speaker, Mic, Sparkle });