// ============================================================
// PACE — App principal: router por ventanas + Tweaks
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroCopy": "No corres solo",
  "motion": "normal",
  "customCursor": true,
  "showKids": true
}/*EDITMODE-END*/;

// ---- Router por hash (#/metas, #/programas, ...) ----
function useRoute() {
  const parse = () => location.hash.replace(/^#\/?/, "");
  const [route, setRoute] = React.useState(parse);
  React.useEffect(() => {
    const onHash = () => {
      setRoute(parse());
      window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}

// ---- Tarjetas de exploración en el inicio ----
function ExploreGrid() {
  const pages = [
    {
      href: "#/metas",
      kicker: "Planes por objetivo",
      title: "¿Cuál es tu meta?",
      desc: "Start, 5K, 10K, 21K y 42K. Planes con semanas definidas y precio de lanzamiento.",
    },
    {
      href: "#/programas",
      kicker: "Todo el año",
      title: "Programas",
      desc: "Presencial en Bogotá, plan online donde estés y Athletics para niños.",
    },
    {
      href: "#/athletics",
      kicker: "Nuevo · Niños 5–10",
      title: "Athletics",
      desc: "Atletismo formativo con Rayo: Sparks (5–7) y Bolts (8–10). Juego, técnica y confianza.",
      isNew: true,
    },
    {
      href: "#/metodo",
      kicker: "Cómo entrenamos",
      title: "El método",
      desc: "Diagnóstico, plan progresivo, acompañamiento real y día de carrera.",
    },
    {
      href: "#/club",
      kicker: "La manada",
      title: "Comunidad",
      desc: "Testimonios, horarios y dónde nos encontramos cada semana.",
    },
    {
      href: "#/faq",
      kicker: "Antes de empezar",
      title: "Preguntas",
      desc: "Todo lo que necesitas saber para dar el primer paso.",
    },
  ];
  return (
    <section data-screen-label="Explora" style={{ background: "var(--ink)", padding: "110px 0 120px" }}>
      <div className="wrap">
        <Reveal>
          <span className="font-mono" style={{ fontSize: 12, color: "var(--orange)" }}>
            Explora PACE
          </span>
          <h2
            className="font-display"
            style={{ fontSize: "clamp(44px, 6.5vw, 96px)", margin: "18px 0 56px", color: "var(--cream)" }}
          >
            Elige tu camino
          </h2>
        </Reveal>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 24,
          }}
        >
          {pages.map((p, i) => (
            <Reveal key={p.href} delay={i * 90}>
              <a href={p.href} className="explore-card card-hover" style={p.isNew ? { borderColor: "rgba(232,84,30,0.55)", background: "rgba(232,84,30,0.07)" } : undefined}>
                <span className="arrow">→</span>
                <span className="font-mono" style={{ fontSize: 10, color: "var(--orange)" }}>
                  {p.kicker}
                </span>
                <span
                  className="font-display"
                  style={{ display: "block", fontSize: 36, color: "var(--cream)", margin: "14px 0 12px" }}
                >
                  {p.title}
                </span>
                <span style={{ display: "block", fontSize: 14.5, lineHeight: 1.6, color: "var(--cream-dim)", fontWeight: 300 }}>
                  {p.desc}
                </span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- Páginas ----
function Sub({ children }) {
  return <div style={{ paddingTop: 68, background: "var(--ink)", minHeight: "100vh" }}>{children}</div>;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useRoute();

  React.useEffect(() => {
    document.documentElement.setAttribute("data-motion", t.motion);
  }, [t.motion]);

  let page;
  switch (route) {
    case "metas":
      page = (
        <Sub>
          <GoalSelector />
          <Marquee dark={true} words={["START", "5K", "10K", "21K", "42K", "TU META", "TU PLAN"]} />
          <FinalCTA />
        </Sub>
      );
      break;
    case "programas":
      page = (
        <Sub>
          <CorePrograms />
          <div style={{ background: "var(--ink)", paddingTop: 80 }}>{t.showKids && <Athletics />}</div>
          <div style={{ height: 80, background: "var(--ink)" }}></div>
        </Sub>
      );
      break;
    case "metodo":
      page = (
        <Sub>
          <Method />
          <Marquee dark={true} words={["NO ES CORRER MÁS", "ES CORRER MEJOR", "TÉCNICA", "FUERZA", "DESCANSO"]} />
          <FinalCTA />
        </Sub>
      );
      break;
    case "athletics":
      page = (
        <Sub>
          <AthleticsPage />
          <Marquee dark={true} words={["SPARKS", "BOLTS", "JUEGO", "TÉCNICA", "CONFIANZA", "RAYO"]} />
          <FinalCTA />
        </Sub>
      );
      break;
    case "club":
      page = (
        <Sub>
          <Testimonials />
          <Schedule />
          <FinalCTA />
        </Sub>
      );
      break;
    case "faq":
      page = (
        <Sub>
          <FAQ />
          <FinalCTA />
        </Sub>
      );
      break;
    default:
      page = (
        <React.Fragment>
          <Hero copy={t.heroCopy} />
          <Marquee
            dark={false}
            words={["RUNNING", "ATLETISMO", "FUERZA", "COMUNIDAD", "5K", "10K", "21K", "42K"]}
          />
          <Stats />
          <ExploreGrid />
          <FinalCTA />
        </React.Fragment>
      );
  }

  return (
    <React.Fragment>
      <ScrollProgress />
      <CustomCursor enabled={t.customCursor} />
      <Header route={route} />
      <main key={route}>{page}</main>
      <Footer />
      <WhatsAppFloat />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect
          label="Mensaje"
          value={t.heroCopy}
          options={Object.keys(PACE.heroCopies)}
          onChange={(v) => setTweak("heroCopy", v)}
        />
        <TweakSection label="Motion" />
        <TweakRadio
          label="Intensidad"
          value={t.motion}
          options={["sutil", "normal", "max"]}
          onChange={(v) => setTweak("motion", v)}
        />
        <TweakToggle
          label="Cursor personalizado"
          value={t.customCursor}
          onChange={(v) => setTweak("customCursor", v)}
        />
        <TweakSection label="Contenido" />
        <TweakToggle
          label="Sección niños (Athletics)"
          value={t.showKids}
          onChange={(v) => setTweak("showKids", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);