const FAQ_ITEMS = [
  ["Funciona com meu WhatsApp atual?","Sim. A Aura conecta ao número que a clínica já usa via WhatsApp Business API — sem trocar de número e sem perder histórico ou contatos."],
  ["Quanto tempo leva a implantação?","Varia conforme a personalização necessária. Depois do diagnóstico, apresentamos um cronograma claro de implantação e acompanhamento."],
  ["Preciso instalar algum programa?","Não. Tudo funciona pelo WhatsApp e por um painel acessado no navegador — sem instalar nada na clínica."],
  ["A Pixarte Aura atende 24 horas?","Sim. Ela responde, tira dúvidas e agenda a qualquer hora do dia, inclusive à noite e nos fins de semana."],
  ["O sistema agenda automaticamente?","Sim. A Aura consulta a disponibilidade na agenda e confirma o horário direto com a paciente, sem intervenção manual."],
  ["Existe suporte durante a implantação?","Sim. Um especialista acompanha o diagnóstico, a personalização e os primeiros dias de uso com a equipe da clínica."],
  ["Posso utilizar com minha equipe atual?","Sim. A Aura filtra o repetitivo e transfere para a equipe, com todo o contexto, quando o toque humano é necessário."],
  ["Como solicito uma demonstração?","Preenchendo o formulário desta página. Um especialista entra em contato para avaliar se a metodologia faz sentido para sua clínica."],
];

const FaqFinal = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section-pad" style={{borderTop:"1px solid var(--line)", background:"var(--bg-2)"}}>
      <div className="wrap" style={{maxWidth:820}}>
        <div style={{textAlign:"center", margin:"0 auto 48px"}}>
          <span className="eyebrow" style={{justifyContent:"center"}} data-reveal>Perguntas frequentes</span>
          <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(32px,3.6vw,50px)", margin:"20px 0 0"}}>
            Antes de solicitar,<br/><span className="grad-text">tire suas dúvidas.</span>
          </h2>
        </div>
        <div style={{display:"grid", gap:12}}>
          {FAQ_ITEMS.map((f,i)=>{
            const isOpen = open===i;
            return (
              <div key={i} data-reveal data-reveal-delay={(i%4)+1} className="card" style={{padding:"6px 26px", borderColor: isOpen ? "rgba(255,107,53,.4)" : "var(--glass-border)", transition:"border-color .3s"}}>
                <button onClick={()=>setOpen(isOpen?-1:i)} style={{display:"flex", alignItems:"center", gap:16, width:"100%", textAlign:"left", padding:"18px 0"}}>
                  <span style={{fontSize:16.5, fontWeight:600, flex:1, color: isOpen ? "var(--ink)" : "var(--ink-dim)"}}>{f[0]}</span>
                  <span style={{flexShrink:0, width:32, height:32, borderRadius:"50%", border:"1px solid var(--line)", display:"flex", alignItems:"center", justifyContent:"center",
                    background: isOpen ? "var(--primary)" : "transparent", color: isOpen ? "#fff" : "var(--primary-2)",
                    transform: isOpen?"rotate(45deg)":"none", transition:"all .3s"}}>
                    <Icon name="plus" size={15}/>
                  </span>
                </button>
                <div style={{maxHeight: isOpen?240:0, opacity: isOpen?1:0, overflow:"hidden", transition:"all .4s cubic-bezier(.2,.7,.2,1)"}}>
                  <p style={{color:"var(--ink-dim)", fontSize:15, lineHeight:1.6, padding:"0 0 22px"}}>{f[1]}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};
window.FaqFinal = FaqFinal;