// Wave 4a — Marketing (4 telas): Campanhas, Criador, Templates, Listas

// =============================================================
// 1. Campanhas
// =============================================================
const CAMPAIGNS = [
  { id: 1, nome: 'Black Friday 2026 — Kit Completo', canal: 'email', status: 'ativa', agendada: '14/04/2026 10:00', enviados: 8420, entregues: 8281, abertos: 3734, clicados: 912, conv: 142, receita: 28480, audiencia: 'Clientes VIP + Recuperação' },
  { id: 2, nome: 'Boas-vindas · nova padaria Savassi', canal: 'email', status: 'ativa', agendada: '10/04/2026 08:00', enviados: 1240, entregues: 1219, abertos: 671, clicados: 208, conv: 34, receita: 4210, audiencia: 'Leads Belo Horizonte' },
  { id: 3, nome: 'Aniversariantes de Abril — 15% off', canal: 'whatsapp', status: 'ativa', agendada: '01/04/2026 09:00', enviados: 184, entregues: 183, abertos: 172, clicados: 89, conv: 41, receita: 2180, audiencia: 'Aniversariantes' },
  { id: 4, nome: 'Lembrete · carrinho abandonado 48h', canal: 'email', status: 'ativa', agendada: 'Automação · contínua', enviados: 612, entregues: 601, abertos: 201, clicados: 78, conv: 22, receita: 1840, audiencia: 'Carrinho abandonado' },
  { id: 5, nome: 'NPS · pesquisa trimestral', canal: 'email', status: 'agendada', agendada: '20/04/2026 14:00', enviados: 0, entregues: 0, abertos: 0, clicados: 0, conv: 0, receita: 0, audiencia: 'Clientes ativos 90d' },
  { id: 6, nome: 'Reativação · 60 dias sem comprar', canal: 'whatsapp', status: 'rascunho', agendada: null, enviados: 0, entregues: 0, abertos: 0, clicados: 0, conv: 0, receita: 0, audiencia: 'Inativos 60d' },
  { id: 7, nome: 'Newsletter · receitas da semana', canal: 'email', status: 'pausada', agendada: '12/04/2026 07:00', enviados: 2140, entregues: 2089, abertos: 921, clicados: 187, conv: 12, receita: 680, audiencia: 'Base geral' },
  { id: 8, nome: 'Pedido confirmado · transacional', canal: 'email', status: 'ativa', agendada: 'Automação · transacional', enviados: 4210, entregues: 4198, abertos: 3802, clicados: 281, conv: 0, receita: 0, audiencia: 'Compradores' },
  { id: 9, nome: 'Páscoa 2026 · pré-venda colombas', canal: 'sms', status: 'concluida', agendada: '28/03/2026 10:00', enviados: 1820, entregues: 1810, abertos: 1629, clicados: 412, conv: 128, receita: 12400, audiencia: 'Base geral SMS' },
  { id: 10, nome: 'Cupom indicação · MGM', canal: 'email', status: 'concluida', agendada: '15/03/2026 11:00', enviados: 3240, entregues: 3198, abertos: 1182, clicados: 298, conv: 48, receita: 4820, audiencia: 'Clientes 3+ compras' },
  { id: 11, nome: 'Lançamento · Pão Francês Integral', canal: 'whatsapp', status: 'concluida', agendada: '02/03/2026 09:00', enviados: 420, entregues: 418, abertos: 398, clicados: 184, conv: 62, receita: 3120, audiencia: 'Clientes diários' },
];

const PageCampanhas = ({ onNavigate }) => {
  const [filter, setFilter] = React.useState('todos');
  const [canal, setCanal] = React.useState('todos');
  const filtered = CAMPAIGNS.filter(c => (filter === 'todos' || c.status === filter) && (canal === 'todos' || c.canal === canal));

  const canalMeta = {
    email: { l: 'E-mail', c: '#93c5fd', bg: 'rgba(59,130,246,.14)', i: 'mail' },
    whatsapp: { l: 'WhatsApp', c: '#86efac', bg: 'rgba(34,197,94,.14)', i: 'whatsapp' },
    sms: { l: 'SMS', c: '#fbbf24', bg: 'rgba(245,158,11,.14)', i: 'phone' },
  };
  const statusMeta = {
    ativa: { l: 'Ativa', c: '#86efac', bg: 'rgba(34,197,94,.14)' },
    agendada: { l: 'Agendada', c: '#c4b5fd', bg: 'rgba(139,92,246,.14)' },
    pausada: { l: 'Pausada', c: '#fcd34d', bg: 'rgba(245,158,11,.14)' },
    rascunho: { l: 'Rascunho', c: 'var(--text-3)', bg: 'var(--bg-3)' },
    concluida: { l: 'Concluída', c: '#93c5fd', bg: 'rgba(59,130,246,.14)' },
  };

  const totalEnv = filtered.reduce((t, c) => t + c.enviados, 0);
  const totalAbr = filtered.reduce((t, c) => t + c.abertos, 0);
  const totalClk = filtered.reduce((t, c) => t + c.clicados, 0);
  const totalRec = filtered.reduce((t, c) => t + c.receita, 0);

  return (
    <AppShell current="campanhas" onNavigate={onNavigate}>
      <PageContainer
        title="Campanhas"
        subtitle="Disparos de e-mail, WhatsApp e SMS · performance em tempo real."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm" onClick={() => onNavigate('criador')}><Icon name="plus" size={13}/> Nova campanha</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="megaphone" label="Enviados no mês" value={totalEnv.toLocaleString('pt-BR')} sub={`${filtered.length} campanhas`}/>
          <Tile icon="mail" label="Taxa de abertura" value={((totalAbr / totalEnv) * 100).toFixed(1) + '%'} delta="+3,2pp" sub="vs. média mercado 21%"/>
          <Tile icon="trending-up" label="Taxa de clique" value={((totalClk / totalAbr) * 100).toFixed(1) + '%'} sub={`${totalClk.toLocaleString('pt-BR')} cliques`}/>
          <Tile icon="wallet" label="Receita atribuída" value={BRL(totalRec)} delta="+R$ 8.200" sub="ROI 14,2x"/>
        </div>

        {/* Filters */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap', alignItems: 'center' }}>
          <div style={{ display: 'inline-flex', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 10, padding: 3 }}>
            {['todos', 'ativa', 'agendada', 'rascunho', 'concluida'].map(s => (
              <button key={s} onClick={() => setFilter(s)} style={{
                padding: '6px 12px', borderRadius: 7, fontSize: 12, fontWeight: 500,
                background: filter === s ? 'var(--bg-3)' : 'transparent',
                color: filter === s ? 'var(--text-0)' : 'var(--text-3)',
              }}>{s === 'todos' ? 'Todas' : statusMeta[s]?.l || s}</button>
            ))}
          </div>
          <select value={canal} onChange={(e) => setCanal(e.target.value)} style={rhSelectStyle}>
            <option value="todos">Todos os canais</option>
            <option value="email">E-mail</option>
            <option value="whatsapp">WhatsApp</option>
            <option value="sms">SMS</option>
          </select>
          <span style={{ flex: 1 }}/>
          <span style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{filtered.length} campanhas · ordenadas por relevância</span>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Campanha</th>
                <th>Canal</th>
                <th>Status</th>
                <th>Agendamento</th>
                <th style={{ textAlign: 'right' }}>Enviados</th>
                <th>Abertura</th>
                <th>Clique</th>
                <th style={{ textAlign: 'right' }}>Conv.</th>
                <th style={{ textAlign: 'right' }}>Receita</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(c => {
                const cm = canalMeta[c.canal];
                const sm = statusMeta[c.status];
                const abrPct = c.enviados > 0 ? (c.abertos / c.enviados) * 100 : 0;
                const clkPct = c.abertos > 0 ? (c.clicados / c.abertos) * 100 : 0;
                return (
                  <tr key={c.id} style={{ cursor: 'pointer' }}>
                    <td style={{ maxWidth: 320 }}>
                      <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 500, marginBottom: 2 }}>{c.nome}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>
                        <Icon name="users" size={10} style={{ marginRight: 4, verticalAlign: 'middle' }}/>
                        {c.audiencia}
                      </div>
                    </td>
                    <td>
                      <span className="chip" style={{ background: cm.bg, color: cm.c, fontSize: 11, fontWeight: 600 }}>
                        <Icon name={cm.i} size={11}/> {cm.l}
                      </span>
                    </td>
                    <td><span className="chip" style={{ background: sm.bg, color: sm.c, fontSize: 10.5, fontWeight: 600 }}>{sm.l}</span></td>
                    <td style={{ fontSize: 11.5, color: 'var(--text-2)', fontFamily: c.agendada?.includes(':') ? 'var(--font-mono)' : 'inherit' }}>{c.agendada || <span style={{ color: 'var(--text-4)' }}>—</span>}</td>
                    <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-0)' }}>{c.enviados.toLocaleString('pt-BR')}</td>
                    <td style={{ minWidth: 130 }}>
                      {c.enviados > 0 ? <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ flex: 1, height: 5, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden', maxWidth: 80 }}>
                          <div style={{ width: Math.min(100, abrPct) + '%', height: '100%', background: abrPct > 25 ? '#22c55e' : abrPct > 15 ? '#f59e0b' : '#ef4444' }}/>
                        </div>
                        <span style={{ fontSize: 11, fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-1)' }}>{abrPct.toFixed(1)}%</span>
                      </div> : <span style={{ color: 'var(--text-4)' }}>—</span>}
                    </td>
                    <td style={{ minWidth: 110 }}>
                      {c.abertos > 0 ? <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ flex: 1, height: 5, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden', maxWidth: 60 }}>
                          <div style={{ width: Math.min(100, clkPct * 2) + '%', height: '100%', background: 'var(--accent-1)' }}/>
                        </div>
                        <span style={{ fontSize: 11, fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-1)' }}>{clkPct.toFixed(1)}%</span>
                      </div> : <span style={{ color: 'var(--text-4)' }}>—</span>}
                    </td>
                    <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: c.conv > 0 ? '#86efac' : 'var(--text-4)' }}>{c.conv || '—'}</td>
                    <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: c.receita > 0 ? 'var(--text-0)' : 'var(--text-4)' }}>{c.receita > 0 ? BRL(c.receita) : '—'}</td>
                    <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }}><Icon name="bar-chart" size={11}/></button>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4 }}><Icon name="dots" size={11}/></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 2. Criador (Campaign Builder Wizard)
