// Brand book sections — cor, tipografia, voz, aplicações
const bsFrame = {
  width: '100%', height: '100%', padding: 48, background: '#F5F2ED', position: 'relative',
  fontFamily: "'Geist', sans-serif", color: '#0A0A0A', overflow: 'hidden',
};
const bsLabel = {
  fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: '0.22em',
  textTransform: 'uppercase', color: 'rgba(10,10,10,0.5)',
};

function ColorPalette() {
  const colors = [
    { name: 'Ink', hex: '#0A0A0A', oklch: 'oklch(15% 0 0)', role: 'Fundo dark · Texto em light' },
    { name: 'Paper', hex: '#F5F2ED', oklch: 'oklch(95% 0.008 85)', role: 'Fundo light · Texto em dark' },
    { name: 'Paper Deep', hex: '#EBE7DF', oklch: 'oklch(91% 0.012 85)', role: 'Seções alternadas' },
    { name: 'Graphite', hex: '#2A2A2A', oklch: 'oklch(25% 0 0)', role: 'Cards em dark' },
    { name: 'Amber', hex: '#D4A24A', oklch: 'oklch(75% 0.12 75)', role: 'Acento · ≤5% da tela' },
    { name: 'Signal', hex: '#8A7A55', oklch: 'oklch(55% 0.05 85)', role: 'Caption · Mono secundário' },
  ];
  return (
    <div style={bsFrame}>
      <div style={{ ...bsLabel, marginBottom: 28 }}>03.01 · PALETA</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
        {colors.map(c => (
          <div key={c.name} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ height: 160, background: c.hex, border: c.name === 'Paper' ? '1px solid rgba(10,10,10,0.1)' : 'none', borderRadius: 2 }} />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.02em' }}>{c.name}</span>
              <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, color: 'rgba(10,10,10,0.55)' }}>{c.hex}</span>
              <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, color: 'rgba(10,10,10,0.55)' }}>{c.oklch}</span>
              <span style={{ fontSize: 11, color: 'rgba(10,10,10,0.6)', marginTop: 4, lineHeight: 1.4 }}>{c.role}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ColorUsage() {
  return (
    <div style={bsFrame}>
      <div style={{ ...bsLabel, marginBottom: 20 }}>03.02 · HIERARQUIA</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20, height: 'calc(100% - 48px)' }}>
        <div style={{ background: '#0A0A0A', color: '#F5F2ED', padding: 28, borderRadius: 2, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <span style={{ ...bsLabel, color: 'rgba(245,242,237,0.5)' }}>PRIMARY · 70%</span>
          <div>
            <div style={{ fontSize: 32, letterSpacing: '-0.03em', lineHeight: 1.05, marginBottom: 8 }}>Sistemas<br/>em silêncio.</div>
            <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, color: 'rgba(245,242,237,0.5)' }}>INK + PAPER</span>
          </div>
        </div>
        <div style={{ background: '#F5F2ED', color: '#0A0A0A', padding: 28, borderRadius: 2, border: '1px solid rgba(10,10,10,0.12)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <span style={bsLabel}>SECONDARY · 25%</span>
          <div>
            <div style={{ fontSize: 32, letterSpacing: '-0.03em', lineHeight: 1.05, marginBottom: 8 }}>Operação<br/>sem ruído.</div>
            <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, color: 'rgba(10,10,10,0.5)' }}>PAPER + INK</span>
          </div>
        </div>
        <div style={{ background: '#0A0A0A', color: '#F5F2ED', padding: 28, borderRadius: 2, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
          <span style={{ ...bsLabel, color: 'rgba(245,242,237,0.5)' }}>ACCENT · ≤5%</span>
          <div>
            <div style={{ fontSize: 32, letterSpacing: '-0.03em', lineHeight: 1.05, marginBottom: 8 }}>
              <span style={{ color: 'oklch(75% 0.12 75)' }}>Âmbar</span><br/>é pontuação.
            </div>
            <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, color: 'rgba(245,242,237,0.5)' }}>NUNCA EM BLOCOS GRANDES</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function TypePair() {
  return (
    <div style={bsFrame}>
      <div style={{ ...bsLabel, marginBottom: 28 }}>04.01 · TYPE PAIRING</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ fontFamily: "'Geist', sans-serif", fontWeight: 300, fontSize: 180, letterSpacing: '-0.06em', lineHeight: 0.85, marginBottom: 12 }}>Aa</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid rgba(10,10,10,0.15)', paddingTop: 12 }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 500 }}>Geist</div>
              <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'rgba(10,10,10,0.55)' }}>Display + Body · 300 / 400 / 500 / 700</div>
            </div>
            <div style={{ ...bsLabel }}>PRIMARY</div>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(10,10,10,0.75)', marginTop: 16, maxWidth: 380 }}>
            Sans geométrica, tratada com pesos contrastados. Light para manchetes, Medium para botões.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontWeight: 500, fontSize: 180, letterSpacing: '-0.06em', lineHeight: 0.85, marginBottom: 12 }}>Aa</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid rgba(10,10,10,0.15)', paddingTop: 12 }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 500, fontFamily: "'Geist Mono', monospace" }}>Geist Mono</div>
              <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'rgba(10,10,10,0.55)' }}>Labels + UI técnica · 400 / 500</div>
            </div>
            <div style={bsLabel}>TECHNICAL</div>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(10,10,10,0.75)', marginTop: 16, maxWidth: 380 }}>
            Monospace para captions, seções, metadados, timestamps e o wordmark SBA_.
          </p>
        </div>
      </div>
    </div>
  );
}

