const FAQ = () => {
  const qs = [
    { q: "Vocês trabalham com projeto fechado ou por hora?", a: "Os dois. Para escopo definido (site, identidade, MVP), fechamos um pacote com preço e prazo. Para evolução contínua de produto, operamos em sprints mensais com um time dedicado." },
    { q: "Em quanto tempo vocês entregam um site?", a: "Depende do escopo. Landing pages saem em 2–3 semanas; sites institucionais em 4–6; plataformas SaaS dependem do produto, mas o primeiro MVP fica tipicamente em 8–12 semanas." },
    { q: "Vocês trabalham com clientes fora de São Paulo?", a: "Sim, o studio opera remoto desde o dia 1. Temos clientes do Brasil inteiro e alguns fora. Reuniões por vídeo, entregas por Figma/repo/staging." },
    { q: "Como funciona o suporte depois do lançamento?", a: "Todo projeto sai com garantia de 30 dias para ajustes. Depois disso, oferecemos planos de manutenção com SLA ou contratos de evolução contínua." },
    { q: "Posso contratar só o branding? Ou só o software?", a: "Claro. A gente trabalha melhor quando as disciplinas conversam, mas cada uma funciona sozinha. Monte o pacote que fizer sentido para o seu momento." },
    { q: "Vocês usam IA nos projetos?", a: "Sim, com critério. Usamos IA para acelerar pesquisa, prototipagem, geração de conteúdo e até features do produto quando faz sentido — nunca como substituto do olho treinado." },
  ];
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Dúvidas · 08</div>
            <h2 style={{marginTop:20}}>Perguntas<br/><em className="grad-text" style={{fontWeight:400}}>frequentes.</em></h2>
          </div>
          <div className="body">Quase sempre a dúvida é uma dessas. Se não for, é só chamar no formulário abaixo — respondemos em até 1 dia útil.</div>
        </div>
        <div className="faq">
          {qs.map((x,i)=>(
            <details key={i} {...(i===0?{open:true}:{})}>
              <summary>
                <span>{x.q}</span>
                <span className="plus">+</span>
              </summary>
              <div className="ans">{x.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};
window.FAQ = FAQ;