// Roby — interactive mascot, fresh build.
//
// Design rules:
//   - The body NEVER moves. No lean, no breathing, nothing that might
//     fight with the inner moving parts.
//   - Only 4 elements move, each isolated in its own <g>:
//       1. Eyes (pupils translate inside white sclera) → eyesRef
//       2. Antenna (tilts around its base)             → antennaRef
//       3. Right arm (rotates around the shoulder)      → waveRef
//       4. Chest core (CSS pulse, runs on a class)
//   - All three SVG-ref'd groups use the SVG `transform` attribute set by
//     the parent's rAF loop. SVG transforms accept (angle, cx, cy) for
//     rotation, so the pivot is exact — no transform-origin guessing.
//   - Mouth and cheeks change with `mood` prop (React state) only. Static
//     between updates.

function Mascot({ size = 320, className = '', eyesRef, antennaRef, waveRef, mood = 'idle' }) {
  const isHappy = mood === 'hover' || mood === 'click';
  const isClick = mood === 'click';
  return (
    <svg viewBox="0 0 320 340" width={size} className={className} aria-hidden="true">
      <defs>
        <linearGradient id="bot-body" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#7846E4"/>
          <stop offset="0.55" stopColor="#5A1FD0"/>
          <stop offset="1" stopColor="#33036E"/>
        </linearGradient>
        <linearGradient id="bot-body-side" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0" stopColor="#33036E"/>
          <stop offset="1" stopColor="#22024C"/>
        </linearGradient>
        <linearGradient id="bot-face" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#FBF7F0"/>
          <stop offset="1" stopColor="#D5C4F0"/>
        </linearGradient>
        <radialGradient id="bot-cheek" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="#FF8A3D" stopOpacity="0.95"/>
          <stop offset="1" stopColor="#FF8A3D" stopOpacity="0"/>
        </radialGradient>
        <radialGradient id="bot-glow" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="#FFC93C"/>
          <stop offset="1" stopColor="#FFC93C" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id="stud" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#7846E4"/>
          <stop offset="1" stopColor="#41038F"/>
        </linearGradient>
        <radialGradient id="hand-grad" cx="0.4" cy="0.35" r="0.7">
          <stop offset="0" stopColor="#9F70F0"/>
          <stop offset="1" stopColor="#5A1FD0"/>
        </radialGradient>
      </defs>

      {/* soft ambient glow behind body */}
      <circle cx="160" cy="200" r="80" fill="url(#bot-glow)" opacity={isHappy ? 0.78 : 0.45} style={{transition: 'opacity 0.25s'}}/>

      {/* ground shadow */}
      <ellipse cx="160" cy="320" rx="92" ry="9" fill="#22024C" opacity="0.22"/>

      {/* ─── ANTENNA ─── pivots around its base (160, 58) via SVG attr */}
      <g ref={antennaRef} transform="rotate(0 160 58)">
        <line x1="160" y1="32" x2="160" y2="58" stroke="#33036E" strokeWidth="7" strokeLinecap="round"/>
        <circle cx="160" cy="26" r="11" fill="#FFC93C" stroke="#33036E" strokeWidth="4"/>
        <circle cx="156" cy="22" r="3" fill="#fff" opacity="0.9"/>
      </g>

      {/* head studs */}
      <g>
        <ellipse cx="118" cy="58" rx="14" ry="5" fill="#22024C" opacity="0.4"/>
        <rect x="104" y="48" width="28" height="14" rx="6" fill="url(#stud)"/>
        <ellipse cx="118" cy="50" rx="11" ry="3.5" fill="#fff" opacity="0.18"/>

        <ellipse cx="202" cy="58" rx="14" ry="5" fill="#22024C" opacity="0.4"/>
        <rect x="188" y="48" width="28" height="14" rx="6" fill="url(#stud)"/>
        <ellipse cx="202" cy="50" rx="11" ry="3.5" fill="#fff" opacity="0.18"/>
      </g>

      {/* head */}
      <rect x="64" y="62" width="192" height="128" rx="32" fill="url(#bot-body-side)"/>
      <rect x="60" y="62" width="184" height="128" rx="30" fill="url(#bot-body)"/>
      <path d="M70 78 Q160 60 234 78 L234 96 Q160 80 70 96 Z" fill="#fff" opacity="0.15"/>

      {/* face screen */}
      <rect x="84" y="86" width="136" height="80" rx="20" fill="#22024C"/>
      <rect x="88" y="90" width="128" height="72" rx="17" fill="url(#bot-face)"/>
      <rect x="88" y="90" width="128" height="22" rx="17" fill="#fff" opacity="0.4"/>

      {/* ─── EYES ─── */}
      {/* Sclera (fixed, never moves) */}
      <circle cx="120" cy="128" r="14.5" fill="#fff" stroke="#22024C" strokeWidth="2.2"/>
      <circle cx="184" cy="128" r="14.5" fill="#fff" stroke="#22024C" strokeWidth="2.2"/>
      {/* Subtle inner shadow on sclera for depth */}
      <path d="M107 122 Q120 128 133 122" stroke="#E8DDF7" strokeWidth="1.8" fill="none" opacity="0.6"/>
      <path d="M171 122 Q184 128 197 122" stroke="#E8DDF7" strokeWidth="1.8" fill="none" opacity="0.6"/>

      {/* Pupils group — translated by parent's rAF loop via SVG attr.
          No blink — the eyes stay open. */}
      <g ref={eyesRef} transform="translate(0 0)">
        <circle cx="120" cy="128" r="7" fill="#150133"/>
        <circle cx="184" cy="128" r="7" fill="#150133"/>
        {/* Catch-light */}
        <circle cx="123" cy="125" r="2.6" fill="#fff"/>
        <circle cx="187" cy="125" r="2.6" fill="#fff"/>
        {/* Tiny secondary highlight */}
        <circle cx="117.5" cy="131" r="1.1" fill="#fff" opacity="0.7"/>
        <circle cx="181.5" cy="131" r="1.1" fill="#fff" opacity="0.7"/>
      </g>

      {/* ─── MOUTH ─── three states */}
      {isClick ? (
        <g>
          <ellipse cx="152" cy="153" rx="13" ry="10" fill="#150133"/>
          <ellipse cx="152" cy="157" rx="9" ry="4.5" fill="#FF6B3D"/>
          <ellipse cx="148" cy="148" rx="3" ry="1.5" fill="#fff" opacity="0.3"/>
        </g>
      ) : isHappy ? (
        <path d="M120 144 Q152 174 184 144" stroke="#150133" strokeWidth="6" strokeLinecap="round" fill="none"/>
      ) : (
        <path d="M126 148 Q152 162 178 148" stroke="#150133" strokeWidth="5" strokeLinecap="round" fill="none"/>
      )}

      {/* ─── CHEEKS ─── opacity-only animation (always smooth) */}
      <circle cx="98"  cy="146" r="13" fill="url(#bot-cheek)" opacity={isHappy ? 1 : 0.5} style={{transition: 'opacity 0.25s'}}/>
      <circle cx="206" cy="146" r="13" fill="url(#bot-cheek)" opacity={isHappy ? 1 : 0.5} style={{transition: 'opacity 0.25s'}}/>

      {/* neck */}
      <rect x="124" y="186" width="72" height="10" rx="3" fill="#22024C"/>
      <rect x="128" y="186" width="64" height="4" fill="#fff" opacity="0.15"/>

      {/* body */}
      <rect x="80" y="194" width="160" height="92" rx="24" fill="url(#bot-body-side)"/>
      <rect x="76" y="194" width="152" height="92" rx="22" fill="url(#bot-body)"/>
      <path d="M82 206 Q160 192 220 206 L220 220 Q160 208 82 220 Z" fill="#fff" opacity="0.12"/>

      {/* ─── CHEST CORE ─── static, no pulsing */}
      <g>
        <circle cx="152" cy="240" r="22" fill="#22024C"/>
        <circle cx="152" cy="240" r="17" fill="#FFC93C"/>
        <circle cx="152" cy="240" r="11" fill="#FF8A3D"/>
        <circle cx="148" cy="236" r="4" fill="#fff" opacity="0.85"/>
      </g>

      {/* belt LEDs */}
      <g>
        {[0,1,2].map(i => (
          <circle key={i} cx={188 + i*10} cy={240} r="2.5" fill={i===0?'#9FE7C7':i===1?'#FFC93C':'#FF8A3D'}/>
        ))}
      </g>

      {/* ─── LEFT ARM ─── completely static, hangs at the side */}
      <path d="M76 220 Q56 232 52 264" stroke="#33036E" strokeWidth="14" fill="none" strokeLinecap="round"/>
      <circle cx="50" cy="270" r="15" fill="url(#hand-grad)" stroke="#22024C" strokeWidth="3"/>
      <ellipse cx="46" cy="265" rx="5.5" ry="2.8" fill="#fff" opacity="0.4"/>

      {/* ─── RIGHT ARM ─── pivots around the shoulder (228, 222) via SVG attr.
          When raised at rest, the hand sits up high near head level. The
          parent's rAF loop sweeps a sine wave around this resting position
          when Roby is hovered/clicked, producing a clean wave gesture. */}
      <g ref={waveRef} transform="rotate(0 228 222)">
        <path d="M228 222 Q258 200 270 168" stroke="#33036E" strokeWidth="14" fill="none" strokeLinecap="round"/>
        {/* round palm */}
        <circle cx="270" cy="158" r="16" fill="url(#hand-grad)" stroke="#22024C" strokeWidth="3"/>
        {/* finger-crease */}
        <path d="M261 154 Q270 148 279 154" stroke="#22024C" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.45"/>
        {/* highlight */}
        <ellipse cx="265" cy="154" rx="6" ry="2.8" fill="#fff" opacity="0.45"/>
      </g>

      {/* feet */}
      <rect x="100" y="282" width="48" height="16" rx="6" fill="#22024C"/>
      <rect x="172" y="282" width="48" height="16" rx="6" fill="#22024C"/>
      <rect x="100" y="282" width="48" height="5" rx="3" fill="#fff" opacity="0.18"/>
      <rect x="172" y="282" width="48" height="5" rx="3" fill="#fff" opacity="0.18"/>
    </svg>
  );
}
window.Mascot = Mascot;