# 06 — Botão Ajuda com popup por pergunta ## Contexto do projeto (leia sempre) Sistema web "Briefing de Site" da SeConectai: o cliente se cadastra e depois preenche o briefing de criação do site, com um botão **Ajuda** em cada pergunta que abre um popup com o texto do guia auxiliar. O dono (Tiago) acompanha tudo por um painel admin. **Stack fixa:** Next.js 14+ (App Router) + TypeScript, PostgreSQL 16, Prisma, Tailwind + shadcn/ui, React Hook Form + Zod, Auth.js v5 (Credentials, estratégia JWT), Docker Compose. Idioma da interface: pt-BR. **Regras gerais:** leia `00-arquitetura-briefing-site.md` e `99-progresso.md` antes de começar; não avance se a etapa anterior estiver incompleta; ao terminar, devolva o `99-progresso.md` atualizado. Não invente dependências fora da stack. Nada de senhas de clientes em lugar nenhum. ## Pré-requisito Etapa 05 concluída. ## Tarefa Criar `components/ajuda/AjudaButton.tsx` e usá-lo em **toda** pergunta que tenha `ajuda`: - Botão pequeno ao lado do rótulo: ícone `HelpCircle` + texto "Ajuda" (o texto some só em telas muito estreitas, mantendo `aria-label="Ajuda sobre: {rotulo}"`). - Ao clicar, abre um `Dialog` (shadcn) com: - **Título:** o `rotulo` da pergunta. - **O que responder** — `oQueResponder` - **Por que perguntamos** — `porQuePerguntamos` - **Mini exemplo** — `miniExemplo`, em caixa destacada, com aviso fixo: "Os exemplos servem apenas como referência. Substitua pelas informações reais da sua empresa." - Rodapé: botão Fechar; opcional "Usar 'Não se aplica'" / "Usar 'A definir'" que preenche o campo e fecha o popup (apenas em campos de texto). - Acessibilidade: foco preso no diálogo, fecha com Esc e clique fora, foco volta ao botão, leitura por leitor de tela. - Dados de ajuda já vêm junto da estrutura (consulta única da etapa 03); não fazer requisição por clique. - Se a pergunta não tiver ajuda, não renderizar o botão. ## Critérios de aceite - [ ] Todas as 149 perguntas exibem o botão e abrem o texto correto do guia (conferir por amostragem de pelo menos 1 pergunta por seção). - [ ] Popup funciona em celular e desktop, com teclado e leitor de tela. - [ ] Abrir/fechar o popup não perde o que foi digitado no campo. Atualize `99-progresso.md` (06).