/* global React */
const FAQS = [
  {
    q: '¿Cuánto tiempo tengo para verlo?',
    a: 'Tenés 12 meses para ver el contenido todas las veces que quieras.',
  },
  {
    q: '¿Cómo puedo pagar?',
    a: 'Podés pagar con tarjeta de crédito, dinero de Mercado Pago, o ir a un Pago Fácil o Rapipago para pago en efectivo. También ofrecemos opción de transferencia en cuenta vía CBU si nos mandás un correo electrónico a academia@maipistiner.com para que te enviemos los datos.',
  },
  {
    q: 'Lo compré y me arrepiento, ¿qué hago?',
    a: 'Tenemos garantía de satisfacción. Si viste el primer módulo y te arrepentís de la compra, nos enviás tus comentarios y tu opinión sobre el curso para que podamos aprender de eso y mejorar, y luego te devolvemos el dinero.',
  },
  {
    q: '¿Puedo comprar para mi empresa?',
    a: 'Sí, tenemos descuentos por cantidad para empresas. Si te interesa capacitar a tu fuerza de venta o de atención al cliente, el curso es una opción muy eficaz para capacitar y obtener un reporte del avance de los/as empleados/as.',
  },
  {
    q: '¿Necesito tener conocimientos previos?',
    a: '¡No! Solamente ganas de aprender y mejorar tus vínculos personales y profesionales.',
  },
  {
    q: '¿Cómo obtengo mi certificado?',
    a: 'Al terminar el curso, recibirás un correo automático con el certificado. En el caso de que no sea así, escribinos a academia@maipistiner.com.',
  },
  {
    q: '¿Ofrecen devolución o respuestas a preguntas sobre el contenido?',
    a: 'Sí, dentro de la plataforma tendrás acceso exclusivo al foro y su comunidad. También podés escribirnos a academia@maipistiner.com.',
  },
];

function FaqSection() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="acmp-faq">
      <div className="acmp-faq-wrap">
        <div className="acmp-faq-head">
          <div className="eyebrow">FAQ</div>
          <h2 className="acmp-faq-title">Preguntas frecuentes</h2>
        </div>
        <div className="acmp-faq-list">
          {FAQS.map((f, i) => (
            <button
              key={i}
              type="button"
              className={'acmp-faq-item' + (i === open ? ' is-open' : '')}
              onClick={() => setOpen(i === open ? -1 : i)}>
              <div className="acmp-faq-row">
                <span className="acmp-faq-q">{f.q}</span>
                <span className="acmp-faq-chev" aria-hidden="true">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="6 9 12 15 18 9"/>
                  </svg>
                </span>
              </div>
              {i === open ? <p className="acmp-faq-a">{f.a}</p> : null}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { FaqSection });