// =============================================================
const PageCriador = ({ onNavigate }) => {
  const [step, setStep] = React.useState(3);
  const [nome, setNome] = React.useState('Black Friday 2026 — Kit Completo');
  const [objetivo, setObjetivo] = React.useState('vendas');
  const [canal, setCanal] = React.useState('email');
  const [audiencia, setAudiencia] = React.useState(['vip', 'recup']);
  const [assunto, setAssunto] = React.useState('🔥 Última chance: 30% OFF em todo o kit gourmet');
  const [preheader, setPreheader] = React.useState('Termina à meia-noite. Seu cupom já está reservado.');

  const steps = [
    { id: 1, l: 'Objetivo', i: 'target' },
    { id: 2, l: 'Audiência', i: 'users' },
    { id: 3, l: 'Canal', i: 'megaphone' },
    { id: 4, l: 'Conteúdo', i: 'edit' },
    { id: 5, l: 'Agendar', i: 'calendar' },
    { id: 6, l: 'Revisar', i: 'check' },
  ];

  return (
    <AppShell current="criador" onNavigate={onNavigate}>
      <PageContainer
        title="Criador de campanha"
        subtitle="Construa e dispare em minutos · preview ao vivo."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm">Salvar rascunho</button>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Preview PDF</button>
          <button className="btn btn-primary btn-sm"><Icon name="check" size={13}/> Agendar disparo</button>
        </>}
      >
        {/* Stepper */}
        <div className="tile" style={{ marginBottom: 18, padding: '18px 20px' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {steps.map((s, i) => {
              const active = step === s.id, done = step > s.id;
              return <React.Fragment key={s.id}>
                <button onClick={() => setStep(s.id)} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px', borderRadius: 9,
                  background: active ? 'var(--accent-soft-14)' : 'transparent',
                  border: active ? '1px solid var(--accent-soft-40)' : '1px solid transparent',
                }}>
                  <span style={{
                    width: 30, height: 30, borderRadius: 8,
                    background: done ? 'var(--brand-gradient)' : active ? 'var(--accent-soft-20)' : 'var(--bg-3)',
                    color: done || active ? 'white' : 'var(--text-3)',
                    display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700,
                  }}>{done ? <Icon name="check" size={13}/> : s.id}</span>
                  <div style={{ textAlign: 'left' }}>
                    <div style={{ fontSize: 9.5, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.08em' }}>Etapa {s.id}</div>
                    <div style={{ fontSize: 12.5, fontWeight: 600, color: active ? 'var(--text-0)' : done ? 'var(--text-1)' : 'var(--text-3)' }}>{s.l}</div>
                  </div>
                </button>
                {i < steps.length - 1 && <div style={{ flex: 1, height: 2, background: done ? 'var(--brand-gradient)' : 'var(--line-2)', margin: '0 3px' }}/>}
              </React.Fragment>;
            })}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 520px', gap: 16 }} className="gridCriador">
          <style>{`@media (max-width: 1200px) { .gridCriador { grid-template-columns: 1fr !important; } }`}</style>

          {/* Left: step content */}
          <div className="tile" style={{ padding: 24 }}>
            <h3 style={{ margin: '0 0 4px', fontSize: 19, fontWeight: 700, color: 'var(--text-0)', letterSpacing: '-.01em' }}>{steps.find(s => s.id === step).l}</h3>
            <p style={{ margin: '0 0 22px', fontSize: 13, color: 'var(--text-3)' }}>{
              step === 1 ? 'Qual o objetivo principal desta campanha?' :
              step === 2 ? 'Escolha segmentos de clientes que irão receber.' :
              step === 3 ? 'Por qual canal enviar a mensagem?' :
              step === 4 ? 'Monte o conteúdo · assunto, preheader, corpo e CTA.' :
              step === 5 ? 'Quando disparar?' : 'Revise tudo antes de agendar.'
            }</p>

            {step === 1 && <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { id: 'vendas', l: 'Vendas e promoções', i: 'wallet', c: '#86efac', desc: 'Ofertas, lançamentos, kits e cupons de desconto' },
                { id: 'engajamento', l: 'Engajamento', i: 'heart', c: '#f9a8d4', desc: 'Newsletter, conteúdo, receitas e novidades' },
                { id: 'retencao', l: 'Retenção', i: 'repeat', c: '#c4b5fd', desc: 'Recuperação de carrinho, reativação de inativos' },
                { id: 'transacional', l: 'Transacional', i: 'receipt', c: '#93c5fd', desc: 'Confirmação de pedido, entrega, boleto' },
                { id: 'pesquisa', l: 'Pesquisa NPS', i: 'star', c: '#fbbf24', desc: 'Coletar feedback e satisfação dos clientes' },
                { id: 'boas-vindas', l: 'Boas-vindas', i: 'sparkle', c: '#67e8f9', desc: 'Onboarding de novos cadastros e primeiros pedidos' },
              ].map(o => (
                <button key={o.id} onClick={() => setObjetivo(o.id)} style={{
                  padding: 16, borderRadius: 12, textAlign: 'left',
                  background: objetivo === o.id ? 'var(--accent-soft-14)' : 'var(--bg-base)',
                  border: `1px solid ${objetivo === o.id ? 'var(--accent-soft-40)' : 'var(--line-1)'}`,
                }}>
                  <Icon name={o.i} size={20} color={o.c}/>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-0)', marginTop: 10 }}>{o.l}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 4, lineHeight: 1.45 }}>{o.desc}</div>
                </button>
              ))}
            </div>}

            {step === 2 && <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { id: 'vip', l: 'Clientes VIP', count: 284, desc: 'LTV > R$ 1.200 · compraram nos últimos 30 dias', i: 'star', c: '#fbbf24' },
                { id: 'recup', l: 'Recuperação 30d', count: 1420, desc: 'Compraram nos últimos 90d mas não nos últimos 30', i: 'repeat', c: '#c4b5fd' },
                { id: 'aniv', l: 'Aniversariantes do mês', count: 184, desc: 'Data de nascimento em abril/2026', i: 'sparkle', c: '#f9a8d4' },
                { id: 'base', l: 'Base geral', count: 8420, desc: 'Todos contatos opt-in · engajados 180d', i: 'users', c: '#93c5fd' },
                { id: 'savassi', l: 'Proximidade Savassi', count: 640, desc: 'Geolocalização até 5km da filial Savassi', i: 'map-pin', c: '#86efac' },
              ].map(seg => {
                const sel = audiencia.includes(seg.id);
                return (
                  <label key={seg.id} style={{
                    display: 'flex', alignItems: 'center', gap: 14, padding: 14, borderRadius: 10, cursor: 'pointer',
                    background: sel ? 'var(--accent-soft-10)' : 'var(--bg-base)',
                    border: `1px solid ${sel ? 'var(--accent-soft-40)' : 'var(--line-1)'}`,
                  }}>
                    <span style={{ width: 36, height: 36, borderRadius: 8, background: seg.c + '22', color: seg.c, display: 'grid', placeItems: 'center' }}>
                      <Icon name={seg.i} size={16}/>
                    </span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-0)' }}>{seg.l}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2 }}>{seg.desc}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>{seg.count.toLocaleString('pt-BR')}</div>
                      <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>contatos</div>
                    </div>
                    <span style={{
                      width: 22, height: 22, borderRadius: 6,
                      background: sel ? 'var(--accent-1)' : 'var(--bg-2)',
                      border: `1px solid ${sel ? 'var(--accent-1)' : 'var(--line-2)'}`,
                      display: 'grid', placeItems: 'center',
                    }}>{sel && <Icon name="check" size={13} color="white"/>}</span>
                  </label>
                );
              })}
              <div style={{ marginTop: 6, padding: '10px 14px', background: 'var(--accent-soft-10)', borderRadius: 9, fontSize: 12 }}>
                <Icon name="users" size={13} style={{ verticalAlign: 'middle', color: 'var(--accent-text)' }}/> <b style={{ color: 'var(--text-0)' }}>1.704 contatos únicos</b> selecionados (sem duplicação). Previsão de alcance: 1.632 após supressão de blacklist.
              </div>
            </div>}

            {step === 3 && <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              {[
                { id: 'email', l: 'E-mail', i: 'mail', c: '#93c5fd', custo: 'R$ 0,012', best: 'Alta taxa abertura · melhor ROI' },
                { id: 'whatsapp', l: 'WhatsApp', i: 'whatsapp', c: '#86efac', custo: 'R$ 0,18', best: 'Entrega garantida · urgência' },
                { id: 'sms', l: 'SMS', i: 'phone', c: '#fbbf24', custo: 'R$ 0,09', best: 'Lembrete rápido · 160 char' },
              ].map(c => (
                <button key={c.id} onClick={() => setCanal(c.id)} style={{
                  padding: 20, borderRadius: 12, textAlign: 'center',
                  background: canal === c.id ? 'var(--accent-soft-14)' : 'var(--bg-base)',
                  border: `2px solid ${canal === c.id ? 'var(--accent-1)' : 'var(--line-1)'}`,
                }}>
                  <Icon name={c.i} size={32} color={c.c}/>
                  <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-0)', marginTop: 12 }}>{c.l}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 6, minHeight: 32 }}>{c.best}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--line-1)' }}>
                    Custo: <b style={{ color: c.c, fontVariantNumeric: 'tabular-nums', fontFamily: 'var(--font-mono)' }}>{c.custo}/envio</b>
                  </div>
                </button>
              ))}
              <div style={{ gridColumn: '1 / -1', padding: '12px 16px', background: 'var(--accent-soft-10)', borderRadius: 10, fontSize: 12 }}>
                <Icon name="wallet" size={13} style={{ verticalAlign: 'middle', color: 'var(--accent-text)' }}/> <b style={{ color: 'var(--text-0)' }}>Custo estimado: R$ 19,58</b> para {canal === 'email' ? '1.632 e-mails × R$ 0,012' : canal === 'whatsapp' ? '1.632 msgs × R$ 0,18 = R$ 293,76' : '1.632 SMS × R$ 0,09 = R$ 146,88'}
              </div>
            </div>}

            {step === 4 && <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Nome da campanha (interno)</div>
                <input value={nome} onChange={(e) => setNome(e.target.value)} className="inp-mkt"/>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Assunto do e-mail</div>
                <input value={assunto} onChange={(e) => setAssunto(e.target.value)} className="inp-mkt"/>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4, display: 'flex', gap: 10 }}>
                  <span>{assunto.length}/60 caracteres</span>
                  <span style={{ color: '#86efac' }}><Icon name="check" size={10}/> Spam score: baixo</span>
                  <span style={{ color: 'var(--accent-text)', marginLeft: 'auto', cursor: 'pointer' }}><Icon name="sparkle" size={10}/> Sugerir com IA</span>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Preheader (preview na caixa)</div>
                <input value={preheader} onChange={(e) => setPreheader(e.target.value)} className="inp-mkt"/>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Template base</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                  {['Oferta', 'Newsletter', 'Limpo', 'Produto'].map((t, i) => (
                    <button key={t} style={{
                      padding: 8, borderRadius: 8, border: `1px solid ${i === 0 ? 'var(--accent-1)' : 'var(--line-2)'}`,
                      background: i === 0 ? 'var(--accent-soft-14)' : 'var(--bg-base)',
                    }}>
                      <div style={{ height: 48, background: 'var(--bg-3)', borderRadius: 4, marginBottom: 6, display: 'grid', placeItems: 'center', fontSize: 10, color: 'var(--text-3)' }}>preview</div>
                      <div style={{ fontSize: 11, color: 'var(--text-1)' }}>{t}</div>
                    </button>
                  ))}
                </div>
              </div>
            </div>}

            {(step === 5 || step === 6) && <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {step === 5 && <>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <button style={{ padding: 16, borderRadius: 10, background: 'var(--bg-base)', border: '1px solid var(--line-1)', textAlign: 'left' }}>
                    <Icon name="zap" size={16} color="var(--accent-text)"/>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)', marginTop: 8 }}>Enviar agora</div>
                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>Dispara em até 3 minutos</div>
                  </button>
                  <button style={{ padding: 16, borderRadius: 10, background: 'var(--accent-soft-14)', border: '1px solid var(--accent-soft-40)', textAlign: 'left' }}>
                    <Icon name="calendar" size={16} color="var(--accent-text)"/>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)', marginTop: 8 }}>Agendar disparo</div>
                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>Melhor horário sugerido: ter 10h</div>
                  </button>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                  <div>
                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Data</div>
                    <input type="date" defaultValue="2026-04-22" className="inp-mkt"/>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Horário</div>
                    <input type="time" defaultValue="10:00" className="inp-mkt"/>
                  </div>
                </div>
                <div style={{ padding: 14, background: 'var(--bg-base)', border: '1px solid var(--line-1)', borderRadius: 10 }}>
                  <div style={{ fontSize: 12, color: 'var(--text-0)', fontWeight: 600, marginBottom: 8 }}>
                    <Icon name="sparkle" size={12} color="var(--accent-text)"/> Otimização inteligente
                  </div>
                  <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--text-2)' }}>
                    <input type="checkbox" defaultChecked/> Enviar no melhor horário de cada contato (send-time optimization)
                  </label>
                  <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--text-2)', marginTop: 8 }}>
                    <input type="checkbox" defaultChecked/> Reenviar para quem não abriu após 48h (com novo assunto)
                  </label>
                </div>
              </>}
              {step === 6 && <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  ['Nome', nome], ['Objetivo', 'Vendas e promoções'],
                  ['Canal', 'E-mail'], ['Audiência', '2 segmentos · 1.704 contatos'],
                  ['Assunto', assunto], ['Agendamento', '22/04/2026 · 10:00'],
                  ['Custo estimado', 'R$ 19,58'], ['Receita projetada', 'R$ 4.280 – R$ 8.120'],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'grid', gridTemplateColumns: '170px 1fr', gap: 12, paddingBottom: 10, borderBottom: '1px solid var(--line-1)' }}>
                    <span style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{k}</span>
                    <span style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 500 }}>{v}</span>
                  </div>
                ))}
                <div style={{ padding: 14, background: 'rgba(34,197,94,.08)', border: '1px solid rgba(34,197,94,.2)', borderRadius: 10 }}>
                  <Icon name="check" size={14} color="#86efac"/>
                  <span style={{ marginLeft: 8, fontSize: 13, color: '#86efac', fontWeight: 600 }}>Tudo pronto para disparo.</span>
                </div>
              </div>}
            </div>}

            <div style={{ display: 'flex', gap: 10, marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line-1)' }}>
              <button onClick={() => setStep(Math.max(1, step - 1))} disabled={step === 1} className="btn btn-outline" style={{ opacity: step === 1 ? .4 : 1 }}>← Voltar</button>
              <span style={{ flex: 1 }}/>
              <button onClick={() => setStep(Math.min(6, step + 1))} className="btn btn-primary">{step === 6 ? 'Agendar disparo' : 'Avançar'} →</button>
            </div>
          </div>

          {/* Right: preview */}
          <CampaignPreview canal={canal} assunto={assunto} preheader={preheader}/>
        </div>

        <style>{`
          .inp-mkt { width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 13px;
            background: var(--bg-base); border: 1px solid var(--line-2); color: var(--text-0); }
          .inp-mkt:focus { outline: none; border-color: var(--accent-1); }
        `}</style>
      </PageContainer>
    </AppShell>
  );
};

