// Tela: Central de Ajuda

const SHORTCUTS = [
  { cat: "Navegação", items: [
    { keys: ["⌘","K"], label: "Abrir busca global" },
    { keys: ["G","P"], label: "Ir para Pipeline" },
    { keys: ["G","C"], label: "Ir para Contatos" },
    { keys: ["G","D"], label: "Ir para Painel" },
    { keys: ["?"],     label: "Mostrar atalhos" },
    { keys: ["Esc"],   label: "Fechar diálogo aberto" },
  ]},
  { cat: "Ações", items: [
    { keys: ["N"],       label: "Novo lead" },
    { keys: ["⌘","↵"],   label: "Salvar e fechar" },
    { keys: ["⌘","D"],   label: "Duplicar item selecionado" },
    { keys: ["⌘","⌫"],   label: "Arquivar item" },
    { keys: ["A"],       label: "Atribuir a alguém" },
    { keys: ["T"],       label: "Adicionar tag" },
  ]},
  { cat: "Pipeline", items: [
    { keys: ["←","→"],   label: "Mover lead entre etapas" },
    { keys: ["W"],       label: "Marcar como ganho" },
    { keys: ["L"],       label: "Marcar como perdido" },
    { keys: ["Espaço"],  label: "Abrir detalhe do lead" },
  ]},
];

