// mascot.jsx — 吉祥物「樂樂」(小木偶 / 木偶人，呼應「木育」與木製樂器教具)
// 優先載入 assets/mascot-<pose>.png；找不到才用內建 SVG。
const MASCOT_POSE = { happy: 'idle', wink: 'idle', sleep: 'idle', wave: 'wave', cheer: 'cheer' };
function Mascot({ mood = 'happy', size = 120, style = {} }) {
  const pose = MASCOT_POSE[mood] || 'idle';
  if (window.Art) return <window.Art id={'mascot-' + pose} size={size} style={style} fallback={<MascotSVG mood={mood} size={size} style={style} />} />;
  return <MascotSVG mood={mood} size={size} style={style} />;
}
function MascotSVG({ mood = 'happy', size = 120, style = {} }) {
  // 音樂小精靈：奶油白圓頭、橘色圓鼻、小黑豆眼、彩色尖角帽、短手短腳
  const HEAD = '#FFF4E4', HEADLINE = '#EAD3AE', NOSE = '#F2913D', BODY = '#79C7C7', EYE = '#3A2E22', CHEEK = '#F4A98C';
  const eye = (cx) => {
    if (mood === 'wink' && cx > 100) return <path d={`M${cx - 6} 88 q6 6 12 0`} stroke={EYE} strokeWidth="3.4" fill="none" strokeLinecap="round" />;
    if (mood === 'sleep') return <path d={`M${cx - 5} 88 q5 4 10 0`} stroke={EYE} strokeWidth="3" fill="none" strokeLinecap="round" />;
    return <g><circle cx={cx} cy="88" r="6" fill={EYE} /><circle cx={cx + 2} cy="86" r="2" fill="#fff" /></g>;
  };
  const mouth = mood === 'cheer'
    ? <path d="M90 116 q10 12 20 0 q-10 6 -20 0 Z" fill="#9E5B4A" />
    : <path d="M92 117 q8 7 16 0" stroke="#9E5B4A" strokeWidth="3" fill="none" strokeLinecap="round" />;
  const armUp = mood === 'wave' || mood === 'cheer';
  return (
    <svg viewBox="0 0 200 200" width={size} height={size} style={{ display: 'block', overflow: 'visible', ...style }} role="img" aria-label="吉祥物樂樂">
      <ellipse cx="100" cy="192" rx="40" ry="6" fill="#000" opacity="0.06" />
      {/* legs */}
      <path d="M88 168 l-2 16 M112 168 l2 16" stroke={BODY} strokeWidth="12" strokeLinecap="round" />
      {/* body */}
      <ellipse cx="100" cy="150" rx="30" ry="26" fill={BODY} stroke="#57AEAE" strokeWidth="2" />
      {/* arms */}
      <path d={armUp ? 'M74 142 q-18 -14 -22 -34' : 'M74 146 q-16 6 -18 24'} stroke={BODY} strokeWidth="11" fill="none" strokeLinecap="round" />
      <circle cx={armUp ? 50 : 55} cy={armUp ? 110 : 172} r="7" fill={BODY} />
      <path d="M126 146 q16 6 18 24" stroke={BODY} strokeWidth="11" fill="none" strokeLinecap="round" />
      <circle cx="145" cy="172" r="7" fill={BODY} />
      {/* head */}
      <circle cx="100" cy="92" r="50" fill={HEAD} stroke={HEADLINE} strokeWidth="2" />
      {/* cheeks */}
      <circle cx="72" cy="104" r="9" fill={CHEEK} opacity="0.5" />
      <circle cx="128" cy="104" r="9" fill={CHEEK} opacity="0.5" />
      {/* eyes */}
      {eye(82)}{eye(118)}
      {/* nose */}
      <circle cx="100" cy="100" r="11" fill={NOSE} />
      <circle cx="96" cy="96" r="3.5" fill="#fff" opacity="0.5" />
      {/* mouth */}
      {mouth}
      {/* 彩色尖角帽 */}
      <polygon points="106,8 70,50 128,44" fill="#3C8FC0" />
      <polygon points="92,30 122,26 126,38 86,42" fill="#F2C200" />
      <path d="M68 50 q31 -10 62 -6" stroke="#E5392F" strokeWidth="7" fill="none" strokeLinecap="round" />
      <circle cx="106" cy="8" r="6" fill="#E5392F" />
    </svg>
  );
}

// 吉祥物 + 對話泡泡
function MascotSay({ text, mood = 'happy', size = 96 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Mascot mood={mood} size={size} style={{ flex: '0 0 auto' }} />
      <div className="speech" style={{
        position: 'relative', background: 'var(--surface)', border: '2px solid var(--border)',
        borderRadius: 20, padding: '14px 20px', fontSize: 'var(--fs-lead)', fontWeight: 700,
        color: 'var(--ink)', boxShadow: 'var(--shadow-soft)', maxWidth: 520,
      }}>
        <span style={{
          position: 'absolute', left: -10, top: '50%', marginTop: -8, width: 16, height: 16,
          background: 'var(--surface)', borderLeft: '2px solid var(--border)', borderBottom: '2px solid var(--border)',
          transform: 'rotate(45deg)',
        }} />
        {text}
      </div>
    </div>
  );
}

Object.assign(window, { Mascot, MascotSay });