/* Makers logo system v2 — brutalist sans + monogram */

/* DIREÇÃO A — Wordmark tight, lowercase, com ponto vermelho. "makers." */
function MakersLogoA({ size = 64, color = 'currentColor', accent = '#FF3B30', wordmark = true }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'baseline', color, lineHeight: 1, fontFamily: 'var(--font-sans)' }}>
      <span style={{ fontSize: size, letterSpacing: '-0.06em', fontWeight: 700 }}>makers</span>
      <span style={{ color: accent, fontSize: size, fontWeight: 700 }}>.</span>
    </div>
  );
}

/* DIREÇÃO B — Wordmark mono uppercase, com brackets [makers] estilo terminal */
function MakersLogoB({ size = 64, color = 'currentColor', accent = '#FF3B30' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.05, color, lineHeight: 1, fontFamily: 'var(--font-mono)' }}>
      <span style={{ fontSize: size * 0.85, color: accent, fontWeight: 500 }}>[</span>
      <span style={{ fontSize: size * 0.7, fontWeight: 500, letterSpacing: '0.02em' }}>makers</span>
      <span style={{ fontSize: size * 0.85, color: accent, fontWeight: 500 }}>]</span>
    </div>
  );
}

/* MONOGRAM "M" — quadrado vermelho, M branco bold dentro */
function MakersMark({ size = 56, color = '#FFFFFF', bg = '#FF3B30' }) {
  const s = size;
  return (
    <div style={{ width: s, height: s, background: bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
      <span style={{ color, fontFamily: 'var(--font-sans)', fontSize: s * 0.78, fontWeight: 800, letterSpacing: '-0.08em', lineHeight: 1, marginTop: -s * 0.04 }}>M</span>
    </div>
  );
}

/* DIREÇÃO C — Família modular: monograma quadrado + wordmark + slot de produto */
function MakersLogoC({ color = 'currentColor', accent = '#FF3B30', product = null, size = 56, dark = false }) {
  const s = size;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: s * 0.28, color, lineHeight: 1, fontFamily: 'var(--font-sans)' }}>
      <MakersMark size={s} color={dark ? '#0A0A0A' : '#FFFFFF'} bg={accent}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: s * 0.08 }}>
        <span style={{ fontSize: s * 0.7, letterSpacing: '-0.05em', fontWeight: 700 }}>
          makers{product ? <span style={{ color: accent }}>/</span> : ''}
          {product && <span style={{ fontWeight: 500 }}>{product}</span>}
        </span>
        {product && (
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: s * 0.16, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.55, fontWeight: 500 }}>
            por makers
          </span>
        )}
      </div>
    </div>
  );
}

/* The "house" mark used through materials — wordmark com . vermelho */
function MakersWordmark({ size = 40, color = 'currentColor', accent = '#FF3B30' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'baseline', color, lineHeight: 1, fontFamily: 'var(--font-sans)' }}>
      <span style={{ fontSize: size, letterSpacing: '-0.06em', fontWeight: 700 }}>makers</span>
      <span style={{ color: accent, fontSize: size, fontWeight: 700 }}>.</span>
    </div>
  );
}

Object.assign(window, { MakersLogoA, MakersLogoB, MakersLogoC, MakersMark, MakersWordmark });