const FAQ_ITEMS = [
  { q: 'Minha empresa nunca participou de licitação. Por onde começo?', a: 'Pelo diagnóstico gratuito da ResultaHub. Avaliamos CNPJ, setor, documentação atual e situação fiscal. A partir daí montamos o roteiro personalizado.' },
  { q: 'Quanto tempo leva para estar pronto para o primeiro pregão?', a: 'Em média, empresas sem pendências fiscais estão aptas entre 30 e 60 dias.' },
  { q: 'Qualquer empresa pode participar de licitações?', a: 'Sim, desde que regularizada. MEI, ME, EPP e empresas de grande porte podem participar.' },
  { q: 'Preciso de advogado para licitar?', a: 'Não. A maioria das etapas é administrativa. Em situações específicas, indicamos suporte jurídico.' },
  { q: 'Empresas pequenas conseguem vencer licitações?', a: 'Sim. PMEs venceram mais de 60% dos pregões eletrônicos em anos recentes. O diferencial é a preparação.' },
  { q: 'Quanto custa contratar a ResultaHub?', a: 'Assessoria mensal a partir de R$2.500, com percentual sobre contratos. Diagnóstico inicial gratuito.' },
  { q: 'É seguro enviar os dados da minha empresa para vocês?', a: 'Sim. Operamos em conformidade com a LGPD. Dados não são repassados a terceiros.' },
];

function FAQ() {
  return (
    <section id="faq" style={{ background: 'var(--cream-50)', padding: '120px 0' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', padding: '0 32px' }}>
        <div data-anim="fade-up" style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="eyebrow on-light" style={{ display: 'inline-flex' }}>
            <Bars size={14} light/>
            Dúvidas frequentes
          </span>
          <h2 style={{
            fontFamily: 'var(--font-sans)', fontWeight: 700,
            fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.1,
            letterSpacing: '-0.02em', color: 'var(--ink-900)',
            margin: '20px 0 0', textWrap: 'balance',
          }}>
            Perguntas frequentes
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {FAQ_ITEMS.map((it, i) => (
            <div className="faq-item" data-anim="fade-up" data-anim-delay={Math.min(i + 1, 5)} key={i} style={{
              background: '#fff',
              border: '1px solid var(--border-on-light)',
              borderRadius: 12,
              transition: 'border-color .25s var(--ease-out), box-shadow .25s var(--ease-out)',
            }}>
              <button className="faq-item-button" style={{ all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 16, padding: '22px 28px', width: '100%', boxSizing: 'border-box' }}>
                <span style={{ flex: 1, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 17, color: 'var(--ink-900)', letterSpacing: '-0.005em' }}>{it.q}</span>
                <span className="faq-chevron" style={{ width: 28, height: 28, borderRadius: 999, background: 'rgba(10,24,48,.06)', color: 'var(--ink-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                </span>
              </button>
              <div className="faq-item-body">
                <div>
                  <div style={{ padding: '0 28px 24px', fontSize: 15, lineHeight: 1.65, color: 'var(--ink-700)' }}>{it.a}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;