// FAQ — strategic objection-handlers, expandable accordion
function FAQ() {
  const items = [
    {
      q: '¿No es muy caro pagar todo de golpe?',
      a: 'Es el coste de 1 cliente cerrado al año, en un único pago anual: 343€ Esencial o 571€ Premium. Si lo prefieres, con Klarna o PayPal puedes dividir ese pago hasta en 12 meses — ellos te financian a ti; nosotros recibimos el año completo. Si cierras 1 sólo cliente al mes con la herramienta, te quedan ~3.000€ de margen al año.',
    },
    {
      q: '¿Qué diferencia hay entre Esencial, Premium y Lifetime?',
      a: 'Esencial te da la herramienta completa (prospección, análisis SEO, generación de webs, emails) y la usas a tu ritmo. Premium añade el Rotador: un bot que cada día sale a buscar 10 leads y les manda email automático. Lifetime es Premium pero pago único, sin renovaciones, válido para siempre — solo durante el lanzamiento.',
    },
    {
      q: '¿Esto realmente funciona o es otra herramienta IA hype?',
      a: 'Lo que hace no es nuevo (prospección + email + maqueta) — lo nuevo es que está TODO en una sola caja y la web personalizada te diferencia. Los beta-testers están cerrando entre 1 y 6 clientes el primer mes. Verás el video del fundador con casos reales antes de comprar.',
    },
    {
      q: '¿Esto no es spam? ¿Es legal?',
      a: 'No es envío masivo: es outreach personalizado a negocios que tú eliges (o que el rotador filtra por tu categoría). Cada email lleva una propuesta concreta (su web nueva) y opt-out claro. Cumple LSSI/RGPD usando la base legal de interés legítimo B2B + identificación clara del remitente.',
    },
    {
      q: '¿Puedo usar mi propio correo y dominio en las webs?',
      a: 'Sí. Configuras tu marca, tu Gmail/SMTP, tus horarios de cita y tu meet en dos minutos. Las webs y emails salen con tu identidad, no con la nuestra.',
    },
    {
      q: '¿Necesito saber SEO o programar?',
      a: 'No. La herramienta hace la auditoría y genera la web sola. Tú solo decides a quién contactar y qué decir — o activas el rotador y ni eso.',
    },
    {
      q: '¿Cómo cancelo?',
      a: 'Desde tu cuenta de Stripe en cualquier momento. Mantienes el acceso hasta el final del año pagado y no se renueva. El plan Lifetime no se cancela porque es pago único.',
    },
    {
      q: '¿Tengo descuento si vengo de Yinyang Academy o tengo local brain?',
      a: 'Sí. Alumnos de Yinyang Academy: 30% de descuento en el precio. Usuarios de local brain: +20% de tokens anuales gratis. Acumulables. Marca las cajitas en la sección de planes y se calcula solo.',
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container-tight">
        <div className="pl-section-head">
          <span className="pl-eyebrow">Preguntas frecuentes</span>
          <h2 className="pl-display">Lo que te estás <span className="pl-accent-grad">preguntando</span></h2>
          <p>Las objeciones más frecuentes, contestadas sin rodeos. ¿No ves la tuya? Escríbenos.</p>
        </div>

        <div style={{
          background: '#fff',
          border: '1px solid var(--pl-border)',
          borderRadius: 22,
          overflow: 'hidden',
        }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: i < items.length - 1 ? '1px solid var(--pl-border)' : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  appearance: 'none', border: 'none', background: 'transparent', cursor: 'pointer',
                  width: '100%', textAlign: 'left',
                  padding: '20px 26px',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  fontFamily: 'var(--pl-font-body)',
                  fontWeight: 700, fontSize: 16, color: 'var(--pl-ink)',
                }}>
                  <span>{it.q}</span>
                  <span style={{
                    flexShrink: 0,
                    width: 30, height: 30, borderRadius: '50%',
                    background: isOpen ? 'var(--pl-accent)' : 'var(--pl-bg-2)',
                    color: isOpen ? '#fff' : 'var(--pl-accent-deep)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'background .2s, transform .25s',
                    transform: isOpen ? 'rotate(45deg)' : 'none',
                    fontSize: 20, fontWeight: 600, lineHeight: 1,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 400 : 0,
                  overflow: 'hidden',
                  transition: 'max-height .3s ease',
                }}>
                  <div style={{
                    padding: '0 26px 22px',
                    fontSize: 15, color: 'var(--pl-ink-3)', lineHeight: 1.6,
                    maxWidth: 720,
                  }}>
                    {it.a}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div style={{
          marginTop: 20, textAlign: 'center', fontSize: 14, color: 'var(--pl-ink-3)',
        }}>
          ¿Otra duda? <a href="mailto:agencia@yinyangseo.com" style={{ color: 'var(--pl-accent-deep)', fontWeight: 600, textDecoration: 'underline' }}>Escríbenos a agencia@yinyangseo.com</a>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;