// Wave 4b — Marketing (4 telas): Blacklist, Gerador IA, Lead Scoring, Relatórios Mailing

// =============================================================
// 5. Blacklist
// =============================================================
const BLACKLIST = [
  { id: 1, contato: 'spam-reporter@outlook.com', tipo: 'email', motivo: 'spam', data: '15/04/2026', origem: 'Black Friday 2026', auto: true },
  { id: 2, contato: 'bounced-address@invalido.com', tipo: 'email', motivo: 'hard-bounce', data: '14/04/2026', origem: 'Newsletter · abril', auto: true },
  { id: 3, contato: 'user@empresa-falida.com', tipo: 'email', motivo: 'hard-bounce', data: '14/04/2026', origem: 'Boas-vindas Savassi', auto: true },
  { id: 4, contato: '+5531988776655', tipo: 'whatsapp', motivo: 'unsubscribe', data: '13/04/2026', origem: 'Aniversariantes', auto: true },
  { id: 5, contato: 'naoquero@gmail.com', tipo: 'email', motivo: 'unsubscribe', data: '13/04/2026', origem: 'Black Friday 2026', auto: true },
  { id: 6, contato: 'cliente.insatisfeito@hotmail.com', tipo: 'email', motivo: 'manual', data: '12/04/2026', origem: 'Solicitação LGPD', auto: false, op: 'Patrícia' },
  { id: 7, contato: 'test@example.com', tipo: 'email', motivo: 'manual', data: '10/04/2026', origem: 'Limpeza manual', auto: false, op: 'Ana' },
  { id: 8, contato: 'spam@spam.com', tipo: 'email', motivo: 'spam', data: '10/04/2026', origem: 'Reativação 60d', auto: true },
  { id: 9, contato: '+5531977665544', tipo: 'whatsapp', motivo: 'unsubscribe', data: '09/04/2026', origem: 'Aniversariantes', auto: true },
  { id: 10, contato: 'dev-null@bighorse.com', tipo: 'email', motivo: 'hard-bounce', data: '08/04/2026', origem: 'Newsletter · março', auto: true },
  { id: 11, contato: '+5531966554433', tipo: 'sms', motivo: 'unsubscribe', data: '06/04/2026', origem: 'Páscoa pré-venda', auto: true },
  { id: 12, contato: 'bloqueado.lgpd@gmail.com', tipo: 'email', motivo: 'manual', data: '04/04/2026', origem: 'Solicitação direito ao esquecimento', auto: false, op: 'DPO' },
  { id: 13, contato: 'reclamante@yahoo.com.br', tipo: 'email', motivo: 'spam', data: '02/04/2026', origem: 'Newsletter · março', auto: true },
  { id: 14, contato: 'inexistente@dominio.tmp', tipo: 'email', motivo: 'hard-bounce', data: '01/04/2026', origem: 'MGM · indicação', auto: true },
];

const motivoMeta = {
  'unsubscribe': { l: 'Unsubscribe', c: '#93c5fd', bg: 'rgba(59,130,246,.14)' },
  'hard-bounce': { l: 'Hard bounce', c: '#fcd34d', bg: 'rgba(245,158,11,.14)' },
  'spam': { l: 'Spam complaint', c: '#fca5a5', bg: 'rgba(239,68,68,.14)' },
  'manual': { l: 'Bloqueio manual', c: 'var(--text-3)', bg: 'var(--bg-3)' },
};

