// ============================================================
// PACE — Secciones C: Tienda, Revista HEAT, Inscripción
// ============================================================

// ---- Tarjeta de producto con género + tallas ----
function MerchCard({ m, index }) {
  const [gender, setGender] = React.useState(m.genders[0]);
  const [size, setSize] = React.useState("");
  const chip = (active) => ({
    border: "1px solid " + (active ? "var(--orange)" : "var(--line)"),
    background: active ? "var(--orange)" : "transparent",
    color: active ? "#fff" : "var(--cream-dim)",
    borderRadius: 99,
    padding: "8px 14px",
    fontSize: 13,
    fontWeight: 600,
    cursor: "pointer",
    transition: "all 0.25s var(--ease-out)",
    fontFamily: "var(--font-body)",
  });
  const variant =
    (m.genders.length > 1 ? gender : "") + (size ? (gender && m.genders.length > 1 ? " · " : "") + "Talla " + size : "");
  const msg =
    "Hola, quiero pedir: " + m.name + (variant ? " (" + variant + ")" : "");
  return (
    <div
      className="card-hover"
      style={{
        border: "1px solid var(--line)",
        borderRadius: 24,
        overflow: "hidden",
        background: "rgba(244,239,233,0.03)",
        display: "flex",
        flexDirection: "column",
        height: "100%",
      }}
    >
      <div
        style={{
          aspectRatio: "4/5",
          background:
            "radial-gradient(circle at 50% 38%, rgba(244,239,233,0.18), rgba(244,239,233,0.05) 70%, rgba(232,84,30,0.06))",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          position: "relative",
          overflow: "hidden",
        }}
      >
        {m.img ? (
          <img
            src={m.img}
            alt={m.name}
            style={{
              width: "100%",
              height: "100%",
              objectFit: m.fit || "cover",
              objectPosition: "center",
              padding: m.fit === "contain" ? "10%" : 0,
              boxSizing: "border-box",
            }}
          />
        ) : (
          <React.Fragment>
            <span className="font-display" style={{ fontSize: 72, color: "rgba(232,84,30,0.4)", transform: "rotate(-8deg)" }}>
              PACE
            </span>
            <span className="font-mono" style={{ position: "absolute", bottom: 14, left: 0, right: 0, textAlign: "center", fontSize: 9, color: "var(--cream-faint)" }}>
              Foto próximamente
            </span>
          </React.Fragment>
        )}
      </div>
      <div style={{ padding: "26px 24px 30px", display: "flex", flexDirection: "column", flex: 1 }}>
        <span className="font-mono" style={{ fontSize: 10, color: "var(--orange)" }}>{m.line}</span>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10, margin: "10px 0 8px" }}>
          <h3 className="font-display" style={{ fontSize: 30, margin: 0, color: "var(--cream)" }}>{m.name}</h3>
          {m.price && <span className="font-display" style={{ fontSize: 24, color: "var(--cream)" }}>{PACE.cop(m.price)}</span>}
        </div>
        <p style={{ color: "var(--cream-dim)", fontSize: 14, lineHeight: 1.55, margin: "0 0 20px", flex: 1 }}>{m.desc}</p>

        {m.genders.length > 1 && (
          <div style={{ display: "flex", gap: 8, marginBottom: 14 }}>
            {m.genders.map((g) => (
              <button key={g} style={chip(g === gender)} onClick={() => setGender(g)}>{g}</button>
            ))}
          </div>
        )}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 22 }}>
          {PACE.sizes.map((s) => (
            <button key={s} style={chip(s === size)} onClick={() => setSize(s === size ? "" : s)}>{s}</button>
          ))}
        </div>

        <a
          href={PACE.buyHref(m.id, msg)}
          target="_blank"
          rel="noreferrer"
          className="btn btn-orange"
          style={{ padding: "13px 22px", fontSize: 14, width: "100%" }}
        >
          Comprar →
        </a>
        <a
          href={PACE.waLink("Hola, tengo una duda de talla con: " + m.name)}
          target="_blank"
          rel="noreferrer"
          style={{ display: "block", textAlign: "center", fontSize: 11.5, color: "var(--cream-faint)", marginTop: 12, fontFamily: "var(--font-mono)", letterSpacing: "0.1em" }}
        >
          ¿Dudas de talla? Escríbenos
        </a>
      </div>
    </div>
  );
}

