/* global React, Icon, Eyebrow, Flourish, Button, Section, Reveal, Pill, COURSES, CourseCard, CAT_COLORS */
const { useState: useCursosState } = React;

const CATEGORIES = ["Todos", "IA & Tech", "Marketing", "Ventas", "Marca Personal", "Sostenibilidad", "Sistematización"];

function Cursos({ go }) {
  const [cat, setCat] = useCursosState("Todos");
  const list = cat === "Todos" ? COURSES : COURSES.filter((c) => c.cat === cat);
  return (
    <main>
      <section style={{ background: "var(--mp-cloud)", color: "var(--mp-ink)", padding: "140px 28px 56px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: "-30%", right: "-6%", width: 460, height: 460, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.22), transparent 64%)" }} />
        <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative" }}>
          <Reveal style={{ maxWidth: 760 }}>
            <Eyebrow style={{ marginBottom: 20 }}>Cursos on demand</Eyebrow>
            <h1 style={{ fontSize: "clamp(40px, 5.2vw, 78px)", fontWeight: 800, lineHeight: 1.0, letterSpacing: "-0.035em", margin: "0 0 20px", textWrap: "balance" }}>
              <Flourish text="Formación que [sí se aplica.]" />
            </h1>
            <p style={{ fontSize: "clamp(17px, 1.5vw, 22px)", lineHeight: 1.5, color: "var(--mp-fg-muted)", maxWidth: 620, margin: 0, textWrap: "pretty" }}>
              Sin teoría de más. Sin relleno. Puro conocimiento para aplicar desde el día uno.
            </p>
          </Reveal>
          <Reveal delay={120} style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 40 }}>
            {CATEGORIES.map((c) => (
              <Pill key={c} active={cat === c} onClick={() => setCat(c)}>{c}</Pill>
            ))}
          </Reveal>
        </div>
      </section>

      <Section bg="paper" pad="56px 28px 110px">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 12 }}>
          <div style={{ fontSize: 14, color: "var(--mp-fg-muted)", fontWeight: 500 }}>
            {list.length} {list.length === 1 ? "curso" : "cursos"}{cat !== "Todos" ? ` en ${cat}` : " disponibles"}
          </div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13.5, color: "var(--mp-fg-subtle)", fontWeight: 600 }}>
            <Icon name="layers" size={16} /> Acceso de por vida · Certificado incluido
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22 }} className="mp-cursos-grid">
          {list.map((c, i) => (
            <Reveal key={c.id} delay={(i % 3) * 80}>
              <CourseCard course={c} onOpen={() => go("course")} />
            </Reveal>
          ))}
        </div>
        {list.length === 0 && (
          <div style={{ textAlign: "center", padding: "60px 0", color: "var(--mp-fg-subtle)" }}>Pronto más cursos en esta categoría.</div>
        )}
      </Section>

      <section style={{ background: "var(--mp-mint)", color: "var(--mp-ink)", position: "relative", overflow: "hidden" }}>
        <div style={{ maxWidth: 1000, margin: "0 auto", padding: "84px 28px", textAlign: "center" }}>
          <Reveal>
            <h2 style={{ fontSize: "clamp(28px, 3.6vw, 48px)", fontWeight: 800, letterSpacing: "-0.03em", margin: "0 0 16px", lineHeight: 1.08, textWrap: "balance" }}>
              ¿Prefieres acompañamiento personalizado?
            </h2>
            <p style={{ fontSize: 18, color: "rgba(15,32,44,0.7)", margin: "0 auto 30px", maxWidth: 520, fontWeight: 500 }}>
              Combina un curso con una mentoría 1:1 y aplica lo aprendido con un experto al lado.
            </p>
            <Button variant="ink" size="lg" icon="arrowRight" onClick={() => go("mentoria")}>Conoce la mentoría 1:1</Button>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

window.Cursos = Cursos;