const PageBlacklist = ({ onNavigate }) => {
  const [tipo, setTipo] = React.useState('todos');
  const [motivo, setMotivo] = React.useState('todos');
  const filtered = BLACKLIST.filter(b => (tipo === 'todos' || b.tipo === tipo) && (motivo === 'todos' || b.motivo === motivo));

  return (
    <AppShell current="blacklist" onNavigate={onNavigate}>
      <PageContainer
        title="Blacklist"
        subtitle="Contatos suprimidos de todas as campanhas · LGPD compliant."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="upload" size={13}/> Importar CSV</button>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Adicionar</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="ban" label="Total bloqueados" value={BLACKLIST.length} sub="todas as origens"/>
          <Tile icon="mail" label="E-mails" value={BLACKLIST.filter(b => b.tipo === 'email').length} sub="maioria dos casos"/>
          <Tile icon="whatsapp" label="WhatsApp / SMS" value={BLACKLIST.filter(b => b.tipo !== 'email').length} sub="opt-out explícito"/>
          <Tile icon="cpu" label="Supressão automática" value={`${BLACKLIST.filter(b => b.auto).length}`} sub="via engine de bounce"/>
        </div>

        <div className="tile" style={{ padding: '14px 16px', marginBottom: 12, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
          <Icon name="shield" size={14} color="var(--accent-text)"/>
          <span style={{ fontSize: 12, color: 'var(--text-2)' }}>Conformidade LGPD · contatos nesta lista não recebem mensagens de marketing · transacionais liberados.</span>
        </div>

        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <div style={{ display: 'inline-flex', background: 'var(--bg-2)', border: '1px solid var(--line-2)', borderRadius: 10, padding: 3 }}>
            {['todos', 'email', 'whatsapp', 'sms'].map(t => (
              <button key={t} onClick={() => setTipo(t)} style={{
                padding: '6px 12px', borderRadius: 7, fontSize: 12, fontWeight: 500, textTransform: 'capitalize',
                background: tipo === t ? 'var(--bg-3)' : 'transparent',
                color: tipo === t ? 'var(--text-0)' : 'var(--text-3)',
              }}>{t === 'todos' ? 'Todos canais' : t}</button>
            ))}
          </div>
          <select value={motivo} onChange={(e) => setMotivo(e.target.value)} style={rhSelectStyle}>
            <option value="todos">Todos motivos</option>
            <option value="unsubscribe">Unsubscribe</option>
            <option value="hard-bounce">Hard bounce</option>
            <option value="spam">Spam complaint</option>
            <option value="manual">Bloqueio manual</option>
          </select>
          <span style={{ flex: 1 }}/>
          <input placeholder="Buscar contato..." style={{ padding: '7px 12px', borderRadius: 8, fontSize: 12.5, background: 'var(--bg-2)', border: '1px solid var(--line-2)', color: 'var(--text-0)', width: 240 }}/>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Contato</th>
                <th>Canal</th>
                <th>Motivo</th>
                <th>Data</th>
                <th>Origem</th>
                <th>Operador</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(b => {
                const m = motivoMeta[b.motivo];
                return (
                  <tr key={b.id}>
                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-0)' }}>{b.contato}</td>
                    <td><span className="chip" style={{ fontSize: 10.5, background: 'var(--bg-3)', color: 'var(--text-2)', textTransform: 'uppercase', fontWeight: 600, letterSpacing: '.05em' }}>{b.tipo}</span></td>
                    <td><span className="chip" style={{ background: m.bg, color: m.c, fontSize: 10.5, fontWeight: 600 }}>{m.l}</span></td>
                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-2)' }}>{b.data}</td>
                    <td style={{ fontSize: 12, color: 'var(--text-2)' }}>{b.origem}</td>
                    <td style={{ fontSize: 11.5, color: 'var(--text-3)' }}>
                      {b.auto ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon name="cpu" size={11}/> Automático</span> : <span>👤 {b.op}</span>}
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }}><Icon name="trash" size={11}/></button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 6. Gerador IA
// =============================================================
const PageIaGen = ({ onNavigate }) => {
  const [tom, setTom] = React.useState('casual');
  const [tipo, setTipo] = React.useState('email');
  const [gerando, setGerando] = React.useState(false);
  const [prompt, setPrompt] = React.useState('Criar campanha de Dia das Mães para clientes VIP da padaria · oferta especial de kit presente com entrega · urgência 48h');
  const [variacoes, setVariacoes] = React.useState([
    {
      id: 'A',
      assunto: '💝 Mãe merece o melhor · Kit Dia das Mães com 25% OFF',
      preheader: 'Entrega no domingo garantida · apenas 48h para pedir',
      corpo: 'Oi Ana,\n\nVocê sabe melhor que ninguém: mãe é só uma, e ela merece muito mais que flores comuns.\n\nPor isso preparamos o **Kit Dia das Mães Gourmet** — pães artesanais, geleias da casa, queijo brie premium e nosso brigadeiro de pistache. Tudo em uma caixa linda, pronta para presentear.\n\nComo cliente VIP, você tem **25% OFF** usando o cupom:',
      cta: 'Resgatar cupom MAE25 →',
      score: 94, tags: ['emocional', 'urgente', 'VIP'],
    },
    {
      id: 'B',
      assunto: 'Último fim de semana para encomendar o Kit Mães',
      preheader: 'Estoque limitado · 84 unidades restantes',
      corpo: 'Ana, bom dia.\n\nApenas um lembrete rápido: nosso Kit Dia das Mães — aquele com pães artesanais, geleias e brigadeiro de pistache — está com **estoque limitado**.\n\nFaltam 84 unidades e o último dia para pedir com entrega garantida no domingo é **sábado às 18h**.\n\nVocê tem 25% OFF automático como cliente VIP.',
      cta: 'Garantir o meu kit →',
      score: 87, tags: ['escassez', 'direto', 'VIP'],
    },
  ]);

  return (
    <AppShell current="ia-gen" onNavigate={onNavigate}>
      <PageContainer
        title={<span>Gerador IA <span style={{ fontSize: 11, padding: '3px 8px', background: 'var(--accent-soft-14)', color: 'var(--accent-text)', borderRadius: 999, fontWeight: 600, marginLeft: 8, verticalAlign: 'middle' }}>claude-haiku-4.5</span></span>}
        subtitle="Redija campanhas em segundos · tom, canal e variações A/B sob medida."
        maxWidth={1700}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '400px 1fr', gap: 16 }} className="iaGrid">
          <style>{`@media (max-width:1100px){.iaGrid{grid-template-columns:1fr !important}}`}</style>

          {/* Left panel — controls */}
          <div className="tile" style={{ padding: 22, height: 'fit-content', position: 'sticky', top: 16 }}>
            <div className="sect-title" style={{ marginBottom: 14 }}>Briefing</div>

            <div style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>O que você quer comunicar?</div>
              <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} rows="5" style={{
                width: '100%', padding: 12, borderRadius: 9, fontSize: 13, lineHeight: 1.5,
                background: 'var(--bg-base)', border: '1px solid var(--line-2)', color: 'var(--text-0)', resize: 'vertical',
              }}/>
              <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 4 }}>{prompt.length} caracteres · seja específico · inclua audiência, oferta e prazo</div>
            </div>

            <div style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Tipo de conteúdo</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6 }}>
                {[
                  { id: 'email', l: 'E-mail', i: 'mail' },
                  { id: 'whatsapp', l: 'WhatsApp', i: 'whatsapp' },
                  { id: 'sms', l: 'SMS', i: 'phone' },
                ].map(t => (
                  <button key={t.id} onClick={() => setTipo(t.id)} style={{
                    padding: '10px 8px', borderRadius: 8, fontSize: 11, fontWeight: 600, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                    background: tipo === t.id ? 'var(--accent-soft-14)' : 'var(--bg-base)',
                    border: `1px solid ${tipo === t.id ? 'var(--accent-1)' : 'var(--line-1)'}`,
                    color: tipo === t.id ? 'var(--text-0)' : 'var(--text-2)',
                  }}><Icon name={t.i} size={14}/>{t.l}</button>
                ))}
              </div>
            </div>

            <div style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Tom de voz</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 4 }}>
                {[
                  { id: 'formal', l: 'Formal', e: '🎩' },
                  { id: 'casual', l: 'Casual', e: '😊' },
                  { id: 'urgente', l: 'Urgente', e: '⚡' },
                  { id: 'divertido', l: 'Divertido', e: '🎉' },
                ].map(t => (
                  <button key={t.id} onClick={() => setTom(t.id)} style={{
                    padding: '8px 4px', borderRadius: 7, fontSize: 10.5, fontWeight: 600,
                    background: tom === t.id ? 'var(--accent-soft-14)' : 'var(--bg-base)',
                    border: `1px solid ${tom === t.id ? 'var(--accent-1)' : 'var(--line-1)'}`,
                    color: tom === t.id ? 'var(--text-0)' : 'var(--text-2)',
                  }}>
                    <div style={{ fontSize: 15, marginBottom: 2 }}>{t.e}</div>
                    {t.l}
                  </button>
                ))}
              </div>
            </div>

            <div style={{ marginBottom: 14 }}>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Opções</div>
              {[
                ['Gerar 2 variações para teste A/B', true],
                ['Incluir emojis estrategicamente', true],
                ['Personalizar com {{nome}}', true],
                ['Respeitar regras CAN-SPAM / LGPD', true],
              ].map(([l, d]) => (
                <label key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--text-2)', padding: '6px 0' }}>
                  <input type="checkbox" defaultChecked={d}/>{l}
                </label>
              ))}
            </div>

            <button onClick={() => { setGerando(true); setTimeout(() => setGerando(false), 1400); }}
              className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', padding: 12, fontSize: 13 }}>
              <Icon name="sparkle" size={14}/> {gerando ? 'Gerando...' : 'Gerar conteúdo'}
            </button>
            <div style={{ fontSize: 10.5, color: 'var(--text-3)', textAlign: 'center', marginTop: 8 }}>
              ⚡ Média 3s por geração · consumo: 1 token/variação
            </div>
          </div>

          {/* Right panel — chat/output */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {/* User prompt bubble */}
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <div style={{ maxWidth: '75%', padding: '12px 16px', background: 'var(--accent-soft-14)', border: '1px solid var(--accent-soft-40)', borderRadius: '14px 14px 2px 14px', fontSize: 13, lineHeight: 1.5, color: 'var(--text-0)' }}>
                {prompt}
                <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 6, textAlign: 'right' }}>Ana · agora mesmo</div>
              </div>
            </div>

            {/* AI response */}
            <div style={{ display: 'flex', gap: 10 }}>
              <div style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--brand-gradient)', color: 'white', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <Icon name="sparkle" size={15}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 6 }}>
                  <b style={{ color: 'var(--text-0)' }}>Claude Automatiza</b>
                  <span style={{ marginLeft: 8, fontSize: 10.5, color: 'var(--text-3)' }}>
                    • analisando · gerando 2 variações · tom {tom} · {tipo}
                  </span>
                </div>
                <div style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.55, padding: '10px 14px', background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 10, marginBottom: 10 }}>
                  Criei duas variações com abordagens complementares: <b>A</b> foca no emocional e conexão mãe-filho, <b>B</b> trabalha escassez e urgência. Ambas aplicam desconto VIP 25% e mencionam o prazo de entrega no domingo. <b>Score</b> estimado com base em taxas históricas de campanhas similares na sua base.
                </div>
              </div>
            </div>

            {/* Variations */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {variacoes.map(v => (
                <div key={v.id} className="tile" style={{ padding: 0, overflow: 'hidden', border: '1px solid var(--line-2)' }}>
                  <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10, background: 'var(--bg-2)' }}>
                    <div style={{ width: 28, height: 28, borderRadius: 8, background: v.id === 'A' ? 'linear-gradient(135deg,#f59e0b,#dc2626)' : 'linear-gradient(135deg,#8b5cf6,#ec4899)', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12 }}>{v.id}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-0)' }}>Variação {v.id}</div>
                      <div style={{ display: 'flex', gap: 4, marginTop: 3 }}>
                        {v.tags.map(t => <span key={t} className="chip" style={{ fontSize: 9.5, padding: '1px 7px', background: 'var(--bg-3)', color: 'var(--text-3)' }}>{t}</span>)}
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 16, fontWeight: 700, color: v.score > 90 ? '#86efac' : '#fcd34d', fontVariantNumeric: 'tabular-nums' }}>{v.score}</div>
                      <div style={{ fontSize: 9, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.08em' }}>score IA</div>
                    </div>
                  </div>
                  <div style={{ padding: 16 }}>
                    <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Assunto</div>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-0)', marginTop: 3, marginBottom: 10, lineHeight: 1.35 }}>{v.assunto}</div>
                    <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Preheader</div>
                    <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 3, marginBottom: 10, fontStyle: 'italic' }}>{v.preheader}</div>
                    <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Corpo</div>
                    <div style={{ fontSize: 12.5, color: 'var(--text-1)', marginTop: 6, marginBottom: 12, lineHeight: 1.55, whiteSpace: 'pre-wrap', maxHeight: 180, overflowY: 'auto' }}>{v.corpo.split('**').map((p, i) => i % 2 === 1 ? <b key={i} style={{ color: 'var(--text-0)' }}>{p}</b> : p)}</div>
                    <div style={{ textAlign: 'center', padding: '10px 16px', background: v.id === 'A' ? 'linear-gradient(135deg,#f59e0b,#dc2626)' : 'linear-gradient(135deg,#8b5cf6,#ec4899)', color: 'white', borderRadius: 9, fontSize: 12, fontWeight: 700 }}>{v.cta}</div>
                  </div>
                  <div style={{ padding: 12, borderTop: '1px solid var(--line-1)', display: 'flex', gap: 6 }}>
                    <button className="btn btn-outline btn-sm" style={{ flex: 1, justifyContent: 'center', fontSize: 11 }}><Icon name="edit" size={11}/> Editar</button>
                    <button className="btn btn-outline btn-sm" style={{ flex: 1, justifyContent: 'center', fontSize: 11 }}><Icon name="repeat" size={11}/> Regenerar</button>
                    <button className="btn btn-primary btn-sm" style={{ flex: 1.3, justifyContent: 'center', fontSize: 11 }}><Icon name="check" size={11}/> Usar esta</button>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
              <button className="btn btn-outline btn-sm"><Icon name="plus" size={12}/> Gerar mais variações</button>
              <button className="btn btn-outline btn-sm"><Icon name="download" size={12}/> Salvar como template</button>
              <span style={{ flex: 1 }}/>
              <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Tokens usados: 2.284 · Créditos restantes: 48.820</span>
            </div>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 7. Lead Scoring
