// cat.jsx — LingoHub mascot, geometric & original.
// Variants: "headset" (hero), "flashcard" (features), "puzzle", "wave" (footer), "tiny" (logo)

const CatBase = ({ size=180, variant='headset', mood='happy', accent='#FF8A3D', children, className='', style }) => {
  // Body color values (orange tabby palette, original)
  const C = {
    base:   '#FF8A3D',
    baseDk: '#F26A1A',
    baseLt: '#FFB066',
    belly:  '#FFE0C2',
    nose:   '#3a1f12',
    mouth:  '#3a1f12',
    eyeWhite:'#fff',
    pupil:  '#1B140B',
    stripe: '#C04E0E',
    cheek:  'rgba(255,90,90,.22)'
  };
  return (
    <div className={`relative inline-block ${className}`} style={{ width: size, height: size, ...style }}>
      <svg viewBox="0 0 200 200" width={size} height={size} aria-hidden="true">
        <defs>
          <radialGradient id={`bodyG-${variant}`} cx="50%" cy="40%" r="65%">
            <stop offset="0%" stopColor={C.baseLt} />
            <stop offset="65%" stopColor={C.base} />
            <stop offset="100%" stopColor={C.baseDk} />
          </radialGradient>
          <radialGradient id={`headG-${variant}`} cx="40%" cy="35%" r="70%">
            <stop offset="0%" stopColor="#FFC392" />
            <stop offset="60%" stopColor={C.base} />
            <stop offset="100%" stopColor={C.baseDk} />
          </radialGradient>
          <radialGradient id={`bellyG-${variant}`} cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="#FFF1E2" />
            <stop offset="100%" stopColor={C.belly} />
          </radialGradient>
        </defs>

        {/* Tail */}
        <g style={{ transformOrigin: '60px 150px' }} className="anim-tail">
          <path d="M58 150 C 30 150, 18 120, 30 95 C 38 78, 58 78, 60 96"
                fill={`url(#bodyG-${variant})`} stroke={C.baseDk} strokeWidth="2" />
          <path d="M34 100 C 40 95, 50 95, 56 100" stroke={C.stripe} strokeWidth="2.5" fill="none" strokeLinecap="round" opacity=".7" />
        </g>

        {/* Body */}
        <ellipse cx="100" cy="148" rx="48" ry="36" fill={`url(#bodyG-${variant})`} stroke={C.baseDk} strokeWidth="2" />
        <ellipse cx="100" cy="156" rx="28" ry="22" fill={`url(#bellyG-${variant})`} opacity=".95" />

        {/* Legs / paws (front) */}
        <ellipse cx="82" cy="180" rx="11" ry="8" fill={`url(#bodyG-${variant})`} stroke={C.baseDk} strokeWidth="1.5" />
        <ellipse cx="118" cy="180" rx="11" ry="8" fill={`url(#bodyG-${variant})`} stroke={C.baseDk} strokeWidth="1.5" />
        <circle cx="82" cy="180" r="2.2" fill={C.belly} />
        <circle cx="118" cy="180" r="2.2" fill={C.belly} />

        {/* Stripes on body */}
        <path d="M70 130 q 8 -6 16 0 M118 130 q 8 -6 16 0" stroke={C.stripe} strokeWidth="2.5" strokeLinecap="round" fill="none" opacity=".55" />

        {/* Head */}
        <g>
          {/* Ears */}
          <path d="M62 78 L 70 50 L 88 70 Z" fill={`url(#headG-${variant})`} stroke={C.baseDk} strokeWidth="2" strokeLinejoin="round" />
          <path d="M138 78 L 130 50 L 112 70 Z" fill={`url(#headG-${variant})`} stroke={C.baseDk} strokeWidth="2" strokeLinejoin="round" />
          {/* Inner ears */}
          <path d="M70 70 L 75 58 L 82 68 Z" fill="#FF6FB0" opacity=".55" />
          <path d="M130 70 L 125 58 L 118 68 Z" fill="#FF6FB0" opacity=".55" />

          {/* Head circle */}
          <circle cx="100" cy="92" r="38" fill={`url(#headG-${variant})`} stroke={C.baseDk} strokeWidth="2" />
          {/* Forehead M stripes */}
          <path d="M88 65 q 4 8 0 14 M100 62 q 0 9 0 17 M112 65 q -4 8 0 14"
                stroke={C.stripe} strokeWidth="2.6" strokeLinecap="round" fill="none" opacity=".6" />
          {/* Cheek blush */}
          <circle cx="76" cy="100" r="7" fill={C.cheek} />
          <circle cx="124" cy="100" r="7" fill={C.cheek} />

          {/* Eyes */}
          <g>
            {/* Eye whites */}
            <ellipse cx="85" cy="92" rx="8" ry="9" fill={C.eyeWhite} stroke={C.baseDk} strokeWidth="1.4" />
            <ellipse cx="115" cy="92" rx="8" ry="9" fill={C.eyeWhite} stroke={C.baseDk} strokeWidth="1.4" />
            {/* Pupils */}
            <g className="anim-blink" style={{ transformBox:'fill-box', transformOrigin:'center' }}>
              <ellipse cx="85" cy="93" rx="4" ry="6.5" fill={C.pupil} />
              <ellipse cx="115" cy="93" rx="4" ry="6.5" fill={C.pupil} />
              {/* highlight */}
              <circle cx="87" cy="90" r="1.6" fill="#fff" />
              <circle cx="117" cy="90" r="1.6" fill="#fff" />
            </g>
          </g>

          {/* Nose */}
          <path d="M97 104 q 3 4 6 0 q -1 4 -3 5 q -2 -1 -3 -5 Z" fill={C.nose} />
          {/* Mouth */}
          {mood === 'happy' && (
            <path d="M100 110 q -4 5 -8 4 M100 110 q 4 5 8 4" stroke={C.mouth} strokeWidth="2" strokeLinecap="round" fill="none" />
          )}
          {mood === 'singing' && (
            <ellipse cx="100" cy="113" rx="4.5" ry="6" fill={C.mouth} />
          )}
          {mood === 'sly' && (
            <path d="M92 112 q 8 4 16 0" stroke={C.mouth} strokeWidth="2.2" strokeLinecap="round" fill="none" />
          )}

          {/* Whiskers */}
          <g stroke={C.mocha} strokeWidth="1.2" strokeLinecap="round" opacity=".55">
            <line x1="70" y1="105" x2="55" y2="102" />
            <line x1="70" y1="108" x2="54" y2="110" />
            <line x1="130" y1="105" x2="145" y2="102" />
            <line x1="130" y1="108" x2="146" y2="110" />
          </g>
        </g>

        {/* Variant overlays */}
        {variant === 'headset' && (
          <g>
            {/* Headband */}
            <path d="M64 80 Q 100 38 136 80" fill="none" stroke="#2C2519" strokeWidth="5" strokeLinecap="round" />
            <path d="M64 80 Q 100 38 136 80" fill="none" stroke="#5b4a37" strokeWidth="2" strokeLinecap="round" />
            {/* Earcup */}
            <rect x="55" y="78" width="16" height="22" rx="6" fill="#2C2519" />
            <rect x="58" y="82" width="10" height="14" rx="3" fill={accent} />
            {/* Mic boom */}
            <path d="M58 92 Q 38 110 60 122" stroke="#2C2519" strokeWidth="4" fill="none" strokeLinecap="round" />
            <circle cx="60" cy="122" r="6" fill={accent} stroke="#2C2519" strokeWidth="1.8" />
            <circle cx="60" cy="122" r="2.5" fill="#fff" opacity=".7" />
          </g>
        )}

        {variant === 'wave' && (
          <g style={{ transformOrigin: '150px 140px' }} className="anim-wave">
            <ellipse cx="150" cy="120" rx="8" ry="14" fill={`url(#bodyG-${variant})`} stroke={C.baseDk} strokeWidth="1.5" transform="rotate(20 150 120)" />
            <circle cx="158" cy="110" r="9" fill={`url(#bodyG-${variant})`} stroke={C.baseDk} strokeWidth="1.5" />
            <circle cx="158" cy="110" r="3" fill={C.belly} />
          </g>
        )}

        {variant === 'flashcard' && (
          <g>
            {/* Paw holding card */}
            <rect x="70" y="138" width="60" height="36" rx="6" fill="#fff" stroke="#2C2519" strokeWidth="2" transform="rotate(-6 100 156)" />
            <text x="100" y="160" textAnchor="middle" fontFamily="Bricolage Grotesque, system-ui" fontWeight="700" fontSize="14" fill="#2C2519" transform="rotate(-6 100 156)">こんにちは</text>
          </g>
        )}

        {variant === 'puzzle' && (
          <g>
            <rect x="74" y="142" width="22" height="22" rx="4" fill="#3EB489" stroke="#26815F" strokeWidth="2" />
            <rect x="104" y="142" width="22" height="22" rx="4" fill={accent} stroke="#C04E0E" strokeWidth="2" />
            <text x="85" y="158" textAnchor="middle" fontFamily="Bricolage Grotesque" fontWeight="700" fontSize="14" fill="#fff">A</text>
            <text x="115" y="158" textAnchor="middle" fontFamily="Bricolage Grotesque" fontWeight="700" fontSize="14" fill="#fff">B</text>
          </g>
        )}
      </svg>
      {children}
    </div>
  );
};

