/* Makers — Fundamentos da Marca · Opção 1 */

/* ── Shared primitives ── */
const O1Card = ({ children, bg = 'var(--o1-paper)', pad = 56, style = {} }) => (
  <div className="o1" style={{ background: bg, padding: pad, width: '100%', height: '100%', ...style }}>{children}</div>
);

const O1Eyebrow = ({ children, color = 'var(--o1-mute)' }) => (
  <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color, marginBottom: 24, fontWeight: 500 }}>{children}</div>
);

const o1Headline = { fontFamily: 'var(--o1-sans)', fontSize: 80, lineHeight: 0.92, letterSpacing: '-0.045em', margin: '8px 0 24px', color: 'var(--o1-ink)', fontWeight: 700 };
const o1Lead = { fontSize: 16, lineHeight: 1.55, color: 'var(--o1-mute)', margin: 0 };

/* ── CAPA ── */
function CoverArtboardO1() {
  return (
    <div className="o1" style={{ background: 'var(--o1-paper)', padding: 56, width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>
      {/* Grid bg */}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(var(--o1-grid) 1px, transparent 1px), linear-gradient(90deg, var(--o1-grid) 1px, transparent 1px)', backgroundSize: '48px 48px', opacity: 0.8, pointerEvents: 'none' }}/>

      {/* Accent stripe topo */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: 'var(--o1-violet)' }}/>

      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'space-between' }}>
        {/* Header row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <MakersLogoO1 size={38} color="var(--o1-ink)" accent="var(--o1-violet)"/>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--o1-mute)', textAlign: 'right', fontWeight: 500 }}>
            REBRAND · OPÇÃO 1<br/><span style={{ color: 'var(--o1-violet)' }}>● DRAFT</span> · 04.05.2026
          </div>
        </div>

        {/* Hero text */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--o1-violet)', fontWeight: 500 }}>
            ../proposta/opcao-1 · violeta-eletrico
          </div>
          <h1 style={{ fontFamily: 'var(--o1-sans)', fontSize: 148, lineHeight: 0.86, margin: 0, letterSpacing: '-0.06em', fontWeight: 800, color: 'var(--o1-ink)' }}>
            Sistemas<br/>
            que <span style={{ color: 'var(--o1-violet)' }}>operam</span><br/>
            por você.
          </h1>
        </div>

        {/* Footer row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '1px solid var(--o1-ink)', paddingTop: 24 }}>
          <div style={{ maxWidth: 560, fontSize: 15, lineHeight: 1.55, color: 'var(--o1-ink)' }}>
            Nova direção visual para Makers. Base branca, preto profundo, violeta elétrico como acento único. Suisse minimal × detalhes técnicos mono. B2B premium, sem clichés SaaS.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end' }}>
            <div style={{ width: 48, height: 48, background: 'var(--o1-violet)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <MakersMarkO1 size={48} bg="var(--o1-violet)" color="#FFFFFF"/>
            </div>
            <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--o1-mute)', fontWeight: 500 }}>MAKERS · PT</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── PALETA ── */
function PaletteArtboardO1() {
  const swatches = [
    { name: 'Ink',        hex: '#080810', token: '--o1-ink',        role: 'Texto principal · Fundos densos · Estrutura', dark: true,  pct: '20%' },
    { name: 'Paper',      hex: '#FAFAFA', token: '--o1-paper',      role: 'Fundo principal — 70% da marca',              dark: false, pct: '70%' },
    { name: 'Violet',     hex: '#5B3FDE', token: '--o1-violet',     role: 'Acento master · CTAs · Logo · Ênfase',        dark: true,  pct: '7%'  },
    { name: 'Cyan',       hex: '#00D4C8', token: '--o1-cyan',       role: 'Micro-acento técnico · Terminal · Status',    dark: false, pct: '3%'  },
    { name: 'Neutral 50', hex: '#F2F2F7', token: '--o1-paper-2',    role: 'Fundo secundário · Cards · Campos',           dark: false, pct: '' },
    { name: 'Line',       hex: '#E2E2EC', token: '--o1-line',       role: 'Separadores · Bordas',                        dark: false, pct: '' },
    { name: 'Mute',       hex: '#62627A', token: '--o1-mute',       role: 'Texto secundário · Eyebrows',                 dark: true,  pct: '' },
    { name: 'Ink 2',      hex: '#13131F', token: '--o1-ink-2',      role: 'Cards sobre preto · Hover de fundo',          dark: true,  pct: '' },
  ];

  return (
    <O1Card>
      <O1Eyebrow>01 · Paleta</O1Eyebrow>
      <h2 style={o1Headline}>Branco. Preto.<br/>Um <span style={{ color: 'var(--o1-violet)' }}>violeta</span> preciso.</h2>
      <p style={{ ...o1Lead, maxWidth: 620 }}>
        Suisse minimal com energia de produto de engenharia. 70% branco frio, 20% preto/cinza, 7% violeta elétrico. O cyan entra apenas em contextos técnicos mono/terminal. Sem gradientes de fundo. Sem pastéis. Sem azul SaaS genérico.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, marginTop: 48, background: 'var(--o1-line)', border: '1px solid var(--o1-line)' }}>
        {swatches.map(s => (
          <div key={s.hex} style={{ background: s.hex, color: s.dark ? '#FAFAFA' : '#080810', padding: 24, height: 220, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.65, fontWeight: 500 }}>{s.token}</div>
            <div>
              <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: '-0.03em' }}>{s.name}</div>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 12, marginTop: 4, opacity: 0.85, fontWeight: 500 }}>{s.hex}</div>
              <div style={{ fontSize: 11, marginTop: 10, opacity: 0.72, lineHeight: 1.4 }}>{s.role}</div>
              {s.pct && <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, marginTop: 8, opacity: 0.9, fontWeight: 600 }}>{s.pct}</div>}
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40, padding: 24, border: '1px solid var(--o1-ink)', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <O1Eyebrow>Proporção</O1Eyebrow>
          <div style={{ display: 'flex', height: 24, border: '1px solid var(--o1-line)', marginTop: 8 }}>
            <div style={{ flex: 14, background: 'var(--o1-paper)', border: '1px solid var(--o1-line)' }}/>
            <div style={{ flex: 4, background: 'var(--o1-ink)' }}/>
            <div style={{ flex: 1.4, background: 'var(--o1-violet)' }}/>
            <div style={{ flex: 0.6, background: 'var(--o1-cyan)' }}/>
          </div>
          <div style={{ fontSize: 11, marginTop: 10, color: 'var(--o1-mute)', lineHeight: 1.6 }}>70% branco · 20% preto · 7% violeta · 3% cyan</div>
        </div>
        <div>
          <O1Eyebrow>Acessibilidade</O1Eyebrow>
          <div style={{ fontSize: 12, lineHeight: 1.7 }}>
            Ink / Paper: <strong>18.7:1</strong> AAA<br/>
            Violet / Paper: <strong>5.1:1</strong> AA<br/>
            Paper / Violet: <strong>5.1:1</strong> AA
          </div>
        </div>
        <div>
          <O1Eyebrow>Violeta em fundo claro</O1Eyebrow>
          <div style={{ background: 'var(--o1-paper)', border: '1px solid var(--o1-line)', padding: '10px 14px', display: 'flex', gap: 8, alignItems: 'center', marginBottom: 6 }}>
            <div style={{ width: 16, height: 16, background: 'var(--o1-violet)' }}/>
            <span style={{ fontSize: 13, color: 'var(--o1-violet)', fontWeight: 600 }}>CTA · Link · Badge</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--o1-mute)', lineHeight: 1.5 }}>Passa em AA. Uso em botões, links, ícones activos.</div>
        </div>
        <div>
          <O1Eyebrow>Violeta em fundo escuro</O1Eyebrow>
          <div style={{ background: 'var(--o1-ink)', padding: '10px 14px', display: 'flex', gap: 8, alignItems: 'center', marginBottom: 6 }}>
            <div style={{ width: 16, height: 16, background: 'var(--o1-violet)' }}/>
            <span style={{ fontSize: 13, color: 'var(--o1-violet)', fontWeight: 600 }}>Acento · Slash</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--o1-mute)', lineHeight: 1.5 }}>Destaque sobre fundos escuros. Evitar texto longo.</div>
        </div>
      </div>
    </O1Card>
  );
}