// =============================================================
const FEATURES = [
  { nome: 'Abertura de e-mails (30d)', peso: 22, cat: 'engajamento', c: '#22c55e', val: 'Ex.: abriu 8 de 12 e-mails' },
  { nome: 'Cliques em CTA (30d)', peso: 18, cat: 'engajamento', c: '#22c55e', val: 'Ex.: 4 cliques em 30 dias' },
  { nome: 'Recência da última compra', peso: 15, cat: 'comportamento', c: '#06b6d4', val: 'Ex.: comprou há 12 dias' },
  { nome: 'Frequência de compra (90d)', peso: 12, cat: 'comportamento', c: '#06b6d4', val: 'Ex.: 3 pedidos em 90 dias' },
  { nome: 'Ticket médio', peso: 10, cat: 'comportamento', c: '#06b6d4', val: 'Ex.: R$ 142,50/pedido' },
  { nome: 'CEP / renda estimada', peso: 8, cat: 'firmografico', c: '#8b5cf6', val: 'Ex.: Savassi · renda alta' },
  { nome: 'Idade / segmento', peso: 6, cat: 'firmografico', c: '#8b5cf6', val: 'Ex.: 35-45 anos' },
  { nome: 'Origem do cadastro', peso: 5, cat: 'firmografico', c: '#8b5cf6', val: 'Ex.: indicação > orgânico' },
  { nome: 'Visitas ao site (30d)', peso: 4, cat: 'engajamento', c: '#22c55e', val: 'Ex.: 6 sessões' },
];