const ARTIGOS = [
  {
    id: 'pipeline-10min',
    tit: "Como montar um pipeline em 10 minutos",
    cat: "Primeiros passos",
    t: "5 min",
    conteudo: [
      {
        tipo: 'intro',
        texto: 'O Pipeline de Vendas da Ezza organiza seus leads em colunas por etapa — da prospecção ao fechamento. Em menos de 10 minutos você já pode ter seus primeiros leads cadastrados e o funil funcionando.',
      },
      {
        tipo: 'h2', texto: '1. Acesse o Pipeline',
      },
      {
        tipo: 'p', texto: 'No menu lateral, clique em Pipeline (ícone de funil). Você verá as colunas padrão: Prospecção, Qualificação, Proposta, Negociação e Fechado.',
      },
      {
        tipo: 'h2', texto: '2. Crie seu primeiro lead',
      },
      {
        tipo: 'p', texto: 'Clique no botão + Novo Lead no canto superior direito. Preencha pelo menos o nome do lead ou empresa — os demais campos são opcionais para começar.',
      },
      {
        tipo: 'lista', itens: [
          'Nome do lead / empresa (obrigatório)',
          'WhatsApp — para ativar a IA SDR',
          'Valor estimado do negócio',
          'Temperatura: Frio, Morno ou Quente',
          'Origem (Indicação, Meta Ads, Site…)',
        ],
      },
      {
        tipo: 'h2', texto: '3. Avance leads pelo funil',
      },
      {
        tipo: 'p', texto: 'Arraste o card do lead para a próxima coluna conforme o relacionamento avança. Você também pode clicar no card e usar o seletor de etapa no drawer de detalhes.',
      },
      {
        tipo: 'h2', texto: '4. Ative a IA SDR (opcional)',
      },
      {
        tipo: 'p', texto: 'Ao criar ou editar um lead, ative a opção "IA de Voz Imediata". O agente ligará automaticamente para o lead assim que ele for salvo — você pode acompanhar a conversa em tempo real pelo ícone WhatsApp no card.',
      },
      {
        tipo: 'dica', texto: 'Dica: Leads com status "Em conversa" têm uma borda roxa e o badge ⚡ IA no card, indicando que o agente está ativo naquela negociação.',
      },
      {
        tipo: 'h2', texto: '5. Marque como ganho ou perdido',
      },
      {
        tipo: 'p', texto: 'Abra o drawer do lead (clique no card) e use os botões "Ganhou 🎉" ou "Perdeu" para encerrar a negociação. Leads ganhos vão para a coluna Fechado; perdidos são removidos do funil.',
      },
    ],
  },
  {
    id: 'whatsapp-connect',
    tit: "Conectando WhatsApp Business à Ezza",
    cat: "Integrações",
    t: "8 min",
    conteudo: [
      {
        tipo: 'intro',
        texto: 'Integrar seu número de WhatsApp Business à Ezza permite que a IA SDR e sua equipe enviem e recebam mensagens diretamente pelo CRM, sem precisar abrir o celular.',
      },
      {
        tipo: 'h2', texto: 'Pré-requisitos',
      },
      {
        tipo: 'lista', itens: [
          'Número de WhatsApp Business ativo (não pode ser o pessoal)',
          'Acesso à conta Meta Business Suite',
          'Perfil de Administrador na Ezza',
        ],
      },
      {
        tipo: 'h2', texto: '1. Acesse Configurações → WhatsApp',
      },
      {
        tipo: 'p', texto: 'No menu lateral vá em Configurações (ícone de engrenagem) e clique na aba WhatsApp. Você verá o botão "Conectar número".',
      },
      {
        tipo: 'h2', texto: '2. Autentique com a Meta',
      },
      {
        tipo: 'p', texto: 'Clique em "Conectar número" — uma janela da Meta se abrirá. Faça login na sua conta Meta Business e selecione o número que deseja vincular à Ezza.',
      },
      {
        tipo: 'h2', texto: '3. Configure os templates',
      },
      {
        tipo: 'p', texto: 'Após conectar, cadastre os templates de mensagem aprovados pela Meta. Os templates são necessários para iniciar conversas proativamente (janela fria). Para respostas dentro de 24h, você pode usar texto livre.',
      },
      {
        tipo: 'dica', texto: 'Atenção: A Meta pode levar até 24h para aprovar novos templates. Templates com palavras comerciais agressivas (ex: "oferta imperdível") costumam ser rejeitados.',
      },
      {
        tipo: 'h2', texto: '4. Teste a integração',
      },
      {
        tipo: 'p', texto: 'Na aba WhatsApp, use o campo "Enviar mensagem de teste" para verificar se o número está enviando corretamente. Se o teste falhar, verifique se o número está com status "Ativo" no Meta Business Suite.',
      },
      {
        tipo: 'h2', texto: 'Resolvendo problemas comuns',
      },
      {
        tipo: 'lista', itens: [
          'Número desconectado após reiniciar: reautentique pelo mesmo fluxo de conexão',
          'Mensagens não chegam: verifique o webhook URL nas configurações da Meta',
          'Template rejeitado: remova linguagem de marketing e resubmeta',
          'Erro 131030: número bloqueado por spam — contate o suporte Meta',
        ],
      },
    ],
  },
  {
    id: 'importar-csv',
    tit: "Importar leads de uma planilha CSV",
    cat: "Dados",
    t: "3 min",
    conteudo: [
      {
        tipo: 'intro',
        texto: 'Se você já tem uma lista de leads em uma planilha do Excel ou Google Sheets, pode importar todos de uma vez para a Ezza em menos de 3 minutos.',
      },
      {
        tipo: 'h2', texto: 'Formato do arquivo CSV',
      },
      {
        tipo: 'p', texto: 'O arquivo deve ter as colunas na primeira linha (cabeçalho). As colunas obrigatórias são Nome e WhatsApp. As demais são opcionais:',
      },
      {
        tipo: 'lista', itens: [
          'nome — Nome do lead ou empresa (obrigatório)',
          'whatsapp — Número com DDD, ex: 11999999999',
          'email — E-mail do lead',
          'empresa — Nome da empresa',
          'valor — Valor estimado em reais (somente número)',
          'temperatura — frio, morno ou quente',
          'origem — Indicação, Meta Ads, Site, LinkedIn ou Evento',
          'etapa — prospeccao, qualificacao, proposta, negociacao',
        ],
      },
      {
        tipo: 'dica', texto: 'Dica: Baixe o modelo de CSV na tela de importação clicando em "Baixar modelo" — ele já vem com as colunas certas e exemplos preenchidos.',
      },
      {
        tipo: 'h2', texto: 'Passo a passo',
      },
      {
        tipo: 'lista', itens: [
          'Acesse Pipeline → botão "Importar" no menu do cabeçalho',
          'Selecione ou arraste o arquivo .csv para a área de upload',
          'Mapeie as colunas da sua planilha para os campos da Ezza',
          'Revise os dados na pré-visualização (primeiras 5 linhas)',
          'Clique em "Importar X leads" para confirmar',
        ],
      },
      {
        tipo: 'h2', texto: 'Após a importação',
      },
      {
        tipo: 'p', texto: 'Todos os leads importados aparecem na coluna "Prospecção" do Pipeline. Leads duplicados (mesmo WhatsApp ou e-mail já cadastrado) são ignorados — você receberá um relatório de duplicatas ao final.',
      },
    ],
  },
  {
    id: 'automacoes-followup',
    tit: "Configurando automações de follow-up",
    cat: "Automações",
    t: "12 min",
    conteudo: [
      {
        tipo: 'intro',
        texto: 'As automações da Ezza permitem que o sistema envie mensagens, crie tarefas e mova leads automaticamente com base em eventos — sem nenhuma ação manual da sua equipe.',
      },
      {
        tipo: 'h2', texto: 'Conceitos básicos',
      },
      {
        tipo: 'p', texto: 'Cada automação tem três partes: um Gatilho (o que acontece para disparar), uma Condição (filtro opcional) e uma Ação (o que a Ezza faz). Você pode encadear múltiplas ações em uma única regra.',
      },
      {
        tipo: 'h2', texto: 'Automação de follow-up simples',
      },
      {
        tipo: 'p', texto: 'O caso mais comum: enviar uma mensagem de acompanhamento quando um lead fica X dias sem resposta.',
      },
      {
        tipo: 'lista', itens: [
          'Gatilho: "Lead sem atualização por mais de N dias"',
          'Condição: Etapa = Proposta (ou qualquer etapa que quiser)',
          'Ação 1: Enviar mensagem WhatsApp com template de follow-up',
          'Ação 2: Criar tarefa para o responsável ligar',
          'Ação 3: Mudar temperatura para "Frio" (opcional)',
        ],
      },
      {
        tipo: 'h2', texto: 'Como criar a automação',
      },
      {
        tipo: 'lista', itens: [
          'Vá em Configurações → Automações',
          'Clique em "+ Nova automação"',
          'Dê um nome descritivo (ex: "Follow-up 3 dias Proposta")',
          'Selecione o Gatilho na lista de opções',
          'Adicione condições se necessário (filtra quais leads serão afetados)',
          'Clique em "+ Adicionar ação" e configure cada ação',
          'Ative a automação com o toggle e salve',
        ],
      },
      {
        tipo: 'dica', texto: 'Boas práticas: comece com 1-2 automações simples e monitore os resultados por 2 semanas antes de criar mais. Automações em excesso podem parecer spam para os leads.',
      },
      {
        tipo: 'h2', texto: 'Gatilhos disponíveis',
      },
      {
        tipo: 'lista', itens: [
          'Lead criado',
          'Lead mudou de etapa',
          'Mensagem recebida sem resposta por X horas',
          'Lead sem atualização por X dias',
          'Proposta enviada',
          'Data/hora específica',
          'Lead marcado como quente/morno/frio',
        ],
      },
      {
        tipo: 'h2', texto: 'Ações disponíveis',
      },
      {
        tipo: 'lista', itens: [
          'Enviar mensagem WhatsApp (template ou texto livre)',
          'Enviar e-mail (template)',
          'Criar tarefa para responsável',
          'Atribuir lead a outro vendedor',
          'Mover para etapa específica',
          'Adicionar/remover tag',
          'Notificar o time no Slack ou Teams',
        ],
      },
    ],
  },
  {
    id: 'round-robin',
    tit: "Atribuição automática de leads em round-robin",
    cat: "Automações",
    t: "6 min",
    conteudo: [
      {
        tipo: 'intro',
        texto: 'O round-robin distribui novos leads automaticamente entre os vendedores da sua equipe de forma igualitária — cada novo lead vai para o próximo vendedor da fila, em rodízio.',
      },
      {
        tipo: 'h2', texto: 'Por que usar round-robin?',
      },
      {
        tipo: 'lista', itens: [
          'Elimina o tempo perdido decidindo quem vai atender o lead',
          'Distribui a carga de trabalho de forma justa',
          'Reduz o tempo de primeiro contato (atende mais rápido)',
          'Evita favorecimento ou conflitos entre vendedores',
        ],
      },
      {
        tipo: 'h2', texto: 'Configurando o round-robin',
      },
      {
        tipo: 'lista', itens: [
          'Acesse Configurações → Automações',
          'Crie uma nova automação com Gatilho "Lead criado"',
          'Em Ação, selecione "Atribuir a vendedor (round-robin)"',
          'Escolha os membros do time que participarão do rodízio',
          'Salve e ative',
        ],
      },
      {
        tipo: 'h2', texto: 'Opções avançadas',
      },
      {
        tipo: 'p', texto: 'Você pode configurar pesos no round-robin — por exemplo, um vendedor sênior pode receber 2 leads a cada 1 que um júnior recebe. Isso é útil em equipes com capacidades diferentes.',
      },
      {
        tipo: 'p', texto: 'Também é possível excluir vendedores temporariamente do rodízio (férias, sobrecarga) sem deletar a automação — use o toggle de "Pausar participante" na tela de configuração.',
      },
      {
        tipo: 'dica', texto: 'Dica: combine round-robin com uma automação de "follow-up 30 minutos" para que o vendedor receba uma notificação caso não tenha contatado o lead dentro de meia hora.',
      },
    ],
  },
  {
    id: 'lgpd',
    tit: "Boas práticas de LGPD no CRM",
    cat: "Privacidade",
    t: "9 min",
    conteudo: [
      {
        tipo: 'intro',
        texto: 'A Lei Geral de Proteção de Dados (LGPD) exige que sua empresa trate os dados de clientes e leads com transparência e segurança. A Ezza tem recursos que facilitam a conformidade.',
      },
      {
        tipo: 'h2', texto: 'Princípios da LGPD relevantes para CRMs',
      },
      {
        tipo: 'lista', itens: [
          'Finalidade: colete dados apenas para fins específicos e informados',
          'Necessidade: guarde somente o mínimo necessário de informação',
          'Transparência: informe o titular sobre como os dados são usados',
          'Segurança: proteja os dados contra acesso não autorizado',
          'Responsabilização: mantenha registros do tratamento de dados',
        ],
      },
      {
        tipo: 'h2', texto: 'Base legal para contato de leads',
      },
      {
        tipo: 'p', texto: 'Antes de enviar mensagens via WhatsApp ou e-mail, você precisa de uma base legal. As mais comuns em CRMs são:',
      },
      {
        tipo: 'lista', itens: [
          'Consentimento: o lead preencheu um formulário autorizando contato',
          'Legítimo interesse: lead veio por indicação ou já é cliente',
          'Execução de contrato: comunicações sobre um negócio em andamento',
        ],
      },
      {
        tipo: 'h2', texto: 'Recursos de conformidade na Ezza',
      },
      {
        tipo: 'lista', itens: [
          'Registro de consentimento: campo "Origem" e data de entrada do lead',
          'Direito de exclusão: botão "Excluir contato" remove todos os dados do lead',
          'Anonimização: na exportação CSV, campos sensíveis podem ser mascarados',
          'Controle de acesso: defina quem da equipe pode ver dados de contato',
          'Logs de atividade: todas as ações na conta ficam registradas por 90 dias',
        ],
      },
      {
        tipo: 'dica', texto: 'Recomendação: inclua em seus formulários de captação uma checkbox de consentimento explícito com link para sua Política de Privacidade. Isso protege você legalmente e melhora a qualidade dos leads.',
      },
      {
        tipo: 'h2', texto: 'Respondendo a solicitações de titulares',
      },
      {
        tipo: 'p', texto: 'Quando um lead ou cliente pedir para ver, corrigir ou deletar seus dados:',
      },
      {
        tipo: 'lista', itens: [
          'Acesse Contatos e localize o registro pelo nome ou e-mail',
          'Para ver os dados: compartilhe a tela ou exporte em CSV',
          'Para corrigir: use o botão "Editar contato" e atualize os campos',
          'Para deletar: MoreMenu → "Excluir contato" (irreversível)',
          'Prazo legal para resposta: 15 dias após a solicitação',
        ],
      },
    ],
  },
];

