/* JohnyClaw mascot — geometric SVG crab/bot inspired by reference image */

function CrabMascot({ eyes = "^^", accent = "#3DD9FF", scanning = true }) {
  // eye expressions
  const renderEyes = () => {
    if (eyes === "^^") {
      return (
        <g>
          {/* left eye ^ */}
          <path d="M 78 86 L 92 76 L 106 86" stroke={accent} strokeWidth="5" fill="none" strokeLinecap="round" strokeLinejoin="round" filter="url(#eyeGlow)"/>
          {/* right eye ^ */}
          <path d="M 134 86 L 148 76 L 162 86" stroke={accent} strokeWidth="5" fill="none" strokeLinecap="round" strokeLinejoin="round" filter="url(#eyeGlow)"/>
        </g>
      );
    }
    if (eyes === "oo") {
      return (
        <g>
          <circle cx="92" cy="84" r="7" fill={accent} filter="url(#eyeGlow)"/>
          <circle cx="148" cy="84" r="7" fill={accent} filter="url(#eyeGlow)"/>
        </g>
      );
    }
    if (eyes === "--") {
      return (
        <g>
          <rect x="80" y="82" width="24" height="4" rx="2" fill={accent} filter="url(#eyeGlow)"/>
          <rect x="136" y="82" width="24" height="4" rx="2" fill={accent} filter="url(#eyeGlow)"/>
        </g>
      );
    }
    if (eyes === ">_<") {
      return (
        <g>
          <path d="M 78 78 L 92 86 L 78 94" stroke={accent} strokeWidth="5" fill="none" strokeLinecap="round" strokeLinejoin="round" filter="url(#eyeGlow)"/>
          <path d="M 162 78 L 148 86 L 162 94" stroke={accent} strokeWidth="5" fill="none" strokeLinecap="round" strokeLinejoin="round" filter="url(#eyeGlow)"/>
        </g>
      );
    }
    return null;
  };

  return (
    <svg viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "100%" }}>
      <defs>
        <radialGradient id="bodyGrad" cx="50%" cy="35%" r="60%">
          <stop offset="0%" stopColor="#2A3550"/>
          <stop offset="60%" stopColor="#161E33"/>
          <stop offset="100%" stopColor="#0A0F1C"/>
        </radialGradient>
        <radialGradient id="screenGrad" cx="50%" cy="50%" r="60%">
          <stop offset="0%" stopColor="#0F1828"/>
          <stop offset="100%" stopColor="#04080F"/>
        </radialGradient>
        <linearGradient id="clawGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2A3550"/>
          <stop offset="100%" stopColor="#0F1828"/>
        </linearGradient>
        <filter id="eyeGlow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
          <feMerge>
            <feMergeNode in="coloredBlur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
        <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
          <feOffset dx="0" dy="3" result="offsetblur"/>
          <feFlood floodColor="#000" floodOpacity="0.4"/>
          <feComposite in2="offsetblur" operator="in"/>
          <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>

      {/* antenna */}
      <line x1="120" y1="40" x2="120" y2="14" stroke="#28385A" strokeWidth="2.5" strokeLinecap="round"/>
      <circle cx="120" cy="11" r="5" fill="#1E2A44" stroke={accent} strokeWidth="1.5"/>
      {scanning && <circle cx="120" cy="11" r="9" fill="none" stroke={accent} strokeWidth="1" opacity="0.4">
        <animate attributeName="r" from="5" to="14" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite"/>
      </circle>}

      {/* legs (back) */}
      <g stroke="#1A2440" strokeWidth="6" strokeLinecap="round" fill="none">
        <path d="M 80 130 Q 60 145 55 175"/>
        <path d="M 160 130 Q 180 145 185 175"/>
      </g>

      {/* body — rounded dome */}
      <ellipse cx="120" cy="115" rx="68" ry="58" fill="url(#bodyGrad)" stroke="#28385A" strokeWidth="1.5" filter="url(#softShadow)"/>

      {/* crab logo on forehead */}
      <g transform="translate(110, 48) scale(0.45)" opacity="0.9">
        <path d="M 22 14 Q 14 8 6 16 Q 6 24 14 22 Q 16 20 18 22" fill={accent} opacity="0.85"/>
        <path d="M 22 14 Q 30 8 38 16 Q 38 24 30 22 Q 28 20 26 22" fill={accent} opacity="0.85"/>
        <ellipse cx="22" cy="22" rx="10" ry="8" fill={accent}/>
        <path d="M 14 24 Q 10 30 6 30 M 30 24 Q 34 30 38 30" stroke={accent} strokeWidth="2" fill="none" strokeLinecap="round"/>
        <circle cx="18" cy="20" r="1.5" fill="#0A0F1C"/>
        <circle cx="26" cy="20" r="1.5" fill="#0A0F1C"/>
      </g>

      {/* face screen */}
      <rect x="64" y="68" width="112" height="52" rx="14" fill="url(#screenGrad)" stroke="#28385A" strokeWidth="1"/>
      <rect x="68" y="72" width="104" height="44" rx="10" fill="none" stroke={accent} strokeWidth="0.8" opacity="0.3"/>
      {renderEyes()}
      {/* faint scanlines */}
      <g opacity="0.15">
        {[78, 84, 90, 96, 102, 108].map((y, i) => (
          <line key={i} x1="68" y1={y} x2="172" y2={y} stroke={accent} strokeWidth="0.5"/>
        ))}
      </g>

      {/* nameplate */}
      <rect x="78" y="132" width="84" height="22" rx="4" fill="#04080F" stroke="#28385A" strokeWidth="1"/>
      <text x="120" y="143" textAnchor="middle" fontFamily="Space Grotesk, sans-serif" fontSize="9" fontWeight="600" fill={accent}>JohnyClaw</text>
      <text x="120" y="151" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="5" fill="#8B98B4" letterSpacing="1">AI AGENT</text>

      {/* small side details — vents */}
      <g fill="#04080F" stroke="#28385A" strokeWidth="0.8">
        <circle cx="68" cy="105" r="3"/>
        <circle cx="172" cy="105" r="3"/>
      </g>
      <circle cx="68" cy="105" r="1.5" fill={accent} opacity="0.7"/>
      <circle cx="172" cy="105" r="1.5" fill={accent} opacity="0.7"/>

      {/* claws */}
      {/* left claw arm */}
      <path d="M 60 140 Q 45 152 35 168" stroke="#1E2A44" strokeWidth="9" fill="none" strokeLinecap="round"/>
      <path d="M 60 140 Q 45 152 35 168" stroke="#28385A" strokeWidth="3" fill="none" strokeLinecap="round" opacity="0.6"/>
      {/* left claw pincer */}
      <g transform="translate(35, 168)">
        <path d="M -18 0 Q -28 -4 -22 12 L -10 14 Q -4 6 -2 0 Z" fill="url(#clawGrad)" stroke="#28385A" strokeWidth="1"/>
        <path d="M -18 0 Q -28 4 -22 -12 L -10 -14 Q -4 -6 -2 0 Z" fill="url(#clawGrad)" stroke="#28385A" strokeWidth="1"/>
        <path d="M -10 14 L -6 6 L -2 12 L 2 4 L 6 10" stroke="#0A0F1C" strokeWidth="1.5" fill="none"/>
        <path d="M -10 -14 L -6 -6 L -2 -12 L 2 -4 L 6 -10" stroke="#0A0F1C" strokeWidth="1.5" fill="none"/>
      </g>

      {/* right claw arm */}
      <path d="M 180 140 Q 195 152 205 168" stroke="#1E2A44" strokeWidth="9" fill="none" strokeLinecap="round"/>
      <path d="M 180 140 Q 195 152 205 168" stroke="#28385A" strokeWidth="3" fill="none" strokeLinecap="round" opacity="0.6"/>
      <g transform="translate(205, 168)">
        <path d="M 18 0 Q 28 -4 22 12 L 10 14 Q 4 6 2 0 Z" fill="url(#clawGrad)" stroke="#28385A" strokeWidth="1"/>
        <path d="M 18 0 Q 28 4 22 -12 L 10 -14 Q 4 -6 2 0 Z" fill="url(#clawGrad)" stroke="#28385A" strokeWidth="1"/>
        <path d="M 10 14 L 6 6 L 2 12 L -2 4 L -6 10" stroke="#0A0F1C" strokeWidth="1.5" fill="none"/>
        <path d="M 10 -14 L 6 -6 L 2 -12 L -2 -4 L -6 -10" stroke="#0A0F1C" strokeWidth="1.5" fill="none"/>
      </g>

      {/* small foot/legs in front */}
      <g stroke="#1A2440" strokeWidth="5" strokeLinecap="round" fill="none">
        <path d="M 110 168 Q 105 178 108 188"/>
        <path d="M 130 168 Q 135 178 132 188"/>
      </g>
    </svg>
  );
}

window.CrabMascot = CrabMascot;
