function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: "¿En cuánto tiempo veré resultados?", a: "Los primeros indicadores (leads, CTR, costo por mensaje) se mueven desde la semana 2–3. Los resultados de conversión se estabilizan entre el día 30 y 60, que es cuando la IA termina de aprender de tus datos." },
    { q: "¿Qué pasa si ya tengo una agencia?", a: "Podemos trabajar en paralelo durante la estrategia inicial. Muchos clientes empiezan con Aigenci cubriendo el vacío de datos y seguimiento, y luego consolidan todo con nosotros cuando ven los resultados." },
    { q: "¿El costo del presupuesto publicitario va aparte?", a: "Sí. Nuestras fees cubren estrategia, implementación, tecnología y gestión. El presupuesto de Meta / Google Ads lo pagas directamente a la plataforma — con total transparencia en reportes." },
    { q: "¿Cómo sé qué sistema me corresponde?", a: "Empezamos con una estrategia gratuita de 30 minutos, sin compromiso. Revisamos tus datos actuales y te recomendamos el sistema con el que vas a ganar más dinero, no el más caro." },
    { q: "¿Firmo contrato a largo plazo?", a: "No. Nuestro compromiso mínimo es de 3 meses (el tiempo que la IA necesita para aprender). Después, mes a mes. Si el sistema funciona, te quedas. Si no, nos lo debes decir." },
    { q: "¿Manejan negocios fuera de México?", a: "Operamos desde México pero tenemos clientes en USA, Colombia y España. Los sistemas funcionan igual — lo que cambia es la segmentación de audiencias y los idiomas." },
  ];
  return (
    <section id="faq" className="section faq-sec">
      <Sticker kind="star" className="faq-stk faq-stk-a anim" />
      <Sticker kind="sparkle" className="faq-stk faq-stk-b anim" style={{ animationDelay: "0.6s" }} />
      <Sticker kind="plus" className="faq-stk faq-stk-c" />
      <Sticker kind="squig" className="faq-stk faq-stk-d" />
      <div className="wrap-n">
        <Reveal>
          <div className="eyebrow" style={{marginBottom: 18}}><span className="dot"/>Antes de que preguntes</div>
          <h2 style={{maxWidth: 680, marginBottom: 40}}>Lo que <span style={{color: "var(--pink)"}}>otros clientes</span><br/>también <span className="display-italic" style={{color: "var(--cyan)"}}>quisieron saber.</span></h2>
        </Reveal>
        <Reveal className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a"><p>{it.a}</p></div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}
Object.assign(window, { FAQ });