// ─── DRAWER DE ARTIGO ────────────────────────────────────────────────────────

function ArticleDrawer({ artigo, onClose }) {
  const { useEffect: useArtEffect, useRef: useArtRef } = React;
  const scrollRef = useArtRef();

  useArtEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  const renderBloco = (b, i) => {
    switch (b.tipo) {
      case 'intro':
        return (
          <p key={i} style={{fontSize:14.5, lineHeight:1.75, color:'oklch(0.36 0.012 255)', fontStyle:'italic', borderLeft:'3px solid oklch(0.78 0.08 260)', paddingLeft:16, margin:'0 0 22px'}}>
            {b.texto}
          </p>
        );
      case 'h2':
        return (
          <h2 key={i} style={{fontSize:16, fontWeight:700, letterSpacing:'-0.02em', color:'oklch(0.14 0.01 255)', margin:'28px 0 10px', paddingTop:4, borderTop:'1px solid oklch(0.93 0.01 255)'}}>
            {b.texto}
          </h2>
        );
      case 'h3':
        return (
          <h3 key={i} style={{fontSize:13.5, fontWeight:700, color:'oklch(0.26 0.01 255)', margin:'18px 0 8px'}}>
            {b.texto}
          </h3>
        );
      case 'p':
        return (
          <p key={i} style={{fontSize:13.5, lineHeight:1.72, color:'oklch(0.40 0.012 255)', margin:'0 0 14px'}}>
            {b.texto}
          </p>
        );
      case 'lista':
        return (
          <ul key={i} style={{margin:'0 0 16px', paddingLeft:20, display:'flex', flexDirection:'column', gap:7}}>
            {b.itens.map((it, j) => (
              <li key={j} style={{fontSize:13.5, lineHeight:1.65, color:'oklch(0.40 0.012 255)'}}>
                {it}
              </li>
            ))}
          </ul>
        );
      case 'dica':
        return (
          <div key={i} style={{
            background:'oklch(0.96 0.04 250)',
            border:'1px solid oklch(0.88 0.06 255)',
            borderRadius:12,
            padding:'13px 16px',
            fontSize:13,
            lineHeight:1.65,
            color:'oklch(0.35 0.10 260)',
            margin:'4px 0 20px',
            display:'flex',
            gap:10,
          }}>
            <span style={{fontSize:16, flexShrink:0}}>💡</span>
            <span>{b.texto}</span>
          </div>
        );
      default:
        return null;
    }
  };

  const CAT_COLOR = {
    'Primeiros passos': 'pill-mint',
    'Integrações':      'pill-blue',
    'Dados':            'pill-yellow',
    'Automações':       'pill-lav',
    'Privacidade':      'pill-pink',
  };

  return (
    <>
      {/* scrim */}
      <div style={{position:'fixed', inset:0, background:'rgba(10,15,35,0.35)', zIndex:200, backdropFilter:'blur(2px)'}} onClick={onClose} />

      {/* drawer */}
      <div style={{
        position:'fixed', top:0, right:0, bottom:0,
        width: Math.min(640, window.innerWidth - 60),
        background:'oklch(0.995 0.003 250)',
        zIndex:201,
        display:'flex', flexDirection:'column',
        boxShadow:'-24px 0 60px -20px rgba(10,20,60,.25)',
        animation:'art-slide-in .25s cubic-bezier(.2,.8,.2,1)',
      }}>
        {/* cabeçalho */}
        <div style={{
          padding:'20px 28px',
          borderBottom:'1px solid oklch(0.92 0.01 250)',
          display:'flex', alignItems:'flex-start', gap:16,
        }}>
          <div style={{flex:1, minWidth:0}}>
            <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:8}}>
              <span className={`pill ${CAT_COLOR[artigo.cat] || ''}`} style={{fontSize:10}}>{artigo.cat}</span>
              <span className="muted" style={{fontSize:11}}>{artigo.t} de leitura</span>
            </div>
            <div style={{fontSize:20, fontWeight:700, letterSpacing:'-0.022em', lineHeight:1.3, color:'oklch(0.14 0.01 255)'}}>
              {artigo.tit}
            </div>
          </div>
          <button
            onClick={onClose}
            style={{
              width:32, height:32, borderRadius:10,
              background:'oklch(0.95 0.01 250)',
              border:'0.5px solid oklch(0.88 0.01 250)',
              display:'grid', placeItems:'center',
              cursor:'default', flexShrink:0,
              color:'oklch(0.5 0.01 255)',
            }}
          >{ICN.x}</button>
        </div>

        {/* conteúdo scrollável */}
        <div ref={scrollRef} style={{flex:1, overflowY:'auto', padding:'24px 28px 40px'}}>
          {artigo.conteudo.map(renderBloco)}
        </div>

        {/* rodapé */}
        <div style={{
          padding:'16px 28px',
          borderTop:'1px solid oklch(0.92 0.01 250)',
          display:'flex', alignItems:'center', justifyContent:'space-between',
        }}>
          <span className="muted" style={{fontSize:12}}>Este artigo foi útil?</span>
          <div style={{display:'flex', gap:8}}>
            <button style={{
              background:'oklch(0.96 0.015 145)', color:'oklch(0.35 0.10 145)',
              border:'0.5px solid oklch(0.88 0.06 145)',
              borderRadius:999, padding:'7px 16px',
              fontFamily:'inherit', fontSize:12.5, fontWeight:600, cursor:'default',
            }} onClick={onClose}>👍 Sim, resolveu</button>
            <button style={{
              background:'oklch(0.96 0.01 250)', color:'oklch(0.50 0.01 255)',
              border:'0.5px solid oklch(0.88 0.01 250)',
              borderRadius:999, padding:'7px 16px',
              fontFamily:'inherit', fontSize:12.5, fontWeight:600, cursor:'default',
            }} onClick={onClose}>Ainda tenho dúvidas</button>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes art-slide-in {
          from { transform: translateX(40px); opacity: 0; }
          to   { transform: translateX(0);    opacity: 1; }
        }
      `}</style>
    </>
  );
}

// ─── MODAL DE SUPORTE ────────────────────────────────────────────────────────

function SuporteModal({ onClose }) {
  const { useEffect: useSuptEffect } = React;
  const toast = useToast();

  useSuptEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  const abrirWhatsapp = () => {
    const msg = encodeURIComponent('Olá! Preciso de ajuda com a plataforma Ezza CRM.');
    window.open(`https://wa.me/5511999999999?text=${msg}`, '_blank');
    onClose();
  };

  const abrirEmail = () => {
    toast('Abrindo seu cliente de e-mail…');
    window.open('mailto:suporte@ezza.com.br?subject=Ajuda com a Ezza CRM', '_blank');
    onClose();
  };

  return (
    <div className="modal-wrap" onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        background:'white',
        borderRadius:24,
        width:500,
        overflow:'hidden',
        boxShadow:'0 32px 72px -20px rgba(10,20,60,.30)',
        animation:'fadein .2s ease',
      }}>
        {/* hero */}
        <div style={{
          background:'linear-gradient(135deg, oklch(0.18 0.01 255) 0%, oklch(0.26 0.14 295) 100%)',
          padding:'32px 32px 28px',
          color:'white',
        }}>
          <div style={{fontSize:40, marginBottom:12}}>🤝</div>
          <div style={{fontSize:22, fontWeight:700, letterSpacing:'-0.022em', marginBottom:8}}>
            Fale com o suporte Ezza
          </div>
          <div style={{fontSize:13.5, lineHeight:1.65, color:'oklch(1 0 0 / 0.75)'}}>
            Nossa equipe está pronta para te ajudar. Atendemos de segunda a sexta,&nbsp;
            das <strong style={{color:'white'}}>8h às 20h</strong>, com tempo médio de resposta de&nbsp;
            <strong style={{color:'white'}}>12 minutos</strong>.
          </div>
        </div>

        {/* canais */}
        <div style={{padding:'24px 32px 28px', display:'flex', flexDirection:'column', gap:14}}>
          {/* WhatsApp */}
          <div style={{
            display:'flex', alignItems:'center', gap:16,
            padding:'16px 20px',
            background:'oklch(0.96 0.04 150)',
            border:'1px solid oklch(0.88 0.06 150)',
            borderRadius:16,
          }}>
            <div style={{
              width:44, height:44, borderRadius:14,
              background:'oklch(0.52 0.18 150)',
              display:'grid', placeItems:'center',
              color:'white', fontSize:22, flexShrink:0,
            }}>
              {ICN.whatsapp}
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:14, fontWeight:700, color:'oklch(0.25 0.08 150)'}}>WhatsApp</div>
              <div style={{fontSize:12.5, color:'oklch(0.42 0.06 150)', marginTop:2}}>
                Canal mais rápido · resposta em até 12 min · disponível agora
              </div>
            </div>
            <button
              onClick={abrirWhatsapp}
              style={{
                background:'oklch(0.52 0.18 150)', color:'white',
                border:0, borderRadius:999, padding:'10px 20px',
                fontFamily:'inherit', fontSize:13, fontWeight:600,
                cursor:'default', whiteSpace:'nowrap',
              }}
            >
              Abrir chat
            </button>
          </div>

          {/* E-mail */}
          <div style={{
            display:'flex', alignItems:'center', gap:16,
            padding:'16px 20px',
            background:'oklch(0.97 0.01 255)',
            border:'1px solid oklch(0.90 0.01 255)',
            borderRadius:16,
          }}>
            <div style={{
              width:44, height:44, borderRadius:14,
              background:'oklch(0.58 0.12 255)',
              display:'grid', placeItems:'center',
              color:'white', fontSize:20, flexShrink:0,
            }}>
              {ICN.mail}
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:14, fontWeight:700, color:'oklch(0.25 0.01 255)'}}>E-mail</div>
              <div style={{fontSize:12.5, color:'oklch(0.52 0.01 255)', marginTop:2}}>
                suporte@ezza.com.br · resposta em até 4h úteis
              </div>
            </div>
            <button
              onClick={abrirEmail}
              style={{
                background:'oklch(0.58 0.12 255)', color:'white',
                border:0, borderRadius:999, padding:'10px 20px',
                fontFamily:'inherit', fontSize:13, fontWeight:600,
                cursor:'default', whiteSpace:'nowrap',
              }}
            >
              Enviar e-mail
            </button>
          </div>

          {/* informações extras */}
          <div style={{
            display:'grid', gridTemplateColumns:'1fr 1fr',
            gap:10, marginTop:4,
          }}>
            {[
              { ic:'⏱️', l:'Tempo de resposta', v:'≤ 12 minutos' },
              { ic:'📅', l:'Horário de atendimento', v:'Seg–Sex, 8h–20h' },
              { ic:'🌐', l:'Idioma', v:'Português (BR)' },
              { ic:'📋', l:'SLA de resolução', v:'1 dia útil' },
            ].map((it,i) => (
              <div key={i} style={{
                padding:'12px 14px',
                background:'oklch(0.97 0.01 255)',
                borderRadius:12,
                display:'flex', gap:10, alignItems:'center',
              }}>
                <span style={{fontSize:18}}>{it.ic}</span>
                <div>
                  <div className="muted" style={{fontSize:10.5, textTransform:'uppercase', letterSpacing:'0.07em', fontWeight:600}}>{it.l}</div>
                  <div style={{fontSize:13, fontWeight:600, color:'oklch(0.26 0.01 255)', marginTop:2}}>{it.v}</div>
                </div>
              </div>
            ))}
          </div>

          <button
            onClick={onClose}
            style={{
              alignSelf:'center',
              background:'transparent', border:0,
              fontSize:12.5, color:'oklch(0.60 0.01 255)',
              fontFamily:'inherit', cursor:'default', padding:'4px 8px',
              marginTop:4,
            }}
          >
            Fechar
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── TELA PRINCIPAL ──────────────────────────────────────────────────────────

