/* Makers — Email & Campanhas · Opção 2 */

/* ── Assinatura de email ── */
function EmailSignatureO2() {
  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 48, width: '100%', height: '100%' }}>
      <O2Eyebrow>10 · Email · Assinatura</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 28, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 32px', color: 'var(--o2-ink)' }}>
        Assinatura de email
      </h2>

      {/* Signature preview */}
      <div style={{ background: 'var(--o2-white)', borderRadius: 14, border: '1px solid var(--o2-line)', padding: 28, maxWidth: 560, marginBottom: 24 }}>
        <div style={{ borderTop: '3px solid var(--o2-petrol)', paddingTop: 20 }}>
          <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
            {/* Left: logo + divider */}
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, paddingRight: 16, borderRight: '1px solid var(--o2-line)' }}>
              <MakersMarkO2 size={44} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={9}/>
            </div>
            {/* Right: contact info */}
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 2 }}>Filipe Almeida</div>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'var(--o2-cyan-2)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10 }}>Founder · CEO</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {[
                  { icon: '✉', val: 'filipe@makers.pt' },
                  { icon: '☎', val: '+351 967 822 668' },
                  { icon: '⊙', val: 'makers.pt' },
                  { icon: '⌖', val: 'Oeiras, Portugal' },
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--o2-muted)' }}>
                    <span style={{ color: 'var(--o2-cyan)', fontSize: 10, width: 12, flexShrink: 0 }}>{r.icon}</span>
                    {r.val}
                  </div>
                ))}
              </div>
              {/* Badge strip */}
              <div style={{ marginTop: 14, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {['Automação', 'Vendas', 'Operação'].map((b, i) => (
                  <span key={i} style={{ background: 'var(--o2-petrol)', color: 'var(--o2-cyan)', borderRadius: 99, padding: '3px 10px', fontSize: 10, fontFamily: 'var(--o2-mono)', fontWeight: 500, letterSpacing: '0.06em' }}>{b}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Product variants */}
      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
        {[
          { product: 'explorador', color: '#22C55E', label: 'Explorador' },
          { product: 'aos',        color: '#F59E0B', label: 'AOS' },
          { product: 'whatsapp',   color: '#16A34A', label: 'WhatsApp Bot' },
        ].map((p, i) => (
          <div key={i} style={{ background: 'var(--o2-white)', borderRadius: 12, border: '1px solid var(--o2-line)', padding: '16px 20px', display: 'flex', gap: 12, alignItems: 'center' }}>
            <MakersMarkO2 size={36} bg={p.color} accent="rgba(255,255,255,0.2)" radius={8}/>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--o2-ink)' }}>Filipe Almeida</div>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: p.color }}>makers/{p.product}</div>
              <div style={{ fontSize: 11, color: 'var(--o2-muted)', marginTop: 2 }}>filipe@makers.pt</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── Newsletter ── */
function NewsletterO2() {
  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 40, width: '100%', height: '100%', display: 'flex', alignItems: 'flex-start', justifyContent: 'center' }}>
      <div style={{ width: '100%', maxWidth: 600 }}>
        <O2Eyebrow>10 · Email · Newsletter</O2Eyebrow>

        {/* Email container */}
        <div style={{ background: 'var(--o2-white)', borderRadius: 14, overflow: 'hidden', boxShadow: '0 4px 24px rgba(15,47,58,0.08)', border: '1px solid var(--o2-line)' }}>
          {/* Header */}
          <div style={{ background: 'var(--o2-petrol)', padding: '24px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <MakersLogoO2 size={32} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
            <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.1em' }}>MAKERS SIGNAL · #014</div>
          </div>

          {/* Edition bar */}
          <div style={{ background: 'var(--o2-cyan-pale)', padding: '10px 32px', borderBottom: '1px solid var(--o2-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-cyan-2)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Maio 2026</div>
            <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-muted)' }}>Automação · Vendas · Operação</div>
          </div>

          <div style={{ padding: '28px 32px' }}>
            {/* Editorial */}
            <div style={{ marginBottom: 24 }}>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.03em', color: 'var(--o2-ink)', lineHeight: 1.2, marginBottom: 12 }}>
                Como transformar conversas comerciais em follow-ups automáticos
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--o2-muted)' }}>
                A maioria das empresas perde oportunidades não por falta de leads, mas por falta de sistematização. Nesta edição: o ciclo completo de conversão com automação.
              </div>
            </div>

            {/* 3 content blocks */}
            {[
              { num: '01', title: 'O custo invisível do follow-up manual', color: 'var(--o2-explorador)', tag: 'Prospecção', body: 'Cada lead sem seguimento automático tem um custo. Mostramos como calcular o impacto real e como o eliminar com Explorador + AOS.' },
              { num: '02', title: 'WhatsApp como canal de qualificação', color: 'var(--o2-whatsapp)', tag: 'Conversas', body: 'O Bot WhatsApp não substitui a equipa — estrutura o contacto para que a equipa actue apenas quando é necessário.' },
              { num: '03', title: 'AOS: da tarefa ao resultado', color: 'var(--o2-aos)', tag: 'Operação', body: 'Como organizar o pipeline de follow-ups sem depender de memória ou folhas de cálculo. Demonstração em vídeo disponível.' },
            ].map((block, i) => (
              <div key={i} style={{ marginBottom: 18, background: 'var(--o2-paper)', borderRadius: 10, padding: '16px 20px', borderLeft: `3px solid ${block.color}` }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: block.color, fontWeight: 600, flexShrink: 0, marginTop: 2 }}>{block.num}</div>
                  <div>
                    <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 6 }}>
                      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--o2-ink)', letterSpacing: '-0.01em' }}>{block.title}</div>
                      <span style={{ background: `${block.color}22`, color: block.color, borderRadius: 99, padding: '2px 8px', fontSize: 10, fontFamily: 'var(--o2-mono)', fontWeight: 600 }}>{block.tag}</span>
                    </div>
                    <div style={{ fontSize: 13, lineHeight: 1.65, color: 'var(--o2-muted)' }}>{block.body}</div>
                  </div>
                </div>
              </div>
            ))}

            {/* Insight block */}
            <div style={{ background: 'var(--o2-petrol)', borderRadius: 10, padding: '18px 20px', marginBottom: 20 }}>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>Insight operacional desta semana</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: '#fff', lineHeight: 1.3, marginBottom: 8 }}>
                "A resposta em menos de 5 minutos aumenta a probabilidade de qualificação em proporção significativa."
              </div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)', fontStyle: 'italic' }}>Observação interna com base em dados de clientes Makers — [indicador de referência, não estatística publicada]</div>
            </div>

            {/* CTA */}
            <div style={{ textAlign: 'center' }}>
              <div style={{ background: 'var(--o2-petrol)', color: '#fff', borderRadius: 8, padding: '13px 28px', fontSize: 14, fontWeight: 700, display: 'inline-block', cursor: 'pointer' }}>
                Agendar diagnóstico gratuito →
              </div>
              <div style={{ fontSize: 12, color: 'var(--o2-muted)', marginTop: 12 }}>30 minutos · sem compromisso · remote-first</div>
            </div>
          </div>

          {/* Footer */}
          <div style={{ background: 'var(--o2-paper)', padding: '16px 32px', borderTop: '1px solid var(--o2-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 11, color: 'var(--o2-muted)' }}>makers.pt · Oeiras, Portugal · <span style={{ textDecoration: 'underline', cursor: 'pointer' }}>cancelar subscrição</span></div>
            <MakersWordmarkO2 size={12} color="var(--o2-muted)" accent="var(--o2-cyan)"/>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Email Marketing Turismo ── */
function EmailMarketingTurismoO2() {
  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 40, width: '100%', height: '100%', display: 'flex', alignItems: 'flex-start', justifyContent: 'center' }}>
      <div style={{ width: '100%', maxWidth: 640 }}>
        <O2Eyebrow>10 · Email Marketing · Campanha Agências de Turismo</O2Eyebrow>

        {/* Desktop email */}
        <div style={{ background: 'var(--o2-white)', borderRadius: 14, overflow: 'hidden', boxShadow: '0 4px 24px rgba(15,47,58,0.1)', border: '1px solid var(--o2-line)', marginBottom: 20 }}>
          {/* Subject / Preheader strip */}
          <div style={{ background: 'var(--o2-paper-2)', padding: '10px 28px', borderBottom: '1px solid var(--o2-line)' }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--o2-ink)', marginBottom: 2 }}>
              A sua agência responde aos pedidos antes da concorrência?
            </div>
            <div style={{ fontSize: 12, color: 'var(--o2-muted)' }}>
              Automatize respostas, qualificação e follow-ups sem perder o toque humano.
            </div>
          </div>

          {/* Header */}
          <div style={{ background: 'var(--o2-petrol)', padding: '24px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <MakersLogoO2 size={30} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
            <div style={{ display: 'flex', gap: 8 }}>
              <MakersMarkO2 size={26} bg="#22C55E" accent="rgba(255,255,255,0.2)" radius={6}/>
              <MakersMarkO2 size={26} bg="#16A34A" accent="rgba(255,255,255,0.2)" radius={6}/>
              <MakersMarkO2 size={26} bg="#F59E0B" accent="rgba(255,255,255,0.2)" radius={6}/>
            </div>
          </div>

          {/* Hero */}
          <div style={{ background: 'var(--o2-petrol)', padding: '40px 32px 32px', position: 'relative', overflow: 'hidden' }}>
            <svg style={{ position: 'absolute', right: 0, top: 0, height: '100%', opacity: 0.07, pointerEvents: 'none' }} viewBox="0 0 400 200" width={400}>
              <path d="M100 180 Q200 60 300 100 T420 40" stroke="var(--o2-cyan)" strokeWidth="2" fill="none"/>
              <circle cx="200" cy="100" r="5" fill="var(--o2-explorador)"/>
              <circle cx="300" cy="80" r="4" fill="var(--o2-cyan)"/>
            </svg>
            <div style={{ position: 'relative' }}>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-cyan)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 14 }}>Para agências de turismo · Portugal</div>
              <h1 style={{ fontFamily: 'var(--o2-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', color: '#fff', lineHeight: 1.1, margin: '0 0 16px' }}>
                Transforme pedidos<br/>de viagem em<br/><span style={{ color: '#22C55E' }}>propostas prontas.</span>
              </h1>
              <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.6)', lineHeight: 1.6, maxWidth: 400 }}>
                Com Makers, a sua agência responde em menos de 2 minutos, qualifica automaticamente e nunca perde um follow-up.
              </div>
            </div>
          </div>

          <div style={{ padding: '28px 32px' }}>
            {/* 4 blocks */}
            {[
              { icon: '◉', color: '#16A34A', bg: '#f0fdf4', title: '1. Resposta imediata no WhatsApp', body: 'Cada pedido recebido no WhatsApp tem resposta automática em segundos — com informações relevantes e pedido de detalhes para qualificação.' },
              { icon: '◆', color: '#22C55E', bg: 'var(--o2-green-pale)', title: '2. Qualificação automática do pedido', body: 'O sistema identifica destino, datas, número de passageiros e orçamento. Apenas pedidos qualificados chegam à equipa comercial.' },
              { icon: '▣', color: '#F59E0B', bg: 'var(--o2-amber-pale)', title: '3. Organização de propostas e follow-ups', body: 'AOS cria automaticamente o ticket de proposta, agenda o follow-up e notifica a equipa no momento certo. Sem folhas de cálculo.' },
              { icon: '▶', color: 'var(--o2-cyan)', bg: 'var(--o2-cyan-pale)', title: '4. Menos oportunidades perdidas na época alta', body: 'Em época alta, o volume de pedidos excede a capacidade humana. Com Makers, todos os pedidos são respondidos, qualificados e acompanhados.' },
            ].map((b, i) => (
              <div key={i} style={{ display: 'flex', gap: 16, marginBottom: 18, background: b.bg, borderRadius: 10, padding: 16 }}>
                <div style={{ width: 36, height: 36, background: b.color, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ color: '#fff', fontSize: 14 }}>{b.icon}</span>
                </div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 6 }}>{b.title}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.65, color: 'var(--o2-muted)' }}>{b.body}</div>
                </div>
              </div>
            ))}

            {/* Stat callout - placeholder only */}
            <div style={{ background: 'var(--o2-paper)', borderRadius: 10, padding: '14px 20px', marginBottom: 24, borderLeft: '3px solid var(--o2-cyan)', display: 'flex', gap: 12, alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'var(--o2-muted)', fontStyle: 'italic' }}>
                [Nota: indicadores de desempenho disponíveis após implementação · dados reais por cliente]
              </span>
            </div>

            {/* CTA */}
            <div style={{ textAlign: 'center', marginBottom: 8 }}>
              <div style={{ background: '#22C55E', color: '#fff', borderRadius: 10, padding: '14px 36px', fontSize: 15, fontWeight: 700, display: 'inline-block', cursor: 'pointer' }}>
                Agendar diagnóstico gratuito
              </div>
              <div style={{ fontSize: 12, color: 'var(--o2-muted)', marginTop: 10 }}>30 minutos · remote · sem compromisso</div>
            </div>
          </div>

          {/* Footer */}
          <div style={{ background: 'var(--o2-petrol-2)', padding: '18px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', lineHeight: 1.6 }}>
              © 2026 Makers · makers.pt<br/>
              Oeiras, Portugal · <span style={{ textDecoration: 'underline', cursor: 'pointer' }}>cancelar subscrição</span>
            </div>
            <MakersWordmarkO2 size={12} color="rgba(255,255,255,0.2)" accent="rgba(24,199,212,0.3)"/>
          </div>
        </div>

        {/* Mobile preview */}
        <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
          <div>
            <O2Label children="Preview mobile · 375px"/>
            <div style={{ width: 240, background: 'var(--o2-white)', borderRadius: 10, overflow: 'hidden', border: '1px solid var(--o2-line)', marginTop: 10 }}>
              <div style={{ background: 'var(--o2-petrol)', padding: '12px 16px' }}>
                <MakersMarkO2 size={28} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={6}/>
              </div>
              <div style={{ background: 'var(--o2-petrol)', padding: '16px 16px 14px' }}>
                <div style={{ fontSize: 16, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.15 }}>
                  Transforme pedidos de viagem em propostas prontas.
                </div>
              </div>
              <div style={{ padding: '12px 16px' }}>
                {[
                  { color: '#16A34A', label: 'Resposta imediata' },
                  { color: '#22C55E', label: 'Qualificação auto' },
                  { color: '#F59E0B', label: 'Follow-up AOS' },
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
                    <div style={{ width: 8, height: 8, borderRadius: '50%', background: r.color, flexShrink: 0 }}/>
                    <div style={{ fontSize: 11, color: 'var(--o2-ink)' }}>{r.label}</div>
                  </div>
                ))}
                <div style={{ background: '#22C55E', color: '#fff', borderRadius: 6, padding: '9px 0', fontSize: 12, fontWeight: 700, textAlign: 'center', marginTop: 8 }}>Agendar diagnóstico</div>
              </div>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <O2Label children="Compliance & Notas"/>
            <div style={{ marginTop: 10, background: 'var(--o2-paper)', borderRadius: 10, padding: 16, border: '1px solid var(--o2-line)' }}>
              {[
                '✓ Sem estatísticas falsas ou fontes inventadas',
                '✓ Indicadores de desempenho marcados como placeholders',
                '✓ Opção de cancelar subscrição visível',
                '✓ Dados de contacto reais (filipe@makers.pt)',
                '✓ Identificação clara como comunicação comercial',
                '✓ Sem promessas de resultados específicos garantidos',
              ].map((n, i) => (
                <div key={i} style={{ fontSize: 12, color: 'var(--o2-muted)', marginBottom: 6, lineHeight: 1.5 }}>{n}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EmailSignatureO2, NewsletterO2, EmailMarketingTurismoO2 });