/* Makers Logo System — Opção 2 · Azul Petróleo × Ciano Operacional */

/* ── Mark — squircle petróleo, M branco, detalhe ciano ── */
function MakersMarkO2({ size = 56, bg = 'var(--o2-petrol)', color = '#FFFFFF', accent = 'var(--o2-cyan)', radius }) {
  const s = size;
  const r = radius !== undefined ? radius : Math.round(s * 0.22);
  return (
    <div style={{
      width: s, height: s,
      background: bg,
      borderRadius: r,
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle cyan glow top-right */}
      <div style={{
        position: 'absolute',
        top: -s * 0.15,
        right: -s * 0.1,
        width: s * 0.55,
        height: s * 0.55,
        borderRadius: '50%',
        background: accent,
        opacity: 0.18,
        pointerEvents: 'none',
      }}/>
      {/* Cyan dot accent bottom-right */}
      <div style={{
        position: 'absolute',
        bottom: s * 0.12,
        right: s * 0.12,
        width: s * 0.1,
        height: s * 0.1,
        borderRadius: '50%',
        background: accent,
        opacity: 0.9,
      }}/>
      <span style={{
        color,
        fontFamily: 'var(--o2-sans)',
        fontSize: s * 0.72,
        fontWeight: 800,
        letterSpacing: '-0.07em',
        lineHeight: 1,
        marginTop: -s * 0.02,
        display: 'block',
        position: 'relative',
        zIndex: 1,
      }}>M</span>
    </div>
  );
}

/* ── Wordmark — makers em lowercase, ponto ciano ── */
function MakersWordmarkO2({ size = 40, color = 'var(--o2-ink)', accent = 'var(--o2-cyan)' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'baseline', color, lineHeight: 1, fontFamily: 'var(--o2-sans)' }}>
      <span style={{ fontSize: size, letterSpacing: '-0.05em', fontWeight: 700 }}>makers</span>
      <span style={{ color: accent, fontSize: size * 1.1, fontWeight: 800, marginLeft: 1 }}>·</span>
    </div>
  );
}

/* ── Logo completo — mark + wordmark + slot produto ── */
function MakersLogoO2({ color = 'var(--o2-ink)', accent = 'var(--o2-cyan)', markBg = 'var(--o2-petrol)', product = null, productColor, size = 56, markColor = '#FFFFFF' }) {
  const s = size;
  const pColor = productColor || accent;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: s * 0.3, color, lineHeight: 1, fontFamily: 'var(--o2-sans)' }}>
      <MakersMarkO2 size={s} bg={markBg} color={markColor} accent={accent}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: s * 0.06 }}>
        <span style={{ fontSize: s * 0.68, letterSpacing: '-0.04em', fontWeight: 700 }}>
          makers{product ? <span style={{ color: pColor, fontWeight: 700 }}>/</span> : ''}
          {product && <span style={{ fontWeight: 600 }}>{product}</span>}
        </span>
        {product && (
          <span style={{ fontFamily: 'var(--o2-mono)', fontSize: s * 0.17, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--o2-muted)', fontWeight: 500 }}>
            por makers
          </span>
        )}
      </div>
    </div>
  );
}

/* ── Favicon / app icon ── */
function MakersIconO2({ size = 32 }) {
  return <MakersMarkO2 size={size} bg="var(--o2-petrol)" color="#FFFFFF" accent="var(--o2-cyan)"/>;
}

Object.assign(window, { MakersMarkO2, MakersWordmarkO2, MakersLogoO2, MakersIconO2 });