function Faq() {
  const faqs = [
    {
      q: 'A mini escavadeira cabe no meu quintal?',
      a: 'Sim. A Bobcat E10 passa por portões padrão de residências (~1 m de largura) e trabalha em quintais estreitos, garagens e áreas internas — sem necessidade de demolir muros ou alargar passagens.',
    },
    {
      q: 'Atendem cidades próximas a Uberlândia?',
      a: 'Atendemos Uberlândia e toda a região do Triângulo Mineiro. Mande seu endereço pelo WhatsApp e confirmamos disponibilidade na hora.',
    },
    {
      q: 'Quanto tempo leva uma escavação para piscina?',
      a: 'Depende do tamanho e do solo, mas uma escavação residencial padrão é concluída em um único dia de trabalho — o que com equipe manual levaria vários dias.',
    },
    {
      q: 'Como solicitar orçamento?',
      a: 'Pelo WhatsApp (34) 98859-0827 ou pelo formulário desta página. Atendemos de segunda a sábado, das 7h às 18h. Orçamento sem compromisso.',
    },
    {
      q: 'A Bobcat E10 danifica o piso ou jardim?',
      a: 'O impacto é mínimo. As esteiras de borracha distribuem o peso (~1.180 kg) e preservam pisos, calçadas e jardins. Nossa equipe deixa o canteiro organizado ao final.',
    },
  ];

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

  return (
    <section id="faq" className="py-20 bg-muted">
      <div className="container mx-auto px-4">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-10">
            <div className="text-xs font-semibold tracking-[0.12em] uppercase text-accent mb-3">
              Perguntas frequentes
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-primary leading-tight">
              Tire suas dúvidas em 30 segundos.
            </h2>
          </div>

          <div className="space-y-3">
            {faqs.map((f, i) => {
              const isOpen = open === i;
              return (
                <div
                  key={i}
                  className={`bg-white border border-border rounded-lg overflow-hidden transition-smooth ${
                    isOpen ? 'shadow-card' : ''
                  }`}
                >
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left"
                  >
                    <span className="text-primary font-semibold text-base">{f.q}</span>
                    <span
                      className={`flex-shrink-0 text-primary transition-transform duration-300 ${
                        isOpen ? 'rotate-180' : ''
                      }`}
                    >
                      <Icon name="chevron-down" size={18} />
                    </span>
                  </button>
                  {isOpen && (
                    <div className="px-5 pb-5 text-muted-foreground text-sm leading-relaxed animate-fade-in">
                      {f.a}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;