/* ============================================================
   DEL AGENDA — Central de Ajuda
   Conteúdo orientado ao usuário e adaptado ao acesso/segmento.
   ============================================================ */

function HelpScreen(ctx) {
  const { terms, user, businessType } = ctx;
  const brandName = window.APP_BRAND_NAME || 'DEL AGENDA';
  const [query, setQuery] = React.useState('');
  const [category, setCategory] = React.useState('all');
  const [openId, setOpenId] = React.useState('agenda-criar');

  const isPlainUser = !!(user && user.role === 'user');
  const isAdmin = !!(user && user.role === 'admin');
  const isPrimaryAdmin = !!(isAdmin && user.isPrimaryAdmin);
  const canManage = !isPlainUser;
  const hasFinance = !!(canManage && user && user.hasFinance);
  const isPilates = businessType === 'pilates';
  const client = terms.client.toLowerCase();
  const clients = terms.clients.toLowerCase();
  const service = terms.service.toLowerCase();
  const services = terms.services.toLowerCase();
  const pro = terms.pro.toLowerCase();
  const pros = terms.pros.toLowerCase();
  const apptGrammar = window.DB.apptGrammar(terms);
  const appt = apptGrammar.singularLower;
  const appts = apptGrammar.pluralLower;

  const categories = [
    { id: 'all', label: 'Todas', icon: 'grid' },
    { id: 'inicio', label: 'Primeiros passos', icon: 'zap' },
    { id: 'agenda', label: terms.appt === 'Aula' ? 'Agenda e aulas' : 'Agenda e calendário', icon: 'calendar' },
    { id: 'cadastros', label: 'Cadastros', icon: 'users' },
    { id: 'avisos', label: 'Avisos e mensagens', icon: 'bell' },
    { id: 'financeiro', label: 'Financeiro', icon: 'wallet', show: hasFinance },
    { id: 'pilates', label: 'Planos e aulas', icon: 'health', show: isPilates && canManage },
    { id: 'acessos', label: 'Acessos e preferências', icon: 'settings' },
    { id: 'privacidade', label: 'Privacidade', icon: 'userX', show: canManage },
    { id: 'crm', label: 'CRM', icon: 'mail' },
  ].filter((item) => item.show !== false);

  const items = [
    {
      id: 'inicio-endereco', category: 'inicio',
      question: 'Qual endereço devo usar para entrar?',
      answer: 'Cada empresa possui um endereço próprio. Use o link recebido da sua empresa. Se aparecer “empresa não encontrada”, confira se o final do endereço foi digitado corretamente ou peça o link novamente ao responsável.',
      keywords: 'link empresa entrar acesso endereço não encontrada',
    },
    {
      id: 'inicio-login', category: 'inicio',
      question: 'Não consigo entrar com meu usuário e senha. O que faço?',
      answer: 'Primeiro, confirme se você está no endereço correto da sua empresa e se não há espaços no usuário. Depois de várias tentativas erradas, o acesso pode ficar temporariamente bloqueado. Se a senha tiver sido esquecida, peça ao administrador principal para criar uma nova senha no menu Usuários.',
      keywords: 'login senha esqueci bloqueado entrar usuário',
    },
    {
      id: 'inicio-conectado', category: 'inicio',
      question: 'O que significa “Manter conectado neste dispositivo”?',
      answer: 'Essa opção mantém seu acesso aberto neste aparelho por mais tempo. Use somente em computador ou celular de confiança. Ao clicar em Sair, o acesso salvo neste dispositivo é encerrado.',
      keywords: 'lembrar acesso dispositivo conectado sair',
    },
    {
      id: 'inicio-instalar', category: 'inicio',
      question: `Posso instalar o ${brandName} no celular ou computador?`,
      answer: 'Sim. Use o botão “Instalar aplicativo”. No iPhone ou iPad, abra no Safari, toque em Compartilhar e escolha “Adicionar à Tela de Início”. No Android ou computador, a opção também pode aparecer no menu do navegador.',
      keywords: 'aplicativo app instalar celular iphone android computador tela início',
    },
    {
      id: 'inicio-atualizar', category: 'inicio',
      question: 'Como atualizo a tela quando uma informação não aparece?',
      answer: 'Use o botão de atualizar no topo do sistema. Ele busca novamente a versão mais recente da tela. Se a conexão estiver instável, aguarde alguns instantes e tente outra vez; uma operação de cadastro ou pagamento nunca é repetida automaticamente.',
      keywords: 'atualizar recarregar conexão dados não aparece versão',
    },
    {
      id: 'agenda-criar', category: 'agenda',
      question: `Como criar ${apptGrammar.indefinite} ${appt}?`,
      answer: `Clique em “Novo” ou em um horário livre do calendário. Informe ${client}, ${service}, ${pro}, data e horário. Confira o resumo e confirme. Os botões “+” ao lado dos campos permitem fazer um cadastro rápido sem sair da tela.`,
      keywords: `novo criar agendar ${client} ${service} ${pro} horário`,
    },
    {
      id: 'agenda-visualizacoes', category: 'agenda',
      question: 'Qual a diferença entre Dia, Semana e Mês?',
      answer: `Dia mostra as agendas lado a lado; Semana ajuda a comparar os dias; Mês oferece uma visão geral. Em qualquer visão, clique em ${apptGrammar.indefinite} ${appt} para abrir os detalhes. Quando um dia do mês tiver muitos registros, use “+ mais” para expandir.`,
      keywords: 'dia semana mês calendário visão mais expandir',
    },
    {
      id: 'agenda-filtros', category: 'agenda',
      question: `Como ver a agenda de uma pessoa ou de apenas um ${client}?`,
      answer: `Use os filtros no topo do calendário. É possível escolher “Minha Agenda”, todas as agendas, uma pessoa da ${pros} ou um ${client}. O resultado também é respeitado ao imprimir a agenda.`,
      keywords: `filtro minha agenda todas ${pros} ${client} pesquisar`,
    },
    {
      id: 'agenda-conflito', category: 'agenda',
      question: 'Por que o sistema informa conflito de horário?',
      answer: `Isso acontece quando ${pro} já possui outro compromisso no mesmo período ou quando ${client} já está agendado com outra pessoa naquele horário. Escolha outro horário ou ajuste o compromisso existente.`,
      keywords: `conflito sobreposição ocupado ${pro} ${client} horário`,
    },
    {
      id: 'agenda-expediente', category: 'agenda', show: canManage,
      question: `Por que não consigo agendar em determinado horário para ${pro}?`,
      answer: `O horário pode estar fora do expediente, dentro do intervalo de almoço ou em um dia não atendido por essa pessoa. Confira o cadastro em ${terms.pros} e ajuste os dias e horários de trabalho, se necessário.`,
      keywords: `fora expediente almoço indisponível disponibilidade ${pro}`,
    },
    {
      id: 'agenda-status', category: 'agenda',
      question: 'O que significam os estados do compromisso?',
      answer: `Pendente aguarda confirmação; ${apptGrammar.agree('Confirmado', 'Confirmada')} indica que o horário está mantido; ${apptGrammar.agree('Concluído', 'Concluída')} registra que o atendimento aconteceu; Faltou indica ausência; ${apptGrammar.agree('Cancelado', 'Cancelada')} mantém o registro, mas retira o compromisso da operação ativa.`,
      keywords: 'pendente confirmado concluído faltou cancelado status situação',
    },
    {
      id: 'agenda-remarcar', category: 'agenda', show: canManage,
      question: `Como remarcar ${apptGrammar.indefinite} ${appt}?`,
      answer: `Abra os detalhes e clique em “Remarcar”. Em uma repetição, o sistema perguntará se a alteração vale somente para ${apptGrammar.demonstrative} ${appt} ou também para ${apptGrammar.definitePlural} próxim${apptGrammar.agree('os', 'as')}. Compromissos com vários participantes podem precisar ser alterados um por vez.`,
      keywords: 'remarcar alterar data horário recorrência próximos somente este',
    },
    {
      id: 'agenda-repetir', category: 'agenda', show: canManage,
      question: `Como criar ${appts} recorrentes?`,
      answer: 'No novo compromisso, escolha Toda semana, A cada 15 dias ou Todo mês. Você pode informar uma data final. Se deixar o final em branco, o sistema cria os próximos registros para um período de até um ano e ignora datas que tenham conflito.',
      keywords: 'recorrente repetir semanal quinzenal mensal série conflito um ano',
    },
    {
      id: 'agenda-cancelar-excluir', category: 'agenda', show: canManage,
      question: 'Qual a diferença entre cancelar e excluir?',
      answer: 'Cancelar mantém o compromisso no histórico com a situação Cancelado. Excluir remove o registro da agenda. Se houver um lançamento financeiro ligado, o sistema perguntará se ele também deve ser excluído; pagamentos já realizados precisam ser ajustados diretamente no Financeiro.',
      keywords: 'cancelar excluir apagar histórico financeiro pagamento',
    },
    {
      id: 'agenda-grupo', category: 'agenda', show: isAdmin,
      question: `Como criar ${apptGrammar.indefinite} ${appt} em grupo?`,
      answer: `Ao criar um novo compromisso, marque a opção de grupo. Depois, adicione mais de um ${client} ou participante da ${pros}. O sistema procura horários válidos para todos os selecionados.`,
      keywords: 'grupo vários alunos clientes participantes equipe reunião',
    },
    {
      id: 'agenda-imprimir', category: 'agenda', show: canManage,
      question: 'Como imprimir a agenda?',
      answer: `Clique em “Imprimir” no calendário. Escolha dia, semana ou mês e defina se deseja imprimir tudo, somente sua agenda, um ${client} ou uma pessoa da ${pros}. Também é possível incluir ou ocultar cancelados.`,
      keywords: 'imprimir impressão relatório dia semana mês cancelado',
    },
    {
      id: 'cadastro-rapido', category: 'cadastros', show: canManage,
      question: `Preciso sair da agenda para cadastrar ${client}, ${service} ou ${pro}?`,
      answer: 'Não. No novo compromisso, use o botão “+” ao lado do campo desejado. O cadastro rápido é salvo e já fica selecionado no compromisso.',
      keywords: `cadastro rápido mais ${client} ${service} ${pro}`,
    },
    {
      id: 'cadastro-sem-registro', category: 'cadastros',
      question: `Posso informar ${client} sem fazer um cadastro completo?`,
      answer: `Quando o seu acesso permitir, você pode digitar um nome avulso no compromisso. Esse nome fica somente naquele registro e não cria uma ficha completa. Para acompanhar histórico, contatos e mensagens, prefira cadastrar ${client}.`,
      keywords: `sem cadastro nome avulso ${client} histórico`,
    },
    {
      id: 'cadastro-vinculo-pro', category: 'cadastros', show: canManage,
      question: `Para que serve vincular ${client} a ${pro}?`,
      answer: `O vínculo ajuda o sistema a sugerir a pessoa que normalmente atende esse ${client}. Ele não impede a escolha de outra pessoa no momento do agendamento.`,
      keywords: `vincular principal responsável ${client} ${pro} sugerir`,
    },
    {
      id: 'cadastro-categorias', category: 'cadastros', show: canManage,
      question: `Como criar ou excluir categorias de ${clients}?`,
      answer: `Abra o cadastro de ${client} e use o botão ao lado de Categoria. Uma categoria que já esteja sendo usada não pode ser excluída; primeiro altere a categoria das pessoas vinculadas.`,
      keywords: `categoria tag criar excluir usada ${clients}`,
    },
    {
      id: 'cadastro-foto', category: 'cadastros', show: canManage,
      question: `Posso adicionar foto ao cadastro de ${client} ou ${pro}?`,
      answer: 'Sim. Abra o cadastro e escolha uma imagem JPG, PNG ou WEBP. O sistema recorta e reduz a foto antes de salvar. Na lista ou nos detalhes, clique no avatar para ampliar.',
      keywords: 'foto imagem avatar ampliar jpg png webp',
    },
    {
      id: 'cadastro-excluir-servico', category: 'cadastros', show: canManage,
      question: `Por que não consigo excluir ${service} ou ${pro}?`,
      answer: `A exclusão é bloqueada quando existem ${appts} vinculad${apptGrammar.agree('os', 'as')}, para preservar o histórico. Nesse caso, mantenha o cadastro ou ajuste primeiro os compromissos relacionados.`,
      keywords: `não exclui apagar bloqueado ${service} ${pro} histórico agendamento`,
    },
    {
      id: 'cadastro-usuario-profissional', category: 'cadastros', show: isPrimaryAdmin,
      question: `Usuário e ${pro} são a mesma coisa?`,
      answer: `Não. Usuário é o acesso usado para entrar no sistema; ${pro} é o perfil que aparece na agenda. Eles podem ser vinculados, mas excluir ou suspender o acesso não apaga automaticamente o perfil da agenda.`,
      keywords: `usuário login ${pro} equipe vínculo diferença excluir`,
    },
    {
      id: 'avisos-sino', category: 'avisos',
      question: 'O que aparece no sino de notificações?',
      answer: 'O sino reúne lembretes próximos, respostas de confirmação e outras pendências da agenda. Você pode abrir um aviso, marcá-lo como lido ou ignorá-lo quando ele não precisar mais de atenção.',
      keywords: 'sino notificação lembrete aviso pendência lido ignorar',
    },
    {
      id: 'avisos-diferenca', category: 'avisos', show: canManage,
      question: 'Qual a diferença entre notificação, WhatsApp e e-mail?',
      answer: `A notificação aparece dentro do ${brandName}. WhatsApp e e-mail enviam uma mensagem para o contato informado no cadastro. Cada opção pode ser ligada separadamente ao criar o compromisso.`,
      keywords: 'notificação whatsapp email diferença interno mensagem',
    },
    {
      id: 'avisos-whatsapp-manual', category: 'avisos', show: canManage,
      question: 'Como funciona o envio manual pelo WhatsApp?',
      answer: 'Ao salvar o compromisso com a opção ligada, o sistema abre o WhatsApp com número, texto e link preenchidos. Revise a conversa e toque em enviar. A mensagem não é enviada sozinha nesse modo.',
      keywords: 'whatsapp manual abrir conversa revisar enviar link',
    },
    {
      id: 'avisos-whatsapp-auto', category: 'avisos', show: isPrimaryAdmin,
      question: 'Como funciona o envio automático pelo WhatsApp?',
      answer: 'Depois de ativado em Configurações e conectado por QR Code, o sistema coloca confirmações e lembretes na fila de envio. O cliente precisa ter celular e autorização registrada. A conexão pode ficar temporariamente indisponível e possui limite diário.',
      keywords: 'whatsapp automático qr code fila limite conectado configuração',
    },
    {
      id: 'avisos-autorizacao', category: 'avisos', show: canManage,
      question: 'Por que preciso registrar autorização para mensagens no WhatsApp?',
      answer: 'No envio automático, o cliente precisa concordar em receber confirmações e lembretes. Registre somente uma autorização realmente recebida e informe como ela foi confirmada. A pessoa pode retirar a autorização respondendo SAIR, PARAR, CANCELAR ou STOP.',
      keywords: 'autorização consentimento whatsapp sair parar cancelar stop',
    },
    {
      id: 'avisos-email', category: 'avisos', show: canManage,
      question: 'Por que a opção de e-mail não aparece ou está desligada?',
      answer: `O envio depende do plano da empresa e de existir pelo menos um e-mail cadastrado para os participantes. Quando não houver destinatário válido, a opção permanece indisponível.`,
      keywords: 'email indisponível plano destinatário endereço confirmação lembrete',
    },
    {
      id: 'financeiro-lancar', category: 'financeiro', show: hasFinance,
      question: 'Como criar uma receita ou despesa?',
      answer: 'Abra Financeiro e clique em “Novo lançamento”. Escolha Receita ou Despesa, informe descrição, valor, datas e situação. Em despesas, você também pode vincular um fornecedor.',
      keywords: 'receita despesa novo lançamento fornecedor entrada saída',
    },
    {
      id: 'financeiro-datas', category: 'financeiro', show: hasFinance,
      question: 'Qual a diferença entre data do lançamento e vencimento?',
      answer: 'A data do lançamento identifica quando a conta foi registrada. O vencimento informa quando ela deve ser recebida ou paga. Ao confirmar o pagamento, a data escolhida passa a representar o dia em que o dinheiro realmente entrou ou saiu.',
      keywords: 'data lançamento vencimento recebimento pagamento caixa',
    },
    {
      id: 'financeiro-receber', category: 'financeiro', show: hasFinance,
      question: 'Como marcar uma conta como recebida ou paga?',
      answer: 'Na linha pendente, clique em Receber ou Pagar. Informe a data e uma forma válida. Você pode dividir o valor entre diferentes formas de pagamento; a soma informada precisa ser igual ao valor baixado.',
      keywords: 'receber pagar baixar forma pagamento soma',
    },
    {
      id: 'financeiro-parcial', category: 'financeiro', show: hasFinance,
      question: 'Posso registrar um pagamento parcial ou parcelado?',
      answer: 'Sim. Em um recebimento parcial, o sistema registra o valor pago e mantém o saldo como pendente. Em um parcelamento, cada parcela futura recebe seu próprio vencimento. O histórico reúne todas as partes da mesma conta.',
      keywords: 'parcial parcelado parcelas saldo pendente histórico',
    },
    {
      id: 'financeiro-agenda', category: 'financeiro', show: hasFinance,
      question: `Como enviar ${apptGrammar.indefinite} ${appt} para o Financeiro?`,
      answer: `Ao criar ou editar o compromisso, ligue “Enviar para o financeiro” e escolha a data para receber. O lançamento será criado como pendente. Se ele já estiver pago, alterações e correções deverão ser feitas diretamente no Financeiro.`,
      keywords: 'enviar financeiro compromisso cobrança a receber pago',
    },
    {
      id: 'financeiro-excluir', category: 'financeiro', show: hasFinance,
      question: 'O que acontece ao excluir um lançamento?',
      answer: 'Um lançamento simples é removido. Se ele fizer parte de um pagamento parcial ou parcelado, a exclusão remove a conta e todo o histórico ligado a ela. O sistema sempre pede confirmação antes de concluir.',
      keywords: 'excluir apagar lançamento parcelado parcial histórico confirmação',
    },
    {
      id: 'pilates-plano', category: 'pilates', show: isPilates && canManage,
      question: 'Como funciona o limite de aulas de um plano?',
      answer: 'No cadastro do plano, defina quantas aulas são permitidas e se o limite vale por semana ou por ciclo mensal. A contagem considera somente as aulas daquele plano; aulas canceladas, extras e reposições com crédito não consomem a franquia normal.',
      keywords: 'plano limite frequência semana mês franquia aula',
    },
    {
      id: 'pilates-extra', category: 'pilates', show: isPilates && canManage,
      question: 'O que fazer quando o aluno atingiu o limite do plano?',
      answer: 'O sistema oferece usar um crédito de reposição, quando houver, ou registrar uma aula extra. A aula extra pode ser cobrada separadamente ou no próximo vencimento da mensalidade automática.',
      keywords: 'limite atingido aula extra crédito reposição cobrar',
    },
    {
      id: 'pilates-reposicao', category: 'pilates', show: isPilates && canManage,
      question: 'Como é criado um crédito de reposição?',
      answer: 'Ao cancelar uma aula incluída na franquia, o sistema pergunta se deve gerar um crédito. Esse crédito fica no cadastro do aluno e pode ser usado ao marcar uma reposição futura.',
      keywords: 'crédito reposição cancelar aula saldo',
    },
    {
      id: 'pilates-mensalidade', category: 'pilates', show: isPilates && hasFinance,
      question: 'Como funciona a mensalidade automática do aluno?',
      answer: 'Informe um dia fixo de vencimento e o valor mensal. O sistema cria contas a receber futuras. Alterações de valor ou vencimento ajustam somente cobranças futuras ainda pendentes; pagamentos já realizados são preservados.',
      keywords: 'mensalidade automática dia vencimento valor futuro pendente',
    },
    {
      id: 'pilates-multiplano', category: 'pilates', show: isPilates && hasFinance,
      question: 'Um aluno pode ter mais de um plano?',
      answer: 'Sim. Ao adicionar outro plano, escolha entre uma mensalidade separada ou uma cobrança agrupada. Mesmo quando os valores são reunidos, cada plano mantém sua própria quantidade de aulas.',
      keywords: 'mais de um plano mensalidade separada agrupada franquia',
    },
    {
      id: 'pilates-comissao', category: 'pilates', show: isPilates && hasFinance,
      question: 'Onde consulto as comissões dos instrutores?',
      answer: 'Abra Instrutores e escolha a aba Comissões. Use os filtros de período, instrutor, aluno e situação da aula. O total considera aulas concluídas e pode incluir faltas conforme a escolha feita no relatório.',
      keywords: 'comissão instrutor relatório filtros concluída falta',
    },
    {
      id: 'acessos-menus', category: 'acessos',
      question: 'Por que alguns menus não aparecem para mim?',
      answer: 'Os menus dependem do seu tipo de acesso e dos recursos contratados pela empresa. Usuários comuns trabalham principalmente na própria agenda. Recursos de administração, financeiro, usuários e mensalidade aparecem somente para quem possui a permissão necessária.',
      keywords: 'menu não aparece permissão acesso plano usuário administrador',
    },
    {
      id: 'acessos-papeis', category: 'acessos', show: isPrimaryAdmin,
      question: 'Qual a diferença entre Usuário e Administrador?',
      answer: 'Usuário acessa principalmente a própria agenda. Administrador gerencia a operação e, quando o plano permitir, o Financeiro. Algumas decisões — como gerenciar outros usuários, mensalidade e WhatsApp automático — ficam somente com o administrador principal.',
      keywords: 'usuário administrador principal papel permissão diferença',
    },
    {
      id: 'acessos-suspender', category: 'acessos', show: isPrimaryAdmin,
      question: 'Qual a diferença entre suspender e excluir um acesso?',
      answer: `Suspender impede a entrada, mas mantém o usuário disponível para reativação. Excluir remove o acesso de login. Se houver um perfil correspondente em ${terms.pros}, esse perfil continua cadastrado na agenda.`,
      keywords: 'suspender excluir acesso reativar login perfil equipe',
    },
    {
      id: 'acessos-config', category: 'acessos', show: canManage,
      question: 'O que posso ajustar em Configurações?',
      answer: 'Você pode alterar tema, cor de destaque, agenda exibida ao abrir, faixa de horários, intervalo entre opções e os padrões usados em novos compromissos. O tipo de negócio é definido pelo suporte.',
      keywords: 'configuração tema cor calendário padrão intervalo negócio',
    },
    {
      id: 'acessos-leitura', category: 'acessos',
      question: 'Por que o sistema está somente para leitura?',
      answer: 'Isso pode acontecer quando o período de teste ou o acesso da empresa terminou. Os dados continuam visíveis, mas novas alterações ficam bloqueadas. O administrador principal pode consultar Mensalidade quando esse menu estiver disponível; nos demais casos, entre em contato com o suporte.',
      keywords: 'somente leitura expirou teste mensalidade bloqueado editar',
    },
    {
      id: 'privacidade-exportar', category: 'privacidade', show: canManage,
      question: `Como entregar uma cópia dos dados de ${client}?`,
      answer: `Abra a ficha de ${client}, acesse o menu de opções e escolha “Exportar dados do titular”. O arquivo reúne os dados pessoais e operacionais relacionados àquela pessoa.`,
      keywords: `privacidade exportar dados titular cópia ${client}`,
    },
    {
      id: 'privacidade-anonimizar', category: 'privacidade', show: canManage,
      question: 'O que acontece ao anonimizar os dados pessoais?',
      answer: `O nome é substituído por uma identificação anônima e são removidos contato, documento, endereço, foto, empresa, convênio, prontuário, anotações pessoais, vínculos com ${pros}, planos, créditos e autorizações de WhatsApp. A cobrança mensal é encerrada, cobranças futuras ainda pendentes são removidas e mensagens que aguardam envio são canceladas. O histórico de atendimentos e pagamentos permanece para controle operacional. A ação é permanente e só pode ser realizada depois de cancelar ${appts} futur${apptGrammar.agree('os', 'as')} ativ${apptGrammar.agree('os', 'as')}.`,
      keywords: 'anonimizar anonimização encerrar cadastro dados pessoais histórico futuro lgpd cobrança whatsapp',
    },
    {
      id: 'crm-o-que-e', category: 'crm',
      question: 'O que é o CRM Multicanal?',
      answer: 'É uma ferramenta opcional para organizar o relacionamento com clientes em um só lugar, reunindo conversas, contatos e trabalho da equipe. Para conhecer as opções disponíveis e consultar valores, entre em contato com o suporte.',
      keywords: 'crm multicanal relacionamento clientes conversas equipe valores preço contratar',
    },
  ].filter((item) => item.show !== false);

  const normalize = (value) => String(value || '')
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '')
    .toLocaleLowerCase('pt-BR');
  const normalizedQuery = normalize(query.trim());
  const activeCategory = categories.some((item) => item.id === category) ? category : 'all';
  const filtered = items.filter((item) => {
    if (activeCategory !== 'all' && item.category !== activeCategory) return false;
    if (!normalizedQuery) return true;
    return normalize(`${item.question} ${item.answer} ${item.keywords || ''}`).includes(normalizedQuery);
  });
  const categoryLabel = categories.find((item) => item.id === activeCategory);

  return (
    <div className="content-inner fadein help-page">
      <section className="help-hero">
        <div className="help-hero-icon"><window.Icon name="help" size={28} /></div>
        <div className="help-hero-copy">
          <span className="help-eyebrow">Central de Ajuda</span>
          <h1>Como podemos ajudar?</h1>
          <p>Encontre respostas rápidas para usar o {brandName} no dia a dia.</p>
        </div>
        <label className="help-search">
          <window.Icon name="search" size={18} />
          <input
            type="search"
            value={query}
            placeholder="Digite sua dúvida, por exemplo: remarcar horário"
            aria-label="Pesquisar na Central de Ajuda"
            onChange={(event) => {
              setQuery(event.target.value);
              if (event.target.value) setCategory('all');
            }}
          />
          {query && <button type="button" title="Limpar pesquisa" aria-label="Limpar pesquisa" onClick={() => setQuery('')}><window.Icon name="x" size={15} /></button>}
        </label>
      </section>

      <div className="help-category-list" aria-label="Assuntos da Central de Ajuda">
        {categories.map((item) => (
          <button
            type="button"
            key={item.id}
            className={activeCategory === item.id ? 'active' : ''}
            aria-pressed={activeCategory === item.id}
            onClick={() => { setCategory(item.id); setQuery(''); }}
          >
            <window.Icon name={item.icon} size={16} />
            {item.label}
          </button>
        ))}
      </div>

      <div className="help-layout">
        <section className="help-results" aria-live="polite">
          <div className="help-results-head">
            <div>
              <h2>{normalizedQuery ? `Resultados para “${query.trim()}”` : (categoryLabel ? categoryLabel.label : 'Perguntas')}</h2>
              <span>{filtered.length} {filtered.length === 1 ? 'resposta encontrada' : 'respostas encontradas'}</span>
            </div>
          </div>

          {filtered.length === 0 ? (
            <div className="help-empty">
              <div><window.Icon name="search" size={24} /></div>
              <h3>Nenhuma resposta encontrada</h3>
              <p>Tente pesquisar com outras palavras ou escolha uma categoria.</p>
              <window.Button variant="outline" onClick={() => { setQuery(''); setCategory('all'); }}>Ver todas as perguntas</window.Button>
            </div>
          ) : (
            <div className="help-accordion">
              {filtered.map((item) => {
                const open = openId === item.id;
                return (
                  <article className={open ? 'open' : ''} key={item.id}>
                    <button
                      type="button"
                      aria-expanded={open}
                      aria-controls={`help-answer-${item.id}`}
                      onClick={() => setOpenId(open ? '' : item.id)}
                    >
                      <span className="help-question-icon"><window.Icon name="help" size={16} /></span>
                      <span>{item.question}</span>
                      <window.Icon name="chevDown" size={17} />
                    </button>
                    {open && <div className="help-answer" id={`help-answer-${item.id}`}><p>{item.answer}</p></div>}
                  </article>
                );
              })}
            </div>
          )}
        </section>

        <aside className="help-aside">
          <div className="help-aside-card">
            <div className="help-aside-icon"><window.Icon name="mail" size={21} /></div>
            <h3>Não encontrou a resposta?</h3>
            <p>{window.APP_WHITE_LABEL
              ? 'Entre em contato com a empresa que forneceu seu acesso e informe sua dúvida com o máximo de detalhes possível.'
              : 'Entre em contato e informe sua dúvida com o máximo de detalhes possível.'}</p>
            {!window.APP_WHITE_LABEL && <a className="btn outline block" href="mailto:contato@delsistemas.com.br?subject=Ajuda%20com%20o%20DEL%20AGENDA">
              <window.Icon name="mail" size={16} /> Falar com o suporte
            </a>}
          </div>
        </aside>
      </div>
    </div>
  );
}

window.HelpScreen = HelpScreen;
