/* Brand foundations v2 — minimal Suisse + cyber accents */

const Card = ({ children, bg = 'var(--paper)', pad = 56, style = {} }) => (
  <div style={{ background: bg, padding: pad, width: '100%', height: '100%', ...style }}>{children}</div>
);

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

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

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

      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <MakersWordmark size={40} color="var(--ink)" accent="var(--red)"/>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--mute)', textAlign: 'right', fontWeight: 500 }}>
            REBRAND v2.0<br/><span style={{ color: 'var(--red)' }}>● LIVE</span> · 27.04.2026
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--red)', fontWeight: 500 }}>
            ../proposta/identidade-visual
          </div>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontSize: 156, lineHeight: 0.86, margin: 0, letterSpacing: '-0.06em', fontWeight: 800 }}>
            Vendas.<br/>
            Sem <span style={{ color: 'var(--red)' }}>achismo.</span>
          </h1>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '1px solid var(--ink)', paddingTop: 24 }}>
          <div style={{ maxWidth: 520, fontSize: 15, lineHeight: 1.55, color: 'var(--ink)' }}>
            Identidade nova, construída para uma empresa de tecnologia que vende método comercial a PME portuguesas. Branco, vermelho, mono. Funcional, contemporânea, sem clichés tech.
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--mute)', fontWeight: 500 }}>
            MAKERS · OEIRAS, PT
          </div>
        </div>
      </div>
    </div>
  );
}

