// ===== FAQ =====
function FAQ() {
  const items = [
    ['O que é a Consulta Estratégica?', 'É o ponto de partida na Nubelle. Uma conversa onde a equipe escuta, faz um diagnóstico amplo da sua pele e do seu caso, e propõe um plano de tratamento personalizado. Não é triagem, é diagnóstico real, sem pressão para fechar nada na hora.'],
    ['A depilação a laser 4D funciona em peles morenas e negras?', 'Sim. A tecnologia Hakon 4D combina 4 comprimentos de onda diferentes, incluindo Nd:YAG 1064nm, considerado o padrão-ouro para peles escuras. É segura para todos os fototipos, sem risco de manchas ou queimaduras quando aplicada com protocolo correto.'],
    ['Quantas sessões são necessárias para a depilação a laser?', 'A maioria das pacientes nota redução visível a partir da 3ª sessão. O número total varia por região, fototipo e tipo de pelo, e é definido na avaliação. O protocolo Nubelle inclui acompanhamento e Garantia de 12 meses.'],
    ['Botox e preenchimento doem?', 'O desconforto é mínimo. Usamos anestésico tópico e técnicas que tornam a aplicação confortável. A maioria dos pacientes descreve como uma picadinha leve, em segundos.'],
    ['Qual a diferença entre harmonização facial e cirurgia plástica?', 'Harmonização é não cirúrgica, com resultados naturais e graduais usando injetáveis de alta qualidade. Sem afastamento, sem bisturi, sem riscos cirúrgicos. Cirurgia plástica envolve procedimento invasivo e período de recuperação. Na Nubelle trabalhamos exclusivamente com harmonização.'],
    ['A Nubelle atende homens?', 'Sim. Temos protocolos específicos como o Ativa Max (definição maxilar) e tratamentos masculinos de skincare, depilação a laser, harmonização e remodelagem corporal. O atendimento é discreto e personalizado.'],
    ['Como funciona o agendamento?', 'Pelo WhatsApp ou pelo botão Agendar no site. Nossa equipe responde em minutos, confirma disponibilidade e envia toda a orientação prévia. A primeira visita sempre começa pela Consulta Estratégica.'],
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="relative py-24 md:py-32" style={{ background: C.paper, color: C.ink }}>
      <div className="max-w-[820px] mx-auto px-5 md:px-8">
        <div className="text-center mb-12">
          <Eyebrow>perguntas frequentes</Eyebrow>
          <h2 className="font-display mt-5" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.025em' }}>
            Tudo que você quer <em style={{ color: C.coralDeep, fontStyle: 'italic', fontWeight: 900 }}>saber antes.</em>
          </h2>
        </div>

        <div className="space-y-3">
          {items.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="rounded-2xl overflow-hidden transition" style={{ background: C.white, border: `1px solid ${isOpen ? C.coralDeep : C.bone}` }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} className="w-full text-left px-6 py-5 flex items-center justify-between gap-4 transition" style={{ color: C.ink }}>
                  <span className="font-display" style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>{q}</span>
                  <span className="w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition" style={{ background: isOpen ? C.coralDeep : C.bone, color: isOpen ? C.cream : C.ink, transform: isOpen ? 'rotate(45deg)' : 'rotate(0)' }}>+</span>
                </button>
                {isOpen && (
                  <div className="px-6 pb-6 -mt-1 text-sm" style={{ color: 'rgba(14,59,58,0.72)', lineHeight: 1.65 }}>
                    {a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });