/* Makers — Fundamentos da Marca · Opção 2 · Azul Petróleo × Ciano Operacional */

/* ── Shared primitives O2 ── */
const O2Eyebrow = ({ children, color = 'var(--o2-muted)' }) => (
  <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color, marginBottom: 20, fontWeight: 500 }}>{children}</div>
);

const O2Label = ({ children, color = 'var(--o2-muted)' }) => (
  <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color, fontWeight: 500 }}>{children}</div>
);

const O2Swatch = ({ color, name, hex, textColor = '#fff', flex }) => (
  <div style={{ flex: flex || '1 1 0', minWidth: 0 }}>
    <div style={{ background: color, borderRadius: 10, height: 64, marginBottom: 8, border: '1px solid rgba(0,0,0,0.06)' }}/>
    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--o2-ink)', marginBottom: 2 }}>{name}</div>
    <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'var(--o2-muted)' }}>{hex}</div>
  </div>
);

/* ── CAPA ── */
function CoverArtboardO2() {
  const floatingCards = [
    { label: 'Lead novo', icon: '◆', color: 'var(--o2-explorador)', bg: 'var(--o2-green-pale)', sub: 'Turismo Algarve · 3 pax' },
    { label: 'Conversa recebida', icon: '◉', color: 'var(--o2-whatsapp)', bg: '#f0fdf4', sub: '+351 912 345 678' },
    { label: 'Proposta enviada', icon: '▶', color: 'var(--o2-cyan)', bg: 'var(--o2-cyan-pale)', sub: 'Ref. 2026-041 · €2.400' },
    { label: 'Follow-up agendado', icon: '◎', color: 'var(--o2-aos)', bg: 'var(--o2-amber-pale)', sub: 'Amanhã · 10:00' },
  ];

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', width: '100%', height: '100%', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      {/* Petrol block left */}
      <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: '46%', background: 'var(--o2-petrol)' }}>
        {/* Route lines SVG */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.12 }} viewBox="0 0 600 780" preserveAspectRatio="xMidYMid slice">
          <path d="M-50 200 Q150 150 200 300 T400 380" stroke="var(--o2-cyan)" strokeWidth="1.5" fill="none"/>
          <path d="M0 400 Q100 350 250 420 T550 460" stroke="var(--o2-cyan)" strokeWidth="1" fill="none"/>
          <path d="M100 600 Q200 520 300 560 T600 500" stroke="var(--o2-cyan)" strokeWidth="1" fill="none"/>
          <circle cx="200" cy="300" r="4" fill="var(--o2-cyan)"/>
          <circle cx="300" cy="380" r="3" fill="var(--o2-cyan)"/>
          <circle cx="250" cy="420" r="3" fill="var(--o2-cyan)"/>
          <circle cx="300" cy="560" r="4" fill="var(--o2-cyan)"/>
        </svg>
        {/* Logo on dark */}
        <div style={{ position: 'absolute', top: 48, left: 48 }}>
          <MakersLogoO2 size={44} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
        </div>
        {/* Hero text */}
        <div style={{ position: 'absolute', bottom: 80, left: 48, right: 32 }}>
          <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o2-cyan)', marginBottom: 20, fontWeight: 500 }}>
            Rebrand · Opção 2 · Maio 2026
          </div>
          <h1 style={{ fontFamily: 'var(--o2-sans)', fontSize: 68, lineHeight: 1.0, margin: '0 0 24px', letterSpacing: '-0.04em', fontWeight: 800, color: '#fff' }}>
            Venda,<br/>atenda e<br/>opere<br/><span style={{ color: 'var(--o2-cyan)' }}>melhor.</span>
          </h1>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.65)', margin: 0, maxWidth: 320 }}>
            Automação inteligente para empresas que querem transformar conversas em operação.
          </p>
        </div>
      </div>

      {/* Right content */}
      <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: '46%', padding: '48px 48px 48px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--o2-muted)', textAlign: 'right' }}>
            Azul Petróleo × Ciano Operacional<br/>
            <span style={{ color: 'var(--o2-cyan)' }}>● Identidade B2B</span>
          </div>
        </div>

        {/* Floating operational cards */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 1, justifyContent: 'center' }}>
          <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--o2-muted)', marginBottom: 4 }}>
            Sistema em tempo real
          </div>
          {floatingCards.map((c, i) => (
            <div key={i} style={{ background: c.bg, border: `1px solid ${c.color}22`, borderRadius: 12, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: c.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ color: '#fff', fontSize: 13 }}>{c.icon}</span>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--o2-ink)', marginBottom: 2 }}>{c.label}</div>
                <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'var(--o2-muted)' }}>{c.sub}</div>
              </div>
              <div style={{ marginLeft: 'auto', width: 8, height: 8, borderRadius: '50%', background: c.color }}/>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div style={{ borderTop: '1px solid var(--o2-line)', paddingTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div style={{ fontSize: 13, color: 'var(--o2-muted)', lineHeight: 1.5 }}>
            Sistemas que transformam<br/>conversas em operação.
          </div>
          <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)', textAlign: 'right' }}>
            makers.pt<br/>Oeiras, Portugal
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── PALETA ── */
function PaletteArtboardO2() {
  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 56, width: '100%', height: '100%' }}>
      <O2Eyebrow>02 · Fundamentos · Paleta de cor</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 40, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 40px', color: 'var(--o2-ink)' }}>
        Azul Petróleo × Ciano Operacional
      </h2>

      {/* Brand core */}
      <div style={{ marginBottom: 40 }}>
        <O2Label color="var(--o2-cyan)" children="Marca-mãe"/>
        <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
          <O2Swatch color="var(--o2-petrol)" name="Petróleo" hex="#0F2F3A"/>
          <O2Swatch color="var(--o2-petrol-2)" name="Petróleo Fundo" hex="#0A232C"/>
          <O2Swatch color="var(--o2-cyan)" name="Ciano" hex="#18C7D4" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-cyan-2)" name="Ciano Hover" hex="#0EA5B7"/>
        </div>
      </div>

      {/* Products */}
      <div style={{ marginBottom: 40 }}>
        <O2Label color="var(--o2-explorador)" children="Produtos"/>
        <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
          <O2Swatch color="var(--o2-explorador)" name="Explorador" hex="#22C55E" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-whatsapp)" name="WhatsApp Bot" hex="#16A34A"/>
          <O2Swatch color="var(--o2-aos)" name="AOS" hex="#F59E0B" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-bots)" name="Bots" hex="#18C7D4" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-estudio)" name="Estúdio" hex="#374B52"/>
        </div>
      </div>

      {/* Neutrals */}
      <div style={{ marginBottom: 40 }}>
        <O2Label children="Neutros e superfícies"/>
        <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
          <O2Swatch color="var(--o2-paper)" name="Paper" hex="#F6FAFB" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-paper-2)" name="Paper 2" hex="#ECF4F6" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-white)" name="White" hex="#FFFFFF" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-ink)" name="Ink" hex="#1F2933"/>
          <O2Swatch color="var(--o2-muted)" name="Muted" hex="#5B6B73"/>
          <O2Swatch color="var(--o2-line)" name="Line" hex="#D9E2E7" textColor="var(--o2-ink)"/>
        </div>
      </div>

      {/* Pale supports */}
      <div style={{ marginBottom: 40 }}>
        <O2Label children="Apoios suaves"/>
        <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
          <O2Swatch color="var(--o2-cyan-pale)" name="Ciano Pale" hex="#DDF7FA" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-green-pale)" name="Verde Pale" hex="#E9FBEF" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-amber-pale)" name="Âmbar Pale" hex="#FFF4DB" textColor="var(--o2-ink)"/>
          <O2Swatch color="var(--o2-petrol-pale)" name="Petróleo Pale" hex="#E8F0F3" textColor="var(--o2-ink)"/>
        </div>
      </div>

      {/* Proportions + tokens */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: 24 }}>
          <O2Label children="Proporção de uso"/>
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { label: '60% Fundos claros / paper', pct: 60, color: 'var(--o2-paper-2)' },
              { label: '20% Azul petróleo', pct: 20, color: 'var(--o2-petrol)' },
              { label: '10% Ciano', pct: 10, color: 'var(--o2-cyan)' },
              { label: '10% Cores de produto', pct: 10, color: 'var(--o2-explorador)' },
            ].map((r, i) => (
              <div key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                  <span style={{ fontSize: 12, color: 'var(--o2-ink)' }}>{r.label}</span>
                  <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'var(--o2-muted)' }}>{r.pct}%</span>
                </div>
                <div style={{ height: 6, background: 'var(--o2-line)', borderRadius: 99 }}>
                  <div style={{ height: '100%', width: `${r.pct}%`, background: r.color, borderRadius: 99, border: '1px solid rgba(0,0,0,0.08)' }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: 'var(--o2-petrol)', borderRadius: 12, padding: 24 }}>
          <O2Label color="var(--o2-cyan)" children="CSS tokens"/>
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              '--o2-petrol: #0F2F3A',
              '--o2-cyan: #18C7D4',
              '--o2-explorador: #22C55E',
              '--o2-aos: #F59E0B',
              '--o2-whatsapp: #16A34A',
              '--o2-paper: #F6FAFB',
              '--o2-ink: #1F2933',
            ].map((t, i) => (
              <div key={i} style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: i < 2 ? 'var(--o2-cyan)' : 'rgba(255,255,255,0.6)' }}>{t}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── TIPOGRAFIA ── */
function TypographyArtboardO2() {
  return (
    <div className="o2" style={{ background: 'var(--o2-white)', padding: 56, width: '100%', height: '100%' }}>
      <O2Eyebrow>02 · Fundamentos · Tipografia</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 40px', color: 'var(--o2-ink)' }}>
        Manrope + IBM Plex Mono
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        {/* Left: type specimens */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <div style={{ borderBottom: '1px solid var(--o2-line)', paddingBottom: 24 }}>
            <O2Label children="H1 · Display"/>
            <div style={{ fontFamily: 'var(--o2-sans)', fontSize: 64, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.0, color: 'var(--o2-ink)', marginTop: 12 }}>
              Venda melhor.
            </div>
            <O2Label color="var(--o2-muted)" children="Manrope 800 · 64px · −0.04em"/>
          </div>
          <div style={{ borderBottom: '1px solid var(--o2-line)', paddingBottom: 24 }}>
            <O2Label children="H2 · Section"/>
            <div style={{ fontFamily: 'var(--o2-sans)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.15, color: 'var(--o2-ink)', marginTop: 12 }}>
              Automação com propósito comercial
            </div>
            <O2Label color="var(--o2-muted)" children="Manrope 700 · 36px · −0.025em"/>
          </div>
          <div style={{ borderBottom: '1px solid var(--o2-line)', paddingBottom: 24 }}>
            <O2Label children="Lead / Subtitle"/>
            <div style={{ fontSize: 18, fontWeight: 500, lineHeight: 1.55, color: 'var(--o2-ink)', marginTop: 12 }}>
              Encontre oportunidades, qualifique conversas e organize follow-ups com sistemas que trabalham enquanto a sua equipa vende.
            </div>
            <O2Label color="var(--o2-muted)" children="Manrope 500 · 18px · 1.55"/>
          </div>
          <div>
            <O2Label children="Body"/>
            <div style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--o2-ink)', marginTop: 12 }}>
              A Makers constrói sistemas de automação para empresas que precisam de vender, atender e operar com mais eficiência. Cada produto foi criado para um ponto específico da jornada comercial.
            </div>
            <O2Label color="var(--o2-muted)" children="Manrope 400 · 15px · 1.7"/>
          </div>
        </div>

        {/* Right: hierarchy + mono */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{ background: 'var(--o2-paper)', borderRadius: 12, padding: 28 }}>
            <O2Label children="Hierarquia completa"/>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                { role: 'H1', size: '64–80px', w: 800, ex: 'Venda melhor.' },
                { role: 'H2', size: '32–40px', w: 700, ex: 'Automação com propósito' },
                { role: 'H3', size: '22–28px', w: 600, ex: 'Como funciona o Explorador' },
                { role: 'Lead', size: '17–18px', w: 500, ex: 'Qualifique antes de contactar.' },
                { role: 'Body', size: '14–15px', w: 400, ex: 'Texto corrido, artigos, páginas.' },
                { role: 'Caption', size: '12px', w: 500, ex: 'Nota de rodapé e contexto' },
              ].map((row, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12, borderBottom: '1px solid var(--o2-line)', paddingBottom: 10 }}>
                  <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)', width: 44, flexShrink: 0, letterSpacing: '0.08em' }}>{row.role}</span>
                  <span style={{ fontFamily: 'var(--o2-sans)', fontSize: 14, fontWeight: row.w, color: 'var(--o2-ink)', flex: 1 }}>{row.ex}</span>
                  <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)', flexShrink: 0 }}>{row.size}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: 'var(--o2-petrol)', borderRadius: 12, padding: 28 }}>
            <O2Label color="var(--o2-cyan)" children="IBM Plex Mono · uso técnico"/>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { role: 'label', ex: 'STATUS · ATIVO', color: 'var(--o2-cyan)' },
                { role: 'token', ex: '--o2-petrol: #0F2F3A', color: 'rgba(255,255,255,0.7)' },
                { role: 'badge', ex: 'EXPLORADOR · v2.1', color: '#22C55E' },
                { role: 'status', ex: '● Lead qualificado', color: '#22C55E' },
                { role: 'data', ex: '47 oportunidades encontradas', color: 'rgba(255,255,255,0.5)' },
              ].map((r, i) => (
                <div key={i} style={{ fontFamily: 'var(--o2-mono)', fontSize: 12, color: r.color, letterSpacing: '0.06em', display: 'flex', gap: 12, alignItems: 'center' }}>
                  <span style={{ fontSize: 9, color: 'rgba(255,255,255,0.3)', width: 36, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{r.role}</span>
                  {r.ex}
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', gap: 10 }}>
            {[
              { label: 'Primário', bg: 'var(--o2-petrol)', color: '#fff', border: 'none' },
              { label: 'Ciano', bg: 'var(--o2-cyan)', color: 'var(--o2-petrol)', border: 'none' },
              { label: 'Ghost', bg: 'transparent', color: 'var(--o2-petrol)', border: '1.5px solid var(--o2-petrol)' },
              { label: 'Texto', bg: 'transparent', color: 'var(--o2-cyan-2)', border: 'none' },
            ].map((b, i) => (
              <div key={i} style={{ flex: 1, background: b.bg, color: b.color, border: b.border, borderRadius: 8, padding: '10px 0', textAlign: 'center', fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em' }}>{b.label}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── PRINCÍPIOS VISUAIS ── */
function PrinciplesArtboardO2() {
  const principles = [
    {
      num: '01',
      title: 'Clareza antes de complexidade',
      body: 'Cada componente comunica um estado claro. Sem ambiguidade, sem ruído visual. O utilizador sabe sempre onde está e o que fazer a seguir.',
      color: 'var(--o2-cyan)',
      bg: 'var(--o2-petrol)',
      visual: (
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          {['Lead', 'Qualificado', 'Proposta', 'Fechado'].map((s, i) => (
            <React.Fragment key={i}>
              <div style={{ background: i === 1 ? 'var(--o2-cyan)' : 'rgba(255,255,255,0.12)', borderRadius: 6, padding: '6px 10px', fontSize: 11, color: i === 1 ? 'var(--o2-petrol)' : 'rgba(255,255,255,0.6)', fontWeight: 600 }}>{s}</div>
              {i < 3 && <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: 10 }}>→</span>}
            </React.Fragment>
          ))}
        </div>
      ),
    },
    {
      num: '02',
      title: 'Conversas viram ação',
      body: 'A UI acompanha o percurso natural: mensagem recebida → intenção identificada → tarefa criada → resultado gerado.',
      color: 'var(--o2-explorador)',
      bg: '#0d2218',
      visual: (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
            { icon: '◉', label: 'Pedido recebido no WhatsApp', c: 'rgba(255,255,255,0.5)' },
            { icon: '◆', label: 'Lead criado automaticamente', c: '#22C55E' },
            { icon: '▶', label: 'Proposta enviada em 2 min', c: '#22C55E' },
          ].map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: r.c }}>
              <span style={{ fontSize: 10 }}>{r.icon}</span>{r.label}
            </div>
          ))}
        </div>
      ),
    },
    {
      num: '03',
      title: 'Dados com direção',
      body: 'Cada métrica aponta para uma decisão. Não se mostram números por mostrar — mostram-se indicadores que orientam a ação comercial.',
      color: 'var(--o2-aos)',
      bg: '#1e1200',
      visual: (
        <div style={{ display: 'flex', gap: 12 }}>
          {[{ v: '47', l: 'Leads' }, { v: '12', l: 'Ativos' }, { v: '€24k', l: 'Pipeline' }].map((m, i) => (
            <div key={i} style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 22, fontWeight: 600, color: i === 0 ? 'var(--o2-aos)' : 'rgba(255,255,255,0.7)' }}>{m.v}</div>
              <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.4)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 2 }}>{m.l}</div>
            </div>
          ))}
        </div>
      ),
    },
    {
      num: '04',
      title: 'Automação com presença humana',
      body: 'O sistema trabalha em background, mas a experiência parece próxima, calibrada e controlada. Tecnologia que serve pessoas, não o contrário.',
      color: 'rgba(255,255,255,0.9)',
      bg: '#0f1a1f',
      visual: (
        <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
          <div style={{ background: 'var(--o2-petrol)', borderRadius: '12px 12px 2px 12px', padding: '8px 12px', fontSize: 11, color: 'rgba(255,255,255,0.8)', maxWidth: 140 }}>
            Quando posso receber mais detalhes?
          </div>
          <div style={{ background: 'var(--o2-cyan)', borderRadius: '12px 12px 12px 2px', padding: '8px 12px', fontSize: 11, color: 'var(--o2-petrol)', maxWidth: 140 }}>
            Enviamos proposta em minutos.
          </div>
        </div>
      ),
    },
  ];

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 56, width: '100%', height: '100%' }}>
      <O2Eyebrow>02 · Fundamentos · Princípios visuais</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 40px', color: 'var(--o2-ink)' }}>
        Quatro princípios que guiam a marca
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {principles.map((p, i) => (
          <div key={i} style={{ background: p.bg, borderRadius: 16, padding: 32, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: p.color, letterSpacing: '0.1em' }}>{p.num}</div>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: p.color, opacity: 0.7 }}/>
            </div>
            <div>
              <h3 style={{ fontFamily: 'var(--o2-sans)', fontSize: 18, fontWeight: 700, color: '#fff', margin: '0 0 10px', letterSpacing: '-0.02em' }}>{p.title}</h3>
              <p style={{ fontSize: 13, lineHeight: 1.65, color: 'rgba(255,255,255,0.55)', margin: 0 }}>{p.body}</p>
            </div>
            <div style={{ background: 'rgba(255,255,255,0.05)', borderRadius: 10, padding: 16, marginTop: 'auto' }}>
              {p.visual}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── SISTEMA GRÁFICO ── */
function GraphicSystemArtboardO2() {
  return (
    <div className="o2" style={{ background: 'var(--o2-white)', padding: 56, width: '100%', height: '100%' }}>
      <O2Eyebrow>02 · Fundamentos · Sistema gráfico proprietário</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 40px', color: 'var(--o2-ink)' }}>
        Elementos visuais da Makers
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        {[
          {
            name: 'Rota', label: 'Caminho de oportunidade',
            el: (
              <svg viewBox="0 0 80 60" width={80} height={60}>
                <path d="M10 50 Q20 20 40 30 T70 10" stroke="var(--o2-cyan)" strokeWidth="2" fill="none" strokeLinecap="round"/>
                <circle cx="10" cy="50" r="4" fill="var(--o2-petrol)"/>
                <circle cx="40" cy="30" r="4" fill="var(--o2-cyan)"/>
                <circle cx="70" cy="10" r="4" fill="var(--o2-petrol)"/>
              </svg>
            ),
          },
          {
            name: 'Radar', label: 'Mapa de mercado',
            el: (
              <svg viewBox="0 0 80 60" width={80} height={60}>
                {[18, 12, 6].map(r => <circle key={r} cx="40" cy="30" r={r} stroke="var(--o2-cyan)" strokeWidth="1" fill="none" opacity={0.4}/>)}
                <circle cx="40" cy="30" r="3" fill="var(--o2-cyan)"/>
                <circle cx="52" cy="20" r="3" fill="var(--o2-explorador)"/>
                <circle cx="30" cy="22" r="2" fill="var(--o2-muted)" opacity={0.6}/>
                <circle cx="55" cy="38" r="2" fill="var(--o2-muted)" opacity={0.6}/>
              </svg>
            ),
          },
          {
            name: 'Nó / Conexão', label: 'Integração de sistemas',
            el: (
              <svg viewBox="0 0 80 60" width={80} height={60}>
                <line x1="10" y1="30" x2="40" y2="30" stroke="var(--o2-line)" strokeWidth="1.5"/>
                <line x1="40" y1="30" x2="70" y2="15" stroke="var(--o2-line)" strokeWidth="1.5"/>
                <line x1="40" y1="30" x2="70" y2="45" stroke="var(--o2-line)" strokeWidth="1.5"/>
                <circle cx="10" cy="30" r="5" fill="var(--o2-petrol)"/>
                <circle cx="40" cy="30" r="7" fill="var(--o2-cyan)"/>
                <circle cx="70" cy="15" r="5" fill="var(--o2-explorador)"/>
                <circle cx="70" cy="45" r="5" fill="var(--o2-aos)"/>
              </svg>
            ),
          },
          {
            name: 'Balão conversa', label: 'Mensagem → intenção',
            el: (
              <svg viewBox="0 0 80 60" width={80} height={60}>
                <rect x="8" y="10" width="44" height="24" rx="8" fill="var(--o2-petrol)"/>
                <polygon points="20,34 14,44 30,34" fill="var(--o2-petrol)"/>
                <rect x="28" y="30" width="44" height="22" rx="8" fill="var(--o2-cyan-pale)" stroke="var(--o2-cyan)" strokeWidth="1"/>
                <line x1="16" y1="19" x2="38" y2="19" stroke="rgba(255,255,255,0.4)" strokeWidth="1.5" strokeLinecap="round"/>
                <line x1="16" y1="25" x2="30" y2="25" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            ),
          },
          {
            name: 'Card / Ticket', label: 'Unidade operacional',
            el: (
              <div style={{ background: 'var(--o2-white)', border: '1px solid var(--o2-line)', borderRadius: 8, padding: '10px 12px', width: 80 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--o2-explorador)', marginBottom: 6 }}/>
                <div style={{ height: 6, background: 'var(--o2-ink)', borderRadius: 3, marginBottom: 4, opacity: 0.7, width: '80%' }}/>
                <div style={{ height: 4, background: 'var(--o2-line)', borderRadius: 3, width: '60%' }}/>
              </div>
            ),
          },
          {
            name: 'Checklist', label: 'Próximos passos',
            el: (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                {['Qualificar lead', 'Enviar proposta', 'Follow-up'].map((item, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: i < 2 ? 'var(--o2-ink)' : 'var(--o2-muted)' }}>
                    <div style={{ width: 12, height: 12, borderRadius: 3, background: i < 2 ? 'var(--o2-explorador)' : 'var(--o2-line)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      {i < 2 && <span style={{ color: '#fff', fontSize: 8, fontWeight: 700 }}>✓</span>}
                    </div>
                    {item}
                  </div>
                ))}
              </div>
            ),
          },
          {
            name: 'Oportunidade', label: 'Marcador de lead',
            el: (
              <div style={{ background: 'var(--o2-green-pale)', border: '1px solid var(--o2-explorador)', borderRadius: 8, padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--o2-explorador)', flexShrink: 0 }}/>
                <div>
                  <div style={{ height: 5, background: 'var(--o2-explorador)', borderRadius: 3, width: 50, marginBottom: 4, opacity: 0.5 }}/>
                  <div style={{ height: 4, background: 'var(--o2-line)', borderRadius: 3, width: 36 }}/>
                </div>
              </div>
            ),
          },
          {
            name: 'Status operacional', label: 'Estado em tempo real',
            el: (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                {[
                  { label: 'Ativo', color: 'var(--o2-explorador)' },
                  { label: 'Pendente', color: 'var(--o2-aos)' },
                  { label: 'Pausado', color: 'var(--o2-muted)' },
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: 'var(--o2-ink)' }}>
                    <div style={{ width: 8, height: 8, borderRadius: '50%', background: s.color }}/>
                    {s.label}
                  </div>
                ))}
              </div>
            ),
          },
        ].map((item, i) => (
          <div key={i} style={{ background: 'var(--o2-paper)', borderRadius: 12, padding: 20, display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
            <div style={{ minHeight: 60, display: 'flex', alignItems: 'center' }}>{item.el}</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 3 }}>{item.name}</div>
              <div style={{ fontSize: 11, color: 'var(--o2-muted)' }}>{item.label}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  CoverArtboardO2,
  PaletteArtboardO2,
  TypographyArtboardO2,
  PrinciplesArtboardO2,
  GraphicSystemArtboardO2,
  O2Eyebrow,
  O2Label,
});
