/* Makers — Logo System Artboard · Opção 1 */

function LogoSystemArtboardO1() {
  const products = [
    { slug: 'explorador', label: 'Explorador Comercial', desc: 'Prospecção e mapeamento de mercado', token: 'EXP' },
    { slug: 'aos',        label: 'AOS',                  desc: 'Agentic Operational System',         token: 'AOS' },
    { slug: 'whatsapp',   label: 'WhatsApp',             desc: 'Bot conversacional B2B',             token: 'WPP' },
    { slug: 'bots',       label: 'Bots',                 desc: 'Automação de conversas e fluxos',    token: 'BOT' },
    { slug: 'estudio',    label: 'Estúdio',              desc: 'Projetos à medida com a equipa',     token: 'STD' },
  ];

  return (
    <O1Card pad={0}>
      <div style={{ padding: '48px 56px 32px' }}>
        <O1Eyebrow>04 · Logo system — Opção 1</O1Eyebrow>
        <h2 style={{ ...o1Headline, fontSize: 60, marginBottom: 8 }}>Uma marca.<br/>Família escalável.</h2>
        <p style={{ ...o1Lead, maxWidth: 600 }}>
          Monograma M em quadrado violeta + wordmark Geist 700. Sub-produtos herdam o quadrado e ganham slash: makers/aos, makers/bots. O sistema escala para N produtos sem criar logos completamente novos.
        </p>
      </div>

      {/* Principais versões */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 1, background: 'var(--o1-line)', margin: '0 0 1px' }}>
        {/* Positivo */}
        <div style={{ background: 'var(--o1-paper)', padding: 40, display: 'flex', flexDirection: 'column', gap: 32 }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', fontWeight: 500 }}>Positivo · fundo claro</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
            <MakersLogoO1 size={64} color="var(--o1-ink)" accent="var(--o1-violet)"/>
            <MakersLogoO1 size={44} color="var(--o1-ink)" accent="var(--o1-violet)"/>
            <MakersLogoO1 size={28} color="var(--o1-ink)" accent="var(--o1-violet)"/>
          </div>
        </div>

        {/* Negativo */}
        <div style={{ background: 'var(--o1-ink)', padding: 40, display: 'flex', flexDirection: 'column', gap: 32 }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)', fontWeight: 500 }}>Negativo · fundo escuro</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
            <MakersLogoO1 size={64} color="#FAFAFA" accent="var(--o1-violet)"/>
            <MakersLogoO1 size={44} color="#FAFAFA" accent="var(--o1-violet)"/>
            <MakersLogoO1 size={28} color="#FAFAFA" accent="var(--o1-violet)"/>
          </div>
        </div>

        {/* Acento */}
        <div style={{ background: 'var(--o1-violet)', padding: 40, display: 'flex', flexDirection: 'column', gap: 32 }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>Sobre acento</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'flex-start' }}>
            <MakersLogoO1 size={64} color="#FFFFFF" accent="#FFFFFF" markBg="rgba(255,255,255,0.2)" markColor="#FFFFFF"/>
            <MakersLogoO1 size={44} color="#FFFFFF" accent="#FFFFFF" markBg="rgba(255,255,255,0.2)" markColor="#FFFFFF"/>
            <MakersWordmarkO1 size={28} color="#FFFFFF" accent="#FFFFFF"/>
          </div>
        </div>
      </div>

      {/* Versões compactas + favicon */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: 'var(--o1-line)', marginBottom: 1 }}>
        {[
          { bg: 'var(--o1-paper-2)', label: 'Horizontal · claro', el: <MakersLogoO1 size={36} color="var(--o1-ink)" accent="var(--o1-violet)"/> },
          { bg: 'var(--o1-ink)',     label: 'Horizontal · escuro', el: <MakersLogoO1 size={36} color="#FAFAFA" accent="var(--o1-violet)"/> },
          { bg: 'var(--o1-paper-2)', label: 'Só monograma',       el: <MakersMarkO1 size={56} bg="var(--o1-violet)" color="#FFFFFF"/> },
          { bg: 'var(--o1-ink)',     label: 'Favicon/app icon',   el: <div style={{ display: 'flex', gap: 8 }}><MakersMarkO1 size={48} bg="var(--o1-violet)" color="#FFFFFF"/><MakersMarkO1 size={32} bg="var(--o1-violet)" color="#FFFFFF"/><MakersMarkO1 size={16} bg="var(--o1-violet)" color="#FFFFFF"/></div> },
          { bg: 'var(--o1-paper-2)', label: 'Só wordmark',        el: <MakersWordmarkO1 size={36} color="var(--o1-ink)" accent="var(--o1-violet)"/> },
        ].map((v, i) => (
          <div key={i} style={{ background: v.bg, padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 120 }}>
            <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: v.bg === 'var(--o1-ink)' ? 'rgba(255,255,255,0.35)' : 'var(--o1-mute)', fontWeight: 500 }}>{v.label}</div>
            <div style={{ display: 'flex', alignItems: 'center', marginTop: 16 }}>{v.el}</div>
          </div>
        ))}
      </div>

      {/* Família de produtos */}
      <div style={{ padding: '40px 56px 0' }}>
        <O1Eyebrow color="var(--o1-violet)">Sistema de produtos-filho</O1Eyebrow>
        <p style={{ fontSize: 14, color: 'var(--o1-mute)', margin: '0 0 24px', maxWidth: 680, lineHeight: 1.6 }}>
          Cada produto herda o quadrado violeta e o sistema de slash. O monograma permanece igual — o que muda é apenas o nome após o slash. Novos produtos entram sem criar logos completamente novos.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--o1-line)', margin: '0 0 1px' }}>
        {/* Marca mãe destacada */}
        <div style={{ background: 'var(--o1-paper)', padding: 40, borderLeft: '4px solid var(--o1-violet)' }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-violet)', fontWeight: 500, marginBottom: 24 }}>Marca-mãe</div>
          <MakersLogoO1 size={52} color="var(--o1-ink)" accent="var(--o1-violet)"/>
          <div style={{ marginTop: 16, fontSize: 13, color: 'var(--o1-mute)', lineHeight: 1.5 }}>Empresa de TI, automação, IA e produtos B2B.<br/>Oeiras, Portugal.</div>
        </div>

        {/* Grid de produtos */}
        <div style={{ background: 'var(--o1-paper-2)', padding: 40 }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', fontWeight: 500, marginBottom: 24 }}>Produtos-filho</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {products.map(p => (
              <div key={p.slug} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <MakersLogoO1 size={32} color="var(--o1-ink)" accent="var(--o1-violet)" product={p.slug}/>
                <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--o1-mute)', fontWeight: 500 }}>{p.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Como novos produtos entram */}
      <div style={{ padding: 40, background: 'var(--o1-ink)', color: 'var(--o1-paper)' }}>
        <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--o1-cyan)', marginBottom: 16, fontWeight: 500 }}>// como o sistema escala</div>
        <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center' }}>
          {['explorador', 'aos', 'whatsapp', 'bots', 'estudio', 'novo-produto'].map((slug, i) => (
            <div key={slug} style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
              <MakersLogoO1
                size={28}
                color="#FAFAFA"
                accent={i === 5 ? 'rgba(255,255,255,0.25)' : 'var(--o1-violet)'}
                product={slug}
                markBg={i === 5 ? 'rgba(255,255,255,0.1)' : 'var(--o1-violet)'}
                markColor={i === 5 ? 'rgba(255,255,255,0.4)' : '#FFFFFF'}
              />
              {i === 5 && <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 9, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.1em', fontWeight: 500 }}>FUTURO</div>}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24, fontSize: 13, color: 'rgba(255,255,255,0.55)', maxWidth: 700, lineHeight: 1.6 }}>
          Regra: <span style={{ color: 'var(--o1-cyan)', fontFamily: 'var(--o1-mono)', fontWeight: 500 }}>makers/[nome-curto]</span> — sempre lowercase, sem espaços, máx. 12 caracteres. O quadrado violeta é o único elemento fixo. A família cresce sem fragmentar a identidade.
        </div>
      </div>

      {/* Regras técnicas */}
      <div style={{ padding: '32px 56px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, borderTop: '1px solid var(--o1-line)' }}>
        {[
          { label: 'Tamanho mínimo', val: '20px web · 6mm impressão' },
          { label: 'Espaço limpo', val: '= 1× altura do quadrado' },
          { label: 'Não fazer', val: 'Gradiente, sombra, rotação, distorção' },
          { label: 'Cores permitidas', val: 'Violeta · Preto · Branco' },
        ].map(r => (
          <div key={r.label}>
            <O1Eyebrow>{r.label}</O1Eyebrow>
            <div style={{ fontSize: 13, lineHeight: 1.5 }}>{r.val}</div>
          </div>
        ))}
      </div>
    </O1Card>
  );
}

/* ── LOGO CONSTRUCTION — similar ao v2 vermelho ── */
function LogoConstructionArtboardO1() {
  const products = [
    { slug: 'explorador', label: 'Produto principal' },
    { slug: 'aos',        label: 'Produto técnico' },
    { slug: 'whatsapp',   label: 'Canal bot' },
    { slug: 'bots',       label: 'Automação' },
    { slug: 'estudio',    label: 'Serviço' },
  ];

  return (
    <O1Card bg="var(--o1-paper)">
      <O1Eyebrow>04b · Sistema de marcas — construção e aplicação</O1Eyebrow>
      <h2 style={{ fontFamily: 'var(--o1-sans)', fontSize: 64, lineHeight: 0.95, letterSpacing: '-0.045em', margin: '8px 0 16px', color: 'var(--o1-ink)', fontWeight: 700 }}>
        Uma família.<br/>Múltiplos produtos.
      </h2>
      <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--o1-mute)', maxWidth: 660, margin: 0 }}>
        Marca-mãe: <strong style={{ color: 'var(--o1-ink)' }}>makers.</strong> Produtos herdam o quadrado violeta e ganham slash com nome em peso 500:{' '}
        <strong style={{ color: 'var(--o1-ink)' }}>makers/explorador</strong>,{' '}
        <strong style={{ color: 'var(--o1-ink)' }}>makers/aos</strong>,{' '}
        <strong style={{ color: 'var(--o1-ink)' }}>makers/bots</strong>. Inspiração: Linear, Vercel, Stripe.
      </p>

      <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Construção */}
        <div style={{ background: 'var(--o1-paper-2)', padding: 32 }}>
          <O1Eyebrow>Construção</O1Eyebrow>
          <svg viewBox="0 0 280 280" width="100%" style={{ maxWidth: 280, display: 'block', margin: '16px auto' }}>
            <defs>
              <pattern id="o1grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#D5D5E0" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="280" height="280" fill="url(#o1grid)"/>
            <rect x="60" y="60" width="160" height="160" fill="#5B3FDE"/>
            <text x="140" y="188" fontFamily="Geist, Helvetica, sans-serif" fontSize="138" fill="white" textAnchor="middle" fontWeight="800" letterSpacing="-11">M</text>
            {/* dimension lines */}
            <line x1="60" y1="244" x2="220" y2="244" stroke="#080810" strokeWidth="0.5" strokeDasharray="3 2"/>
            <text x="140" y="256" fontSize="9" fill="#080810" textAnchor="middle" fontFamily="ui-monospace">8x</text>
            <line x1="40" y1="60" x2="40" y2="220" stroke="#080810" strokeWidth="0.5" strokeDasharray="3 2"/>
            <text x="32" y="143" fontSize="9" fill="#080810" textAnchor="middle" fontFamily="ui-monospace" transform="rotate(-90 32 143)">8x</text>
            {/* corner markers */}
            <line x1="60" y1="56" x2="60" y2="64" stroke="#5B3FDE" strokeWidth="1"/>
            <line x1="220" y1="56" x2="220" y2="64" stroke="#5B3FDE" strokeWidth="1"/>
          </svg>
          <div style={{ fontSize: 12, color: 'var(--o1-mute)', textAlign: 'center', marginTop: 8 }}>Quadrado 8×8 · M centrado · margem = 1 unidade</div>
        </div>

        {/* Produtos */}
        <div style={{ background: 'var(--o1-paper-2)', padding: 32 }}>
          <O1Eyebrow>Produtos</O1Eyebrow>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 16 }}>
            <div>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', marginBottom: 8, fontWeight: 500 }}>Marca-mãe</div>
              <MakersLogoO1 color="var(--o1-ink)" accent="var(--o1-violet)" size={44}/>
            </div>
            <div style={{ height: 1, background: 'var(--o1-line)' }}/>
            {products.slice(0,2).map(p => (
              <div key={p.slug}>
                <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', marginBottom: 8, fontWeight: 500 }}>{p.label}</div>
                <MakersLogoO1 color="var(--o1-ink)" accent="var(--o1-violet)" product={p.slug} size={32}/>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Todos os produtos */}
      <div style={{ marginTop: 24, background: 'var(--o1-paper-2)', padding: 32 }}>
        <O1Eyebrow>Família completa</O1Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          <div>
            <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', marginBottom: 12, fontWeight: 500 }}>Marca-mãe</div>
            <MakersLogoO1 color="var(--o1-ink)" accent="var(--o1-violet)" size={36}/>
          </div>
          {products.map(p => (
            <div key={p.slug}>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', marginBottom: 12, fontWeight: 500 }}>{p.label}</div>
              <MakersLogoO1 color="var(--o1-ink)" accent="var(--o1-violet)" product={p.slug} size={28}/>
            </div>
          ))}
        </div>
      </div>

      {/* Versões do mark + regras */}
      <div style={{ marginTop: 16, padding: 24, border: '1px solid var(--o1-ink)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignItems: 'center' }}>
        <div>
          <O1Eyebrow>Tamanho mínimo</O1Eyebrow>
          <div style={{ fontSize: 13 }}>16px web · 6mm impressão</div>
        </div>
        <div>
          <O1Eyebrow>Espaço</O1Eyebrow>
          <div style={{ fontSize: 13 }}>= 1× altura do quadrado</div>
        </div>
        <div>
          <O1Eyebrow>Não fazer</O1Eyebrow>
          <div style={{ fontSize: 13 }}>Esticar, rodar, gradiente, sombrear.</div>
        </div>
        <div>
          <O1Eyebrow>Favicon</O1Eyebrow>
          <div style={{ display: 'flex', gap: 8 }}>
            <MakersMarkO1 size={32} bg="var(--o1-violet)" color="#FFFFFF"/>
            <MakersMarkO1 size={32} bg="var(--o1-ink)" color="#FFFFFF"/>
            <MakersMarkO1 size={16} bg="var(--o1-violet)" color="#FFFFFF"/>
          </div>
        </div>
      </div>
    </O1Card>
  );
}

Object.assign(window, { LogoSystemArtboardO1, LogoConstructionArtboardO1 });