/* Stationery, email, newsletter v2 — Suisse minimal */

function BusinessCardArtboard() {
  return (
    <div style={{ background: 'var(--paper-2)', padding: 56, height: '100%', display: 'flex', flexDirection: 'column', gap: 24 }}>
      <Eyebrow>05 · Cartão de visita · 85×55mm</Eyebrow>

      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
        {/* Frente */}
        <div style={{ width: 425, height: 275, background: 'var(--paper)', padding: 28, position: 'relative', boxShadow: '0 12px 40px -10px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <MakersLogoC color="var(--ink)" accent="var(--red)" size={36}/>
          <div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 22, letterSpacing: '-0.025em', fontWeight: 700 }}>Filipe Almeida</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--red)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 6, fontWeight: 500 }}>FOUNDER · GROWTH</div>
            <div style={{ height: 1, background: 'var(--ink)', margin: '16px 0', width: 32 }}/>
            <div style={{ fontSize: 11, color: 'var(--mute)', lineHeight: 1.6, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>
              filipe@makers.pt<br/>+351 967 822 668<br/>makers.pt
            </div>
          </div>
        </div>

        {/* Verso */}
        <div style={{ width: 425, height: 275, background: 'var(--ink)', color: 'var(--paper)', padding: 28, position: 'relative', boxShadow: '0 12px 40px -10px rgba(0,0,0,0.25)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--acid)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>// manifesto.txt</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 32, lineHeight: 1.05, letterSpacing: '-0.035em', fontWeight: 700 }}>
            Vendas que não dependem da <span style={{ color: 'var(--red)' }}>sorte.</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <MakersMark size={36} color="var(--paper)" bg="var(--red)"/>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.14em', fontWeight: 500 }}>OEIRAS · PT · 2026</div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 8, padding: 24, background: 'var(--paper)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, fontSize: 12 }}>
        <div><Eyebrow>Stock</Eyebrow><div>350g uncoated branco</div></div>
        <div><Eyebrow>Acabamento</Eyebrow><div>Mate · cantos vivos</div></div>
        <div><Eyebrow>Acentos</Eyebrow><div>Vermelho Pantone 179C</div></div>
        <div><Eyebrow>Tipografia</Eyebrow><div>Geist 700/500 · Mono 500</div></div>
      </div>
    </div>
  );
}

