function Faq() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: '¿Tengo que apuntarme al directo?', a: 'No. Los directos son informativos y abiertos. No hace falta inscribirse: puedes asistir libremente para escuchar el contenido de tu nacionalidad.' },
    { q: '¿Puedo dejar mis datos aunque no tenga claro si encajo?', a: 'Sí. Precisamente para eso está el formulario. Nuestro equipo podrá orientarte sobre si tu situación puede encajar en la regularización extraordinaria.' },
    { q: '¿Me contactaréis para revisar mi caso?', a: 'Sí. Una vez recibamos tus datos, el equipo de GRUPO ATU revisará tu solicitud y se pondrá en contacto contigo para una orientación personalizada.' },
    { q: '¿Qué documentos conviene empezar a reunir?', a: 'Como punto de partida: pasaporte, empadronamiento, documentación de estancia en España, y cualquier prueba que acredite tu presencia antes del 1 de enero de 2026. En la orientación te indicaremos qué otros documentos reunir según tu caso.' },
    { q: '¿Y si he pedido asilo?', a: 'Los casos con solicitud de asilo requieren una revisión cuidadosa. Déjanos tus datos y un especialista valorará tu situación antes de dar cualquier paso.' },
  ];
  return (
    <section id="faq" className="section" style={{background:'var(--bg)'}}>
      <div className="container" style={{maxWidth:820}}>
        <div style={{textAlign:'center',marginBottom:40}}>
          <div className="eyebrow-pill" style={{marginBottom:14}}>Preguntas frecuentes</div>
          <h2 style={{margin:0}}>Resolvemos tus dudas con claridad</h2>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {faqs.map((f,i) => (
            <div key={i} style={{background:'#fff',borderRadius:14,border:'1px solid var(--border)',overflow:'hidden'}}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width:'100%',padding:'20px 24px',background:'transparent',border:0,cursor:'pointer',
                  display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,textAlign:'left',
                  fontFamily:'inherit',
                }}>
                <span style={{fontWeight:700,fontSize:16,color:'var(--atu-blue-ink)'}}>{f.q}</span>
                <i data-lucide={open === i ? 'minus' : 'plus'} style={{width:20,height:20,color:'var(--atu-blue)',flexShrink:0}}></i>
              </button>
              {open === i && (
                <div style={{padding:'0 24px 22px',fontSize:15,color:'var(--fg-2)',lineHeight:1.55}}>
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Faq = Faq;