/* ── TIPOGRAFIA ── */
function TypographyArtboardO1() {
  return (
    <O1Card>
      <O1Eyebrow>02 · Tipografia</O1Eyebrow>
      <h2 style={o1Headline}>Geist. Suíça.<br/>Técnica.</h2>
      <p style={{ ...o1Lead, maxWidth: 580 }}>
        Geist (sans neutra, precisa, Vercel) faz 100% do trabalho — display em 700/800, body em 400/500. Geist Mono entra como detalhe técnico em metadata, terminal, status, tokens de produto. Zero serif editorial.
      </p>

      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div style={{ borderTop: '2px solid var(--o1-ink)', paddingTop: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', fontWeight: 500 }}>
            <span>Display · Geist 800</span><span>HEADLINES</span>
          </div>
          <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 124, lineHeight: 0.9, letterSpacing: '-0.06em', marginTop: 16, color: 'var(--o1-ink)', fontWeight: 800 }}>
            Aa<span style={{ color: 'var(--o1-violet)' }}>.</span>
          </div>
          <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 30, lineHeight: 1.05, letterSpacing: '-0.035em', marginTop: 20, color: 'var(--o1-ink)', fontWeight: 700 }}>
            Automação que escala operação.
          </div>
          <div style={{ marginTop: 16, fontSize: 12, fontFamily: 'var(--o1-mono)', color: 'var(--o1-mute)', fontWeight: 500 }}>700 · 800 · 900</div>
        </div>

        <div style={{ borderTop: '2px solid var(--o1-ink)', paddingTop: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', fontWeight: 500 }}>
            <span>Mono · Geist Mono</span><span>TÉCNICO</span>
          </div>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 76, lineHeight: 0.95, letterSpacing: '-0.02em', marginTop: 16, color: 'var(--o1-ink)', fontWeight: 500 }}>
            <span style={{ color: 'var(--o1-violet)' }}>$</span> ./run
          </div>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 13, lineHeight: 1.55, marginTop: 20, background: 'var(--o1-ink)', color: 'var(--o1-cyan)', padding: 16, fontWeight: 500 }}>
            <span style={{ color: 'var(--o1-mute)' }}>$ makers aos --deploy</span><br/>
            <span style={{ color: 'var(--o1-paper)' }}>env=prod region=eu-west</span><br/>
            <span style={{ color: 'var(--o1-cyan)' }}>● 3 agents running · 0 errors</span>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, paddingTop: 32, borderTop: '1px solid var(--o1-line)' }}>
        {[
          { label: 'H1 Display', size: '96–148px / 800', sample: 'Escala.' },
          { label: 'H2', size: '48–64px / 700', sample: 'Da dado à ação.' },
          { label: 'Body', size: '15–17px / 400', sample: 'Automação, IA e produto para empresas que precisam escalar.' },
          { label: 'Meta / Label', size: '11px / 500 / 0.16em', sample: 'AOS · AGENTE · LIVE', mono: true },
        ].map(t => (
          <div key={t.label}>
            <O1Eyebrow>{t.label}</O1Eyebrow>
            <div style={{ fontFamily: t.mono ? 'var(--o1-mono)' : 'var(--o1-sans)', fontSize: 17, lineHeight: 1.3, color: 'var(--o1-ink)', letterSpacing: t.mono ? '0.14em' : '-0.02em', textTransform: t.mono ? 'uppercase' : 'none', fontWeight: t.label.startsWith('H') ? 700 : 400 }}>{t.sample}</div>
            <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'var(--o1-mute)', marginTop: 8, fontWeight: 500 }}>{t.size}</div>
          </div>
        ))}
      </div>
    </O1Card>
  );
}

