Página de Perguntas Frequentes (FAQ)

Produza uma única página de Perguntas Frequentes com seções de acordeão recolhíveis, pesquisa e filtragem por categoria.

Fluxo de Trabalho

1. Leia o DESIGN.md ativo (injetado acima). Use os tokens de componente para elementos interativos (cabeçalhos do acordeão, campo de pesquisa, botões de categoria).
2. Escolha o domínio do briefing (por exemplo, produto SaaS, e-commerce, serviço) e escreva de 12 a 18 perguntas reais de FAQ em 3 a 4 categorias.
   • Casos extremos:
     • Se o briefing fornecer menos de 8 FAQs, peça mais conteúdo ou gere perguntas realistas com base no domínio.
     • Para 1 a 5 FAQs, pule categorias e pesquisa; mostre uma lista simples.
     • Para respostas muito longas (>100 palavras), divida em parágrafos ou listas com marcadores para manter a legibilidade.
3. Seções, em ordem:
   • Cabeçalho — título da página ("Perguntas Frequentes" ou "Central de Ajuda"), subtítulo opcional (1 frase explicando o que os usuários podem encontrar aqui).
   • Barra de pesquisa — campo de pesquisa proeminente com texto de placeholder e ícone. JavaScript funcional para filtrar perguntas em tempo real.
   • Filtros de categoria — 3 a 4 botões em estilo de pílula para filtrar por categoria (por exemplo, "Cobrança", "Conta", "Técnico", "Geral"). "Todas" selecionado por padrão.
   • Acordeão de FAQ — pares de pergunta/resposta recolhíveis:
     • Pergunta como cabeçalho clicável com ícone de expandir/recolher (chevron ou mais/menos).
     • Resposta oculta por padrão, expande ao clicar com animação suave.
     • Cada entrada tem o atributo data-category para filtragem.
   • CTA de rodapé — seção "Ainda tem dúvidas?" com link de contato ou e-mail de suporte.
4. Escreva um único documento HTML:
   • <!doctype html> até </html>, CSS e JS inline.
   • O acordeão usa HTML semântico (<details> e <summary> para aprimoramento progressivo, ou JS personalizado com atributos ARIA adequados).
   • A pesquisa filtra perguntas correspondendo texto na pergunta ou resposta.
   • Os filtros de categoria mostram/ocultam perguntas com base em data-category.
   • Transições suaves para expandir/recolher (max-height ou grid-template-rows).
   • data-od-id no cabeçalho, pesquisa, categorias, contêiner do acordeão, rodapé.
5. Auto-verificação:
   • Perguntas são específicas e realistas (não placeholders genéricos).
   • Respostas são concisas (2 a 4 frases) mas completas.
   • Navegação por teclado funciona (Tab pelas perguntas, Enter para expandir).
   • A pesquisa não diferencia maiúsculas de minúsculas e filtra por texto correspondente.
   • Apenas um item do acordeão expandido por vez (opcional, depende da preferência de UX).
   • Amigável para dispositivos móveis (cabeçalhos do acordeão são tocáveis, pesquisa é utilizável).

Contrato de Saída

Emita entre as tags <artifact>:

<artifact identifier="faq-page" type="text/html" title="FAQ Page">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato, nada depois.

Perguntas de exemplo por categoria

Cobrança

• Como atualizo meu método de pagamento?
• Quais métodos de pagamento vocês aceitam?
• Posso obter um reembolso?
• Como cancelo minha assinatura?

Conta

• Como redefino minha senha?
• Posso alterar meu endereço de e-mail?
• Como excluo minha conta?
• O que acontece com meus dados após o cancelamento?

Técnico

• Quais navegadores vocês suportam?
• Existe um aplicativo móvel?
• Como exporto meus dados?
• Quais são os limites de taxa da minha API?

Geral

• O que é [Nome do Produto]?
• Como começo?
• Vocês oferecem suporte ao cliente?
• Onde posso encontrar seus termos de serviço?