const HOT_LEADS = [
  { nome: 'Fernanda Gomes Batista', email: 'fer.batista@gmail.com', score: 94, temp: 'quente', ltv: 3420, ult: '2h', motivo: 'Abriu 9/10 e-mails + comprou R$ 280 ontem' },
  { nome: 'Rafael Souza Lima', email: 'rafael.lima@outlook.com', score: 91, temp: 'quente', ltv: 2180, ult: '4h', motivo: 'Cliente VIP · 12 pedidos em 90d' },
  { nome: 'Juliana Pereira Alves', email: 'ju.pereira@hotmail.com', score: 88, temp: 'quente', ltv: 1840, ult: '6h', motivo: '6 visitas ao site hoje · carrinho ativo' },
  { nome: 'Marcelo Andrade', email: 'marcelo.andr@gmail.com', score: 84, temp: 'morno', ltv: 980, ult: '1d', motivo: 'Abriu todos os e-mails · sem compra em 15d' },
  { nome: 'Patricia Moraes', email: 'pat.moraes@uol.com.br', score: 82, temp: 'morno', ltv: 1210, ult: '12h', motivo: 'Renda alta · cliente há 2 anos' },
  { nome: 'Gabriel Oliveira', email: 'gabriel.oli@gmail.com', score: 78, temp: 'morno', ltv: 760, ult: '2d', motivo: 'Clicou no último CTA · ticket médio crescendo' },
  { nome: 'Larissa Martins', email: 'la.martins@gmail.com', score: 72, temp: 'morno', ltv: 420, ult: '3d', motivo: 'Novo cadastro · 3 cliques em boas-vindas' },
  { nome: 'Pedro Henrique Castro', email: 'ph.castro@gmail.com', score: 68, temp: 'morno', ltv: 340, ult: '5d', motivo: 'Visitou página de colombas 4x' },
];

