// arcai mascot — "Ark" — a spark creature. Original design.
function Mascot({ size = 120, accent = '#D4FF3A', accentDeep = '#9BC624', mood = 'happy' }) {
  // rounded squircle body, dot eyes, small smile, antenna with a glow dot
  return (
    <svg width={size} height={size} viewBox="0 0 120 120" style={{ display: 'block' }}>
      <defs>
        <radialGradient id="mascotGlow" cx="0.5" cy="0.5" r="0.7">
          <stop offset="0%" stopColor={accent} stopOpacity="0.35" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </radialGradient>
        <linearGradient id="mascotBody" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={accent} />
          <stop offset="100%" stopColor={accentDeep} />
        </linearGradient>
      </defs>
      {/* glow halo */}
      <circle cx="60" cy="62" r="56" fill="url(#mascotGlow)" />
      {/* antenna line */}
      <line x1="60" y1="26" x2="60" y2="14" stroke={accentDeep} strokeWidth="2.5" strokeLinecap="round" />
      {/* antenna spark */}
      <circle cx="60" cy="11" r="4" fill={accent} />
      <circle cx="60" cy="11" r="6.5" fill={accent} opacity="0.25" />
      {/* body — squircle */}
      <path
        d="M 60 28 C 32 28, 20 42, 20 66 C 20 90, 34 102, 60 102 C 86 102, 100 90, 100 66 C 100 42, 88 28, 60 28 Z"
        fill="url(#mascotBody)"
      />
      {/* body highlight */}
      <ellipse cx="44" cy="46" rx="14" ry="8" fill="#fff" opacity="0.22" />
      {/* eyes */}
      {mood === 'happy' && (
        <>
          <circle cx="46" cy="62" r="4.5" fill="#0B0F14" />
          <circle cx="74" cy="62" r="4.5" fill="#0B0F14" />
          <circle cx="47.2" cy="60.8" r="1.4" fill="#fff" />
          <circle cx="75.2" cy="60.8" r="1.4" fill="#fff" />
        </>
      )}
      {mood === 'wink' && (
        <>
          <path d="M 42 62 Q 46 59, 50 62" stroke="#0B0F14" strokeWidth="2.5" fill="none" strokeLinecap="round" />
          <circle cx="74" cy="62" r="4.5" fill="#0B0F14" />
          <circle cx="75.2" cy="60.8" r="1.4" fill="#fff" />
        </>
      )}
      {/* mouth — small curve */}
      <path d="M 52 78 Q 60 84, 68 78" stroke="#0B0F14" strokeWidth="2.5" fill="none" strokeLinecap="round" />
      {/* cheek blush */}
      <circle cx="38" cy="74" r="3.5" fill="#FF4B91" opacity="0.35" />
      <circle cx="82" cy="74" r="3.5" fill="#FF4B91" opacity="0.35" />
    </svg>
  );
}

// Brand glyph — rounded square with stylized "A" (matches landing)
function ArcGlyph({ size = 20, color = '#D4FF3A', colorDeep }) {
  const deep = colorDeep || color;
  const gradId = `arc-lg-${color.replace('#','')}`;
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }}>
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={color} />
          <stop offset="100%" stopColor={deep} />
        </linearGradient>
      </defs>
      <rect x="2" y="2" width="28" height="28" rx="8" fill={`url(#${gradId})`} />
      <path d="M10 22 L16 10 L22 22 M12.5 18 H19.5" stroke="#0B0F14" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>
  );
}

function Wordmark({ size = 20, color = '#EAEEF3', accent = '#D4FF3A', accentDeep }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <ArcGlyph size={size * 1.4} color={accent} colorDeep={accentDeep} />
      <span style={{
        fontFamily: "'Space Grotesk', sans-serif",
        fontWeight: 700,
        fontSize: size * 0.95,
        letterSpacing: -0.5,
        color,
      }}>arcai</span>
    </div>
  );
}

Object.assign(window, { Mascot, ArcGlyph, Wordmark });