// FAQ — accordion of common questions, with WhatsApp CTA.
function FAQ() {
  const { Eyebrow } = window.AmorimECostaDesignSystem_658eb5;
  const isMobile = window.useMQ('(max-width: 860px)');
  const [open, setOpen] = React.useState(0);
  const items = [
    ['Como funciona a primeira conversa?',
      'Você nos conta sua situação pelo WhatsApp, por telefone ou por videochamada. Analisamos as informações e explicamos, em linguagem simples, quais caminhos existem para o seu caso. A conversa inicial é sem compromisso.'],
    ['Preciso ir até o escritório?',
      'Não. Atendemos de forma remota em todo o estado de Mato Grosso do Sul: documentos podem ser enviados por foto ou PDF e as reuniões acontecem por WhatsApp ou videochamada. Se preferir, também atendemos presencialmente em Ponta Porã, Campo Grande e Sidrolândia.'],
    ['Quais documentos devo separar?',
      'Em geral: documento com foto, CPF, comprovante de residência, carteira de trabalho e o extrato do CNIS (disponível no Meu INSS). Se houver pedido negado, a carta de indeferimento. Em benefícios por incapacidade, laudos e exames médicos. Indicamos o que falta conforme o caso.'],
    ['O INSS negou meu pedido. Ainda é possível conseguir o benefício?',
      'Muitas vezes, sim. Cabe recurso administrativo, em regra no prazo de 30 dias da ciência da decisão, ou ação judicial. Antes de qualquer passo, analisamos o motivo do indeferimento e a documentação para indicar a melhor estratégia.'],
    ['Nunca contribuí para o INSS. Tenho direito a algum benefício?',
      'Pode ter. O BPC/LOAS é assistencial e não exige contribuição: é destinado a idosos a partir de 65 anos e a pessoas com deficiência, de qualquer idade, em situação de baixa renda.'],
    ['Quanto tempo leva um processo?',
      'Depende do tipo de benefício, da fase (administrativa ou judicial) e da necessidade de perícia. Não trabalhamos com promessas de prazo, mas você é informado a cada movimentação do processo.'],
    ['Como são cobrados os honorários?',
      'Os honorários são apresentados com transparência na primeira conversa e formalizados em contrato antes de qualquer providência, de acordo com as regras da OAB.'],
  ];
  return (
    <section id="faq" style={{ background: 'var(--surface-card)' }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? 'var(--space-8) var(--space-5)' : 'var(--space-10) var(--space-6)',
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.8fr 1.2fr', gap: isMobile ? 'var(--space-7)' : 'var(--space-9)', alignItems: 'start',
      }}>
        <div>
          <Eyebrow>Perguntas frequentes</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)',
            color: 'var(--text-strong)', letterSpacing: 'var(--tracking-tight)',
            margin: 'var(--space-4) 0 var(--space-3)', textWrap: 'balance',
          }}>Dúvidas comuns antes de nos procurar</h2>
          <p style={{ fontSize: 'var(--text-md)', color: 'var(--text-muted)', lineHeight: 1.6, margin: '0 0 var(--space-6)' }}>
            Não encontrou a sua? Pergunte diretamente a quem vai cuidar do seu caso.
          </p>
          <a href={window.waLink('Olá! Vim pelo site e tenho uma dúvida sobre o meu caso.')} target="_blank" rel="noopener"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: '8px', textDecoration: 'none',
              background: 'var(--brown-600)', color: 'var(--white)', borderRadius: 'var(--radius-pill)',
              padding: '12px 22px', fontSize: '14.5px', fontWeight: 600,
            }}>
            <i data-lucide="message-circle" style={{ width: 17, height: 17 }}></i> Tirar dúvida no WhatsApp
          </a>
        </div>
        <div style={{ borderTop: '1px solid var(--border-subtle)' }}>
          {items.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={q} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen} aria-controls={'faq-a-' + i}
                  style={{
                    width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)',
                    padding: 'var(--space-5) 0', background: 'none', border: 0, cursor: 'pointer', textAlign: 'left',
                    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-md)', color: 'var(--text-strong)',
                  }}>
                  {q}
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="var(--brown-600)" strokeWidth="1.75" strokeLinecap="round"
                    aria-hidden="true" style={{ flex: 'none', transition: 'transform 0.2s cubic-bezier(0.2,0,0.1,1)', transform: isOpen ? 'rotate(45deg)' : 'none' }}>
                    <path d="M12 5v14M5 12h14" />
                  </svg>
                </button>
                <div id={'faq-a-' + i} hidden={!isOpen}>
                  <p style={{ fontSize: '15px', color: 'var(--text-body)', lineHeight: 1.65, margin: '0 0 var(--space-5)', maxWidth: '62ch' }}>{a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;