const PageScoring = ({ onNavigate }) => {
  // Score distribution buckets 0-100 in 10s
  const dist = [
    { range: '0-10', count: 280 }, { range: '11-20', count: 420 },
    { range: '21-30', count: 680 }, { range: '31-40', count: 1040 },
    { range: '41-50', count: 1380 }, { range: '51-60', count: 1520 },
    { range: '61-70', count: 1240 }, { range: '71-80', count: 820 },
    { range: '81-90', count: 480 }, { range: '91-100', count: 184 },
  ];
  const maxDist = Math.max(...dist.map(d => d.count));
  const catMeta = {
    engajamento: { l: 'Engajamento', c: '#22c55e' },
    comportamento: { l: 'Comportamento', c: '#06b6d4' },
    firmografico: { l: 'Firmográfico', c: '#8b5cf6' },
  };

  return (
    <AppShell current="scoring" onNavigate={onNavigate}>
      <PageContainer
        title="Lead Scoring"
        subtitle="Modelo ML atribui score 0-100 para cada contato · atualizado a cada hora."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="sync" size={13}/> Retreinar modelo</button>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar scores</button>
          <button className="btn btn-primary btn-sm"><Icon name="megaphone" size={13}/> Campanha p/ quentes</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="zap" label="Leads quentes (80+)" value="664" delta="+48" sub="14d vs. anterior"/>
          <Tile icon="target" label="Score médio da base" value="54" sub="8.042 contatos"/>
          <Tile icon="cpu" label="Accuracy do modelo" value="87,4%" delta="+2,1pp" sub="validação cruzada"/>
          <Tile icon="refresh" label="Última atualização" value="há 12 min" sub="próxima: 14:30"/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
          {/* Features with weights */}
          <div className="tile" style={{ padding: 22 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div className="sect-title">Features do modelo</div>
              <span className="grow"/>
              <span style={{ fontSize: 10.5, color: 'var(--text-3)' }}>Soma dos pesos = 100%</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {FEATURES.map((f, i) => (
                <div key={f.nome}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                    <span style={{ width: 20, fontSize: 11, color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums', textAlign: 'right', fontFamily: 'var(--font-mono)' }}>#{i + 1}</span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{f.nome}</div>
                      <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 1 }}>{f.val}</div>
                    </div>
                    <span className="chip" style={{ fontSize: 10, padding: '2px 7px', background: f.c + '22', color: f.c, fontWeight: 600 }}>{catMeta[f.cat].l}</span>
                    <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums', width: 46, textAlign: 'right' }}>{f.peso}%</span>
                  </div>
                  <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden', marginLeft: 30 }}>
                    <div style={{ width: (f.peso / 22) * 100 + '%', height: '100%', background: f.c }}/>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Distribution */}
          <div className="tile" style={{ padding: 22 }}>
            <div className="sect-title" style={{ marginBottom: 4 }}>Distribuição de scores</div>
            <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 18 }}>8.042 contatos · score 0-100 em buckets de 10</div>
            <div style={{ display: 'flex', alignItems: 'end', gap: 6, height: 220, paddingBottom: 28 }}>
              {dist.map((d, i) => {
                const temp = i >= 8 ? 'quente' : i >= 5 ? 'morno' : 'frio';
                const color = temp === 'quente' ? '#22c55e' : temp === 'morno' ? '#f59e0b' : '#64748b';
                return (
                  <div key={d.range} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                    <span style={{ fontSize: 10, color: 'var(--text-2)', fontVariantNumeric: 'tabular-nums', marginBottom: 4, fontWeight: 600 }}>{d.count > 500 ? (d.count / 1000).toFixed(1) + 'k' : d.count}</span>
                    <div style={{ width: '100%', height: (d.count / maxDist) * 160, background: `linear-gradient(180deg, ${color}, ${color}cc)`, borderRadius: '4px 4px 0 0', transition: 'height .3s' }}/>
                    <span style={{ position: 'absolute', bottom: -22, fontSize: 9.5, color: 'var(--text-3)', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap' }}>{d.range}</span>
                  </div>
                );
              })}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: 20, paddingTop: 14, borderTop: '1px solid var(--line-1)' }}>
              <div style={{ textAlign: 'center' }}><div style={{ width: 8, height: 8, background: '#22c55e', borderRadius: 2, margin: '0 auto 4px' }}/><span style={{ fontSize: 11, color: 'var(--text-2)' }}>Quente (80+) · 664</span></div>
              <div style={{ textAlign: 'center' }}><div style={{ width: 8, height: 8, background: '#f59e0b', borderRadius: 2, margin: '0 auto 4px' }}/><span style={{ fontSize: 11, color: 'var(--text-2)' }}>Morno (50-79) · 3.580</span></div>
              <div style={{ textAlign: 'center' }}><div style={{ width: 8, height: 8, background: '#64748b', borderRadius: 2, margin: '0 auto 4px' }}/><span style={{ fontSize: 11, color: 'var(--text-2)' }}>Frio (&lt;50) · 3.798</span></div>
            </div>
          </div>
        </div>

        {/* Hot leads */}
        <div className="tile" style={{ padding: 22 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <div className="sect-title">🔥 Top leads quentes agora</div>
            <span className="grow"/>
            <button className="btn btn-outline btn-sm">Ver todos 664 →</button>
          </div>
          <div className="table-wrap" style={{ margin: 0 }}>
            <table className="tbl" style={{ background: 'transparent' }}>
              <thead>
                <tr>
                  <th>Contato</th>
                  <th>Score</th>
                  <th>Temperatura</th>
                  <th style={{ textAlign: 'right' }}>LTV</th>
                  <th>Motivo principal</th>
                  <th>Última atividade</th>
                  <th style={{ textAlign: 'right' }}>Ação</th>
                </tr>
              </thead>
              <tbody>
                {HOT_LEADS.map(l => {
                  const c = l.temp === 'quente' ? '#86efac' : '#fcd34d';
                  return (
                    <tr key={l.email}>
                      <td>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <Avatar name={l.nome} size={30}/>
                          <div>
                            <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-0)' }}>{l.nome}</div>
                            <div style={{ fontSize: 10.5, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{l.email}</div>
                          </div>
                        </div>
                      </td>
                      <td style={{ minWidth: 120 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <div style={{ position: 'relative', width: 34, height: 34 }}>
                            <svg width="34" height="34" style={{ transform: 'rotate(-90deg)' }}>
                              <circle cx="17" cy="17" r="14" fill="none" stroke="var(--bg-3)" strokeWidth="3"/>
                              <circle cx="17" cy="17" r="14" fill="none" stroke={c} strokeWidth="3" strokeDasharray={`${(l.score / 100) * 87.96} 87.96`} strokeLinecap="round"/>
                            </svg>
                            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontSize: 10.5, fontWeight: 700, color: c, fontVariantNumeric: 'tabular-nums' }}>{l.score}</div>
                          </div>
                        </div>
                      </td>
                      <td><span className="chip" style={{ fontSize: 10.5, background: c + '22', color: c, fontWeight: 600, textTransform: 'capitalize' }}>{l.temp === 'quente' ? '🔥 Quente' : '☀️ Morno'}</span></td>
                      <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-0)' }}>{BRL(l.ltv)}</td>
                      <td style={{ fontSize: 11.5, color: 'var(--text-2)', maxWidth: 280 }}>{l.motivo}</td>
                      <td style={{ fontSize: 11.5, color: 'var(--text-3)' }}>há {l.ult}</td>
                      <td style={{ textAlign: 'right' }}>
                        <button className="btn btn-primary btn-sm" style={{ fontSize: 10.5, padding: '5px 10px' }}><Icon name="megaphone" size={11}/> Abordar</button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 8. Relatórios de Mailing
// =============================================================
const PageMailingRel = ({ onNavigate }) => {
  const funnel = [
    { l: 'Enviados', v: 8420, c: '#93c5fd' },
    { l: 'Entregues', v: 8281, c: '#67e8f9' },
    { l: 'Abertos', v: 3734, c: '#86efac' },
    { l: 'Clicados', v: 912, c: '#fcd34d' },
    { l: 'Convertidos', v: 142, c: '#fca5a5' },
  ];
  const maxF = funnel[0].v;

  const horarios = [
    { h: '06h', pct: 12 }, { h: '07h', pct: 18 }, { h: '08h', pct: 28 }, { h: '09h', pct: 42 },
    { h: '10h', pct: 58 }, { h: '11h', pct: 52 }, { h: '12h', pct: 32 }, { h: '13h', pct: 38 },
    { h: '14h', pct: 48 }, { h: '15h', pct: 44 }, { h: '16h', pct: 41 }, { h: '17h', pct: 36 },
    { h: '18h', pct: 32 }, { h: '19h', pct: 38 }, { h: '20h', pct: 46 }, { h: '21h', pct: 28 },
  ];
  const maxH = Math.max(...horarios.map(h => h.pct));

  const comp = [
    { nome: 'Black Friday 2026', env: 8420, open: 44.3, click: 10.8, conv: 1.7 },
    { nome: 'Boas-vindas Savassi', env: 1240, open: 54.1, click: 16.8, conv: 2.7 },
    { nome: 'Aniversariantes abril', env: 184, open: 93.5, click: 48.4, conv: 22.3 },
    { nome: 'Carrinho abandonado', env: 612, open: 32.8, click: 12.7, conv: 3.6 },
    { nome: 'Newsletter receitas', env: 2140, open: 43.0, click: 8.7, conv: 0.6 },
    { nome: 'MGM indicação', env: 3240, open: 36.5, click: 9.2, conv: 1.5 },
  ];

  return (
    <AppShell current="mailing-rel" onNavigate={onNavigate}>
      <PageContainer
        title="Relatórios de mailing"
        subtitle="Funil, benchmark e janela ideal de disparo · últimos 90 dias."
        maxWidth={1700}
        actions={<>
          <select style={rhSelectStyle}><option>Últimos 90 dias</option><option>Abril/2026</option><option>Este ano</option></select>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar PDF</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="megaphone" label="Disparos (90d)" value="46.2k" delta="+8,4%" sub="28 campanhas"/>
          <Tile icon="mail" label="Taxa média abertura" value="43,2%" delta="+3,1pp" sub="vs. mercado 21%"/>
          <Tile icon="trending-up" label="CTR médio" value="11,7%" delta="+1,2pp" sub="sobre aberturas"/>
          <Tile icon="wallet" label="Receita atribuída" value={BRL(84320)} delta="+R$ 12,8k" sub="ROI médio 14,2x"/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 16, marginBottom: 16 }}>
          {/* Funnel */}
          <div className="tile" style={{ padding: 22 }}>
            <div className="sect-title" style={{ marginBottom: 18 }}>Funil de e-mail · Black Friday 2026</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {funnel.map((f, i) => {
                const w = (f.v / maxF) * 100;
                const prev = i === 0 ? null : funnel[i - 1];
                const conv = prev ? (f.v / prev.v) * 100 : null;
                return (
                  <div key={f.l} style={{ position: 'relative' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                      <div style={{ width: 110, fontSize: 12.5, color: 'var(--text-1)', fontWeight: 500 }}>{f.l}</div>
                      <div style={{ flex: 1, position: 'relative', height: 42 }}>
                        <div style={{ position: 'absolute', left: `${(100 - w) / 2}%`, width: w + '%', height: '100%', background: `linear-gradient(90deg, ${f.c}cc, ${f.c})`, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0b0c16', fontWeight: 700, fontSize: 13, fontVariantNumeric: 'tabular-nums' }}>
                          {f.v.toLocaleString('pt-BR')}
                        </div>
                      </div>
                      <div style={{ width: 80, textAlign: 'right', fontSize: 11.5, color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums' }}>
                        {conv !== null && <><span style={{ color: conv > 50 ? '#86efac' : conv > 25 ? '#fcd34d' : '#fca5a5', fontWeight: 600 }}>{conv.toFixed(1)}%</span><div style={{ fontSize: 9.5 }}>vs. anterior</div></>}
                        {conv === null && <><span style={{ color: 'var(--text-2)', fontWeight: 600 }}>100%</span><div style={{ fontSize: 9.5 }}>base</div></>}
                      </div>
                    </div>
                    {i < funnel.length - 1 && <div style={{ marginLeft: 124, fontSize: 10, color: 'var(--text-4)', padding: '2px 0' }}>↓ drop {((1 - (funnel[i+1].v / f.v)) * 100).toFixed(0)}%</div>}
                  </div>
                );
              })}
            </div>
            <div style={{ marginTop: 20, padding: 14, background: 'var(--accent-soft-10)', borderRadius: 10, display: 'flex', gap: 14 }}>
              <Icon name="sparkle" size={16} color="var(--accent-text)"/>
              <div style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5 }}>
                <b style={{ color: 'var(--text-0)' }}>Insight IA:</b> taxa de clique está 2,3pp acima do seu baseline, mas apenas 15,6% dos cliques convertem. Teste reduzir passos no checkout ou oferecer frete grátis automático para cliques oriundos desta campanha.
              </div>
            </div>
          </div>

          {/* Best hours heatmap */}
          <div className="tile" style={{ padding: 22 }}>
            <div className="sect-title" style={{ marginBottom: 4 }}>Horário ideal de envio</div>
            <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 18 }}>taxa de abertura por horário · últimos 90d</div>
            <div style={{ display: 'flex', alignItems: 'end', gap: 3, height: 180, paddingBottom: 24 }}>
              {horarios.map(h => {
                const peak = h.pct === maxH;
                return (
                  <div key={h.h} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                    {peak && <div style={{ position: 'absolute', top: -20, fontSize: 9.5, fontWeight: 700, color: '#86efac' }}>★ {h.pct}%</div>}
                    <div style={{ width: '100%', height: (h.pct / maxH) * 140, background: peak ? 'linear-gradient(180deg, #22c55e, #15803d)' : `linear-gradient(180deg, var(--accent-1), var(--accent-2))`, opacity: peak ? 1 : 0.35 + (h.pct / maxH) * 0.5, borderRadius: '3px 3px 0 0' }}/>
                    <span style={{ position: 'absolute', bottom: -18, fontSize: 9, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{h.h}</span>
                  </div>
                );
              })}
            </div>
            <div style={{ marginTop: 20, padding: 12, background: 'rgba(34,197,94,.08)', border: '1px solid rgba(34,197,94,.2)', borderRadius: 9, fontSize: 12, color: '#86efac' }}>
              <Icon name="zap" size={12}/> <b>Melhor janela: ter-qui · 10h-11h</b> · +31% vs. média
            </div>
          </div>
        </div>

        {/* Comparative table */}
        <div className="tile" style={{ padding: 22 }}>
          <div className="sect-title" style={{ marginBottom: 16 }}>Comparativo entre campanhas</div>
          <div className="table-wrap" style={{ margin: 0 }}>
            <table className="tbl" style={{ background: 'transparent' }}>
              <thead>
                <tr>
                  <th>Campanha</th>
                  <th style={{ textAlign: 'right' }}>Enviados</th>
                  <th>Abertura</th>
                  <th>CTR</th>
                  <th>Conversão</th>
                  <th>Benchmark</th>
                </tr>
              </thead>
              <tbody>
                {comp.map(c => {
                  const grade = c.conv > 10 ? 'A+' : c.conv > 5 ? 'A' : c.conv > 2 ? 'B' : c.conv > 1 ? 'C' : 'D';
                  const gc = grade === 'A+' ? '#86efac' : grade === 'A' ? '#a7f3d0' : grade === 'B' ? '#fcd34d' : grade === 'C' ? '#fdba74' : '#fca5a5';
                  return (
                    <tr key={c.nome}>
                      <td style={{ fontSize: 12.5, fontWeight: 500, color: 'var(--text-0)' }}>{c.nome}</td>
                      <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: 'var(--text-2)' }}>{c.env.toLocaleString('pt-BR')}</td>
                      <td style={{ minWidth: 160 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <div style={{ flex: 1, maxWidth: 100, height: 5, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden' }}>
                            <div style={{ width: c.open + '%', height: '100%', background: '#22c55e' }}/>
                          </div>
                          <span style={{ fontSize: 11.5, fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-1)', width: 48 }}>{c.open.toFixed(1)}%</span>
                        </div>
                      </td>
                      <td style={{ minWidth: 160 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <div style={{ flex: 1, maxWidth: 100, height: 5, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden' }}>
                            <div style={{ width: (c.click * 2) + '%', height: '100%', background: '#06b6d4' }}/>
                          </div>
                          <span style={{ fontSize: 11.5, fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-1)', width: 48 }}>{c.click.toFixed(1)}%</span>
                        </div>
                      </td>
                      <td style={{ fontSize: 12.5, fontWeight: 700, color: gc, fontVariantNumeric: 'tabular-nums' }}>{c.conv.toFixed(1)}%</td>
                      <td>
                        <span style={{
                          width: 34, height: 34, borderRadius: 8, display: 'inline-grid', placeItems: 'center',
                          background: gc + '22', color: gc, fontWeight: 800, fontSize: 13,
                        }}>{grade}</span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

Object.assign(window, { BLACKLIST, motivoMeta, PageBlacklist, PageIaGen, PageScoring, PageMailingRel });
