function FAQ() {
  const [open, setOpen] = React.useState(0);

  const items = [
    { q: 'O diagnóstico é gratuito mesmo?',
      a: 'É. Sem pegadinha. A primeira conversa é pra eu entender seu bastidor atual e te mostrar onde tá vazando faturamento. Se fizer sentido seguir junto, a gente fala de proposta. Se não fizer, você sai com um direcionamento claro do que arrumar.' },
    { q: 'Funciona pra qualquer tipo de negócio?',
      a: 'Funciona pra empresário que usa Instagram pra vender — serviço local, infoproduto, e-commerce, consultoria. O Método é o mesmo: organizar perfil, funil e atendimento. O que muda é a aplicação prática, calibrada pro seu segmento.' },
    { q: 'Em quanto tempo eu vejo resultado?',
      a: 'A estrutura sai do papel em poucas semanas. Resultado de venda começa a aparecer quando o tráfego entra em cima dessa estrutura — aí sim, cada real investido vira faturamento. Não prometo "10x em 30 dias" porque isso é conversa de quem não viu o jogo por dentro.' },
    { q: 'Eu preciso já ter tráfego pago rodando?',
      a: 'Não. Aliás, se ainda não tem, melhor — a gente monta o bastidor primeiro e você liga a torneira do tráfego com a estrutura pronta. Se já tem, a gente reorganiza antes que mais verba seja queimada.' },
    { q: 'Vocês fazem a gestão do tráfego pelo cliente?',
      a: 'A 8BAC entrega estrutura completa e direcionamento estratégico. A gestão operacional do tráfego pode ser feita por você com base em nossa metodologia ou nosso time toma conta, você que escolhe, não tem custo extra. O que eu garanto é que, quando o tráfego rodar, ele vai rodar em cima de uma estrutura que vende.' },
    { q: 'Como funciona o atendimento no automático?',
      a: 'Automação de DM e WhatsApp pra qualificar e responder lead em segundos, 24/7. O lead chega quente, é direcionado pelo funil e só vai pra você quando tá pronto pra fechar. Você atende quem é compra — não quem é curiosidade. Tudo isso usando plataforma SellFlux.' },
  ];

  return (
    <section className="faq" id="faq">
      <div className="faq__inner">
        <div className="section-eyebrow">PERGUNTAS FREQUENTES</div>
        <h2 className="section-h2">O que normalmente perguntam antes do diagnóstico.</h2>
        <div className="faq__list">
          {items.map((it, i) => {
            const active = open === i;
            return (
              <div key={it.q} className={'faq__item' + (active ? ' faq__item--open' : '')}>
                <button className="faq__head" onClick={() => setOpen(active ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className={'faq__chev' + (active ? ' faq__chev--open' : '')}>
                    <i data-lucide="chevron-down" style={{ width: 16, height: 16 }}></i>
                  </span>
                </button>
                {active && <div className="faq__body">{it.a}</div>}
              </div>
            );
          })}
        </div>
      </div>
      <style>{`
        .faq { background: var(--bg-alt); border-top: 1px solid var(--line); }
        .faq__inner { max-width: 960px; margin: 0 auto; padding: 64px 20px; }
        .faq__list { display: flex; flex-direction: column; gap: 10px; }
        .faq__item {
          background: #fff; border: 1px solid var(--line);
          border-radius: 12px; transition: border-color .14s var(--ease-out);
        }
        .faq__item--open { border-color: var(--bac-blue); }
        .faq__head {
          width: 100%; display: flex; align-items: center;
          justify-content: space-between; gap: 14px;
          padding: 20px 20px; background: transparent; border: 0;
          cursor: pointer; text-align: left;
          font-family: var(--font-sans); font-weight: 700; font-size: 16px;
          color: var(--ink-1); letter-spacing: -0.01em;
          -webkit-tap-highlight-color: transparent;
        }
        .faq__chev {
          width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
          background: var(--bg-alt); color: var(--ink-2);
          display: flex; align-items: center; justify-content: center;
          transition: all .22s var(--ease-out);
        }
        .faq__chev--open {
          background: var(--bac-blue); color: #fff;
          transform: rotate(180deg);
        }
        .faq__body {
          padding: 0 20px 20px;
          font-family: var(--font-sans); font-size: 15px; line-height: 1.6;
          color: var(--ink-3);
        }
        @media (min-width: 860px) {
          .faq__inner { padding: 96px 24px; }
          .faq__head { padding: 22px 24px; font-size: 18px; }
          .faq__body { padding: 0 24px 22px; font-size: 15.5px; }
          .faq__list { gap: 12px; }
        }
      `}</style>
    </section>
  );
}
