/* global React, Icon, Eyebrow, Flourish, Button, Section, Reveal, Pill, CONTACT */
const { useState: useFaqState } = React;

const FAQS = [
  { c: "Cursos", q: "¿Los cursos tienen fecha de vencimiento?", a: "No. El acceso es de por vida desde el momento de tu compra." },
  { c: "Cursos", q: "¿Recibiré un certificado al terminar?", a: "Sí. Cada curso incluye certificado digital de MarketProof." },
  { c: "Cursos", q: "¿Los cursos están en español?", a: "Todos los cursos son 100% en español, pensados para LATAM." },
  { c: "Cursos", q: "¿Puedo acceder desde mi celular?", a: "Sí, la plataforma está optimizada para cualquier dispositivo." },
  { c: "Mentoría 1:1", q: "¿Cuánto dura una sesión?", a: "Cada sesión es de 60 minutos." },
  { c: "Mentoría 1:1", q: "¿Puedo cancelar o reagendar?", a: "Sí, hasta 24 horas antes sin costo." },
  { c: "Mentoría 1:1", q: "¿En qué horarios están disponibles los expertos?", a: "Lunes a jueves de 18:00 a 21:00h. Sábados con previa coordinación." },
  { c: "Mentoría 1:1", q: "¿La sesión queda grabada?", a: "Sí, recibirás la grabación en las 24h siguientes a la sesión." },
  { c: "Pagos", q: "¿Qué métodos de pago aceptan?", a: "Tarjetas Visa/Mastercard, PayPal y transferencia bancaria." },
  { c: "Pagos", q: "¿Tienen garantía de satisfacción?", a: "Sí. 7 días de garantía en cursos. Si no estás satisfecho, te devolvemos el dinero." },
  { c: "Pagos", q: "¿Emiten factura?", a: "Sí, facturamos a nombre de MarketProof S.A. (Guatemala)." },
  { c: "Talleres", q: "¿Pueden impartir talleres fuera de Guatemala?", a: "Sí, trabajamos en toda Centroamérica y de forma virtual para cualquier país." },
  { c: "Talleres", q: "¿Cuál es el mínimo de personas para un taller?", a: "Trabajamos desde grupos de 10 personas." },
  { c: "Plataforma", q: "¿Necesito instalar algo para acceder?", a: "No. Todo funciona desde tu navegador, sin descargas ni instalaciones." },
  { c: "Plataforma", q: "¿Puedo retomar un curso donde lo dejé?", a: "Sí, la plataforma guarda tu progreso automáticamente en cada lección." },
];

const FAQ_TABS = ["Todos", "Cursos", "Mentoría 1:1", "Talleres", "Pagos", "Plataforma"];

function FaqRow({ item, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--mp-border)" }}>
      <button onClick={onToggle} style={{ width: "100%", display: "flex", alignItems: "center", gap: 18, padding: "22px 4px", cursor: "pointer", background: "transparent", border: 0, fontFamily: "var(--mp-font-sans)", textAlign: "left" }}>
        <span style={{ flex: 1, fontWeight: 700, fontSize: 17.5, color: "var(--mp-ink)", letterSpacing: "-0.01em", textWrap: "balance" }}>{item.q}</span>
        <span style={{ width: 32, height: 32, borderRadius: 999, background: open ? "var(--mp-mint)" : "var(--mp-cloud)", color: "var(--mp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto", transition: "all 220ms var(--mp-ease)", transform: open ? "rotate(180deg)" : "none" }}>
          <Icon name="chevronDown" size={18} />
        </span>
      </button>
      <div className="mp-acc-body" style={{ maxHeight: open ? 240 : 0, opacity: open ? 1 : 0 }}>
        <p style={{ margin: 0, padding: "0 56px 24px 4px", fontSize: 16, lineHeight: 1.6, color: "var(--mp-fg-muted)", textWrap: "pretty" }}>{item.a}</p>
      </div>
    </div>
  );
}

function Faq({ go }) {
  const [tab, setTab] = useFaqState("Todos");
  const [open, setOpen] = useFaqState("Cursos-0");
  const list = tab === "Todos" ? FAQS : FAQS.filter((f) => f.c === tab);
  // group for display
  const groups = {};
  list.forEach((f) => { (groups[f.c] = groups[f.c] || []).push(f); });

  return (
    <main>
      <section style={{ background: "var(--mp-cloud)", color: "var(--mp-ink)", padding: "140px 28px 52px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: "-30%", right: "-4%", width: 440, height: 440, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.2), transparent 64%)" }} />
        <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative" }}>
          <Reveal style={{ maxWidth: 720 }}>
            <Eyebrow style={{ marginBottom: 20 }}>Preguntas frecuentes</Eyebrow>
            <h1 style={{ fontSize: "clamp(40px, 5.2vw, 76px)", fontWeight: 800, lineHeight: 1.0, letterSpacing: "-0.035em", margin: "0 0 18px", textWrap: "balance" }}>
              <Flourish text="Resolvemos tus [dudas.]" />
            </h1>
            <p style={{ fontSize: "clamp(17px, 1.5vw, 22px)", lineHeight: 1.5, color: "var(--mp-fg-muted)", maxWidth: 600, margin: 0, textWrap: "pretty" }}>
              Todo lo que necesitas saber antes de convertirte en MarketProofero.
            </p>
          </Reveal>
          <Reveal delay={120} style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 38 }}>
            {FAQ_TABS.map((t) => <Pill key={t} active={tab === t} onClick={() => setTab(t)}>{t}</Pill>)}
          </Reveal>
        </div>
      </section>

      <Section bg="paper" pad="64px 28px 96px">
        <div style={{ maxWidth: 880, margin: "0 auto" }}>
          {Object.keys(groups).map((cat) => (
            <Reveal key={cat} style={{ marginBottom: 44 }}>
              <div style={{ fontSize: 12.5, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, color: "var(--mp-mint-deep)", marginBottom: 8 }}>{cat}</div>
              <div style={{ background: "var(--mp-paper)" }}>
                {groups[cat].map((item) => {
                  const key = item.c + "-" + item.q;
                  return <FaqRow key={key} item={item} open={open === key} onToggle={() => setOpen(open === key ? null : key)} />;
                })}
              </div>
            </Reveal>
          ))}
        </div>
      </Section>

      <Section bg="cloud" pad="20px 28px 100px">
        <Reveal style={{ maxWidth: 880, margin: "0 auto" }}>
          <div style={{ background: "var(--mp-ink)", color: "var(--mp-paper)", borderRadius: "var(--mp-radius-2xl)", padding: "56px 48px", textAlign: "center", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: "-40%", left: "50%", transform: "translateX(-50%)", width: 420, height: 420, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.22), transparent 64%)" }} />
            <h2 style={{ fontSize: "clamp(26px, 3.2vw, 42px)", fontWeight: 700, letterSpacing: "-0.025em", margin: "0 0 12px", position: "relative", textWrap: "balance" }}>
              ¿Tienes otra pregunta?
            </h2>
            <p style={{ fontSize: 17, color: "rgba(255,255,255,0.7)", margin: "0 0 30px", position: "relative" }}>Escríbenos y te respondemos en menos de 24 horas.</p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap", position: "relative" }}>
              <Button variant="mint" size="lg" icon="message" href={CONTACT.whatsapp} target="_blank">WhatsApp</Button>
              <Button variant="outlineWhite" size="lg" icon="mail" href={"mailto:" + CONTACT.email}>Email</Button>
            </div>
          </div>
        </Reveal>
      </Section>
    </main>
  );
}

window.Faq = Faq;