// Enke logo system — restored V2 mark:
//   The isotype is a "bullseye / target dot" — the ◉ symbol that read as a
//   spending pin on the map. Lockup pairs the bold ENKE wordmark with the
//   bullseye to its right (ENKE◉).
//
// kind: 'lockup' | 'iso' | 'word'
// color: 'blue' | 'black' | 'white' | 'inverse'

function EnkeLogo({ kind = 'lockup', color = 'blue', size = 32 }) {
  const palette = {
    blue:    { fg: '#0B1220', accent: '#005AD6' },
    black:   { fg: '#0B1220', accent: '#0B1220' },
    white:   { fg: '#FFFFFF', accent: '#FFFFFF' },
    inverse: { fg: '#FFFFFF', accent: '#2171E0' },
  };
  const c = palette[color] || palette.blue;

  // ISOTYPE — bullseye / target. Outer ring + solid inner dot.
  const Iso = ({ s = size }) => (
    <svg width={s} height={s} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-label="Enke">
      <circle cx="16" cy="16" r="14" fill="none" stroke={c.accent} strokeWidth="3" />
      <circle cx="16" cy="16" r="6" fill={c.accent} />
    </svg>
  );

  // WORDMARK — bold lowercase "enke" with stronger letterforms.
  const Word = ({ h = size }) => (
    <span style={{
      fontFamily: "'Inter', system-ui, sans-serif",
      fontWeight: 800, fontSize: h,
      letterSpacing: '-0.045em', color: c.fg,
      lineHeight: 1, display: 'inline-flex', alignItems: 'center',
    }}>
      enke
    </span>
  );

  if (kind === 'iso') return <Iso />;
  if (kind === 'word') return <Word />;

  // LOCKUP — wordmark + bullseye to its right
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.18 }}>
      <Word h={size} />
      <Iso s={size * 0.78} />
    </span>
  );
}

window.EnkeLogo = EnkeLogo;