// logo.jsx — EA Assistant app logo + KevlexOS wordmark

// EA app logo: circular dark badge, amber "EA" geometric sans lettermark.
// Sized for 24 / 48 / 128 — single SVG scales cleanly.
// No gradients, no decorative lines, just two notional layers: badge + mark.
function EALogo({ size = 128, dark = '#0F0F0F', amber = '#F5A623', radius = 'circle', className }) {
  // radius: 'circle' (full round) or 'squircle' (rounded square)
  const r = radius === 'circle' ? 50 : 22;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      className={className}
      aria-label="EA Assistant"
      role="img"
    >
      <rect x="0" y="0" width="100" height="100" rx={r} ry={r} fill={dark} />
      {/* Hand-tuned "EA" lettermark. Optical alignment: slight overshoot,
          stems weighted to match, kerned tight but not crashing.
          Stroke widths chosen for legibility down to 24px. */}
      <g fill={amber}>
        {/* E — three horizontal bars + spine. Top bar slightly wider for optical balance. */}
        <path d="M 22 30 H 46 V 38 H 31 V 46 H 43 V 54 H 31 V 62 H 46 V 70 H 22 Z" />
        {/* A — triangle silhouette with crossbar. Apex truncated for geometric feel. */}
        <path d="M 58 70 L 65.5 30 H 74.5 L 82 70 H 73 L 71.6 62 H 68.4 L 67 70 Z M 69.5 54 H 70.5 L 70 47.5 Z" />
      </g>
    </svg>
  );
}

// EA Logo lockup: badge + lettermark "EA · THE ASSISTANT" — echoes the in-app
// sidebar treatment. The dot uses a non-breaking thin space for breathing room.
function EALockup({ size = 36, dark = '#0F0F0F', amber = '#F5A623', surface = '#F5F2EC' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <EALogo size={size} dark={dark} amber={amber} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <div style={{
          fontFamily: 'Geist, ui-sans-serif, system-ui, sans-serif',
          fontWeight: 700,
          fontSize: size * 0.42,
          lineHeight: 1,
          letterSpacing: '-0.01em',
          color: surface,
        }}>EA</div>
        <div style={{
          fontFamily: 'Geist Mono, ui-monospace, monospace',
          fontSize: size * 0.26,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'rgba(245,242,236,0.5)',
        }}>The Assistant</div>
      </div>
    </div>
  );
}

// KevlexOS wordmark: editorial serif "Kevlex" + tracked uppercase mono "OS".
// The split mirrors the EA Tool's typographic system (serif display + mono labels).
function KevlexOSWordmark({ size = 22, color = '#F5F2EC', accent, weight = 500, gap = 0.4 }) {
  // accent: optional color for "OS" — leave undefined to match main color
  return (
    <div
      style={{
        display: 'inline-flex',
        alignItems: 'baseline',
        gap: `${gap * size * 0.1}em`,
        color,
        lineHeight: 1,
        userSelect: 'none',
      }}
    >
      <span style={{
        fontFamily: 'Newsreader, "Source Serif 4", Georgia, serif',
        fontWeight: weight,
        fontSize: size,
        letterSpacing: '-0.015em',
        fontFeatureSettings: '"ss01"',
      }}>
        Kevlex
      </span>
      <span style={{
        fontFamily: 'Geist Mono, ui-monospace, monospace',
        fontSize: size * 0.58,
        fontWeight: 500,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: accent || color,
        transform: 'translateY(-0.05em)',
        display: 'inline-block',
      }}>
        OS
      </span>
    </div>
  );
}

Object.assign(window, { EALogo, EALockup, KevlexOSWordmark });