const CampaignPreview = ({ canal, assunto, preheader }) => {
  const [device, setDevice] = React.useState('mobile');
  return (
    <div className="tile" style={{ padding: 0, position: 'sticky', top: 16, height: 'fit-content', maxHeight: 'calc(100vh - 140px)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div className="sect-title">Preview ao vivo</div>
        <span className="grow"/>
        <div style={{ display: 'inline-flex', background: 'var(--bg-3)', borderRadius: 8, padding: 3 }}>
          {['mobile', 'desktop'].map(d => (
            <button key={d} onClick={() => setDevice(d)} style={{
              padding: '5px 10px', borderRadius: 6, fontSize: 11, fontWeight: 500,
              background: device === d ? 'var(--bg-1)' : 'transparent',
              color: device === d ? 'var(--text-0)' : 'var(--text-3)',
            }}>{d === 'mobile' ? '📱 Mobile' : '🖥️ Desktop'}</button>
          ))}
        </div>
      </div>
      <div style={{ flex: 1, padding: 20, overflowY: 'auto', background: '#0a0c18', display: 'grid', placeItems: 'start center' }}>
        {canal === 'email' && <EmailPreview device={device} assunto={assunto} preheader={preheader}/>}
        {canal === 'whatsapp' && <WhatsAppPreview/>}
        {canal === 'sms' && <SmsPreview/>}
      </div>
    </div>
  );
};

const EmailPreview = ({ device, assunto, preheader }) => (
  <div style={{
    width: device === 'mobile' ? 320 : '100%', maxWidth: device === 'mobile' ? 320 : 560,
    background: '#f4f4f5', borderRadius: 12, overflow: 'hidden',
    boxShadow: '0 20px 50px rgba(0,0,0,.6)', color: '#0b0c16',
  }}>
    {/* Inbox header */}
    <div style={{ padding: '14px 16px', background: '#fff', borderBottom: '1px solid #e4e4e7' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg, #f59e0b, #d97706)', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 13 }}>PA</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, color: '#0b0c16', fontWeight: 600 }}>Padaria Automatiza</div>
          <div style={{ fontSize: 10.5, color: '#71717a' }}>para você · há 2 min</div>
        </div>
        <Icon name="star" size={13} color="#a1a1aa"/>
      </div>
      <div style={{ fontSize: 14, color: '#0b0c16', fontWeight: 700, lineHeight: 1.3 }}>{assunto}</div>
      <div style={{ fontSize: 11.5, color: '#71717a', marginTop: 3 }}>{preheader}</div>
    </div>
    {/* Hero */}
    <div style={{ padding: '32px 24px', background: 'linear-gradient(135deg, #f59e0b, #dc2626)', color: 'white', textAlign: 'center' }}>
      <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.2em', opacity: .9 }}>Oferta exclusiva · só hoje</div>
      <div style={{ fontSize: 32, fontWeight: 900, margin: '10px 0', letterSpacing: '-.02em' }}>30% OFF</div>
      <div style={{ fontSize: 13, opacity: .95 }}>no kit gourmet completo</div>
    </div>
    {/* Body */}
    <div style={{ padding: '24px 20px', background: '#fff' }}>
      <div style={{ fontSize: 13.5, color: '#27272a', lineHeight: 1.6 }}>
        Olá <b>Ana</b>,<br/><br/>
        Você foi selecionada para nossa promoção mais esperada do ano. Garante o <b>kit completo Padaria Automatiza</b> — pães artesanais, queijos, geleias e o nosso famoso brigadeiro gourmet — com 30% de desconto exclusivo.<br/><br/>
        Use o cupom <b style={{ background: '#fef3c7', padding: '2px 6px', borderRadius: 4, fontFamily: 'monospace' }}>ANA30</b> no checkout.
      </div>
      <div style={{ textAlign: 'center', margin: '24px 0 8px' }}>
        <div style={{ display: 'inline-block', padding: '14px 36px', background: 'linear-gradient(135deg, #dc2626, #b91c1c)', color: 'white', borderRadius: 10, fontSize: 14, fontWeight: 700 }}>Resgatar agora →</div>
      </div>
      <div style={{ fontSize: 11, color: '#71717a', textAlign: 'center', marginTop: 14 }}>⏰ Válido até 22/04 23:59 · apenas 48 resgates disponíveis</div>
    </div>
    {/* Footer */}
    <div style={{ padding: '14px 20px', background: '#f4f4f5', borderTop: '1px solid #e4e4e7', fontSize: 10, color: '#71717a', textAlign: 'center' }}>
      Padaria Automatiza · Av. Cristiano Machado, 2840 · BH/MG<br/>
      <span style={{ textDecoration: 'underline' }}>Descadastrar</span> · Atualizar preferências
    </div>
  </div>
);

const WhatsAppPreview = () => (
  <div style={{ width: 300, background: '#0b141a', borderRadius: 16, overflow: 'hidden', boxShadow: '0 20px 50px rgba(0,0,0,.6)' }}>
    <div style={{ padding: '10px 14px', background: '#202c33', display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg, #f59e0b, #d97706)', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 11 }}>PA</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5, color: '#e9edef', fontWeight: 600 }}>Padaria Automatiza</div>
        <div style={{ fontSize: 10, color: '#8696a0' }}>✓ Oficial · digitando...</div>
      </div>
    </div>
    <div style={{ padding: 16, background: '#0b141a url(\'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"%3E%3Ccircle cx="20" cy="20" r="1" fill="%23182229" opacity=".5"/%3E%3C/svg%3E\')', minHeight: 280 }}>
      <div style={{ maxWidth: '85%', background: '#202c33', padding: '8px 10px', borderRadius: '4px 10px 10px 10px', color: '#e9edef', fontSize: 12.5, lineHeight: 1.4 }}>
        🎂 <b>Parabéns, Ana!</b><br/><br/>
        Hoje é seu aniversário! 🎉 Como presente, liberamos <b>15% OFF</b> em qualquer pedido acima de R$ 50 durante toda a semana.<br/><br/>
        Use o cupom:<br/>
        <code style={{ background: '#0b141a', padding: '2px 6px', borderRadius: 4, display: 'inline-block', marginTop: 4 }}>ANIVANA15</code><br/><br/>
        📍 Matriz · Filial Savassi · Delivery<br/>
        <div style={{ fontSize: 9, color: '#8696a0', textAlign: 'right', marginTop: 6 }}>10:02 ✓✓</div>
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
        <button style={{ flex: 1, padding: '8px', background: '#005c4b', color: '#e9edef', border: 'none', borderRadius: 8, fontSize: 11, fontWeight: 600 }}>🛒 Ver cardápio</button>
        <button style={{ flex: 1, padding: '8px', background: '#202c33', color: '#e9edef', border: 'none', borderRadius: 8, fontSize: 11, fontWeight: 600 }}>ℹ️ Saber mais</button>
      </div>
    </div>
  </div>
);

const SmsPreview = () => (
  <div style={{ width: 280, background: '#f2f2f7', borderRadius: 16, padding: 18, boxShadow: '0 20px 50px rgba(0,0,0,.6)', color: '#000' }}>
    <div style={{ textAlign: 'center', fontSize: 10.5, color: '#8e8e93', marginBottom: 12 }}>Padaria · agora</div>
    <div style={{ background: '#e9e9eb', padding: '10px 14px', borderRadius: '16px 16px 16px 4px', fontSize: 13, lineHeight: 1.4 }}>
      Padaria Automatiza: Última chance! 30% OFF no kit gourmet só hoje. Cupom ANA30. Compre em padaria.com.br/bf R$ frete grátis acima R$80.
    </div>
    <div style={{ textAlign: 'center', fontSize: 10, color: '#8e8e93', marginTop: 8 }}>156/160 caracteres</div>
  </div>
);

// =============================================================
// 3. Templates
// =============================================================
const TEMPLATES = [
  { id: 1, nome: 'Black Friday · Oferta Hero', cat: 'promocional', cor: 'linear-gradient(135deg,#f59e0b,#dc2626)', icon: '🔥', uses: 8, updated: '12/04/2026', editor: 'Ana' },
  { id: 2, nome: 'Boas-vindas · simples', cat: 'onboarding', cor: 'linear-gradient(135deg,#22c55e,#0891b2)', icon: '👋', uses: 12, updated: '05/04/2026', editor: 'Patrícia' },
  { id: 3, nome: 'Newsletter · receitas da semana', cat: 'engajamento', cor: 'linear-gradient(135deg,#8b5cf6,#ec4899)', icon: '📰', uses: 24, updated: '10/04/2026', editor: 'Ana' },
  { id: 4, nome: 'Carrinho abandonado · 24h', cat: 'transacional', cor: 'linear-gradient(135deg,#3b82f6,#1e40af)', icon: '🛒', uses: 18, updated: '28/03/2026', editor: 'Sistema' },
  { id: 5, nome: 'Aniversário · cupom especial', cat: 'engajamento', cor: 'linear-gradient(135deg,#ec4899,#db2777)', icon: '🎂', uses: 16, updated: '01/04/2026', editor: 'Patrícia' },
  { id: 6, nome: 'Produto novo · lançamento', cat: 'promocional', cor: 'linear-gradient(135deg,#06b6d4,#3b82f6)', icon: '✨', uses: 6, updated: '18/03/2026', editor: 'Ana' },
  { id: 7, nome: 'NPS · pesquisa satisfação', cat: 'pesquisa', cor: 'linear-gradient(135deg,#f59e0b,#eab308)', icon: '⭐', uses: 4, updated: '20/03/2026', editor: 'Patrícia' },
  { id: 8, nome: 'Confirmação de pedido', cat: 'transacional', cor: 'linear-gradient(135deg,#10b981,#059669)', icon: '✅', uses: 4210, updated: '02/02/2026', editor: 'Sistema' },
  { id: 9, nome: 'Reativação · 60 dias', cat: 'retencao', cor: 'linear-gradient(135deg,#7c3aed,#9333ea)', icon: '💫', uses: 3, updated: '15/03/2026', editor: 'Ana' },
  { id: 10, nome: 'Promoção flash · 2h', cat: 'promocional', cor: 'linear-gradient(135deg,#ef4444,#b91c1c)', icon: '⚡', uses: 9, updated: '08/04/2026', editor: 'Ana' },
  { id: 11, nome: 'Indicação · MGM', cat: 'retencao', cor: 'linear-gradient(135deg,#0ea5e9,#0284c7)', icon: '🎁', uses: 7, updated: '12/03/2026', editor: 'Patrícia' },
  { id: 12, nome: 'Dia das Mães · especial', cat: 'sazonal', cor: 'linear-gradient(135deg,#f43f5e,#e11d48)', icon: '💐', uses: 0, updated: '14/04/2026', editor: 'Ana' },
];

const PageTemplates = ({ onNavigate }) => {
  const [cat, setCat] = React.useState('todos');
  const [editor, setEditor] = React.useState(false);
  const filtered = TEMPLATES.filter(t => cat === 'todos' || t.cat === cat);
  const catColors = {
    promocional: '#ef4444', onboarding: '#22c55e', engajamento: '#8b5cf6',
    transacional: '#3b82f6', pesquisa: '#f59e0b', retencao: '#7c3aed', sazonal: '#f43f5e',
  };

  if (editor) return <TemplateEditor onBack={() => setEditor(false)}/>;

  return (
    <AppShell current="templates" onNavigate={onNavigate}>
      <PageContainer
        title="Templates de e-mail"
        subtitle="Biblioteca reutilizável · drag & drop editor."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Importar HTML</button>
          <button className="btn btn-primary btn-sm" onClick={() => setEditor(true)}><Icon name="plus" size={13}/> Novo template</button>
        </>}
      >
        <div style={{ display: 'flex', gap: 6, marginBottom: 16, flexWrap: 'wrap' }}>
          {['todos', 'promocional', 'engajamento', 'transacional', 'onboarding', 'retencao', 'pesquisa', 'sazonal'].map(c => (
            <button key={c} onClick={() => setCat(c)} style={{
              padding: '8px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, textTransform: 'capitalize',
              background: cat === c ? 'var(--brand-gradient)' : 'var(--bg-2)',
              color: cat === c ? 'white' : 'var(--text-2)',
              border: `1px solid ${cat === c ? 'transparent' : 'var(--line-2)'}`,
            }}>
              {c === 'todos' ? 'Todos' : c}
              <span style={{ marginLeft: 6, fontSize: 10.5, opacity: .7 }}>
                {c === 'todos' ? TEMPLATES.length : TEMPLATES.filter(t => t.cat === c).length}
              </span>
            </button>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14 }}>
          {filtered.map(t => (
            <div key={t.id} className="tile" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }} onClick={() => setEditor(true)}>
              {/* Thumb */}
              <div style={{ height: 160, background: t.cor, position: 'relative', display: 'grid', placeItems: 'center' }}>
                <div style={{ fontSize: 44, filter: 'drop-shadow(0 4px 12px rgba(0,0,0,.3))' }}>{t.icon}</div>
                <div style={{ position: 'absolute', top: 10, right: 10, padding: '3px 8px', background: 'rgba(0,0,0,.3)', borderRadius: 999, fontSize: 10, color: 'white', fontWeight: 600, backdropFilter: 'blur(10px)', textTransform: 'capitalize' }}>{t.cat}</div>
                {/* Fake email chrome */}
                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 40, background: 'rgba(255,255,255,.92)', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 12px' }}>
                  <div style={{ height: 4, background: '#27272a', borderRadius: 2, width: '70%', marginBottom: 4 }}/>
                  <div style={{ height: 3, background: '#a1a1aa', borderRadius: 2, width: '40%' }}/>
                </div>
              </div>
              <div style={{ padding: 14 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)', marginBottom: 6, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.nome}</div>
                <div style={{ display: 'flex', gap: 10, fontSize: 10.5, color: 'var(--text-3)' }}>
                  <span><Icon name="repeat" size={10}/> {t.uses} usos</span>
                  <span><Icon name="calendar" size={10}/> {t.updated}</span>
                </div>
                <div style={{ display: 'flex', gap: 4, marginTop: 10 }}>
                  <button className="btn btn-outline btn-sm" style={{ flex: 1, fontSize: 11, padding: '5px 8px' }}><Icon name="edit" size={10}/> Editar</button>
                  <button className="btn btn-outline btn-sm" style={{ fontSize: 11, padding: '5px 8px' }}><Icon name="repeat" size={10}/></button>
                  <button className="btn btn-outline btn-sm" style={{ fontSize: 11, padding: '5px 8px' }}><Icon name="dots" size={10}/></button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </PageContainer>
    </AppShell>
  );
};

const TemplateEditor = ({ onBack }) => {
  const [selectedBlock, setSelectedBlock] = React.useState(1);
  const blocks = [
    { type: 'header', i: 'grid' },
    { type: 'hero', i: 'megaphone' },
    { type: 'texto', i: 'edit' },
    { type: 'botao', i: 'zap' },
    { type: 'imagem', i: 'grid' },
    { type: 'divisor', i: 'menu' },
    { type: 'footer', i: 'doc' },
  ];
  const layoutBlocks = [
    { id: 1, type: 'header', label: 'Logo + menu' },
    { id: 2, type: 'hero', label: '30% OFF · Oferta' },
    { id: 3, type: 'texto', label: 'Corpo do e-mail' },
    { id: 4, type: 'botao', label: 'Resgatar agora →' },
    { id: 5, type: 'footer', label: 'Endereço + unsubscribe' },
  ];

  return (
    <AppShell current="templates">
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr 320px', height: 'calc(100vh - 70px)', background: 'var(--bg-base)' }}>
        {/* Blocks palette */}
        <div style={{ borderRight: '1px solid var(--line-1)', padding: 16, overflowY: 'auto' }}>
          <button onClick={onBack} className="btn btn-outline btn-sm" style={{ marginBottom: 16, width: '100%', justifyContent: 'center' }}>← Voltar</button>
          <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-3)', fontWeight: 600, marginBottom: 10 }}>Arraste blocos</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {blocks.map(b => (
              <div key={b.type} style={{
                padding: '10px 12px', border: '1px dashed var(--line-2)', borderRadius: 8,
                display: 'flex', alignItems: 'center', gap: 10, cursor: 'grab',
                background: 'var(--bg-2)', textTransform: 'capitalize', fontSize: 12.5, color: 'var(--text-1)',
              }}>
                <Icon name={b.i} size={13} color="var(--text-3)"/>{b.type}
              </div>
            ))}
          </div>
        </div>
        {/* Canvas */}
        <div style={{ padding: 24, overflowY: 'auto', display: 'grid', placeItems: 'start center' }}>
          <div style={{ width: 540, background: '#f4f4f5', borderRadius: 12, overflow: 'hidden', boxShadow: '0 20px 50px rgba(0,0,0,.3)' }}>
            {layoutBlocks.map(b => (
              <div key={b.id} onClick={() => setSelectedBlock(b.id)} style={{
                padding: b.type === 'hero' ? 0 : '18px 20px',
                background: b.type === 'hero' ? 'linear-gradient(135deg,#f59e0b,#dc2626)' : b.type === 'footer' ? '#27272a' : '#fff',
                color: b.type === 'hero' ? 'white' : b.type === 'footer' ? '#a1a1aa' : '#0b0c16',
                borderTop: '1px solid #e4e4e7',
                outline: selectedBlock === b.id ? '3px solid var(--accent-1)' : 'none',
                outlineOffset: -3, cursor: 'pointer',
                textAlign: b.type === 'hero' ? 'center' : 'left',
              }}>
                {b.type === 'header' && <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'linear-gradient(135deg,#f59e0b,#d97706)', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700 }}>PA</div>
                  <b style={{ fontSize: 14 }}>Padaria Automatiza</b>
                </div>}
                {b.type === 'hero' && <div style={{ padding: '36px 24px' }}>
                  <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '.2em', opacity: .9 }}>oferta exclusiva</div>
                  <div style={{ fontSize: 40, fontWeight: 900, margin: '10px 0' }}>30% OFF</div>
                  <div style={{ fontSize: 13, opacity: .95 }}>no kit gourmet completo</div>
                </div>}
                {b.type === 'texto' && <div style={{ fontSize: 13.5, lineHeight: 1.6 }}>Olá <b>Ana</b>,<br/><br/>Você foi selecionada para nossa promoção mais esperada do ano...</div>}
                {b.type === 'botao' && <div style={{ textAlign: 'center' }}>
                  <div style={{ display: 'inline-block', padding: '14px 36px', background: 'linear-gradient(135deg,#dc2626,#b91c1c)', color: 'white', borderRadius: 10, fontSize: 14, fontWeight: 700 }}>Resgatar agora →</div>
                </div>}
                {b.type === 'footer' && <div style={{ fontSize: 11, textAlign: 'center' }}>Padaria Automatiza · BH/MG<br/><span style={{ textDecoration: 'underline' }}>Descadastrar</span></div>}
              </div>
            ))}
          </div>
        </div>
        {/* Properties */}
        <div style={{ borderLeft: '1px solid var(--line-1)', padding: 20, overflowY: 'auto' }}>
          <div className="sect-title" style={{ marginBottom: 14 }}>Propriedades do bloco</div>
          {selectedBlock && <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Texto principal</div>
              <textarea rows="3" defaultValue="30% OFF" className="inp-mkt" style={{ width: '100%', padding: 10, borderRadius: 8, fontSize: 13, background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-0)', resize: 'vertical' }}/>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Cor de fundo</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {['linear-gradient(135deg,#f59e0b,#dc2626)', 'linear-gradient(135deg,#22c55e,#0891b2)', 'linear-gradient(135deg,#8b5cf6,#ec4899)', '#27272a', '#f4f4f5'].map(c => (
                  <button key={c} style={{ width: 36, height: 36, borderRadius: 8, background: c, border: '1px solid var(--line-2)' }}/>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Alinhamento</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
                {['left', 'center', 'right'].map(a => (
                  <button key={a} style={{ padding: 8, borderRadius: 6, background: a === 'center' ? 'var(--accent-soft-14)' : 'var(--bg-2)', border: `1px solid ${a === 'center' ? 'var(--accent-1)' : 'var(--line-2)'}`, fontSize: 11, color: 'var(--text-1)', textTransform: 'capitalize' }}>{a}</button>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Padding</div>
              <div style={{ display: 'flex', gap: 6 }}>
                <input defaultValue="36" type="number" style={{ flex: 1, padding: 8, borderRadius: 6, background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-0)', fontSize: 12 }}/>
                <input defaultValue="24" type="number" style={{ flex: 1, padding: 8, borderRadius: 6, background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-0)', fontSize: 12 }}/>
              </div>
            </div>
          </div>}
        </div>
      </div>
    </AppShell>
  );
};

// =============================================================
// 4. Listas de envio
// =============================================================
const LISTAS = [
  { id: 1, nome: 'Base geral · opt-in', fonte: 'crm', contatos: 8420, engajados: 5120, ult: '17/04/2026 · 14:22', tags: ['geral', 'opt-in'], desc: 'Todos contatos com consentimento ativo de marketing' },
  { id: 2, nome: 'VIPs LTV > R$ 1.200', fonte: 'crm', contatos: 284, engajados: 278, ult: '17/04/2026 · 14:22', tags: ['vip', 'alto-valor'], desc: 'Clientes com ticket médio e frequência acima da média' },
  { id: 3, nome: 'Leads BH formulário site', fonte: 'form', contatos: 1240, engajados: 412, ult: '14/04/2026 · 09:15', tags: ['lead', 'form'], desc: 'Formulário newsletter da landing page · último mês' },
  { id: 4, nome: 'Importação Feira Gastronômica', fonte: 'csv', contatos: 320, engajados: 48, ult: '02/04/2026 · 17:40', tags: ['evento'], desc: 'Planilha coletada no stand da Feira BH Gourmet 2026' },
  { id: 5, nome: 'Aniversariantes (dinâmica)', fonte: 'crm', contatos: 184, engajados: 172, ult: '01/04/2026 · auto', tags: ['dinâmica'], desc: 'Filtro dinâmico · atualiza diariamente · mês corrente' },
  { id: 6, nome: 'Inativos 60-90 dias', fonte: 'crm', contatos: 890, engajados: 22, ult: '15/04/2026 · auto', tags: ['inativo', 'recuperar'], desc: 'Segmentação dinâmica para campanha de reativação' },
  { id: 7, nome: 'B2B restaurantes parceiros', fonte: 'csv', contatos: 42, engajados: 38, ult: '28/03/2026 · 11:20', tags: ['b2b'], desc: 'Contatos de chefs e compradores B2B' },
  { id: 8, nome: 'Proximidade Savassi 5km', fonte: 'crm', contatos: 640, engajados: 421, ult: '17/04/2026 · auto', tags: ['geo', 'dinâmica'], desc: 'Filtro por geolocalização · CEP dos clientes' },
];

const PageListas = ({ onNavigate }) => {
  const [sel, setSel] = React.useState(null);
  const fonteIcon = { crm: { i: 'users', l: 'CRM', c: '#93c5fd' }, csv: { i: 'file', l: 'CSV', c: '#86efac' }, form: { i: 'edit', l: 'Formulário', c: '#c4b5fd' } };

  return (
    <AppShell current="listas" onNavigate={onNavigate}>
      <PageContainer
        title="Listas de envio"
        subtitle="Segmentação estática e dinâmica para suas campanhas."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Importar CSV</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Nova lista</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="users" label="Total de contatos" value={LISTAS.reduce((t, l) => t + l.contatos, 0).toLocaleString('pt-BR')} sub={`${LISTAS.length} listas ativas`}/>
          <Tile icon="check" label="Engajados 90d" value={LISTAS.reduce((t, l) => t + l.engajados, 0).toLocaleString('pt-BR')} sub="abertos ou clicaram"/>
          <Tile icon="sync" label="Listas dinâmicas" value={LISTAS.filter(l => l.tags.includes('dinâmica')).length} sub="atualizam sozinhas"/>
          <Tile icon="ban" label="Suprimidos" value="142" sub="blacklist ativa"/>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Lista</th>
                <th>Fonte</th>
                <th style={{ textAlign: 'right' }}>Contatos</th>
                <th>Engajamento</th>
                <th>Última atualização</th>
                <th>Tags</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {LISTAS.map(l => {
                const f = fonteIcon[l.fonte];
                const engajPct = (l.engajados / l.contatos) * 100;
                return (
                  <tr key={l.id} onClick={() => setSel(l)} style={{ cursor: 'pointer' }}>
                    <td>
                      <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 600 }}>{l.nome}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>{l.desc}</div>
                    </td>
                    <td><span className="chip" style={{ background: f.c + '22', color: f.c, fontSize: 10.5, fontWeight: 600 }}><Icon name={f.i} size={10}/> {f.l}</span></td>
                    <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-0)' }}>{l.contatos.toLocaleString('pt-BR')}</td>
                    <td style={{ minWidth: 160 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <div style={{ flex: 1, height: 5, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden', maxWidth: 90 }}>
                          <div style={{ width: engajPct + '%', height: '100%', background: engajPct > 70 ? '#22c55e' : engajPct > 30 ? '#f59e0b' : '#ef4444' }}/>
                        </div>
                        <span style={{ fontSize: 11, fontVariantNumeric: 'tabular-nums', color: 'var(--text-1)', fontWeight: 600 }}>{engajPct.toFixed(0)}%</span>
                      </div>
                    </td>
                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-2)' }}>{l.ult}</td>
                    <td>
                      <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                        {l.tags.map(t => <span key={t} className="chip" style={{ fontSize: 10, background: 'var(--bg-3)', color: 'var(--text-2)' }}>{t}</span>)}
                      </div>
                    </td>
                    <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }}><Icon name="megaphone" size={11}/></button>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4 }}><Icon name="dots" size={11}/></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {sel && <ListaDrawer lista={sel} onClose={() => setSel(null)}/>}
      </PageContainer>
    </AppShell>
  );
};

const ListaDrawer = ({ lista, onClose }) => {
  const members = [
    { nome: 'Ana Carolina Silva', email: 'ana.silva@gmail.com', compras: 12, ultima: '15/04/2026', engaj: 95 },
    { nome: 'Bruno Oliveira', email: 'bruno.oli@gmail.com', compras: 8, ultima: '12/04/2026', engaj: 78 },
    { nome: 'Carolina Mendes', email: 'carol.mendes@hotmail.com', compras: 24, ultima: '10/04/2026', engaj: 98 },
    { nome: 'Diego Ferreira', email: 'diego.f@outlook.com', compras: 6, ultima: '02/04/2026', engaj: 62 },
    { nome: 'Eduardo Santos', email: 'eduardo.s@uol.com.br', compras: 15, ultima: '14/04/2026', engaj: 88 },
    { nome: 'Fernanda Costa', email: 'fer.costa@gmail.com', compras: 9, ultima: '08/04/2026', engaj: 71 },
  ];
  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.65)', zIndex: 100, backdropFilter: 'blur(4px)' }}/>
      <div style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: 560, zIndex: 101, background: 'var(--bg-1)', borderLeft: '1px solid var(--line-2)', boxShadow: '-24px 0 60px rgba(0,0,0,.6)', overflowY: 'auto' }}>
        <div style={{ padding: 24, borderBottom: '1px solid var(--line-1)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 14 }}>
            <div>
              <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700, color: 'var(--text-0)' }}>{lista.nome}</h2>
              <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 4 }}>{lista.desc}</div>
            </div>
            <button onClick={onClose} className="shell-top-btn" style={{ width: 32, height: 32 }}><Icon name="x" size={14}/></button>
          </div>
          <div className="row-4" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
            <MiniKPI label="Contatos" value={lista.contatos.toLocaleString('pt-BR')} sub=""/>
            <MiniKPI label="Engajados" value={lista.engajados.toLocaleString('pt-BR')} sub={`${((lista.engajados/lista.contatos)*100).toFixed(0)}%`}/>
            <MiniKPI label="Suprimidos" value="12" sub="blacklist"/>
          </div>
        </div>

        <div style={{ padding: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <div className="sect-title">Membros</div>
            <span className="grow"/>
            <input placeholder="Buscar..." style={{ padding: '6px 10px', borderRadius: 7, fontSize: 12, background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-0)', width: 160 }}/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {members.map((m, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', background: 'var(--bg-2)', borderRadius: 9, border: '1px solid var(--line-1)' }}>
                <Avatar name={m.nome} size={32}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{m.nome}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{m.email}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 11.5, color: 'var(--text-2)', fontVariantNumeric: 'tabular-nums' }}>{m.compras} compras</div>
                  <div style={{ fontSize: 10, color: 'var(--text-3)' }}>última {m.ultima}</div>
                </div>
                <div style={{ width: 40, textAlign: 'center' }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: m.engaj > 80 ? '#86efac' : '#fcd34d', fontVariantNumeric: 'tabular-nums' }}>{m.engaj}</div>
                  <div style={{ fontSize: 9, color: 'var(--text-3)' }}>engaj</div>
                </div>
              </div>
            ))}
            <button className="btn btn-outline btn-sm" style={{ justifyContent: 'center', marginTop: 6 }}>Ver todos {lista.contatos.toLocaleString('pt-BR')} contatos →</button>
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { CAMPAIGNS, LISTAS, TEMPLATES, PageCampanhas, PageCriador, PageTemplates, PageListas });