/* Makers — Cartão de Visita · Opção 1 */

function BusinessCardO1() {
  return (
    <O1Card bg="var(--o1-paper-2)" pad={56}>
      <O1Eyebrow>05 · Cartão de visita · 85×55mm</O1Eyebrow>

      <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', marginTop: 8 }}>

        {/* ── FRENTE ── */}
        <div style={{ position: 'relative' }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', marginBottom: 12, fontWeight: 500 }}>Frente</div>
          <div style={{
            width: 425, height: 255,
            background: 'var(--o1-paper)',
            padding: 28,
            position: 'relative',
            boxShadow: '0 12px 48px -10px rgba(0,0,0,0.14)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            overflow: 'hidden',
          }}>
            {/* Top violet stripe */}
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--o1-violet)' }}/>

            {/* Logo */}
            <MakersLogoO1 size={32} color="var(--o1-ink)" accent="var(--o1-violet)"/>

            {/* Contact info */}
            <div>
              <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 20, letterSpacing: '-0.025em', fontWeight: 700, lineHeight: 1.1 }}>Filipe Almeida</div>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'var(--o1-violet)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 6, fontWeight: 500 }}>FOUNDER · CEO</div>
              <div style={{ height: 1, background: 'var(--o1-line)', margin: '14px 0', width: 40 }}/>
              <div style={{ fontSize: 11, color: 'var(--o1-mute)', lineHeight: 1.7, fontFamily: 'var(--o1-mono)', fontWeight: 500 }}>
                filipe@makers.pt<br/>
                +351 967 822 668<br/>
                makers.pt
              </div>
            </div>
          </div>
        </div>

        {/* ── VERSO ── */}
        <div>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', marginBottom: 12, fontWeight: 500 }}>Verso</div>
          <div style={{
            width: 425, height: 255,
            background: 'var(--o1-ink)',
            color: 'var(--o1-paper)',
            padding: 28,
            boxShadow: '0 12px 48px -10px rgba(0,0,0,0.28)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            position: 'relative',
            overflow: 'hidden',
          }}>
            {/* Subtle grid overlay */}
            <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(91,63,222,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(91,63,222,0.07) 1px, transparent 1px)', backgroundSize: '28px 28px', pointerEvents: 'none' }}/>

            <div style={{ position: 'relative' }}>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'var(--o1-cyan)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>// manifesto.txt</div>
            </div>

            <div style={{ position: 'relative', fontFamily: 'var(--o1-sans)', fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.03em', fontWeight: 700 }}>
              Sistemas que<br/>operam por <span style={{ color: 'var(--o1-violet)' }}>você.</span>
            </div>

            <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <MakersMarkO1 size={36} bg="var(--o1-violet)" color="#FFFFFF"/>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 9, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.14em', fontWeight: 500, textAlign: 'right' }}>
                MAKERS · PT<br/>2026
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ── Versão com acento ── */}
      <div style={{ marginTop: 32, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
        {/* Variante violeta */}
        <div>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', marginBottom: 12, fontWeight: 500 }}>Variante — Frente acento</div>
          <div style={{
            width: 340, height: 204,
            background: 'var(--o1-violet)',
            color: '#fff',
            padding: 24,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            boxShadow: '0 12px 48px -10px rgba(91,63,222,0.45)',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', bottom: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }}/>
            <MakersLogoO1 size={26} color="#FFFFFF" accent="#FFFFFF" markBg="rgba(255,255,255,0.2)" markColor="#FFFFFF"/>
            <div>
              <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 17, fontWeight: 700, letterSpacing: '-0.02em' }}>Filipe Almeida</div>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 4, opacity: 0.7, fontWeight: 500 }}>FOUNDER · CEO</div>
              <div style={{ height: 1, background: 'rgba(255,255,255,0.25)', margin: '10px 0', width: 32 }}/>
              <div style={{ fontSize: 10, opacity: 0.8, lineHeight: 1.6, fontFamily: 'var(--o1-mono)', fontWeight: 500 }}>
                filipe@makers.pt · makers.pt
              </div>
            </div>
          </div>
        </div>

        {/* Produto filho — exemplo AOS */}
        <div>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--o1-mute)', marginBottom: 12, fontWeight: 500 }}>Variante — Produto filho (AOS)</div>
          <div style={{
            width: 340, height: 204,
            background: 'var(--o1-paper)',
            padding: 24,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            boxShadow: '0 12px 48px -10px rgba(0,0,0,0.12)',
            border: '1px solid var(--o1-line)',
            position: 'relative',
            overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: 0, left: 0, width: 3, bottom: 0, background: 'var(--o1-violet)' }}/>
            <MakersLogoO1 size={24} color="var(--o1-ink)" accent="var(--o1-violet)" product="aos"/>
            <div>
              <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 16, fontWeight: 700, letterSpacing: '-0.02em' }}>Filipe Almeida</div>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 9, color: 'var(--o1-violet)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 4, fontWeight: 500 }}>AOS LEAD · MAKERS</div>
              <div style={{ height: 1, background: 'var(--o1-line)', margin: '10px 0', width: 32 }}/>
              <div style={{ fontSize: 10, color: 'var(--o1-mute)', lineHeight: 1.6, fontFamily: 'var(--o1-mono)', fontWeight: 500 }}>
                filipe@makers.pt · makers.pt/aos
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Specs */}
      <div style={{ marginTop: 32, padding: 24, background: 'var(--o1-paper)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, fontSize: 12, border: '1px solid var(--o1-line)' }}>
        <div><O1Eyebrow>Stock</O1Eyebrow><div>350g uncoated branco</div></div>
        <div><O1Eyebrow>Acabamento</O1Eyebrow><div>Mate total · cantos vivos</div></div>
        <div><O1Eyebrow>Acentos</O1Eyebrow><div>Violeta Pantone 2665C</div></div>
        <div><O1Eyebrow>Tipografia</O1Eyebrow><div>Geist 700 · Geist Mono 500</div></div>
      </div>
    </O1Card>
  );
}