// ---- Tienda ----
function StorePage() {
  return (
    <section data-screen-label="Tienda" style={{ background: "var(--ink)", padding: "100px 0 120px" }}>
      <div className="wrap">
        <Reveal>
          <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
            Merch oficial
          </span>
          <h1
            className="font-display"
            style={{ fontSize: "clamp(52px, 8vw, 120px)", margin: "18px 0 0", color: "var(--cream)" }}
          >
            La tienda
          </h1>
          <p style={{ color: "var(--cream-dim)", fontSize: 18, fontWeight: 300, maxWidth: 520, marginTop: 18, lineHeight: 1.6 }}>
            Lo que usamos para entrenar, descansar y representar al club. Elige talla y color,
            paga seguro y a correr.
          </p>
        </Reveal>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 24,
            marginTop: 64,
          }}
        >
          {PACE.merch.map((m, i) => (
            <Reveal key={m.id} delay={i * 90}>
              <MerchCard m={m} index={i} />
            </Reveal>
          ))}
        </div>
        <Reveal delay={120}>
          <p className="font-mono" style={{ fontSize: 10, color: "var(--cream-faint)", marginTop: 36, letterSpacing: "0.14em" }}>
            Pago seguro con dLocal · Tarjetas · PSE · Nequi · Disponibilidad sujeta a stock.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Revista HEAT (expectativa / próximamente) ----
function MagazinePage() {
  return (
    <React.Fragment>
      <section
        data-screen-label="Revista HEAT"
        className="grain"
        style={{ position: "relative", minHeight: "82vh", display: "flex", alignItems: "center", overflow: "hidden" }}
      >
        <div style={{ position: "absolute", inset: 0 }}>
          <img src="img/u/night1.jpg" alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 35%" }} />
        </div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, #0D0D0D 8%, rgba(13,13,13,0.6) 55%, rgba(13,13,13,0.4) 100%)" }}></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2, textAlign: "center" }}>
          <Reveal>
            <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
              La revista digital de PACE
            </span>
            <h1
              className="font-display"
              style={{ fontSize: "clamp(110px, 24vw, 360px)", margin: "10px 0 0", color: "#fff", lineHeight: 0.82 }}
            >
              HEAT
            </h1>
            <p
              className="font-display"
              style={{ fontSize: "clamp(22px, 3vw, 40px)", color: "var(--orange)", margin: "20px 0 0" }}
            >
              Un heat de parte nuestra para el mundo.
            </p>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 14, marginTop: 34, border: "1px solid rgba(244,239,233,0.25)", borderRadius: 99, padding: "12px 24px", backdropFilter: "blur(6px)" }}>
              <span style={{ width: 8, height: 8, borderRadius: 99, background: "var(--orange)", boxShadow: "0 0 0 0 rgba(232,84,30,0.6)", animation: "newPulse 2.2s ease-in-out infinite" }}></span>
              <span className="font-mono" style={{ fontSize: 12, color: "var(--cream)" }}>Edición 001 · Muy pronto</span>
            </div>
          </Reveal>
        </div>
      </section>

      <section style={{ background: "var(--ink)", padding: "100px 0 110px" }}>
        <div className="wrap" style={{ maxWidth: 720, textAlign: "center" }}>
          <Reveal>
            <p style={{ fontSize: 22, fontWeight: 300, lineHeight: 1.7, color: "var(--cream)", margin: "0 0 22px" }}>
              Un heat es una serie. Una tanda de corredores en la línea de salida, esperando el
              disparo. Eso será HEAT: historias reales de la manada, contadas de frente desde
              Bogotá a 2.640 metros.
            </p>
            <p style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.7, color: "var(--cream-dim)", margin: "0 0 40px" }}>
              Estamos preparando la primera edición. Déjanos tu correo por WhatsApp o síguenos
              para ser de los primeros en leerla.
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <Magnetic>
                <a href={PACE.waLink("Hola, quiero que me avisen cuando salga la revista HEAT")} target="_blank" rel="noreferrer" className="btn btn-orange">
                  Avísame del lanzamiento →
                </a>
              </Magnetic>
              <Magnetic>
                <a href={PACE.instagram} target="_blank" rel="noreferrer" className="btn btn-ghost">
                  {PACE.instagramHandle}
                </a>
              </Magnetic>
            </div>
          </Reveal>
        </div>
      </section>
    </React.Fragment>
  );
}