function LetterheadArtboard() {
  return (
    <div style={{ background: 'var(--paper-2)', padding: 56, height: '100%' }}>
      <Eyebrow>05 · Papel timbrado A4</Eyebrow>
      <div style={{ background: 'var(--paper)', boxShadow: '0 20px 60px -15px rgba(0,0,0,0.18)', padding: 56, marginTop: 24, minHeight: 760, position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', borderBottom: '2px solid var(--ink)', paddingBottom: 24 }}>
          <MakersLogoC color="var(--ink)" accent="var(--red)" size={36}/>
          <div style={{ textAlign: 'right', fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--mute)', lineHeight: 1.6, fontWeight: 500 }}>
            MAKERS UNIPESSOAL LDA<br/>Rua das Forças Armadas 12, 2780-271 Oeiras<br/>NIF 517 000 000 · makers.pt
          </div>
        </div>

        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mute)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>Para</div>
          <div style={{ fontSize: 13, lineHeight: 1.6 }}>Sr. José Ribeiro<br/>Tasca Ribeiro Restaurante, Lda<br/>Rua Augusta 24, 1100-048 Lisboa</div>
        </div>

        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mute)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>Assunto</div>
          <div style={{ fontSize: 14, fontWeight: 700 }}>Proposta de implementação · makers/explorador</div>
        </div>

        <div style={{ marginTop: 48, fontSize: 13, lineHeight: 1.7, color: 'var(--ink)' }}>
          <p style={{ margin: 0 }}>Caro José,</p>
          <p style={{ marginTop: 16 }}>Conforme conversado, fica abaixo o resumo do que combinámos: três meses de acompanhamento, lista de 250 prospects qualificados por mês e integração com o vosso CRM. Tudo o que aparece nesta proposta está incluído no preço fechado — sem extras escondidos.</p>
          <p style={{ marginTop: 16 }}>Se houver dúvidas, responde a este mail ou apanha-me direto no WhatsApp.</p>
          <p style={{ marginTop: 32 }}>Abraço,</p>
          <p style={{ marginTop: 8, fontWeight: 700 }}>Filipe Almeida</p>
        </div>

        <div style={{ position: 'absolute', bottom: 56, left: 56, right: 56, paddingTop: 16, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--mute)', letterSpacing: '0.14em', fontWeight: 500 }}>
          <span>MAKERS<span style={{ color: 'var(--red)' }}>.</span> · OEIRAS, PT</span>
          <span>PÁG. 1 / 1</span>
        </div>
      </div>
    </div>
  );
}

function EmailSignatureArtboard() {
  return (
    <div style={{ background: 'var(--paper-2)', padding: 56, height: '100%' }}>
      <Eyebrow>05 · Assinatura de email</Eyebrow>
      <h3 style={{ fontFamily: 'var(--font-sans)', fontSize: 36, lineHeight: 1, letterSpacing: '-0.035em', margin: '0 0 24px', fontWeight: 700 }}>HTML inline. Funciona em Gmail, Outlook, Apple Mail.</h3>

      <div style={{ background: 'var(--paper)', padding: 32, marginTop: 16, boxShadow: '0 8px 24px -8px rgba(0,0,0,0.15)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--mute)', letterSpacing: '0.14em', marginBottom: 16, fontWeight: 500 }}>DE: filipe@makers.pt</div>
        <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink)' }}>
          <p style={{ margin: 0 }}>Olá José,</p>
          <p style={{ marginTop: 8 }}>Anexo a lista combinada. Avisa se faz sentido marcarmos call esta sexta.</p>
          <p style={{ marginTop: 8 }}>Abraço, Filipe.</p>
        </div>
        <div style={{ height: 1, background: 'var(--line)', margin: '24px 0' }}/>
        <table style={{ borderCollapse: 'collapse' }}>
          <tbody>
            <tr>
              <td style={{ paddingRight: 20, borderRight: '2px solid var(--red)', verticalAlign: 'top' }}>
                <MakersMark size={48} color="var(--paper)" bg="var(--ink)"/>
              </td>
              <td style={{ paddingLeft: 20, fontFamily: 'Geist, Helvetica, sans-serif' }}>
                <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.02em', color: '#0A0A0A' }}>Filipe Almeida</div>
                <div style={{ fontSize: 12, color: '#6B6B6B', marginTop: 2 }}>Founder · <span style={{ color: '#0A0A0A', fontWeight: 500 }}>makers<span style={{ color: '#FF3B30' }}>.</span></span></div>
                <div style={{ fontSize: 12, color: '#6B6B6B', marginTop: 8, fontFamily: 'Geist Mono, monospace' }}>
                  <a style={{ color: '#0A0A0A', textDecoration: 'none' }}>makers.pt</a> · +351 967 822 668
                </div>
                <div style={{ marginTop: 10, fontFamily: 'Geist Mono, monospace', fontSize: 10, color: '#FF3B30', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>
                  ● Built with method
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style={{ marginTop: 24, padding: 20, background: 'var(--ink)', color: 'var(--acid)', fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.7, fontWeight: 500 }}>
        <span style={{ color: 'var(--mute)' }}>// regras</span><br/>
        <span style={{ color: 'var(--paper)' }}>1.</span> Sempre HTML inline, nunca imagens<br/>
        <span style={{ color: 'var(--paper)' }}>2.</span> Mark do produto se for owner desse produto<br/>
        <span style={{ color: 'var(--paper)' }}>3.</span> Sem disclaimer legal — vai por contrato
      </div>
    </div>
  );
}

function NewsletterArtboard() {
  return (
    <div style={{ background: 'var(--paper-2)', padding: 56, height: '100%' }}>
      <Eyebrow>05 · Newsletter — "Método Makers"</Eyebrow>
      <div style={{ background: 'var(--paper)', maxWidth: 640, margin: '24px auto 0', boxShadow: '0 20px 60px -15px rgba(0,0,0,0.2)' }}>
        <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--acid)', letterSpacing: '0.16em', fontWeight: 500 }}>// MÉTODO MAKERS</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 32, lineHeight: 1, letterSpacing: '-0.035em', marginTop: 8, fontWeight: 700 }}>Edição #024</div>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.14em', textAlign: 'right', fontWeight: 500 }}>27.04.2026<br/>4 MIN DE LEITURA</div>
        </div>

        <div style={{ padding: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--red)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>// ENSAIO PRINCIPAL</div>
          <h2 style={{ fontFamily: 'var(--font-sans)', fontSize: 40, lineHeight: 1, letterSpacing: '-0.045em', margin: '12px 0 0', fontWeight: 800 }}>
            Porque é que <span style={{ color: 'var(--red)' }}>o teu</span> CRM<br/>está sempre vazio.
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, marginTop: 16, color: 'var(--ink)' }}>
            Spoiler: não é por falta de leads. É por falta de critério na entrada. Esta semana, três decisões simples que mudam o jogo para qualquer equipa comercial pequena.
          </p>
          <button style={{ background: 'var(--ink)', color: 'var(--paper)', border: 'none', padding: '12px 18px', fontFamily: 'inherit', fontSize: 13, marginTop: 16, cursor: 'pointer', fontWeight: 500 }}>Ler ensaio completo →</button>
        </div>

        <div style={{ padding: 32, borderTop: '1px solid var(--line)' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--red)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>// 3 LINKS</div>
          {[
            ['Como o Sage cresceu em PT', 'Estudo de caso · 7 min'],
            ['Whatsapp Business API: o que mudou em 2026', 'Análise · 5 min'],
            ['Tabela de penetração digital por distrito', 'Dataset · grátis'],
          ].map(([t, m], i) => (
            <div key={t} style={{ padding: '14px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.015em' }}>{t}</div>
                <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 2, fontFamily: 'var(--font-mono)', fontWeight: 500 }}>{m}</div>
              </div>
              <div style={{ color: 'var(--red)', fontSize: 18 }}>→</div>
            </div>
          ))}
        </div>

        <div style={{ background: 'var(--paper-2)', padding: 24, textAlign: 'center', borderTop: '1px solid var(--line)' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--mute)', letterSpacing: '0.16em', fontWeight: 500 }}>
            MAKERS<span style={{ color: 'var(--red)' }}>.</span> · OEIRAS · DESINSCREVER
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BusinessCardArtboard, LetterheadArtboard, EmailSignatureArtboard, NewsletterArtboard });