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

/* ── Logo System Artboard ── */
function LogoSystemArtboardO2() {
  const products = [
    { slug: 'explorador', label: 'Explorador Comercial', color: '#22C55E', bg: '#E9FBEF', markBg: '#22C55E', markColor: '#fff' },
    { slug: 'aos',        label: 'AOS',                  color: '#F59E0B', bg: '#FFF4DB', markBg: '#F59E0B', markColor: '#fff' },
    { slug: 'whatsapp',   label: 'WhatsApp Bot',          color: '#16A34A', bg: '#f0fdf4', markBg: '#16A34A', markColor: '#fff' },
    { slug: 'bots',       label: 'Bots',                  color: '#18C7D4', bg: '#DDF7FA', markBg: '#18C7D4', markColor: 'var(--o2-petrol)' },
    { slug: 'estudio',    label: 'Estúdio',               color: '#374B52', bg: '#E8F0F3', markBg: '#374B52', markColor: '#fff' },
  ];

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 56, width: '100%', height: '100%' }}>
      <O2Eyebrow>03 · Logo System · versões + família de produtos</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 48px', color: 'var(--o2-ink)' }}>
        Sistema de marcas Makers
      </h2>

      {/* Row 1: Primary versions */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20, marginBottom: 20 }}>
        {/* Logo principal */}
        <div style={{ background: 'var(--o2-white)', borderRadius: 14, padding: 32, display: 'flex', flexDirection: 'column', gap: 20, border: '1px solid var(--o2-line)' }}>
          <O2Label children="Logo principal · fundo claro"/>
          <div style={{ display: 'flex', justifyContent: 'center', padding: '20px 0' }}>
            <MakersLogoO2 size={56} color="var(--o2-ink)" markBg="var(--o2-petrol)" accent="var(--o2-cyan)"/>
          </div>
          <O2Label color="var(--o2-muted)" children="Uso padrão · versão preferencial"/>
        </div>

        {/* Versão negativa */}
        <div style={{ background: 'var(--o2-petrol)', borderRadius: 14, padding: 32, display: 'flex', flexDirection: 'column', gap: 20 }}>
          <O2Label color="var(--o2-cyan)" children="Versão negativa · fundo petróleo"/>
          <div style={{ display: 'flex', justifyContent: 'center', padding: '20px 0' }}>
            <MakersLogoO2 size={56} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
          </div>
          <O2Label color="rgba(255,255,255,0.4)" children="Fundos escuros · marca invertida"/>
        </div>

        {/* Versão compacta */}
        <div style={{ background: 'var(--o2-cyan-pale)', borderRadius: 14, padding: 32, display: 'flex', flexDirection: 'column', gap: 20, border: '1px solid var(--o2-cyan)22' }}>
          <O2Label color="var(--o2-cyan-2)" children="Versão ciano · acento activo"/>
          <div style={{ display: 'flex', justifyContent: 'center', padding: '20px 0' }}>
            <MakersLogoO2 size={56} color="var(--o2-petrol)" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
          </div>
          <O2Label color="var(--o2-muted)" children="Activações de marca · headers"/>
        </div>
      </div>

      {/* Row 2: Horizontal + wordmark only + compact */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20, marginBottom: 20 }}>
        <div style={{ background: 'var(--o2-white)', borderRadius: 14, padding: 28, border: '1px solid var(--o2-line)' }}>
          <O2Label children="Horizontal compacta"/>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 0' }}>
            <MakersLogoO2 size={40} color="var(--o2-ink)" markBg="var(--o2-petrol)" accent="var(--o2-cyan)"/>
          </div>
          <O2Label color="var(--o2-muted)" children="Navegação · headers de site"/>
        </div>
        <div style={{ background: 'var(--o2-white)', borderRadius: 14, padding: 28, border: '1px solid var(--o2-line)' }}>
          <O2Label children="Wordmark apenas"/>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 0' }}>
            <MakersWordmarkO2 size={32} color="var(--o2-ink)" accent="var(--o2-cyan)"/>
          </div>
          <O2Label color="var(--o2-muted)" children="Footers · contexto de rodapé"/>
        </div>
        <div style={{ background: 'var(--o2-white)', borderRadius: 14, padding: 28, border: '1px solid var(--o2-line)' }}>
          <O2Label children="Escala pequena · 24px"/>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, padding: '24px 0' }}>
            <MakersLogoO2 size={24} color="var(--o2-ink)" markBg="var(--o2-petrol)" accent="var(--o2-cyan)"/>
            <MakersLogoO2 size={18} color="var(--o2-ink)" markBg="var(--o2-petrol)" accent="var(--o2-cyan)"/>
          </div>
          <O2Label color="var(--o2-muted)" children="Footer · assinatura · disclaimers"/>
        </div>
      </div>

      {/* Row 3: Product family */}
      <div style={{ marginBottom: 20 }}>
        <div style={{ marginBottom: 12 }}>
          <O2Label children="Família de produtos · makers/[produto]"/>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
          {products.map((p, i) => (
            <div key={i} style={{ background: p.bg, borderRadius: 12, padding: '20px 16px', border: `1px solid ${p.color}33`, display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
              <MakersLogoO2 size={36} color="var(--o2-ink)" markBg={p.markBg} markColor={p.markColor} accent={p.color} product={p.slug}/>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: p.color, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>{p.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Row 4: App icons, favicons, avatars */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <div style={{ background: 'var(--o2-white)', borderRadius: 12, padding: 20, border: '1px solid var(--o2-line)' }}>
          <O2Label children="App icon · iOS/Android"/>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 16 }}>
            <MakersMarkO2 size={56} bg="var(--o2-petrol)" radius={12}/>
            <MakersMarkO2 size={40} bg="var(--o2-petrol)" radius={9}/>
            <MakersMarkO2 size={28} bg="var(--o2-petrol)" radius={6}/>
          </div>
        </div>
        <div style={{ background: 'var(--o2-white)', borderRadius: 12, padding: 20, border: '1px solid var(--o2-line)' }}>
          <O2Label children="Favicon · 32px / 16px"/>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 16 }}>
            <MakersMarkO2 size={32} bg="var(--o2-petrol)" radius={4}/>
            <MakersMarkO2 size={16} bg="var(--o2-petrol)" radius={2}/>
          </div>
        </div>
        <div style={{ background: 'var(--o2-white)', borderRadius: 12, padding: 20, border: '1px solid var(--o2-line)' }}>
          <O2Label children="Avatar social · circular"/>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 16 }}>
            <MakersMarkO2 size={48} bg="var(--o2-petrol)" radius={9999}/>
            <MakersMarkO2 size={36} bg="var(--o2-petrol)" radius={9999}/>
          </div>
        </div>
        <div style={{ background: 'var(--o2-petrol)', borderRadius: 12, padding: 20 }}>
          <O2Label color="var(--o2-cyan)" children="Mark sobre fundo escuro"/>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 16 }}>
            <MakersMarkO2 size={48} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={10}/>
            <MakersMarkO2 size={36} bg="rgba(255,255,255,0.1)" accent="var(--o2-cyan)" radius={8}/>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Logo Construction Artboard ── */
