/* global React */
function Faq() {
  const [open, setOpen] = React.useState(0);
  const Icons = window.Icons || {};

  return (
    <section id="faq" className="section section--paper2" style={{paddingTop:96, paddingBottom:110, borderTop:'1px solid var(--paper-line)'}}>
      <div className="container" style={{display:'grid', gridTemplateColumns:'0.85fr 1.15fr', gap: 56, alignItems:'flex-start'}} id="faq-grid">
        <div className="reveal" style={{position:'sticky', top: 100}} id="faq-side">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 className="display display-lg" style={{marginTop: 16}}>
            Lo que la gente <em style={{fontStyle:'italic', fontWeight:500}}>siempre</em> pregunta.
          </h2>
          <p style={{marginTop: 18, fontSize: 16, color:'var(--ink-mute)'}}>
            ¿No encuentras tu respuesta? Escríbenos por WhatsApp y te contestamos en horas.
          </p>
          <a href="#book" data-book-call className="btn" style={{marginTop: 22, background:'var(--brand-500)', color:'white', padding:'12px 20px', fontSize:14}}>
            Pregúntanos algo {Icons.ArrowRight && <Icons.ArrowRight size={14}/>}
          </a>
        </div>

        <div className="reveal" style={{display:'flex', flexDirection:'column'}}>
          {FAQS.map((f, i) => (
            <FaqItem key={i} open={open === i} onClick={() => setOpen(open === i ? -1 : i)} q={f.q} a={f.a} />
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          #faq-grid { grid-template-columns: 1fr !important; }
          #faq-side { position: static !important; }
        }
      `}</style>
    </section>
  );
}

function FaqItem({ open, onClick, q, a }) {
  const Icons = window.Icons || {};
  return (
    <div style={{borderBottom:'1px solid var(--paper-line)'}}>
      <button onClick={onClick} style={{
        width:'100%', padding:'22px 0', textAlign:'left',
        display:'flex', justifyContent:'space-between', alignItems:'center', gap: 24,
      }}>
        <span style={{fontFamily:'var(--f-display)', fontSize: 19, fontWeight: 600, letterSpacing:'-0.01em', color:'var(--ink)', textWrap:'pretty'}}>{q}</span>
        <span style={{
          flexShrink:0, width:32, height:32, borderRadius:999,
          background: open ? 'var(--brand-500)' : 'transparent',
          border: open ? '1px solid var(--brand-500)' : '1px solid var(--paper-line)',
          color: open ? 'white' : 'var(--ink)',
          display:'flex', alignItems:'center', justifyContent:'center',
          transition: 'all .2s ease',
        }}>{open ? (Icons.Minus && <Icons.Minus size={16}/>) : (Icons.Plus && <Icons.Plus size={16}/>)}</span>
      </button>
      {open && (
        <div style={{padding:'0 60px 24px 0', fontSize: 16, lineHeight: 1.6, color:'var(--ink-mute)', maxWidth: 680}}>
          {a}
        </div>
      )}
    </div>
  );
}

const FAQS = [
  { q:'¿Qué incluye exactamente BOBAX?',
    a:'BOBAX te da cuatro pilares en una sola plataforma: (1) Páginas web replicadas para cada vendedor de tu red. (2) Campañas de Facebook e Instagram diseñadas por nuestro equipo. (3) Una biblioteca con contenido listo para subir a redes sociales. (4) Una academia interna para capacitar a tus vendedores. Como pilar opcional, también puedes conectar IA al WhatsApp de tus vendedores.' },
  { q:'¿Cuánto cuesta exactamente?',
    a:'Hay un pago único de $10,000 MXN por el setup completo (diseño de tu página, configuración de tu academia y conexión con Meta y WhatsApp). Después pagas $800 MXN al mes por cada vendedor activo de tu red. Si tu red sube o baja, tu pago se ajusta — no estás amarrado a un plan rígido.' },
  { q:'¿La publicidad de Meta está incluida?',
    a:'El diseño de las campañas y la administración sí (nuestro equipo las arma y monitorea). El presupuesto de los anuncios va por separado y lo pagas tú directo, no a BOBAX. Tú decides cuánto y dónde.' },
  { q:'¿Quién hace el contenido de la biblioteca?',
    a:'Nuestro equipo de diseñadores especializados en network marketing. Reels, posts, carruseles, copys — todo adaptado al nicho de tu multinivel y actualizado constantemente. Tus vendedores solo descargan y publican.' },
  { q:'¿Cómo funciona la academia interna?',
    a:'Cada líder sube sus propios videos, guías y protocolos. Los vendedores los ven desde su portal cuando quieren, repasan lo que les hace falta, y tú ves quién va al día. Es tu academia, no la nuestra — tú decides los temas y el orden.' },
  { q:'¿Puedo usar mi propio dominio en vez de tumarca.com?',
    a:'Sí. Si quieres tu dominio propio (por ejemplo: mimarca.mx), tú pagas el alojamiento del dominio del líder y todos los vendedores de tu red usan ese mismo dominio con su nombre adelante (paula.mimarca.mx, luis.mimarca.mx, etc).' },
  { q:'¿Mis vendedores tienen que pagar algo?',
    a:'No. El líder paga la plataforma. Tus vendedores solo activan su acceso con un link de WhatsApp y empiezan a usar todo: su página, la biblioteca, la academia y las campañas. Si ellos quieren correr anuncios Meta, ahí sí ponen su propio presupuesto.' },
  { q:'¿BOBAX tiene inteligencia artificial?',
    a:'Sí, como servicio opcional. Cualquier vendedor que quiera puede conectar una IA a su WhatsApp Business para que responda automáticamente, dé precios, agende llamadas y le pase los clientes ya calificados. No está incluido en el plan de $800 — se cotiza aparte según el uso.' },
  { q:'¿Qué tan rápido tengo todo listo?',
    a:'El setup completo tarda 5–7 días. Una vez listo, agregar un nuevo vendedor es instantáneo: en minutos tiene su página, su acceso a la biblioteca, a la academia y a las campañas.' },
  { q:'¿Y si quiero darme de baja?',
    a:'Cancelas cuando quieras. No hay contratos largos ni penalizaciones. Si quitas un vendedor de tu red, ese mes ya no se te cobra por él. Si dejas la plataforma, te entregamos los datos de tus clientes en Excel.' },
];

window.Faq = Faq;