// ─── LogoMark.jsx ─────────────────────────────────────────────
// Inline-SVG logo components (no stem — the eye is the whole mark).
// The blink runs via the shared `.le-eye-blink` class in
// colors_and_type.css, so it respects prefers-reduced-motion and
// is stripped-proof (authored directly in the DOM, not via <img>).

function EyeGlyph({ size = 28, theme = 'light', blink = true }) {
  const stroke = theme === 'dark' ? '#faf7f0' : '#0f172a';
  const iris   = theme === 'dark' ? '#d9b85c' : '#bf9b30';
  const pupil  = theme === 'dark' ? '#0a1424' : '#0f172a';
  return (
    <svg width={size} height={size * 0.64} viewBox="0 0 50 32" role="img" aria-label="legal-eye">
      <g className={blink ? 'le-eye-blink' : ''}>
        <path d="M 2.5 16 Q 13.5 2.5 25 2.5 Q 36.5 2.5 47.5 16 Q 36.5 29.5 25 29.5 Q 13.5 29.5 2.5 16 Z"
              fill="none" stroke={stroke} strokeWidth="3" strokeLinejoin="round"/>
        <circle cx="25" cy="16" r="7.4" fill={iris}/>
        <circle cx="25" cy="16" r="2.7" fill={pupil}/>
      </g>
    </svg>
  );
}

// Eye on a navy rounded tile — the app-icon / avatar form.
function EyeTile({ size = 30, radius }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius != null ? radius : size * 0.28,
      background: 'linear-gradient(155deg,#172a4c,#0a1424)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>
      <EyeGlyph size={size * 0.62} theme="dark" />
    </div>
  );
}

// Tone-split wordmark: legal(ink) + eye(gold)
function WordmarkText({ size = 20, theme = 'light' }) {
  const ink = theme === 'dark' ? '#faf7f0' : '#0f172a';
  const gold = theme === 'dark' ? '#d9b85c' : '#bf9b30';
  return (
    <span style={{ fontFamily: "var(--font-serif)", fontWeight: 900, fontSize: size, letterSpacing: -0.8, color: ink, direction: 'ltr', lineHeight: 1 }}>
      legal<span style={{ color: gold }}>eye</span>
    </span>
  );
}

// Backward-compatible aliases (older call sites)
function LogoMarkStatic({ size = 32, theme = 'light' }) { return <EyeGlyph size={size} theme={theme} blink={false} />; }
function LogoMarkAnimated({ size = 32, theme = 'light' }) { return <EyeGlyph size={size} theme={theme} blink={true} />; }

Object.assign(window, { EyeGlyph, EyeTile, WordmarkText, LogoMarkStatic, LogoMarkAnimated });