// Tiny inline logo cat — simpler, optimized small
const CatLogo = ({ size = 28 }) => (
  <svg viewBox="0 0 40 40" width={size} height={size} aria-hidden="true">
    <defs>
      <radialGradient id="lgcat" cx="40%" cy="35%" r="70%">
        <stop offset="0%" stopColor="#FFC392" />
        <stop offset="60%" stopColor="#FF8A3D" />
        <stop offset="100%" stopColor="#F26A1A" />
      </radialGradient>
    </defs>
    <path d="M8 14 L 11 5 L 17 12 Z" fill="url(#lgcat)" />
    <path d="M32 14 L 29 5 L 23 12 Z" fill="url(#lgcat)" />
    <circle cx="20" cy="22" r="13" fill="url(#lgcat)" stroke="#C04E0E" strokeWidth="1.2" />
    <ellipse cx="15" cy="21" rx="2.2" ry="2.6" fill="#1B140B" />
    <ellipse cx="25" cy="21" rx="2.2" ry="2.6" fill="#1B140B" />
    <circle cx="15.7" cy="20.2" r=".6" fill="#fff" />
    <circle cx="25.7" cy="20.2" r=".6" fill="#fff" />
    <path d="M19 26 q 1 1.3 2 0" stroke="#1B140B" strokeWidth="1.2" fill="none" strokeLinecap="round" />
    <path d="M20 24 q 1 1.4 2 0" stroke="#1B140B" strokeWidth="1" fill="none" />
  </svg>
);

Object.assign(window, { CatBase, CatLogo });