# 05 — Motor do formulário do briefing

## 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
Etapas 01–04 concluídas.

## Tarefa
1. **Criar briefing:** botão "Iniciar meu briefing" cria `Briefing` RASCUNHO. Os campos do cabeçalho do documento original (Empresa/Marca, Responsável, Data, Contato) são pré-preenchidos com os dados do cadastro e exibidos na primeira tela, editáveis.
2. **Tela de abertura** `/briefings/[id]`: mostra o "Como preencher" e o aviso de senhas (vindos de `Configuracao`), lista das 19 seções com progresso por seção (respondidas/total) e botão "Continuar de onde parei".
3. **Tela de seção** `/briefings/[id]/[secao]`: título e descrição da seção; cada pergunta renderizada por `components/form/PerguntaField.tsx`, escolhendo o componente pelo `tipo`:
   - `TEXTAREA`: textarea com contador discreto.
   - `RADIO`: grupo de opções (uma escolha).
   - `CHECKBOX`: múltipla escolha.
   - `ANEXO`: tratado na etapa 08 (aqui, deixar placeholder).
   Se `permiteComplemento`, exibir abaixo um campo curto "Complemento / outro". O rótulo mostra `rotulo`, e `dica` aparece como texto de apoio. Cada pergunta tem espaço reservado para o botão Ajuda (etapa 06).
4. **Navegação:** Anterior/Próxima seção, menu lateral (drawer no celular) com as 19 seções e indicadores de concluída/parcial; barra de progresso geral.
5. **Estado:** React Hook Form por seção; valores iniciais carregados de `Resposta`. Persistência vem na etapa 07.
6. **"Respondida":** considerar respondida se houver texto não vazio ou ao menos uma opção marcada. Perguntas não são obrigatórias por padrão (`obrigatoria=false`); o documento aceita "Não se aplica" / "A definir" — exibir esses dois como atalhos (chips) em campos de texto que preenchem o valor ao toque.

## Critérios de aceite
- [ ] As 19 seções renderizam a partir do banco, sem campo escrito à mão.
- [ ] Os 4 tipos funcionam com os valores corretos (inclusive complemento).
- [ ] Navegação entre seções e progresso corretos; usável em tela de 360 px.
- [ ] Cliente não consegue abrir briefing de outro cliente (404).

Atualize `99-progresso.md` (05).