// Use the actual brand PNG mascot — wrapped with reactive states.
const Mascot = ({ mood = 'idle', look = [0, 0], size = 320, sparkle = true, blink = false }) => {
  const rotX = look[0] * 4;
  const rotY = look[1] * 2;
  const scale = mood === 'excited' ? 1.04 : 1;
  return (
    <div style={{
      width: size, height: size,
      position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      transition: 'transform .35s cubic-bezier(.2,.8,.2,1)',
      transform: `translate(${rotX}px, ${rotY}px) scale(${scale})`,
    }}>
      <img src="https://res.cloudinary.com/do6e5mbge/image/upload/v1777940000/mascot-1_v8bgmc.png" alt="Gray the goat" style={{
        width: '100%', height: '100%', objectFit: 'contain',
        filter: blink ? 'brightness(1)' : 'drop-shadow(0 12px 32px rgba(0,232,120,0.25))',
        transition: 'filter .25s ease',
      }} />
      {sparkle && (
        <>
          <span style={{ position: 'absolute', top: '8%', right: '6%', fontSize: 22, color: '#FFB830', animation: 'drift 3.4s ease-in-out infinite' }}>✦</span>
          <span style={{ position: 'absolute', top: '22%', left: '4%', fontSize: 16, color: '#FFB830', animation: 'drift 4.2s ease-in-out infinite .8s' }}>✦</span>
          <span style={{ position: 'absolute', bottom: '18%', right: '8%', fontSize: 14, color: '#FFB830', animation: 'drift 3.8s ease-in-out infinite 1.4s' }}>✦</span>
        </>
      )}
    </div>
  );
};
window.Mascot = Mascot;