// Tech-driven alien mascot — angular, HUD-inspired, less cartoony.
// Sharp geometry, scan overlay, sensor array. Reads as "recon drone" not "cute buddy."

window.Mascot = function Mascot({ size = 120, accent = 'var(--accent)', pose = 'idle', className = '', style = {} }) {
  return (
    <svg
      className={className}
      style={style}
      width={size}
      height={size}
      viewBox="0 0 200 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Ailiencode mark"
    >
      <defs>
        <linearGradient id="headGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={accent} stopOpacity="0.18" />
          <stop offset="100%" stopColor={accent} stopOpacity="0.04" />
        </linearGradient>
        <linearGradient id="visorGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={accent} stopOpacity="1" />
          <stop offset="55%" stopColor={accent} stopOpacity="0.55" />
          <stop offset="100%" stopColor={accent} stopOpacity="0.15" />
        </linearGradient>
        <radialGradient id="haloGrad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={accent} stopOpacity="0.35" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </radialGradient>
        <clipPath id="visorClip">
          <path d="M60 82 L140 82 L136 118 Q 100 140 64 118 Z" />
        </clipPath>
      </defs>

      {/* Ambient halo */}
      <circle cx="100" cy="100" r="90" fill="url(#haloGrad)" />

      {/* Outer bracket frame (HUD) */}
      <g stroke={accent} strokeOpacity="0.5" strokeWidth="1" fill="none">
        <path d="M20 24 L20 12 L32 12" />
        <path d="M180 24 L180 12 L168 12" />
        <path d="M20 176 L20 188 L32 188" />
        <path d="M180 176 L180 188 L168 188" />
      </g>

      {/* Crosshair ticks */}
      <g stroke={accent} strokeOpacity="0.3" strokeWidth="1">
        <line x1="100" y1="16" x2="100" y2="24" />
        <line x1="100" y1="176" x2="100" y2="184" />
        <line x1="16" y1="100" x2="24" y2="100" />
        <line x1="176" y1="100" x2="184" y2="100" />
      </g>

      {/* Sensor stalks (replace goofy antenna) */}
      <g>
        <line x1="72" y1="56" x2="68" y2="36" stroke={accent} strokeWidth="1.5" strokeLinecap="round" />
        <line x1="128" y1="56" x2="132" y2="36" stroke={accent} strokeWidth="1.5" strokeLinecap="round" />
        <circle cx="68" cy="36" r="2.5" fill={accent} />
        <circle cx="132" cy="36" r="2.5" fill={accent}>
          <animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite" />
        </circle>
      </g>

      {/* Head — angular hex/shield silhouette */}
      <path
        d="M100 50
           L138 62
           L148 92
           L140 132
           L118 156
           L82 156
           L60 132
           L52 92
           L62 62 Z"
        fill="url(#headGrad)"
        stroke={accent}
        strokeWidth="1.8"
        strokeLinejoin="round"
      />

      {/* Inner bevel */}
      <path
        d="M100 60
           L130 70
           L138 94
           L132 128
           L114 148
           L86 148
           L68 128
           L62 94
           L70 70 Z"
        fill="none"
        stroke={accent}
        strokeOpacity="0.25"
        strokeWidth="1"
        strokeLinejoin="round"
      />

      {/* Visor band — single wide sensor slit */}
      <path
        d="M60 82 L140 82 L136 118 Q 100 140 64 118 Z"
        fill="url(#visorGrad)"
        stroke={accent}
        strokeWidth="1.5"
      />

      {/* Scanline inside visor */}
      <g clipPath="url(#visorClip)">
        <rect x="60" y="82" width="80" height="2" fill={accent} opacity="0.9">
          <animate attributeName="y" values="82;138;82" dur="3s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="0.9;0.3;0.9" dur="3s" repeatCount="indefinite" />
        </rect>
        {/* Pupil tracking dots */}
        <circle cx="82" cy="104" r="3" fill="#0A1410" />
        <circle cx="82" cy="104" r="1.5" fill={accent} />
        <circle cx="118" cy="104" r="3" fill="#0A1410" />
        <circle cx="118" cy="104" r="1.5" fill={accent} />
        {/* Grid lines */}
        <line x1="60" y1="100" x2="140" y2="100" stroke={accent} strokeOpacity="0.25" strokeWidth="0.5" />
        <line x1="100" y1="82" x2="100" y2="134" stroke={accent} strokeOpacity="0.25" strokeWidth="0.5" />
      </g>

      {/* Lower jaw vent / grill */}
      <g stroke={accent} strokeWidth="1" opacity="0.6">
        <line x1="86" y1="150" x2="114" y2="150" />
        <line x1="90" y1="154" x2="110" y2="154" />
      </g>

      {/* Side chin rivets */}
      <circle cx="66" cy="128" r="1.5" fill={accent} opacity="0.8" />
      <circle cx="134" cy="128" r="1.5" fill={accent} opacity="0.8" />

      {/* Readout plates */}
      <g fontFamily="ui-monospace, 'JetBrains Mono', monospace" fontSize="6" fill={accent} opacity="0.7">
        <text x="30" y="102">AI.01</text>
        <text x="160" y="102" textAnchor="start">03.LN</text>
      </g>
    </svg>
  );
};