// ---- Formulario de inscripción ----
function SignupPage() {
  const [form, setForm] = React.useState({ nombre: "", meta: "PACE 5K · Tu primera meta real", nivel: "Estoy empezando", nota: "" });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const metas = [
    "Start Run · Corre desde cero",
    "PACE 5K · Tu primera meta real",
    "PACE 10K · Corre más fuerte",
    "PACE 21K · Media maratón",
    "Maratón · Manejo personalizado",
    "Programa Presencial · Bogotá",
    "Plan Online",
    "PACE Athletics · Niños",
  ];
  const niveles = ["Estoy empezando", "Corro de vez en cuando", "Entreno regularmente", "Compito"];
  const submit = (e) => {
    e.preventDefault();
    const msg =
      "Hola, quiero inscribirme en PACE.\n" +
      "Nombre: " + form.nombre + "\n" +
      "Meta: " + form.meta + "\n" +
      "Nivel: " + form.nivel +
      (form.nota ? "\nNota: " + form.nota : "");
    window.open(PACE.waLink(msg), "_blank");
  };
  const inputStyle = {
    width: "100%",
    background: "rgba(244,239,233,0.05)",
    border: "1px solid var(--line)",
    borderRadius: 14,
    color: "var(--cream)",
    fontSize: 15,
    fontFamily: "var(--font-body)",
    padding: "16px 18px",
    outline: "none",
    boxSizing: "border-box",
  };
  const labelStyle = {
    display: "block",
    fontSize: 11,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    fontFamily: "var(--font-mono)",
    color: "var(--cream-faint)",
    margin: "0 0 10px",
  };
  return (
    <section data-screen-label="Inscripción" style={{ background: "var(--ink)", padding: "100px 0 120px" }}>
      <div className="wrap" style={{ maxWidth: 980, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 64 }}>
        <Reveal>
          <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
            Inscripción
          </span>
          <h1 className="font-display" style={{ fontSize: "clamp(48px, 7vw, 100px)", margin: "18px 0 0", color: "var(--cream)" }}>
            Da el primer paso
          </h1>
          <p style={{ color: "var(--cream-dim)", fontSize: 17, fontWeight: 300, lineHeight: 1.65, marginTop: 20, maxWidth: 400 }}>
            Cuéntanos quién eres y a dónde quieres llegar. Te respondemos el mismo día con el
            plan ideal y el link de pago seguro.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: "30px 0 0", display: "grid", gap: 12 }}>
            {["Respuesta el mismo día", "Pago seguro con dLocal", "Primera sesión de prueba sin costo"].map((p) => (
              <li key={p} style={{ display: "flex", alignItems: "center", gap: 14, color: "var(--cream)", fontSize: 14.5 }}>
                <span style={{ width: 22, height: 5, borderRadius: 99, background: "var(--orange)", flexShrink: 0 }}></span>
                {p}
              </li>
            ))}
          </ul>
        </Reveal>
        <Reveal delay={120}>
          <form
            onSubmit={submit}
            style={{
              border: "1px solid var(--line)",
              borderRadius: 24,
              padding: "38px 34px",
              background: "rgba(244,239,233,0.03)",
              display: "grid",
              gap: 24,
            }}
          >
            <div>
              <label style={labelStyle} htmlFor="f-nombre">Tu nombre</label>
              <input id="f-nombre" style={inputStyle} required value={form.nombre} onChange={set("nombre")} placeholder="Nombre y apellido" />
            </div>
            <div>
              <label style={labelStyle} htmlFor="f-meta">Tu meta</label>
              <select id="f-meta" style={inputStyle} value={form.meta} onChange={set("meta")}>
                {metas.map((m) => (
                  <option key={m} value={m}>{m}</option>
                ))}
              </select>
            </div>
            <div>
              <label style={labelStyle} htmlFor="f-nivel">Tu nivel</label>
              <select id="f-nivel" style={inputStyle} value={form.nivel} onChange={set("nivel")}>
                {niveles.map((n) => (
                  <option key={n} value={n}>{n}</option>
                ))}
              </select>
            </div>
            <div>
              <label style={labelStyle} htmlFor="f-nota">Algo que debamos saber (opcional)</label>
              <textarea id="f-nota" style={{ ...inputStyle, minHeight: 90, resize: "vertical" }} value={form.nota} onChange={set("nota")} placeholder="Lesiones, horarios, dudas…"></textarea>
            </div>
            <button type="submit" className="btn btn-orange" style={{ width: "100%" }}>
              Enviar inscripción →
            </button>
            <p className="font-mono" style={{ fontSize: 9.5, color: "var(--cream-faint)", textAlign: "center", margin: 0, letterSpacing: "0.12em" }}>
              Se abre un chat con tu información lista para enviar
            </p>
          </form>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { StorePage, MagazinePage, SignupPage, MerchCard });