// Auri — Resume Aura mascot. Reacts to score.
// score 0-100 → expression. Returns inline SVG.

function Auri({ score = 82, size = 120, style = {} }) {
  // mood from score
  const mood = score >= 85 ? 'ecstatic' : score >= 70 ? 'happy' : score >= 50 ? 'neutral' : score >= 30 ? 'worried' : 'cooked';
  const face = {
    ecstatic: { mouth: 'smileBig', eyes: 'sparkle', tint: '#fae14b' },
    happy:    { mouth: 'smile',    eyes: 'open',    tint: '#b7f0cd' },
    neutral:  { mouth: 'flat',     eyes: 'open',    tint: '#ffffff' },
    worried:  { mouth: 'worry',    eyes: 'worry',   tint: '#ffd0c4' },
    cooked:   { mouth: 'shocked',  eyes: 'x',       tint: '#ff8a7a' },
  }[mood];

  const id = React.useId();

  return (
    <div style={{ width: size, height: size, position: 'relative', ...style }} className="float">
      <svg width={size} height={size} viewBox="0 0 120 120">
        <defs>
          <radialGradient id={`body-${id}`} cx="35%" cy="30%" r="75%">
            <stop offset="0%" stopColor="#ff9fe0"/>
            <stop offset="35%" stopColor="#ff4db8"/>
            <stop offset="70%" stopColor="#8a5cf6"/>
            <stop offset="100%" stopColor="#4dd6ff"/>
          </radialGradient>
          <radialGradient id={`glow-${id}`} cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={face.tint} stopOpacity="0.5"/>
            <stop offset="100%" stopColor={face.tint} stopOpacity="0"/>
          </radialGradient>
        </defs>
        {/* glow */}
        <circle cx="60" cy="60" r="58" fill={`url(#glow-${id})`}/>
        {/* blob body — slight squash */}
        <ellipse cx="60" cy="62" rx="40" ry="38" fill={`url(#body-${id})`}/>
        {/* highlight */}
        <ellipse cx="48" cy="44" rx="10" ry="6" fill="#ffffff" opacity="0.55"/>
        {/* eyes */}
        {face.eyes === 'open' && <>
          <ellipse cx="49" cy="58" rx="4" ry="5" fill="#1a0d2e" className="eye-blink"/>
          <ellipse cx="71" cy="58" rx="4" ry="5" fill="#1a0d2e" className="eye-blink"/>
          <circle cx="50.5" cy="56.5" r="1.4" fill="#fff"/>
          <circle cx="72.5" cy="56.5" r="1.4" fill="#fff"/>
        </>}
        {face.eyes === 'sparkle' && <>
          <path d="M49 54 L51 58 L55 60 L51 62 L49 66 L47 62 L43 60 L47 58 Z" fill="#fff"/>
          <path d="M71 54 L73 58 L77 60 L73 62 L71 66 L69 62 L65 60 L69 58 Z" fill="#fff"/>
        </>}
        {face.eyes === 'worry' && <>
          <path d="M44 57 Q49 53 54 57" stroke="#1a0d2e" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M66 57 Q71 53 76 57" stroke="#1a0d2e" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </>}
        {face.eyes === 'x' && <>
          <path d="M45 55 l8 8 M53 55 l-8 8" stroke="#1a0d2e" strokeWidth="2.5" strokeLinecap="round"/>
          <path d="M67 55 l8 8 M75 55 l-8 8" stroke="#1a0d2e" strokeWidth="2.5" strokeLinecap="round"/>
        </>}
        {/* mouth */}
        {face.mouth === 'smileBig' && <path d="M48 72 Q60 84 72 72" stroke="#1a0d2e" strokeWidth="3" fill="#2a1a47" strokeLinecap="round"/>}
        {face.mouth === 'smile'    && <path d="M50 72 Q60 80 70 72" stroke="#1a0d2e" strokeWidth="3" fill="none" strokeLinecap="round"/>}
        {face.mouth === 'flat'     && <line x1="52" y1="74" x2="68" y2="74" stroke="#1a0d2e" strokeWidth="3" strokeLinecap="round"/>}
        {face.mouth === 'worry'    && <path d="M50 78 Q60 72 70 78" stroke="#1a0d2e" strokeWidth="3" fill="none" strokeLinecap="round"/>}
        {face.mouth === 'shocked'  && <ellipse cx="60" cy="75" rx="5" ry="6" fill="#1a0d2e"/>}
        {/* cheek blush */}
        {(mood === 'happy' || mood === 'ecstatic') && <>
          <circle cx="42" cy="68" r="4" fill="#ff4db8" opacity="0.5"/>
          <circle cx="78" cy="68" r="4" fill="#ff4db8" opacity="0.5"/>
        </>}
        {/* sparkles around ecstatic */}
        {mood === 'ecstatic' && <>
          <path d="M18 30 l1.5 3 l3 1.5 l-3 1.5 l-1.5 3 l-1.5-3 l-3-1.5 l3-1.5 z" fill="#fae14b"/>
          <path d="M102 40 l1 2 l2 1 l-2 1 l-1 2 l-1-2 l-2-1 l2-1 z" fill="#fae14b"/>
          <path d="M100 88 l1.5 3 l3 1.5 l-3 1.5 l-1.5 3 l-1.5-3 l-3-1.5 l3-1.5 z" fill="#fff" opacity="0.8"/>
        </>}
      </svg>
    </div>
  );
}

window.Auri = Auri;