// Mascot — SVG geometric space creatures, animated
const Mascot = ({ id = 'nebu', size = 120, mood = 'idle' }) => {
  const styles = {
    nebu:   { color: '#00e5ff', dark: '#0090b3', shape: 'blob' },
    pixel:  { color: '#ff3d8a', dark: '#d91c6c', shape: 'square' },
    cometa: { color: '#ffd60a', dark: '#f5b800', shape: 'star' },
    tachi:  { color: '#7cff5e', dark: '#4fd935', shape: 'triangle' },
    nucleo: { color: '#a06cff', dark: '#7a3dff', shape: 'gem' },
    quark:  { color: '#ff5e62', dark: '#c0303a', shape: 'flame' }
  };
  const s = styles[id] || styles.nebu;
  const w = size, h = size;

  const eyes = (
    <g>
      <circle cx="42" cy="55" r="9" fill="#fff" />
      <circle cx="78" cy="55" r="9" fill="#fff" />
      <circle cx={mood === 'sad' ? 42 : 44} cy={mood === 'sad' ? 58 : 56} r="4.5" fill="#000" />
      <circle cx={mood === 'sad' ? 78 : 80} cy={mood === 'sad' ? 58 : 56} r="4.5" fill="#000" />
      <circle cx="46" cy="53" r="1.6" fill="#fff" />
      <circle cx="82" cy="53" r="1.6" fill="#fff" />
    </g>
  );
  const mouth = mood === 'happy'
    ? <path d="M 48 75 Q 60 88 72 75" stroke="#000" strokeWidth="3" fill="none" strokeLinecap="round" />
    : mood === 'sad'
    ? <path d="M 48 82 Q 60 70 72 82" stroke="#000" strokeWidth="3" fill="none" strokeLinecap="round" />
    : <path d="M 50 75 Q 60 82 70 75" stroke="#000" strokeWidth="3" fill="none" strokeLinecap="round" />;

  let body;
  if (s.shape === 'blob') {
    body = <path d="M60 12 C 90 12 100 35 100 55 C 100 85 80 100 60 100 C 40 100 20 85 20 55 C 20 35 30 12 60 12 Z" fill={s.color} stroke={s.dark} strokeWidth="4" />;
  } else if (s.shape === 'square') {
    body = <rect x="20" y="20" width="80" height="80" rx="14" fill={s.color} stroke={s.dark} strokeWidth="4" />;
  } else if (s.shape === 'star') {
    body = <path d="M60 10 L72 42 L106 44 L78 64 L88 96 L60 78 L32 96 L42 64 L14 44 L48 42 Z" fill={s.color} stroke={s.dark} strokeWidth="4" strokeLinejoin="round" />;
  } else if (s.shape === 'triangle') {
    body = <path d="M60 14 L104 96 L16 96 Z" fill={s.color} stroke={s.dark} strokeWidth="4" strokeLinejoin="round" />;
  } else if (s.shape === 'gem') {
    body = <path d="M60 12 L100 40 L80 100 L40 100 L20 40 Z" fill={s.color} stroke={s.dark} strokeWidth="4" strokeLinejoin="round" />;
  } else if (s.shape === 'flame') {
    body = <path d="M60 8 C 80 30 95 40 95 65 C 95 90 78 105 60 105 C 42 105 25 90 25 65 C 25 40 40 30 60 8 Z" fill={s.color} stroke={s.dark} strokeWidth="4" />;
  }

  // antenna
  const antenna = (
    <g>
      <line x1="60" y1="20" x2="60" y2="6" stroke={s.dark} strokeWidth="3" />
      <circle cx="60" cy="5" r="4" fill="#fff" stroke={s.dark} strokeWidth="2" />
    </g>
  );

  return (
    <div className="mascot-wrap float-anim" style={{ display: 'inline-block', lineHeight: 0 }}>
      <svg width={w} height={h} viewBox="0 0 120 120">
        {antenna}
        {body}
        {/* cheek glow */}
        <circle cx="32" cy="70" r="6" fill="#fff" opacity="0.3" />
        <circle cx="88" cy="70" r="6" fill="#fff" opacity="0.3" />
        {eyes}
        {mouth}
      </svg>
    </div>
  );
};

window.Mascot = Mascot;