// FAQ.jsx
function FAQ() {
  const items = [
    { q: "¿Necesito app para ver una tarjeta?",       a: "No. Basta con un navegador y un móvil. La persona que recibe tu tarjeta no necesita instalar nada." },
    { q: "¿Está disponible para todo el mundo?",       a: "De momento estamos en beta privada en iOS. Apúntate a la lista de espera para recibir invitación." },
    { q: "¿Qué pasa con mis datos?",                   a: "Tú eliges qué mostrar y puedes cambiarlo cuando quieras. Privacidad por defecto." },
    { q: "¿Cómo funciona la proximidad?",              a: "Usa Bluetooth Low Energy para detectar a otros usuarios cerca. Tú decides cuándo activarlo." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="sn-section sn-faq">
      <h2 className="sn-h1">Preguntas frecuentes</h2>
      <div className="sn-faq-list">
        {items.map((it, i) => (
          <div key={i} className={`sn-faq-item ${open === i ? "open" : ""}`}>
            <button className="sn-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{it.q}</span>
              <span className="sn-faq-icon">{open === i ? "−" : "+"}</span>
            </button>
            {open === i && <div className="sn-faq-a">{it.a}</div>}
          </div>
        ))}
      </div>
    </section>
  );
}

window.FAQ = FAQ;