/* CodeKid logo — angular brackets with kid mascot glyph */
function CodeKidLogo({ size = 32, showTagline = false, mono = false }) {
  const cyan = mono ? '#fff' : 'var(--cyan)';
  const purple = mono ? '#fff' : 'var(--purple)';

  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 10,
      fontFamily: 'Orbitron, sans-serif',
      lineHeight: 1
    }}>
      {/* Mascot mark — stylized kid silhouette inside hex with code brackets */}
      <svg width={size * 1.15} height={size * 1.15} viewBox="0 0 48 48" fill="none" style={{ flexShrink: 0 }}>
        <defs>
          <linearGradient id="lg-stroke" x1="0" y1="0" x2="48" y2="48">
            <stop offset="0%" stopColor="#00E5FF" />
            <stop offset="100%" stopColor="#7C3AED" />
          </linearGradient>
          <radialGradient id="lg-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#00E5FF" stopOpacity="0.5" />
            <stop offset="100%" stopColor="#00E5FF" stopOpacity="0" />
          </radialGradient>
        </defs>
        {/* Outer hex */}
        <path d="M24 3 L42 13 L42 35 L24 45 L6 35 L6 13 Z"
              stroke="url(#lg-stroke)" strokeWidth="1.6" fill="rgba(0,229,255,0.04)" />
        {/* Glow */}
        <circle cx="24" cy="22" r="14" fill="url(#lg-glow)" />
        {/* Kid: head silhouette with sunglasses */}
        <g>
          {/* hair tuft */}
          <path d="M16 17 Q19 10 24 11 Q30 11 32 18 L31 19 Q28 14 24 14 Q20 14 17 19 Z" fill={purple} />
          {/* head */}
          <path d="M17 19 Q17 26 21 30 L27 30 Q31 26 31 19 Q31 17 30 16 L18 16 Q17 17 17 19 Z" fill="#1c1f2b" stroke="url(#lg-stroke)" strokeWidth="1" />
          {/* sunglasses */}
          <rect x="18" y="20" width="5" height="3" rx="0.6" fill={cyan} />
          <rect x="25" y="20" width="5" height="3" rx="0.6" fill={cyan} />
          <line x1="23" y1="21.5" x2="25" y2="21.5" stroke={cyan} strokeWidth="0.6" />
          {/* code in chest */}
          <text x="24" y="38" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6" fill={cyan} fontWeight="700">{'</>'}</text>
        </g>
      </svg>

      {/* Wordmark */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: showTagline ? 4 : 0 }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 4,
          fontWeight: 800,
          fontSize: size * 0.7,
          letterSpacing: '0.02em'
        }}>
          <span style={{ color: cyan, fontWeight: 900, transform: 'translateY(-1px)' }}>{'<'}</span>
          <span style={{ color: '#fff' }}>Code</span>
          <span style={{
            background: `linear-gradient(90deg, ${mono ? '#fff' : '#00E5FF'}, ${mono ? '#fff' : '#7C3AED'})`,
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            color: 'transparent',
            fontWeight: 800
          }}>Kid</span>
          <span style={{ color: cyan, fontWeight: 900, transform: 'translateY(-1px)' }}>{'>'}</span>
        </div>
        {showTagline && (
          <div style={{
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: size * 0.22,
            letterSpacing: '0.18em',
            color: 'var(--text-dim)',
            textTransform: 'uppercase'
          }}>
            IA que coloca <span style={{ color: 'var(--cyan)' }}>negócios locais</span> no mapa
          </div>
        )}
      </div>
    </div>
  );
}

window.CodeKidLogo = CodeKidLogo;