function PaletteArtboard() {
  const swatches = [
    { name: 'Black', hex: '#0A0A0A', token: '--ink', role: 'Texto · Fundos densos · Tipografia', dark: true },
    { name: 'White', hex: '#FFFFFF', token: '--paper', role: 'Fundo principal · 70% da marca', dark: false },
    { name: 'Red', hex: '#FF3B30', token: '--red', role: 'Acento único · CTAs · Sublinhados', dark: true },
    { name: 'Acid', hex: '#B8FF3D', token: '--acid', role: 'Mono/terminal · Detalhes cyber', dark: false },
    { name: 'Neutral 50', hex: '#F4F4F4', token: '--paper-2', role: 'Fundo secundário', dark: false },
    { name: 'Line', hex: '#E4E4E4', token: '--line', role: 'Separadores e bordas', dark: false },
    { name: 'Mute', hex: '#6B6B6B', token: '--mute', role: 'Texto secundário', dark: true },
    { name: 'Ink 2', hex: '#18181A', token: '--ink-2', role: 'Cards sobre preto', dark: true },
  ];
  return (
    <Card bg="var(--paper)">
      <Eyebrow>01 · Paleta</Eyebrow>
      <h2 style={headline}>Branco. Preto.<br/>Um <span style={{ color: 'var(--red)' }}>vermelho</span> que grita.</h2>
      <p style={{ ...lead, maxWidth: 580 }}>
        Suisse minimal. 70% branco, 25% preto, 5% vermelho. O verde-ácido entra apenas em contextos mono/terminal — números a correr, status, badges técnicos. Sem gradientes de fundo. Sem cores em pastel.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, marginTop: 48, background: 'var(--line)', border: '1px solid var(--line)' }}>
        {swatches.map(s => (
          <div key={s.hex} style={{ background: s.hex, color: s.dark ? 'var(--paper)' : 'var(--ink)', padding: 24, height: 220, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.7, fontWeight: 500 }}>{s.token}</div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.03em' }}>{s.name}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 4, opacity: 0.85, fontWeight: 500 }}>{s.hex}</div>
              <div style={{ fontSize: 11, marginTop: 12, opacity: 0.75, lineHeight: 1.4 }}>{s.role}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 48, padding: 24, border: '1px solid var(--ink)', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
        <div>
          <Eyebrow>Proporção</Eyebrow>
          <div style={{ display: 'flex', height: 24, marginTop: 8, border: '1px solid var(--line)' }}>
            <div style={{ flex: 14, background: 'var(--paper)' }}/>
            <div style={{ flex: 5, background: 'var(--ink)' }}/>
            <div style={{ flex: 1, background: 'var(--red)' }}/>
          </div>
          <div style={{ fontSize: 12, marginTop: 12, color: 'var(--mute)' }}>70% branco · 25% preto · 5% vermelho</div>
        </div>
        <div>
          <Eyebrow>Acessibilidade</Eyebrow>
          <div style={{ fontSize: 13, lineHeight: 1.6 }}>Black sobre White: <strong>20.4:1</strong> AAA<br/>Red sobre White: <strong>4.2:1</strong> AA<br/>White sobre Red: <strong>4.2:1</strong> AA</div>
        </div>
        <div>
          <Eyebrow>Quando usar vermelho</Eyebrow>
          <div style={{ fontSize: 13, lineHeight: 1.6 }}>CTAs primários, links no corpo, sublinhados, ícones críticos, ponto-final do logo. Nunca em fundos extensos.</div>
        </div>
      </div>
    </Card>
  );
}

function TypographyArtboard() {
  return (
    <Card bg="var(--paper)">
      <Eyebrow>02 · Tipografia</Eyebrow>
      <h2 style={headline}>Uma família.<br/>Suíça. Funcional.</h2>
      <p style={{ ...lead, maxWidth: 580 }}>
        Geist (sans neutra, gratuita, do mesmo time da Vercel) faz o trabalho todo — display em 700/800, body em 400/500. Geist Mono entra em metadata, números, terminal, status. Inspiração: Helvetica, mas mais contemporânea e melhor em mobile.
      </p>

      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div style={{ borderTop: '2px solid var(--ink)', paddingTop: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', fontWeight: 500 }}>
            <span>Display · Geist 800</span>
            <span>HEADLINES</span>
          </div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 132, lineHeight: 0.9, letterSpacing: '-0.06em', marginTop: 24, color: 'var(--ink)', fontWeight: 800 }}>
            Aa<span style={{ color: 'var(--red)' }}>.</span>
          </div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 32, lineHeight: 1.05, letterSpacing: '-0.035em', marginTop: 24, color: 'var(--ink)', fontWeight: 700 }}>
            Vendas que não dependem da sorte.
          </div>
          <div style={{ marginTop: 24, fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--mute)', fontWeight: 500 }}>700 · 800 · 900</div>
        </div>

        <div style={{ borderTop: '2px solid var(--ink)', paddingTop: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--mute)', fontWeight: 500 }}>
            <span>Mono · Geist Mono</span>
            <span>TÉCNICO</span>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 80, lineHeight: 0.95, letterSpacing: '-0.02em', marginTop: 24, color: 'var(--ink)', fontWeight: 500 }}>
            <span style={{ color: 'var(--red)' }}>$</span> ./run
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, lineHeight: 1.55, marginTop: 24, color: 'var(--ink)', maxWidth: 380, background: 'var(--ink)', color: 'var(--acid)', padding: 16, fontWeight: 500 }}>
            <span style={{ color: 'var(--mute)' }}>$ makers explorador --query</span><br/>
            <span style={{ color: 'var(--paper)' }}>setor=restauração distrito=lisboa</span><br/>
            <span style={{ color: 'var(--acid)' }}>● 847 empresas encontradas</span>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
        {[
          { label: 'H1 Display', size: '96px / 700', sample: 'Vende mais.' },
          { label: 'H2', size: '48px / 700', sample: 'Lista certa.' },
          { label: 'Body', size: '16px / 400', sample: 'Encontre prospects, organize listas.', font: 'var(--font-sans)' },
          { label: 'Meta', size: '11px / 0.16em', sample: 'EXPLORADOR · 2026', mono: true },
        ].map(t => (
          <div key={t.label}>
            <Eyebrow>{t.label}</Eyebrow>
            <div style={{ fontFamily: t.mono ? 'var(--font-mono)' : 'var(--font-sans)', fontSize: 18, lineHeight: 1.3, color: 'var(--ink)', letterSpacing: t.mono ? '0.14em' : '-0.025em', textTransform: t.mono ? 'uppercase' : 'none', fontWeight: t.label.startsWith('H') ? 700 : 500 }}>{t.sample}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mute)', marginTop: 8, fontWeight: 500 }}>{t.size}</div>
          </div>
        ))}
      </div>
    </Card>
  );
}

Object.assign(window, { CoverArtboard, PaletteArtboard, TypographyArtboard, Card, Eyebrow });