// ============ CHARACTER AVATAR ============
// Stylized geometric mascot — round citrus head with visor, simple body.
// Colors come from each class palette.
function CharacterAvatar({ palette, glyph, size = "lg" }) {
  const p = palette || { skin: "#E85D1A", skinDark: "#B84410", accent: "#FFCA7D", visor: "#1A120B" };
  return (
    <svg viewBox="0 0 200 240" className={`char-avatar char-avatar-${size}`} preserveAspectRatio="xMidYMax meet">
      <defs>
        <radialGradient id={`head-${p.skin}`} cx="35%" cy="30%" r="80%">
          <stop offset="0%" stopColor={p.accent} />
          <stop offset="55%" stopColor={p.skin} />
          <stop offset="100%" stopColor={p.skinDark} />
        </radialGradient>
        <linearGradient id={`body-${p.skin}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.skin} />
          <stop offset="100%" stopColor={p.skinDark} />
        </linearGradient>
      </defs>

      {/* shadow */}
      <ellipse cx="100" cy="232" rx="60" ry="6" fill="#000" opacity="0.18" />

      {/* body / shoulders */}
      <path d="M 50 240 Q 50 170 100 170 Q 150 170 150 240 Z"
            fill={`url(#body-${p.skin})`} />
      {/* collar plate */}
      <path d="M 70 175 L 100 165 L 130 175 L 130 200 L 70 200 Z"
            fill={p.skinDark} opacity="0.4" />
      <line x1="100" y1="170" x2="100" y2="200" stroke={p.accent} strokeWidth="1.5" opacity="0.5" />

      {/* neck */}
      <rect x="92" y="155" width="16" height="22" fill={p.skinDark} />

      {/* head — citrus orb */}
      <circle cx="100" cy="100" r="62" fill={`url(#head-${p.skin})`} />
      {/* citrus segments — subtle */}
      {Array.from({ length: 8 }).map((_, i) => {
        const a = (i / 8) * Math.PI * 2;
        return <line key={i} x1="100" y1="100" x2={100 + Math.cos(a) * 62} y2={100 + Math.sin(a) * 62}
                     stroke={p.accent} strokeWidth="1" opacity="0.18" />;
      })}
      <circle cx="100" cy="100" r="62" fill="none" stroke={p.skinDark} strokeWidth="1.5" opacity="0.5" />

      {/* visor — wide horizontal band */}
      <rect x="60" y="86" width="80" height="22" rx="11" fill={p.visor} />
      <rect x="60" y="86" width="80" height="22" rx="11" fill="url(#visor-shine)" opacity="0.3" />
      {/* visor inner glow / class glyph */}
      <text x="100" y="103" textAnchor="middle"
            fill={p.accent}
            style={{ fontFamily: "var(--display-font)", fontSize: 16, fontWeight: 600 }}>
        {glyph}
      </text>
      {/* tiny visor lights */}
      <circle cx="74" cy="97" r="1.5" fill={p.accent} opacity="0.9" />
      <circle cx="126" cy="97" r="1.5" fill={p.accent} opacity="0.9" />

      {/* citrus stem on top */}
      <ellipse cx="100" cy="40" rx="6" ry="8" fill={p.skinDark} />
      <path d="M 100 40 Q 96 32 102 28 Q 108 32 100 40" fill={p.accent} opacity="0.7" />

      {/* highlight */}
      <ellipse cx="80" cy="75" rx="14" ry="8" fill="#FFF" opacity="0.18" transform="rotate(-25 80 75)" />

      <defs>
        <linearGradient id="visor-shine" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFF" />
          <stop offset="100%" stopColor="transparent" />
        </linearGradient>
      </defs>
    </svg>
  );
}

window.CharacterAvatar = CharacterAvatar;