// ============================================================
// PACE — Secciones B: Programas core, Método, Athletics,
// Testimonios, Horarios, FAQ, CTA final, Footer, WhatsApp
// ============================================================

// ---- Programas core (presencial / online) ----
function CorePrograms() {
  return (
    <section
      id="programas"
      data-screen-label="Programas"
      style={{ background: "var(--cream)", color: "var(--ink)", padding: "110px 0 120px" }}
    >
      <div className="wrap">
        <Reveal>
          <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
            Entrenamiento continuo
          </span>
          <h2
            className="font-display"
            style={{ fontSize: "clamp(44px, 6.5vw, 96px)", margin: "18px 0 0", color: "var(--ink)" }}
          >
            O entrena todo el año
          </h2>
          <p style={{ color: "rgba(20,18,16,0.6)", fontSize: 18, fontWeight: 300, maxWidth: 540, marginTop: 18, lineHeight: 1.6 }}>
            Si lo tuyo no es una sola carrera sino un estilo de vida, estos son los programas
            mensuales del club.
          </p>
        </Reveal>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
            gap: 28,
            marginTop: 64,
          }}
        >
          {PACE.core.map((p, i) => (
            <Reveal key={p.name} delay={i * 120}>
              <div
                className="card-hover"
                style={{
                  borderRadius: 28,
                  overflow: "hidden",
                  background: "#fff",
                  border: "1px solid rgba(20,18,16,0.08)",
                  display: "flex",
                  flexDirection: "column",
                  height: "100%",
                }}
              >
                <ParallaxImg src={p.image} alt={p.name} strength={0.05} style={{ aspectRatio: "16/9" }} />
                <div style={{ padding: "34px 32px 38px", display: "flex", flexDirection: "column", flex: 1 }}>
                  <span className="font-mono" style={{ fontSize: 11, color: "var(--orange)" }}>
                    {p.line}
                  </span>
                  <h3 className="font-display" style={{ fontSize: 40, margin: "14px 0 10px", color: "var(--ink)" }}>
                    {p.name}
                  </h3>
                  <p style={{ color: "rgba(20,18,16,0.62)", fontSize: 15, lineHeight: 1.6, margin: "0 0 26px", flex: 1 }}>
                    {p.desc}
                  </p>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
                    <div>
                      <span className="font-display" style={{ fontSize: 34, color: "var(--ink)" }}>
                        {PACE.cop(p.price)}
                      </span>
                      <span style={{ color: "rgba(20,18,16,0.5)", fontSize: 14 }}> {p.unit}</span>
                    </div>
                    <a
                      href={PACE.waLink("Hola, me interesa el " + p.name)}
                      target="_blank"
                      rel="noreferrer"
                      className="btn btn-orange"
                      style={{ padding: "13px 26px", fontSize: 14 }}
                    >
                      {p.cta}
                    </a>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Método (sticky numerada) ----
function Method() {
  return (
    <section
      id="metodo"
      data-screen-label="Método"
      style={{ background: "var(--ink)", padding: "110px 0 130px", position: "relative", overflow: "hidden" }}
    >
      <SpeedLines
        count={6}
        width={260}
        animate={true}
        style={{ left: "-40px", top: "12%", transform: "rotate(16deg)", opacity: 0.5 }}
      />
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 64 }}>
        <div>
          <div style={{ position: "sticky", top: 120 }}>
            <Reveal>
              <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
                El método PACE
              </span>
              <h2
                className="font-display"
                style={{ fontSize: "clamp(44px, 6vw, 88px)", margin: "18px 0 0", color: "var(--cream)" }}
              >
                No es correr más.
                <br />
                <span style={{ color: "var(--orange)" }}>Es correr mejor.</span>
              </h2>
              <p style={{ color: "var(--cream-dim)", fontSize: 17, fontWeight: 300, maxWidth: 420, marginTop: 22, lineHeight: 1.65 }}>
                Cuatro pasos, cero improvisación. Así funciona cada plan, seas principiante o
                vayas por tu mejor marca.
              </p>
            </Reveal>
          </div>
        </div>
        <div style={{ display: "grid", gap: 0 }}>
          {PACE.method.map((m, i) => (
            <Reveal key={m.n} delay={i * 80}>
              <div
                style={{
                  borderTop: "1px solid var(--line)",
                  padding: "44px 0",
                  display: "grid",
                  gridTemplateColumns: "90px 1fr",
                  gap: 24,
                }}
              >
                <span className="font-display" style={{ fontSize: 44, color: "var(--orange)" }}>
                  {m.n}
                </span>
                <div>
                  <h3 className="font-display" style={{ fontSize: 30, margin: "4px 0 12px", color: "var(--cream)" }}>
                    {m.title}
                  </h3>
                  <p style={{ color: "var(--cream-dim)", fontSize: 15.5, lineHeight: 1.65, margin: 0, maxWidth: 440 }}>
                    {m.desc}
                  </p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Athletics (niños) ----
function Athletics() {
  return (
    <section data-screen-label="Athletics" style={{ background: "var(--ink)", paddingBottom: 8 }}>
      <div className="wrap">
        <Reveal>
          <a
            href={PACE.waLink("Hola, quiero info de PACE Athletics para niños")}
            target="_blank"
            rel="noreferrer"
            className="card-hover"
            style={{
              display: "block",
              position: "relative",
              borderRadius: 28,
              overflow: "hidden",
              border: "1px solid var(--line)",
              minHeight: 380,
            }}
          >
            <ParallaxImg
              src="img/rayo-sparks-bolts.jpg"
              alt="PACE Athletics para niños"
              strength={0.06}
              style={{ position: "absolute", inset: 0 }}
            />
            <div
              style={{
                position: "absolute",
                inset: 0,
                background: "linear-gradient(to right, rgba(13,13,13,0.88) 20%, rgba(13,13,13,0.25) 80%)",
              }}
            ></div>
            <div style={{ position: "relative", padding: "64px 48px", maxWidth: 560 }}>
              <span className="font-mono" style={{ fontSize: 11, color: "var(--orange)" }}>
                Niños 5 – 10 años · {PACE.athleticsLocation}
              </span>
              <h3 className="font-display" style={{ fontSize: "clamp(38px, 5vw, 64px)", margin: "16px 0 14px", color: "var(--cream)" }}>
                PACE Athletics
              </h3>
              <p style={{ color: "rgba(244,239,233,0.8)", fontSize: 17, fontWeight: 300, lineHeight: 1.6, margin: "0 0 28px" }}>
                Atletismo formativo y seguro con Rayo. Sparks (5–7) y Bolts (8–10): juego,
                técnica y confianza que se nota cada semana.
              </p>
              <span className="link-grow" style={{ color: "var(--cream)", fontSize: 15 }}>
                Conocer Athletics →
              </span>
            </div>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Página completa Athletics (niños) ----
function AthleticsPage() {
  const cats = [
    {
      name: "Sparks",
      ages: "5 – 7 años",
      desc: "Todo a través del juego: coordinación, equilibrio y primeras nociones de atletismo. Aquí se enamoran de moverse.",
    },
    {
      name: "Bolts",
      ages: "8 – 10 años",
      desc: "Técnica de carrera, velocidad y trabajo en equipo con retos progresivos. Aquí descubren de qué son capaces.",
    },
  ];
  const pillars = [
    { t: "Entorno seguro", d: "Grupos pequeños, coaches formados en trabajo con niños y comunicación constante con las familias." },
    { t: "Formativo, no competitivo", d: "Primero la técnica y la confianza. Las marcas llegan solas después." },
    { t: "Confianza que se nota", d: "Cada semana un reto superado. Los papás lo ven; los niños lo sienten." },
  ];
  return (
    <React.Fragment>
      <section data-screen-label="Athletics hero" className="grain" style={{ position: "relative", minHeight: "72vh", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <ParallaxImg src="img/rayo-sparks-bolts.jpg" alt="Niños entrenando con Rayo en PACE Athletics" strength={0.05} style={{ position: "absolute", inset: 0 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, #0D0D0D 6%, rgba(13,13,13,0.55) 50%, rgba(13,13,13,0.2) 100%)" }}></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2, width: "100%", padding: "140px 24px 72px" }}>
          <Reveal>
            <span className="new-pill" style={{ fontSize: 10, padding: "5px 12px" }}>Nuevo</span>
            <h1 className="font-display" style={{ fontSize: "clamp(52px, 9vw, 140px)", margin: "22px 0 18px", color: "var(--cream)" }}>
              PACE <span style={{ color: "var(--orange)" }}>Athletics</span>
            </h1>
            <p style={{ fontSize: "clamp(16px, 1.7vw, 21px)", fontWeight: 300, color: "rgba(244,239,233,0.85)", maxWidth: 560, lineHeight: 1.55, margin: "0 0 34px" }}>
              Atletismo formativo para niños de 5 a 10 años, con Rayo como compañero de equipo.
              Juego, técnica y confianza en {PACE.athleticsLocation}.
            </p>
            <Magnetic>
              <a href={PACE.waLink("Hola, quiero info de PACE Athletics para mi hijo/a")} target="_blank" rel="noreferrer" className="btn btn-orange">
                Reservar clase de prueba →
              </a>
            </Magnetic>
          </Reveal>
        </div>
      </section>

      <section data-screen-label="Athletics categorías" style={{ background: "var(--ink)", padding: "100px 0 40px" }}>
        <div className="wrap">
          <Reveal>
            <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>Dos categorías</span>
            <h2 className="font-display" style={{ fontSize: "clamp(38px, 5.5vw, 76px)", margin: "16px 0 48px", color: "var(--cream)" }}>
              Cada edad, su chispa
            </h2>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(290px, 1fr))", gap: 24 }}>
            {cats.map((c, i) => (
              <Reveal key={c.name} delay={i * 110}>
                <div className="card-hover" style={{ border: "1px solid var(--line)", borderRadius: 24, padding: "42px 38px", background: "rgba(244,239,233,0.03)", height: "100%" }}>
                  <span className="font-mono" style={{ fontSize: 11, color: "var(--orange)" }}>{c.ages}</span>
                  <h3 className="font-display" style={{ fontSize: 48, margin: "14px 0 14px", color: "var(--cream)" }}>{c.name}</h3>
                  <p style={{ color: "var(--cream-dim)", fontSize: 15.5, lineHeight: 1.65, margin: 0 }}>{c.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 24, marginTop: 24 }}>
            {pillars.map((p, i) => (
              <Reveal key={p.t} delay={i * 90}>
                <div style={{ borderTop: "3px solid var(--orange)", paddingTop: 22 }}>
                  <h4 className="font-display" style={{ fontSize: 24, margin: "0 0 10px", color: "var(--cream)" }}>{p.t}</h4>
                  <p style={{ color: "var(--cream-dim)", fontSize: 14.5, lineHeight: 1.6, margin: 0 }}>{p.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

// ---- Testimonios ----
function Testimonials() {
  return (
    <section
      id="comunidad"
      data-screen-label="Comunidad"
      style={{ background: "var(--ink)", padding: "120px 0" }}
    >
      <div className="wrap">
        <Reveal>
          <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
            La manada habla
          </span>
          <h2
            className="font-display"
            style={{ fontSize: "clamp(44px, 6.5vw, 96px)", margin: "18px 0 64px", color: "var(--cream)" }}
          >
            Corren con PACE
          </h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 28 }}>
          {PACE.testimonials.map((t, i) => (
            <Reveal key={t.name} delay={i * 110}>
              <figure
                className="card-hover"
                style={{
                  border: "1px solid var(--line)",
                  borderRadius: 24,
                  padding: "38px 34px",
                  margin: 0,
                  background: "rgba(244,239,233,0.03)",
                  height: "100%",
                  display: "flex",
                  flexDirection: "column",
                }}
              >
                <span className="font-display" style={{ fontSize: 64, color: "var(--orange)", lineHeight: 0.6, marginBottom: 22 }}>
                  “
                </span>
                <blockquote style={{ margin: 0, fontSize: 18, fontWeight: 300, lineHeight: 1.6, color: "var(--cream)", flex: 1 }}>
                  {t.quote}
                </blockquote>
                <figcaption style={{ marginTop: 28 }}>
                  <span style={{ display: "block", fontWeight: 600, fontSize: 15 }}>{t.name}</span>
                  <span className="font-mono" style={{ fontSize: 10, color: "var(--cream-faint)" }}>
                    {t.tag}
                  </span>
                </figcaption>
              </figure>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Horarios + ubicación ----
function Schedule() {
  return (
    <section data-screen-label="Horarios" style={{ background: "var(--cream)", color: "var(--ink)", padding: "100px 0" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 56, alignItems: "center" }}>
        <Reveal>
          <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
            Nos vemos en la pista
          </span>
          <h2 className="font-display" style={{ fontSize: "clamp(40px, 5.5vw, 76px)", margin: "16px 0 0", color: "var(--ink)" }}>
            {PACE.location}
          </h2>
          <div style={{ marginTop: 36, display: "grid", gap: 0, maxWidth: 420 }}>
            {PACE.schedule.map((s) => (
              <div
                key={s.day}
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "baseline",
                  borderTop: "1px solid rgba(20,18,16,0.14)",
                  padding: "20px 0",
                }}
              >
                <span className="font-display" style={{ fontSize: 28 }}>{s.day}</span>
                <span className="font-mono" style={{ fontSize: 13, color: "rgba(20,18,16,0.65)" }}>{s.time}</span>
              </div>
            ))}
            <div style={{ borderTop: "1px solid rgba(20,18,16,0.14)" }}></div>
          </div>
          <p style={{ color: "rgba(20,18,16,0.55)", fontSize: 14, marginTop: 20 }}>
            Primera sesión de prueba sin costo. Solo trae tus tenis.
          </p>
        </Reveal>
        <Reveal delay={140}>
          <ParallaxImg src="img/run-3.jpg" alt="Sesión del club" strength={0.07} style={{ borderRadius: 28, aspectRatio: "4/5" }} />
        </Reveal>
      </div>
    </section>
  );
}

// ---- FAQ ----
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section data-screen-label="FAQ" style={{ background: "var(--ink)", padding: "110px 0" }}>
      <div className="wrap" style={{ maxWidth: 880 }}>
        <Reveal>
          <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
            Dudas frecuentes
          </span>
          <h2 className="font-display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)", margin: "16px 0 40px", color: "var(--cream)" }}>
            Antes de empezar
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <div style={{ borderTop: "1px solid var(--line)" }}>
            {PACE.faq.map((f, i) => {
              const isOpen = open === i;
              return (
                <div key={i} className={"faq-item" + (isOpen ? " faq-open" : "")}>
                  <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                    {f.q}
                    <span className="faq-icon font-display" style={{ fontSize: 26, color: "var(--orange)" }}>
                      +
                    </span>
                  </button>
                  <div
                    className="faq-a"
                    style={{ maxHeight: isOpen ? 200 : 0, opacity: isOpen ? 1 : 0 }}
                  >
                    <p style={{ color: "var(--cream-dim)", fontSize: 15.5, lineHeight: 1.65, margin: "0 0 28px", maxWidth: 640 }}>
                      {f.a}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- CTA final ----
function FinalCTA() {
  return (
    <section data-screen-label="CTA final" className="grain" style={{ position: "relative", padding: "150px 0", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0 }}>
        <ParallaxImg src="img/run-hero-wide.jpg" alt="" strength={0.05} style={{ position: "absolute", inset: 0 }} />
      </div>
      <div style={{ position: "absolute", inset: 0, background: "rgba(13,13,13,0.8)" }}></div>
      <div className="wrap" style={{ position: "relative", textAlign: "center", maxWidth: 880 }}>
        <Reveal>
          <p className="font-display" style={{ fontSize: "clamp(40px, 6vw, 84px)", color: "var(--cream)", margin: "0 0 40px", lineHeight: 0.95 }}>
            No se trata solo de correr.
            <br />
            Se trata de descubrir
            <br />
            <span style={{ color: "var(--orange)" }}>de qué eres capaz.</span>
          </p>
          <Magnetic>
            <a href={PACE.waLink()} target="_blank" rel="noreferrer" className="btn btn-cream" style={{ fontSize: 16, padding: "19px 42px" }}>
              Únete a PACE →
            </a>
          </Magnetic>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Footer ----
function Footer() {
  return (
    <footer style={{ background: "#0A0A0A", borderTop: "1px solid var(--line)", padding: "64px 0 40px" }}>
      <div className="wrap">
        <div style={{ display: "flex", flexWrap: "wrap", gap: 40, justifyContent: "space-between", alignItems: "flex-start" }}>
          <div>
            <img src="img/logo-blanco.png" alt="PACE Run Club" style={{ height: 30, width: "auto", marginBottom: 18 }} />
            <p className="font-mono" style={{ fontSize: 11, color: "var(--cream-faint)", margin: 0 }}>
              Correr con sentido · Bogotá
            </p>
          </div>
          <div style={{ display: "flex", gap: 36, flexWrap: "wrap" }}>
            <a href={PACE.instagram} target="_blank" rel="noreferrer" className="link-grow" style={{ fontSize: 14, color: "var(--cream-dim)" }}>
              {PACE.instagramHandle}
            </a>
            <a href={"mailto:" + PACE.email} className="link-grow" style={{ fontSize: 14, color: "var(--cream-dim)" }}>
              {PACE.email}
            </a>
            <a href={PACE.waLink()} target="_blank" rel="noreferrer" className="link-grow" style={{ fontSize: 14, color: "var(--cream-dim)" }}>
              WhatsApp
            </a>
          </div>
        </div>
        <p style={{ color: "rgba(244,239,233,0.25)", fontSize: 12, marginTop: 48 }}>
          © 2026 PACE Run Club. Todos los derechos reservados.
        </p>
      </div>
    </footer>
  );
}

// ---- WhatsApp float ----
function WhatsAppFloat() {
  return (
    <a className="wa-float" href={PACE.waLink()} target="_blank" rel="noreferrer" aria-label="WhatsApp">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="#fff">
        <path d="M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.5 0 1.47 1.07 2.89 1.22 3.09.15.2 2.11 3.22 5.1 4.51.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.42.25-.7.25-1.29.17-1.42-.07-.12-.27-.2-.57-.35Z" />
        <path d="M12.05 2C6.55 2 2.1 6.45 2.1 11.95c0 1.75.46 3.46 1.33 4.96L2 22l5.2-1.36a9.9 9.9 0 0 0 4.84 1.26h.01c5.5 0 9.95-4.45 9.95-9.95S17.55 2 12.05 2Zm0 18.2a8.26 8.26 0 0 1-4.21-1.15l-.3-.18-3.09.81.82-3.01-.2-.31a8.26 8.26 0 1 1 6.98 3.84Z" />
      </svg>
    </a>
  );
}

Object.assign(window, {
  CorePrograms,
  Method,
  Athletics,
  AthleticsPage,
  Testimonials,
  Schedule,
  FAQ,
  FinalCTA,
  Footer,
  WhatsAppFloat,
});