/* ── GRID & PRINCÍPIOS ── */
function GridPrinciplesArtboardO1() {
  const principles = [
    { id: '01', title: 'Precisão antes de ornamento', body: 'Cada elemento ganha o seu espaço porque serve a comunicação, não porque enfeita. Grid de 8pt. Margens 48–64px. Sem bordas arredondadas.' },
    { id: '02', title: 'Técnica visível, não escondida', body: 'Detalhes mono/terminal não são decoração — são linguagem de produto. Usados com critério: labels, status, identificadores de sistema.' },
    { id: '03', title: 'Um acento. Usado com rigor.', body: 'Violeta aparece uma vez por layout como sinal. Não repete, não cobre áreas largas. Tudo o que não é violeta é preto ou branco.' },
    { id: '04', title: 'Contraste de escala', body: 'Titulares grandes (96–148px) coexistem com metadata a 11px. O vazio entre eles é tão importante quanto o texto.' },
  ];

  return (
    <O1Card>
      <O1Eyebrow>03 · Grid & Princípios visuais</O1Eyebrow>
      <h2 style={o1Headline}>Sistema.<br/>Não <span style={{ color: 'var(--o1-violet)' }}>estilo.</span></h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 48 }}>
        {/* Grid demo */}
        <div>
          <O1Eyebrow color="var(--o1-violet)">Grid 8pt · colunas 12 · gutter 24</O1Eyebrow>
          <div style={{ position: 'relative', background: 'var(--o1-paper-2)', height: 320, overflow: 'hidden' }}>
            {/* Grid columns simulation */}
            <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '24px', padding: '0 24px', pointerEvents: 'none' }}>
              {Array.from({ length: 12 }).map((_, i) => (
                <div key={i} style={{ background: 'rgba(91,63,222,0.07)', height: '100%' }}/>
              ))}
            </div>
            {/* Content on grid */}
            <div style={{ position: 'relative', padding: '32px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ height: 4, background: 'var(--o1-violet)', width: '100%' }}/>
              <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1 }}>makers<span style={{ color: 'var(--o1-violet)' }}>/</span>aos</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--o1-mute)', maxWidth: 280 }}>Sistema operacional agêntico. Constrói, delega e monitora fluxos de trabalho com IA.</div>
              <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                <div style={{ background: 'var(--o1-violet)', color: '#fff', padding: '10px 16px', fontFamily: 'var(--o1-sans)', fontSize: 13, fontWeight: 500 }}>Deploy →</div>
                <div style={{ background: 'transparent', border: '1px solid var(--o1-ink)', padding: '10px 16px', fontSize: 13, fontWeight: 500 }}>Docs</div>
              </div>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'var(--o1-cyan)', letterSpacing: '0.14em', fontWeight: 500 }}>● AOS · v1.4.2 · PROD</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, marginTop: 1, background: 'var(--o1-line)' }}>
            {['8pt base', '24px gutter', '48px margem'].map(l => (
              <div key={l} style={{ background: 'var(--o1-paper)', padding: '12px 16px', fontFamily: 'var(--o1-mono)', fontSize: 11, color: 'var(--o1-mute)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500 }}>{l}</div>
            ))}
          </div>
        </div>

        {/* Principles */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--o1-line)' }}>
          {principles.map((p, i) => (
            <div key={p.id} style={{ background: i === 2 ? 'var(--o1-violet)' : 'var(--o1-paper)', padding: 28, flex: 1 }}>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.14em', color: i === 2 ? 'rgba(255,255,255,0.6)' : 'var(--o1-violet)', marginBottom: 8, fontWeight: 500 }}>{p.id}</div>
              <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.02em', color: i === 2 ? '#fff' : 'var(--o1-ink)', marginBottom: 6 }}>{p.title}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: i === 2 ? 'rgba(255,255,255,0.8)' : 'var(--o1-mute)' }}>{p.body}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Tom de voz */}
      <div style={{ marginTop: 32, padding: 32, border: '1px solid var(--o1-ink)', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
        <div>
          <O1Eyebrow color="var(--o1-violet)">Tom de voz</O1Eyebrow>
          <div style={{ fontSize: 13, lineHeight: 1.65, color: 'var(--o1-ink)' }}>
            <strong>Direto.</strong> Sem floreados.<br/>
            <strong>Técnico,</strong> mas legível.<br/>
            <strong>Pragmático</strong> e confiante.<br/>
            <strong>B2B</strong> sem ser frio.
          </div>
        </div>
        <div>
          <O1Eyebrow>Não somos</O1Eyebrow>
          <div style={{ fontSize: 13, lineHeight: 1.65, color: 'var(--o1-mute)' }}>
            ✗ Agência criativa<br/>
            ✗ SaaS genérico<br/>
            ✗ Consultora de gestão<br/>
            ✗ Startup do Vale do Silício
          </div>
        </div>
        <div>
          <O1Eyebrow>Exemplos de copy</O1Eyebrow>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 12, lineHeight: 1.7, color: 'var(--o1-ink)', fontWeight: 500 }}>
            "Da prospecção à ação."<br/>
            "Sistemas que não dormem."<br/>
            "Infraestrutura comercial."<br/>
            "Construído para operar."
          </div>
        </div>
      </div>
    </O1Card>
  );
}

Object.assign(window, { O1Card, O1Eyebrow, o1Headline, o1Lead, CoverArtboardO1, PaletteArtboardO1, TypographyArtboardO1, GridPrinciplesArtboardO1 });