/* global React, Icons */
const { useState } = React;

const FAQS = [
  { q: "¿Qué es Meefi y cómo funciona?",
    a: "Meefi es una plataforma financiera digital que te permite gestionar pagos, facturación y finanzas empresariales desde un solo lugar. Simplificamos tus operaciones con herramientas automatizadas y una interfaz intuitiva." },
  { q: "¿Cuánto tiempo toma registrarse?",
    a: "Puedes aplicar y empezar a operar en menos de 24 horas. Nuestro proceso de onboarding es guiado para que no pierdas tiempo." },
  { q: "¿Puedo aplicar como persona física?",
    a: "No. Actualmente Meefi solo opera con personas morales. En cuanto tengamos ese servicio, lo notificaremos en nuestros medios oficiales." },
  { q: "¿Para qué usa Meefi la clave CIEC?",
    a: "Para sincronizar facturas con el SAT, generar tableros de cuentas por cobrar y pagar en tiempo real, y gestionar automáticamente clientes y proveedores." },
  { q: "¿Puedo hacer pagos internacionales?",
    a: "Sí. Envía y recibe pagos al extranjero sin comisiones ocultas, con acceso a Cuentas Multi-Divisas para operar en la moneda de tus clientes o proveedores." },
];

function FAQSection() {
  const [open, setOpen] = useState(-1);
  return (
    <section id="faq" style={{ background: "var(--bg-1)", padding: "112px 0" }}>
      <div className="wrap-tight">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot"/> Preguntas frecuentes
          </div>
          <h2 style={{
            margin: 0, fontFamily: "var(--font-display)",
            fontWeight: 500, fontSize: "clamp(2rem, 2.5vw + 1rem, 2.75rem)",
            letterSpacing: "-0.02em", lineHeight: 1.1, color: "var(--fg-1)",
          }}>
            Todo lo que necesitas saber<br/>
            <span style={{ color: "var(--fg-2)" }}>antes de empezar.</span>
          </h2>
        </div>

        <div className="reveal">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-row ${isOpen ? "is-open" : ""}`}>
                <button
                  className="faq-q"
                  data-hover="1"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  {f.q}
                  <span className="faq-icon">
                    <Icons.Plus size={14} stroke={2}/>
                  </span>
                </button>
                <div className="faq-a">
                  <p className="faq-a-inner">{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.FAQSection = FAQSection;