/* ── ASSINATURA DE EMAIL ── */
function EmailSignatureO1() {
  return (
    <O1Card bg="var(--o1-paper-2)" pad={56}>
      <O1Eyebrow>06 · Assinatura de email</O1Eyebrow>
      <h3 style={{ fontFamily: 'var(--o1-sans)', fontSize: 36, lineHeight: 1, letterSpacing: '-0.035em', margin: '0 0 24px', fontWeight: 700 }}>HTML inline. Gmail, Outlook, Apple Mail.</h3>

      <div style={{ background: 'var(--o1-paper)', padding: 32, boxShadow: '0 8px 24px -8px rgba(0,0,0,0.12)' }}>
        <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'var(--o1-mute)', letterSpacing: '0.14em', marginBottom: 16, fontWeight: 500 }}>DE: filipe@makers.pt</div>
        <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--o1-ink)' }}>
          <p style={{ margin: 0 }}>Olá João,</p>
          <p style={{ marginTop: 8 }}>Segue o briefing que combinámos. Avisa se faz sentido alinharmos esta semana.</p>
          <p style={{ marginTop: 8 }}>Abraço, Filipe.</p>
        </div>
        <div style={{ height: 1, background: 'var(--o1-line)', margin: '24px 0' }}/>
        <table style={{ borderCollapse: 'collapse' }}>
          <tbody>
            <tr>
              <td style={{ paddingRight: 20, borderRight: '2px solid var(--o1-violet)', verticalAlign: 'top' }}>
                <MakersMarkO1 size={48} bg="var(--o1-ink)" color="#FFFFFF"/>
              </td>
              <td style={{ paddingLeft: 20, fontFamily: 'Geist, Helvetica, sans-serif' }}>
                <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.02em', color: '#080810' }}>Filipe Almeida</div>
                <div style={{ fontSize: 12, color: '#62627A', marginTop: 2 }}>Founder · <span style={{ color: '#080810', fontWeight: 600 }}>makers<span style={{ color: '#5B3FDE' }}>.</span></span></div>
                <div style={{ fontSize: 12, color: '#62627A', marginTop: 8, fontFamily: 'Geist Mono, monospace' }}>
                  <a style={{ color: '#080810', textDecoration: 'none' }}>makers.pt</a> · +351 967 822 668
                </div>
                <div style={{ marginTop: 10, fontFamily: 'Geist Mono, monospace', fontSize: 10, color: '#5B3FDE', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>
                  ● Built with makers
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

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

/* ── NEWSLETTER ── */
function NewsletterO1() {
  return (
    <O1Card bg="var(--o1-paper-2)" pad={56}>
      <O1Eyebrow>07 · Newsletter — "Makers Signal"</O1Eyebrow>
      <div style={{ background: 'var(--o1-paper)', maxWidth: 640, margin: '24px auto 0', boxShadow: '0 20px 60px -15px rgba(0,0,0,0.16)' }}>
        {/* Header */}
        <div style={{ background: 'var(--o1-ink)', color: 'var(--o1-paper)', padding: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, color: 'var(--o1-cyan)', letterSpacing: '0.16em', fontWeight: 500 }}>// MAKERS SIGNAL</div>
            <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 32, lineHeight: 1, letterSpacing: '-0.035em', marginTop: 8, fontWeight: 700 }}>Edição #001</div>
          </div>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.14em', textAlign: 'right', fontWeight: 500 }}>04.05.2026<br/>4 MIN</div>
        </div>
        {/* Body */}
        <div style={{ padding: 32 }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, color: 'var(--o1-violet)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>// ENSAIO PRINCIPAL</div>
          <h2 style={{ fontFamily: 'var(--o1-sans)', fontSize: 38, lineHeight: 1, letterSpacing: '-0.04em', margin: '12px 0 0', fontWeight: 800 }}>
            O que separa automação<br/>de <span style={{ color: 'var(--o1-violet)' }}>operação real.</span>
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, marginTop: 16, color: 'var(--o1-ink)' }}>
            Toda empresa tem um processo que devia ser automático mas ainda depende de alguém a copiar dados entre dois sistemas. Esta semana, três padrões que encontramos em clientes — e como resolvemos cada um.
          </p>
          <button style={{ background: 'var(--o1-violet)', color: '#fff', border: 'none', padding: '12px 18px', fontFamily: 'inherit', fontSize: 13, marginTop: 16, cursor: 'pointer', fontWeight: 500 }}>Ler ensaio completo →</button>
        </div>
        {/* Links */}
        <div style={{ padding: 32, borderTop: '1px solid var(--o1-line)' }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 11, color: 'var(--o1-violet)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500 }}>// 3 LINKS</div>
          {[
            ['Como o AOS reduziu 80% do trabalho manual', 'Caso · 6 min'],
            ['WhatsApp Business API: o que mudou em 2026', 'Análise · 5 min'],
            ['Checklist de automação para PME', 'PDF grátis'],
          ].map(([t, m], i) => (
            <div key={t} style={{ padding: '14px 0', borderTop: i === 0 ? 'none' : '1px solid var(--o1-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(--o1-mute)', marginTop: 2, fontFamily: 'var(--o1-mono)', fontWeight: 500 }}>{m}</div>
              </div>
              <div style={{ color: 'var(--o1-violet)', fontSize: 18 }}>→</div>
            </div>
          ))}
        </div>
        {/* Footer */}
        <div style={{ background: 'var(--o1-paper-2)', padding: 20, textAlign: 'center', borderTop: '1px solid var(--o1-line)' }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'var(--o1-mute)', letterSpacing: '0.16em', fontWeight: 500 }}>
            MAKERS<span style={{ color: 'var(--o1-violet)' }}>.</span> · OEIRAS · DESINSCREVER
          </div>
        </div>
      </div>
    </O1Card>
  );
}

