/* 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:'¿Cuánto cuesta exactamente?',
    a:'Hay un pago único de $10,000 MXN por el diseño de tu embudo (la página de tu marca). Después pagas $800 MXN al mes por cada vendedor activo de tu red. Si tu red baja o sube, tu pago se ajusta automáticamente — no estás amarrado a un plan rígido.' },
  { q:'¿La publicidad de Meta está incluida?',
    a:'No. La publicidad va por separado y la pagas tú directo (o cada vendedor paga la suya). BOBAX te da las herramientas para correr las campañas, monitorearlas y pausarlas, pero el dinero del anuncio nunca pasa por nosotros.' },
  { 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 es quien paga la plataforma. Tus vendedores solo activan su página con un link de WhatsApp y empiezan a vender. Si ellos quieren correr anuncios de Meta, ahí sí ponen su propio presupuesto, pero es opcional.' },
  { 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 al mes — se cotiza aparte según el uso. Tú o cada vendedor decide si lo activa.' },
  { q:'¿Qué tan rápido tengo mi página lista?',
    a:'El diseño del embudo principal tarda entre 5 y 7 días. Una vez listo, agregar un nuevo vendedor es instantáneo: en minutos tiene su página y su portal funcionando.' },
  { 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.' },
  { q:'¿Necesito saber tecnología?',
    a:'Para nada. Nosotros nos encargamos de todo lo técnico — el diseño, la IA, las páginas, los dominios. Tú solo agregas vendedores, mandas el link y atiendes a los clientes que llegan. Si sabes mandar un WhatsApp, sabes usar BOBAX.' },
];

window.Faq = Faq;