function Ajuda({ onBack, onTour }) {
  const [q, setQ] = React.useState('');
  const [catFilter, setCatFilter] = React.useState('Todos');
  const [artigoAberto, setArtigoAberto] = React.useState(null);
  const [showSuporte, setShowSuporte] = React.useState(false);

  const ql = q.toLowerCase();
  const artigos = ARTIGOS.filter(a =>
    (!q || (a.tit + a.cat).toLowerCase().includes(ql)) &&
    (catFilter === 'Todos' || a.cat === catFilter)
  );

  return (
    <>
      <PageHead
        title={<>Central <em>de Ajuda</em></>}
        subtitle="Artigos, atalhos e contato com o suporte"
        back onBack={onBack}
      />

      <div className="card ajuda-hero">
        <div className="ajuda-hero-inner">
          <div className="ajuda-hero-eyebrow">Como podemos ajudar?</div>
          <div className="ajuda-hero-title">Busque um artigo ou tópico</div>
          <div className="ajuda-search">
            <span className="muted">{ICN.search}</span>
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Ex: como importar contatos, WhatsApp, LGPD…" autoFocus={false} />
            {q && (
              <span style={{cursor:'default', color:'oklch(0.6 0.01 255)', display:'flex'}} onClick={() => setQ('')}>{ICN.x}</span>
            )}
          </div>
          <div className="row" style={{gap: 8, marginTop: 14, justifyContent:'center'}}>
            {['Todos','Primeiros passos','Integrações','Dados','Automações','Privacidade'].map(t => (
              <span key={t}
                className={`pill ${catFilter === t ? 'pill-dark' : ''}`}
                style={{cursor:'default', transition:'background .15s'}}
                onClick={() => { setCatFilter(t); setQ(''); }}
              >{t}</span>
            ))}
          </div>
        </div>
      </div>

      <div className="ajuda-grid">
        <div className="card">
          <div className="card-head">
            <div className="card-title">
              {catFilter !== 'Todos' ? catFilter : 'Artigos'}
              <span className="muted" style={{fontSize:12, fontWeight:400, marginLeft:8}}>({artigos.length})</span>
            </div>
          </div>
          <div className="col" style={{gap: 2}}>
            {artigos.map((a, i) => (
              <div key={i} className="art-row" onClick={() => setArtigoAberto(a)}>
                <div className="art-ic">{ICN.bolt2}</div>
                <div className="col" style={{flex:1}}>
                  <div className="art-tit">{a.tit}</div>
                  <div className="art-meta muted">{a.cat} · {a.t} de leitura</div>
                </div>
                <span className="muted">{ICN.arrowRight}</span>
              </div>
            ))}
            {artigos.length === 0 && (
              <div className="muted" style={{padding:'32px', textAlign:'center', fontSize:13}}>
                {q ? `Nenhum artigo encontrado para "${q}".` : 'Nenhum artigo nesta categoria.'}
              </div>
            )}
          </div>
        </div>

        <div className="col" style={{gap: 14}}>
          <div className="card support-card">
            <div className="support-ic">{ICN.send}</div>
            <div className="support-tit">Fale com o suporte</div>
            <div className="support-sub">Tempo médio de resposta: <strong>12 minutos</strong> · seg–sex, 8h às 20h.</div>
            <div className="row" style={{gap: 8, marginTop: 14}}>
              <button className="btn-primary" style={{flex:1, justifyContent:'center'}} onClick={() => setShowSuporte(true)}>
                {ICN.mail} Abrir chamado
              </button>
              <button className="btn-ghost" style={{padding:'10px 14px'}} onClick={() => {
                const msg = encodeURIComponent('Olá! Preciso de ajuda com a plataforma Ezza CRM.');
                window.open(`https://wa.me/5511999999999?text=${msg}`, '_blank');
              }}>WhatsApp</button>
            </div>
          </div>

          {onTour && (
            <div className="card" style={{padding:'16px 18px !important'}}>
              <div style={{display:'flex', alignItems:'center', gap:14}}>
                <div style={{width:40, height:40, borderRadius:12, background:'oklch(0.94 0.05 295)', display:'grid', placeItems:'center', fontSize:20, flexShrink:0}}>🧭</div>
                <div style={{flex:1}}>
                  <div style={{fontSize:13.5, fontWeight:700, color:'oklch(0.22 0.01 255)'}}>Tour do produto</div>
                  <div className="muted" style={{fontSize:12, marginTop:2}}>Veja um resumo de cada tela e funcionalidade</div>
                </div>
                <button className="btn-ghost" style={{padding:'8px 14px', fontSize:12.5, whiteSpace:'nowrap'}} onClick={onTour}>
                  Ver tour →
                </button>
              </div>
            </div>
          )}

          <div className="card">
            <div className="card-head">
              <div className="card-title">Status do sistema</div>
              <span className="pill pill-mint">Operacional</span>
            </div>
            <div className="col" style={{gap: 8}}>
              {[
                { s: 'API e Web App',         st: 'ok',   t: '99,98%' },
                { s: 'Integração WhatsApp',   st: 'ok',   t: '99,92%' },
                { s: 'Sincronização Gmail',   st: 'warn', t: '98,71%' },
                { s: 'Webhooks Zapier',       st: 'ok',   t: '99,99%' },
              ].map((it, i) => (
                <div key={i} className="row" style={{justifyContent:'space-between', padding: '6px 0'}}>
                  <span className="row" style={{gap: 8}}>
                    <span className={`st-dot st-${it.st}`} />
                    <span style={{fontSize: 13}}>{it.s}</span>
                  </span>
                  <span className="muted" style={{fontSize: 12, fontFamily: 'var(--font-mono)'}}>{it.t}</span>
                </div>
              ))}
            </div>
            <div className="muted" style={{fontSize: 11, marginTop: 12, paddingTop: 12, borderTop: '1px solid oklch(0.93 0.01 255)'}}>Última atualização há 4 minutos.</div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-title">Atalhos de teclado</div>
          <div className="row" style={{gap: 6}}>
            <span className="cmdk-kbd">⌘</span>
            <span className="cmdk-kbd">?</span>
          </div>
        </div>
        <div className="kbd-grid">
          {SHORTCUTS.map(g => (
            <div key={g.cat}>
              <div className="kbd-cat">{g.cat}</div>
              {g.items.map((s, i) => (
                <div key={i} className="kbd-row">
                  <span className="kbd-lbl">{s.label}</span>
                  <span className="row" style={{gap: 4}}>
                    {s.keys.map((k, j) => <span key={j} className="cmdk-kbd cmdk-kbd-wide">{k}</span>)}
                  </span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .ajuda-hero { background: linear-gradient(135deg, oklch(0.94 0.05 250) 0%, oklch(0.94 0.05 295) 100%) !important; border: 0 !important; padding: 36px !important; margin-bottom: 14px; }
        .ajuda-hero-inner { max-width: 640px; margin: 0 auto; text-align: center; }
        .ajuda-hero-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: oklch(0.40 0.16 270); }
        .ajuda-hero-title { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; margin-top: 10px; font-family: var(--font-display); font-style: italic; font-weight: 400; }
        .ajuda-search { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: white; box-shadow: 0 12px 28px -16px rgba(20,30,60,.2); margin-top: 18px; }
        .ajuda-search input { flex:1; border:0; outline:0; font: inherit; font-size: 14px; background: transparent; }

        .ajuda-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; }

        .art-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-radius: 12px; cursor: default; transition: background .12s; }
        .art-row:hover { background: oklch(0.96 0.012 250); }
        .art-ic { width: 34px; height: 34px; border-radius: 10px; background: oklch(0.94 0.05 250); color: oklch(0.42 0.16 250); display: grid; place-items: center; flex-shrink: 0; }
        .art-tit { font-size: 13px; font-weight: 600; }
        .art-meta { font-size: 11.5px; margin-top: 2px; }

        .support-card { background: var(--black) !important; color: white; padding: 20px !important; }
        .cs-flat .support-card, .cs-outlined .support-card { background: var(--black) !important; }
        .support-ic { width: 40px; height: 40px; border-radius: 12px; background: oklch(1 0 0 / 0.15); display: grid; place-items: center; margin-bottom: 12px; }
        .support-tit { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
        .support-sub { font-size: 12.5px; color: oklch(1 0 0 / 0.7); margin-top: 4px; line-height: 1.4; }
        .support-card .btn-primary { background: white; color: var(--ink); }
        .support-card .btn-ghost { color: white; }
        .support-card .btn-ghost:hover { background: oklch(1 0 0 / 0.1); color: white; }

        .st-dot { width: 8px; height: 8px; border-radius: 50%; }
        .st-ok { background: var(--ok); }
        .st-warn { background: var(--warn); }

        .kbd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .kbd-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-muted); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid oklch(0.93 0.01 255); }
        .kbd-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; }
        .kbd-lbl { font-size: 12.5px; }
      `}</style>

      {artigoAberto && <ArticleDrawer artigo={artigoAberto} onClose={() => setArtigoAberto(null)} />}
      {showSuporte  && <SuporteModal onClose={() => setShowSuporte(false)} />}
    </>
  );
}

window.Ajuda = Ajuda;