/* ── EMAIL MARKETING — Campanha Agências de Turismo ── */
function EmailMarketingTurismoO1() {
  return (
    <O1Card bg="var(--o1-paper-2)" pad={56}>
      <O1Eyebrow>08 · Email marketing · Campanha — Agências de Turismo</O1Eyebrow>
      <div style={{ background: 'var(--o1-paper)', maxWidth: 640, margin: '16px auto 0', boxShadow: '0 20px 60px -15px rgba(0,0,0,0.16)' }}>

        {/* Hero block */}
        <div style={{ background: 'var(--o1-violet)', color: '#fff', padding: '40px 40px 32px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)', backgroundSize: '32px 32px', pointerEvents: 'none' }}/>
          <div style={{ position: 'relative' }}>
            <MakersLogoO1 size={28} color="#FFFFFF" accent="#FFFFFF" markBg="rgba(255,255,255,0.2)" markColor="#FFFFFF"/>
            <div style={{ marginTop: 32, fontFamily: 'var(--o1-mono)', fontSize: 11, letterSpacing: '0.16em', color: 'rgba(255,255,255,0.6)', fontWeight: 500 }}>PARA: AGÊNCIAS DE TURISMO · MAIO 2026</div>
            <h1 style={{ fontFamily: 'var(--o1-sans)', fontSize: 44, lineHeight: 0.95, letterSpacing: '-0.04em', margin: '12px 0 0', fontWeight: 800 }}>
              A sua agência<br/>a vender enquanto<br/>você dorme.
            </h1>
          </div>
        </div>

        {/* Intro */}
        <div style={{ padding: '32px 40px 24px' }}>
          <p style={{ fontSize: 15, lineHeight: 1.7, margin: 0, color: 'var(--o1-ink)' }}>
            Olá,<br/><br/>
            Sabia que <strong>73% das agências de turismo</strong> perdem leads porque não têm resposta imediata fora do horário comercial?<br/><br/>
            Com o <strong style={{ color: 'var(--o1-violet)' }}>makers/whatsapp</strong>, o seu sistema responde, qualifica e agenda visitas — às 3h da manhã, se necessário.
          </p>
        </div>

        {/* Feature grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--o1-line)', margin: '0 40px' }}>
          {[
            { icon: '●', title: 'Resposta imediata', body: 'Bot treinado no seu catálogo. Responde a perguntas sobre pacotes, preços e disponibilidade 24/7.' },
            { icon: '◆', title: 'Qualificação automática', body: 'Identifica destino, datas e orçamento antes de enviar para a sua equipa.' },
            { icon: '▲', title: 'Integração WhatsApp', body: 'Canal onde os seus clientes já estão. Sem apps novas, sem fricção.' },
            { icon: '■', title: 'Dashboard em tempo real', body: 'Vê todos os leads, status e conversões num só lugar.' },
          ].map((f, i) => (
            <div key={i} style={{ background: 'var(--o1-paper)', padding: 24 }}>
              <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 14, color: 'var(--o1-violet)', marginBottom: 10 }}>{f.icon}</div>
              <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 8 }}>{f.title}</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--o1-mute)' }}>{f.body}</div>
            </div>
          ))}
        </div>

        {/* Social proof */}
        <div style={{ padding: '28px 40px', borderTop: '1px solid var(--o1-line)', borderBottom: '1px solid var(--o1-line)', margin: '24px 0 0' }}>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 10, color: 'var(--o1-violet)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 12, fontWeight: 500 }}>// resultado real</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, textAlign: 'center' }}>
            {[['3×', 'mais leads qualificados'], ['68%', 'redução de tempo de resposta'], ['24/7', 'operação sem custo extra']].map(([n, t]) => (
              <div key={n}>
                <div style={{ fontFamily: 'var(--o1-sans)', fontSize: 36, fontWeight: 800, letterSpacing: '-0.04em', color: 'var(--o1-ink)' }}>{n}</div>
                <div style={{ fontSize: 11, color: 'var(--o1-mute)', marginTop: 4, lineHeight: 1.4 }}>{t}</div>
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div style={{ padding: '32px 40px', textAlign: 'center' }}>
          <p style={{ fontSize: 14, color: 'var(--o1-mute)', margin: '0 0 20px', lineHeight: 1.6 }}>
            Oferta de lançamento: <strong style={{ color: 'var(--o1-ink)' }}>primeiro mês sem custo</strong> para agências de turismo.<br/>Instalação em 48h. Sem contrato de permanência.
          </p>
          <a style={{ display: 'inline-block', background: 'var(--o1-violet)', color: '#fff', padding: '16px 32px', fontFamily: 'inherit', fontSize: 15, fontWeight: 600, textDecoration: 'none', letterSpacing: '-0.01em' }}>
            Quero experimentar grátis →
          </a>
          <div style={{ marginTop: 16, fontFamily: 'var(--o1-mono)', fontSize: 11, color: 'var(--o1-mute)', letterSpacing: '0.12em', fontWeight: 500 }}>
            OU WHATSAPP · +351 967 822 668
          </div>
        </div>

        {/* Footer */}
        <div style={{ background: 'var(--o1-ink)', padding: '20px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <MakersLogoO1 size={22} color="#FAFAFA" accent="var(--o1-violet)"/>
          <div style={{ fontFamily: 'var(--o1-mono)', fontSize: 9, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.14em', fontWeight: 500 }}>
            MAKERS · OEIRAS · DESINSCREVER · VER NO BROWSER
          </div>
        </div>
      </div>
    </O1Card>
  );
}

Object.assign(window, { BusinessCardO1, EmailSignatureO1, NewsletterO1, EmailMarketingTurismoO1 });