function LogoConstructionArtboardO2() {
  return (
    <div className="o2" style={{ background: 'var(--o2-white)', padding: 56, width: '100%', height: '100%' }}>
      <O2Eyebrow>04 · Construção e aplicação · sistema de marcas</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 40px', color: 'var(--o2-ink)' }}>
        Grelha, proporções e convenções
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
        {/* Left: Big logo + grid */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Logo grande com grelha */}
          <div style={{ background: 'var(--o2-paper)', borderRadius: 14, padding: 40, position: 'relative', border: '1px solid var(--o2-line)' }}>
            <O2Label children="Logo · grelha de construção"/>
            <div style={{ position: 'relative', display: 'inline-flex', marginTop: 24 }}>
              {/* Guide lines */}
              <svg style={{ position: 'absolute', inset: -20, pointerEvents: 'none', zIndex: 0 }} width={240} height={160} viewBox="0 0 240 160">
                <line x1="80" y1="0" x2="80" y2="160" stroke="var(--o2-cyan)" strokeWidth="0.5" opacity={0.4} strokeDasharray="3,3"/>
                <line x1="0" y1="60" x2="240" y2="60" stroke="var(--o2-cyan)" strokeWidth="0.5" opacity={0.4} strokeDasharray="3,3"/>
                <line x1="0" y1="100" x2="240" y2="100" stroke="var(--o2-cyan)" strokeWidth="0.5" opacity={0.4} strokeDasharray="3,3"/>
                <rect x="60" y="40" width="120" height="80" stroke="var(--o2-cyan)" strokeWidth="0.5" fill="none" opacity={0.3} strokeDasharray="4,4"/>
              </svg>
              <MakersLogoO2 size={72} color="var(--o2-ink)" markBg="var(--o2-petrol)" accent="var(--o2-cyan)" style={{ position: 'relative', zIndex: 1 }}/>
            </div>

            {/* Dimensions */}
            <div style={{ marginTop: 24, display: 'flex', gap: 16 }}>
              {[
                { label: 'Mark', val: '72 × 72px' },
                { label: 'Gap', val: '0.3× mark' },
                { label: 'Wordmark', val: '0.68× mark' },
                { label: 'Radius', val: '22% width' },
              ].map((d, i) => (
                <div key={i}>
                  <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-muted)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{d.label}</div>
                  <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 12, color: 'var(--o2-cyan-2)', fontWeight: 600, marginTop: 2 }}>{d.val}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Protection area */}
          <div style={{ background: 'var(--o2-paper)', borderRadius: 14, padding: 28, border: '1px solid var(--o2-line)' }}>
            <O2Label children="Área de proteção · clearspace"/>
            <div style={{ marginTop: 16, position: 'relative', display: 'inline-flex', padding: 24, border: '1px dashed var(--o2-cyan)', borderRadius: 8 }}>
              <MakersLogoO2 size={44} color="var(--o2-ink)" markBg="var(--o2-petrol)" accent="var(--o2-cyan)"/>
              <div style={{ position: 'absolute', top: 4, left: 4, fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan)', opacity: 0.7 }}>½M</div>
              <div style={{ position: 'absolute', bottom: 4, right: 4, fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan)', opacity: 0.7 }}>½M</div>
            </div>
            <p style={{ fontSize: 12, color: 'var(--o2-muted)', marginTop: 12, lineHeight: 1.5, margin: '12px 0 0' }}>
              Espaço mínimo = ½ altura do mark em todos os lados.
            </p>
          </div>
        </div>

        {/* Right: Rules and applications */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Slash rule */}
          <div style={{ background: 'var(--o2-petrol)', borderRadius: 14, padding: 28 }}>
            <O2Label color="var(--o2-cyan)" children="Regra do slash · makers/produto"/>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { product: 'explorador', color: '#22C55E', markBg: '#22C55E', markColor: '#fff' },
                { product: 'aos',        color: '#F59E0B', markBg: '#F59E0B', markColor: '#fff' },
                { product: 'whatsapp',   color: '#16A34A', markBg: '#16A34A', markColor: '#fff' },
              ].map((p, i) => (
                <MakersLogoO2 key={i} size={28} color="#fff" markBg={p.markBg} markColor={p.markColor} accent={p.color} product={p.product}/>
              ))}
            </div>
            <p style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'rgba(255,255,255,0.4)', marginTop: 16, lineHeight: 1.5 }}>
              O slash herda a cor do produto. O wordmark "makers" mantém-se sempre em branco/ink.
            </p>
          </div>

          {/* Color rules */}
          <div style={{ background: 'var(--o2-paper)', borderRadius: 14, padding: 28, border: '1px solid var(--o2-line)' }}>
            <O2Label children="Regra de cor por produto"/>
            <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { name: 'Makers (marca-mãe)', color: 'var(--o2-petrol)', hex: '#0F2F3A' },
                { name: 'Explorador Comercial', color: '#22C55E', hex: '#22C55E' },
                { name: 'AOS', color: '#F59E0B', hex: '#F59E0B' },
                { name: 'WhatsApp Bot', color: '#16A34A', hex: '#16A34A' },
                { name: 'Bots / automações', color: 'var(--o2-cyan)', hex: '#18C7D4' },
                { name: 'Estúdio', color: '#374B52', hex: '#374B52' },
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ width: 12, height: 12, borderRadius: 3, background: r.color, flexShrink: 0, border: '1px solid rgba(0,0,0,0.08)' }}/>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--o2-ink)' }}>{r.name}</div>
                    <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)' }}>{r.hex}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Do / Don't */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div style={{ background: 'var(--o2-green-pale)', borderRadius: 12, padding: 20, border: '1px solid #22C55E44' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: '#16A34A', marginBottom: 12 }}>✓ Permitido</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {['Logo sobre fundo claro', 'Logo negativo s/ petróleo', 'Mark com acento ciano', 'Família makers/produto'].map((t, i) => (
                  <div key={i} style={{ fontSize: 11, color: 'var(--o2-ink)', display: 'flex', gap: 6 }}>
                    <span style={{ color: '#22C55E', flexShrink: 0 }}>·</span>{t}
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: '#FFF0F0', borderRadius: 12, padding: 20, border: '1px solid #ff444433' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: '#CC0000', marginBottom: 12 }}>✗ Proibido</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {['Rodar ou distorcer', 'Mudar cor do M', 'Fundo transparente s/ contraste', 'Combinar com outro logo'].map((t, i) => (
                  <div key={i} style={{ fontSize: 11, color: 'var(--o2-ink)', display: 'flex', gap: 6 }}>
                    <span style={{ color: '#CC0000', flexShrink: 0 }}>·</span>{t}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LogoSystemArtboardO2, LogoConstructionArtboardO2 });