function TypeScale() {
  const steps = [
    { label: 'D1 · Hero', size: 120, weight: 300, sample: 'Autonomia.' },
    { label: 'D2 · Section', size: 72, weight: 300, sample: 'Menos cliques.' },
    { label: 'H1', size: 48, weight: 400, sample: 'Automação que cabe no seu processo' },
    { label: 'H2', size: 32, weight: 500, sample: 'Assistentes IA que atendem no WhatsApp' },
    { label: 'Body', size: 17, weight: 400, sample: 'Desenhamos sistemas que operam sem sua presença. Processos que antes exigiam três pessoas agora acontecem em segundo plano.' },
    { label: 'Caption', size: 11, weight: 500, mono: true, sample: '001 · DIAGNÓSTICO · 002 · DESENHO · 003 · ENTREGA' },
  ];
  return (
    <div style={bsFrame}>
      <div style={{ ...bsLabel, marginBottom: 24 }}>04.02 · ESCALA</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {steps.map(s => (
          <div key={s.label} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, alignItems: 'baseline', borderTop: '1px solid rgba(10,10,10,0.08)', paddingTop: 16 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={bsLabel}>{s.label}</span>
              <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, color: 'rgba(10,10,10,0.45)' }}>
                {s.size}/{s.weight}{s.mono ? ' · MONO' : ''}
              </span>
            </div>
            <div style={{
              fontFamily: s.mono ? "'Geist Mono', monospace" : "'Geist', sans-serif",
              fontSize: s.size, fontWeight: s.weight,
              letterSpacing: s.size > 40 ? '-0.04em' : s.mono ? '0.15em' : '-0.01em',
              lineHeight: s.size > 40 ? 0.95 : 1.35,
              textTransform: s.mono ? 'uppercase' : 'none',
              color: '#0A0A0A',
            }}>
              {s.sample}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function VoiceRules() {
  const rules = [
    { n: '01', do_: 'Afirmação curta.', dont: 'Parágrafos explicativos.' },
    { n: '02', do_: 'Verbos concretos.', dont: 'Verbos hype ("revolucionar", "transformar").' },
    { n: '03', do_: 'Números específicos.', dont: '"Milhares de clientes satisfeitos".' },
    { n: '04', do_: 'Silêncio. Espaço em branco.', dont: 'Preencher toda seção com texto.' },
    { n: '05', do_: 'Falamos de sistemas, não de IA.', dont: '"Powered by AI", "com a mágica da IA".' },
  ];
  return (
    <div style={bsFrame}>
      <div style={{ ...bsLabel, marginBottom: 24 }}>05.01 · PRINCÍPIOS</div>
      <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 1fr', gap: 16, alignItems: 'baseline', ...bsLabel, color: 'rgba(10,10,10,0.4)', paddingBottom: 12, borderBottom: '1px solid rgba(10,10,10,0.15)' }}>
        <span>#</span><span>FAZEMOS</span><span>NÃO FAZEMOS</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {rules.map(r => (
          <div key={r.n} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 1fr', gap: 16, padding: '20px 0', borderBottom: '1px solid rgba(10,10,10,0.08)', alignItems: 'baseline' }}>
            <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 13, color: 'oklch(55% 0.05 85)' }}>{r.n}</span>
            <span style={{ fontSize: 22, letterSpacing: '-0.02em' }}>{r.do_}</span>
            <span style={{ fontSize: 17, color: 'rgba(10,10,10,0.4)', textDecoration: 'line-through' }}>{r.dont}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function VoiceExamples() {
  const examples = [
    { bad: 'Nós somos uma empresa inovadora que revoluciona o mercado com soluções de IA de ponta para empresas que buscam transformação digital.', good: 'Construímos sistemas autônomos para PMEs.' },
    { bad: 'Descubra o poder da Inteligência Artificial para escalar seu negócio! 🚀', good: 'Seu WhatsApp atende 24/7. Sem você.' },
    { bad: 'Agende uma demo gratuita e veja como nossa tecnologia revolucionária pode transformar seus processos!', good: 'Diagnóstico em 30 min. Depois você decide.' },
  ];
  return (
    <div style={bsFrame}>
      <div style={{ ...bsLabel, marginBottom: 24 }}>05.02 · ANTES / DEPOIS</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        {examples.map((e, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, paddingBottom: 20, borderBottom: '1px solid rgba(10,10,10,0.08)' }}>
            <div>
              <div style={{ ...bsLabel, color: 'rgba(10,10,10,0.4)', marginBottom: 8 }}>ANTES</div>
              <div style={{ fontSize: 15, lineHeight: 1.5, color: 'rgba(10,10,10,0.4)', textDecoration: 'line-through' }}>{e.bad}</div>
            </div>
            <div>
              <div style={{ ...bsLabel, color: 'oklch(55% 0.1 75)', marginBottom: 8 }}>DEPOIS</div>
              <div style={{ fontSize: 22, lineHeight: 1.25, letterSpacing: '-0.02em', color: '#0A0A0A' }}>{e.good}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function BusinessCard() {
  return (
    <div style={{ ...bsFrame, padding: 0, background: '#EBE7DF' }}>
      <div style={{ position: 'absolute', inset: 48, background: '#0A0A0A', borderRadius: 4, padding: 32, color: '#F5F2ED', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', boxShadow: '0 40px 80px rgba(0,0,0,0.25)' }}>
        <div style={{ display: 'flex', alignItems: 'baseline' }}>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontWeight: 500, fontSize: 44, letterSpacing: '-0.06em' }}>SBA</span>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 44, letterSpacing: '-0.06em', color: 'oklch(75% 0.12 75)' }}>_</span>
        </div>
        <div>
          <div style={{ fontSize: 18, letterSpacing: '-0.02em' }}>Rafael Mendes</div>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(245,242,237,0.5)', marginTop: 4 }}>
            FOUNDER · SYSTEMS BY AI
          </div>
          <div style={{ borderTop: '1px solid rgba(245,242,237,0.2)', marginTop: 16, paddingTop: 12, display: 'flex', justifyContent: 'space-between', fontFamily: "'Geist Mono', monospace", fontSize: 10, color: 'rgba(245,242,237,0.6)' }}>
            <span>sba.systems</span>
            <span>+55 11 9····</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function SocialAvatar() {
  return (
    <div style={{ ...bsFrame, background: '#0A0A0A', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ width: 320, height: 320, background: '#F5F2ED', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'baseline' }}>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontWeight: 500, fontSize: 120, letterSpacing: '-0.06em', color: '#0A0A0A' }}>S</span>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 120, letterSpacing: '-0.06em', color: 'oklch(75% 0.12 75)' }}>_</span>
        </div>
      </div>
      <div style={{ ...bsLabel, color: 'rgba(245,242,237,0.5)', position: 'absolute', bottom: 20, left: 48 }}>AVATAR · 1:1</div>
    </div>
  );
}

function EmailSig() {
  return (
    <div style={bsFrame}>
      <div style={{ ...bsLabel, marginBottom: 32 }}>06.03 · ASSINATURA E-MAIL</div>
      <div style={{ borderTop: '1px solid rgba(10,10,10,0.2)', paddingTop: 20, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24, alignItems: 'start' }}>
        <div style={{ display: 'flex', alignItems: 'baseline' }}>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontWeight: 500, fontSize: 48, letterSpacing: '-0.06em', color: '#0A0A0A' }}>SBA</span>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 48, letterSpacing: '-0.06em', color: 'oklch(75% 0.12 75)' }}>_</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, paddingTop: 6 }}>
          <div style={{ fontSize: 17, fontWeight: 500 }}>Rafael Mendes</div>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'rgba(10,10,10,0.55)', letterSpacing: '0.02em' }}>FOUNDER · SYSTEMS BY AI</div>
          <div style={{ display: 'flex', gap: 20, marginTop: 10, fontFamily: "'Geist Mono', monospace", fontSize: 11, color: 'rgba(10,10,10,0.7)' }}>
            <span>sba.systems</span>
            <span>rafael@sba.systems</span>
            <span>+55 11 9····</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ColorPalette, ColorUsage, TypePair, TypeScale, VoiceRules, VoiceExamples, BusinessCard, SocialAvatar, EmailSig });