/* Makers Logo System — Opção 1 · Violeta Elétrico */

/* ── Monogram M — quadrado violeta, M branco bold dentro (igual ao v2 vermelho) ── */
function MakersMarkO1({ size = 56, bg = 'var(--o1-violet)', color = '#FFFFFF' }) {
  const s = size;
  return (
    <div style={{ width: s, height: s, background: bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <span style={{ color, fontFamily: 'var(--o1-sans)', fontSize: s * 0.78, fontWeight: 800, letterSpacing: '-0.08em', lineHeight: 1, marginTop: -s * 0.04, display: 'block' }}>M</span>
    </div>
  );
}

/* ── Wordmark — makers. com ponto violeta ── */
function MakersWordmarkO1({ size = 40, color = 'var(--o1-ink)', accent = 'var(--o1-violet)' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'baseline', color, lineHeight: 1, fontFamily: 'var(--o1-sans)' }}>
      <span style={{ fontSize: size, letterSpacing: '-0.06em', fontWeight: 700 }}>makers</span>
      <span style={{ color: accent, fontSize: size, fontWeight: 700 }}>.</span>
    </div>
  );
}

/* ── Logo família C — monograma + wordmark + slot produto ── */
function MakersLogoO1({ color = 'var(--o1-ink)', accent = 'var(--o1-violet)', product = null, size = 56, markBg, markColor = '#FFFFFF' }) {
  const s = size;
  const bg = markBg || accent;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: s * 0.28, color, lineHeight: 1, fontFamily: 'var(--o1-sans)' }}>
      <MakersMarkO1 size={s} bg={bg} color={markColor}/>
      <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(--o1-mono)', fontSize: s * 0.16, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.5, fontWeight: 500 }}>
            por makers
          </span>
        )}
      </div>
    </div>
  );
}

/* ── Favicon / app icon ── */
function MakersIconO1({ size = 32 }) {
  return <MakersMarkO1 size={size} bg="var(--o1-violet)" color="#FFFFFF"/>;
}

Object.assign(window, { MakersMarkO1, MakersWordmarkO1, MakersLogoO1, MakersIconO1 });