// pages.jsx — Home + Races + shared Feature/Schedule/CTA (i18n-aware)
const { useState: useStateP, useEffect: useEffectP } = React;

function HeroMedia() {
  const [videoUrl, setVideoUrl] = useStateP(null);
  useEffectP(() => {
    if (!window.loadVideoIDB) return;
    window.loadVideoIDB('hero-video').then(blob => {
      if (blob) setVideoUrl(URL.createObjectURL(blob));
    }).catch(() => {});
  }, []);
  if (videoUrl) {
    return <video key={videoUrl} autoPlay muted loop playsInline style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} src={videoUrl} />;
  }
  return <MapSlot id="hero-bg" label="HERO IMAGE · GT3 ON TRACK" />;
}

function useCountdown(targetUtcMs) {
  const calc = () => {
    const d = Math.max(0, targetUtcMs - Date.now());
    return { days: Math.floor(d / 86400000), hrs: Math.floor((d / 3600000) % 24), min: Math.floor((d / 60000) % 60), sec: Math.floor((d / 1000) % 60) };
  };
  const [t, setT] = useStateP(calc);
  useEffectP(() => { const i = setInterval(() => setT(calc()), 1000); return () => clearInterval(i); }, [targetUtcMs]);
  return t;
}

function raceUtcMs(r) {
  try {
    const utcStr = (r.utc || "18:00 UTC").replace(/\s*UTC\s*/i, "").trim();
    const [h, m] = utcStr.split(":").map(Number);
    return Date.UTC(r.date.y, r.date.mon - 1, r.date.d, h || 18, m || 0, 0);
  } catch(e) { return 0; }
}

/* ---------- Featured race (big) ---------- */
function FeatureRace({ r, go }) {
  const { t, country, cond, fmtDate } = useT();
  const cd = useCountdown(raceUtcMs(r));
  const taken = r.gridTotal - r.gridFree;
  return (
    <div className="feature reveal">
      <div className="feature-media">
        <div className="feature-tag"><span>RND {String(r.round).padStart(2, "0")} · {t("feature.next")}</span></div>
        {r.imageUrl
          ? <img src={r.imageUrl} alt={r.name} style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
          : <MapSlot id={`feature-${r.id}`} label={`PHOTO · ${r.name.toUpperCase()}`} />
        }
      </div>
      <div className="feature-body">
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
          <span className="eyebrow">{r.classes || r.class || "GT3"} · {cond(r.cond)}</span>
          <StatusBadge status={r.status} free={r.gridFree} />
        </div>
        <h3>{r.name}</h3>
        <div className="muted" style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 14, letterSpacing: "0.04em" }}>
          {fmtDate(r.date).toUpperCase()} · {r.time} {r.tz} ({r.utc})
        </div>

        <div className="countdown">
          {[[t("cd.days"), cd.days], [t("cd.hrs"), cd.hrs], [t("cd.min"), cd.min], [t("cd.sec"), cd.sec]].map(([u, n], i) => (
            <div className="cd" key={i}><div className="n">{String(n).padStart(2, "0")}</div><div className="u">{u}</div></div>
          ))}
        </div>

        <div className="race-data compact" style={{ marginTop: 0 }}>
          {(() => {
            const pMin = r.practiceMin != null ? r.practiceMin : FORMAT.practiceMin;
            const qLaps = r.qualiLaps != null ? r.qualiLaps : FORMAT.qualiLaps;
            return <>
              <div className="dcell"><div className="k">{t("feature.format")}</div><div className="v">{r.laps} {t("card.laps")}<small>≈ {r.durMin} min</small></div></div>
              {pMin > 0 && <div className="dcell"><div className="k">{t("feature.practice")}</div><div className="v">{t("val.practice", { n: pMin })}<small>{t("lbl.free")}</small></div></div>}
              {qLaps > 0 && <div className="dcell"><div className="k">{t("feature.quali")}</div><div className="v">{t("val.qualiLaps", { n: qLaps })}<small>{t("lbl.hotlap")}</small></div></div>}
              <div className="dcell"><div className="k">{t("feature.grid")}</div><div className="v">{taken}/{r.gridTotal}<small>{t("card.free", { n: r.gridFree })}</small></div></div>
            </>;
          })()}
          {r.weather && <>
            <div className="dcell"><div className="k">{t("weather.cloud")}</div><div className="v">{r.weather.cloudCover}<small>{t("weather.track")}: {r.weather.moisture}</small></div></div>
            <div className="dcell"><div className="k">{t("weather.temp")}</div><div className="v">{r.weather.temp}°C</div></div>
            <div className="dcell"><div className="k">{t("weather.wind")}</div><div className="v">{r.weather.windSpeed} kph<small>{r.weather.windDir}</small></div></div>
            <div className="dcell"><div className="k">{t("weather.humidity")}</div><div className="v">{r.weather.humidity}%</div></div>
          </>}
        </div>

        <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
          <button className="btn" onClick={() => go("signup", r.id)}><span>{t("btn.signupAt", { name: r.name })}</span></button>
          <button className="btn ghost" onClick={() => go("races")}><span>{t("btn.allCalendar")}</span></button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Schedule strip ---------- */
function ScheduleStrip({ go, races = [] }) {
  const { t, fmtShort } = useT();
  return (
    <div className="sched">
      {races.map((r) => (
        <div className={`srow${r.imageUrl ? " srow-has-img" : ""}`} key={r.id} onClick={() => go("races")}>
          <div className="r">R{String(r.round).padStart(2, "0")}</div>
          <div className="srow-thumb">{r.imageUrl && <img src={r.imageUrl} alt={r.name} />}</div>
          <div className="nm">{r.name}<small className="meta keep">{r.classes || r.class || "GT3"}{r.finale ? " · " + t("sched.finale") : ""}</small></div>
          <div className="meta">{fmtShort(r.date)}</div>
          <div className="meta">{r.time} {r.tz}</div>
          <div className="meta"><StatusBadge status={r.status} free={r.gridFree} /></div>
          <div className="arrow"><IconArrow /></div>
        </div>
      ))}
    </div>
  );
}

/* ---------- HOME ---------- */
function HomePage({ go, showTower, races: racesProp }) {
  const { t } = useT();
  const racesData = racesProp || [];
  const spa = racesData.find(r => r.featured && r.status !== "done") || racesData.find(r => r.status !== "done") || null;
  return (
    <div>
      <section className="hero">
        <div className="hero-media"><HeroMedia /></div>
        <div className="hero-scrim" />
        {showTower && <DiscordWidget />}
        <div className="hero-in">
          <span className="eyebrow">{t("hero.eyebrow")}</span>
          <h1 className="display">IRON GT<span className="ln2">SERIES</span></h1>
          <p className="hero-lead">{t("hero.lead")}</p>

          {spa && (
            <div className="nextflag" style={{ marginTop: 26 }}>
              <div className="lab">{t("hero.next")}</div>
              <div className="val">
                <b>{spa.name.toUpperCase()}</b><span className="sep">/</span>
                RND {String(spa.round).padStart(2,"0")}<span className="sep">/</span>
                {spa.date.d} · {spa.time} {spa.tz}<span className="sep">/</span>
                {spa.status === "full"
                  ? <span style={{ color: "var(--sec-red, #ff4444)" }}>{t("status.full")}</span>
                  : <span style={{ color: "var(--sec-green)" }}>{t("hero.freeSpots", { n: spa.gridFree })}</span>
                }
              </div>
            </div>
          )}

          <div className="hero-actions">
            <button className="btn" onClick={() => go("races")}><span>{t("btn.viewRaces")}</span></button>
            <button className="btn ghost" onClick={() => go("signup")}><span>{t("btn.signup")}</span></button>
          </div>
        </div>
      </section>

      <section className="section wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("home.do.eyebrow")}</span>
            <h2 className="display" style={{ marginTop: 14, whiteSpace: "pre-line" }}>{t("home.do.title")}</h2>
          </div>
          <p className="lead">{t("home.do.lead")}</p>
        </div>
        <div className="feat-grid">
          {FEATURE_IDS.map((id) => (
            <div className="feat reveal" key={id}>
              <div className="idx">{String(id).padStart(2, "0")}</div>
              <h3>{t("feat." + id + ".t")}</h3>
              <p>{t("feat." + id + ".p")}</p>
            </div>
          ))}
        </div>
      </section>

      {spa && (
        <section className="section tight wrap">
          <div className="section-head">
            <div>
              <span className="eyebrow">{t("home.next.eyebrow")}</span>
              <h2 className="display" style={{ marginTop: 14 }}>{t("home.next.title")}</h2>
            </div>
            <LiveChip>{t("chip.enrollOpen")}</LiveChip>
          </div>
          <FeatureRace r={spa} go={go} />
        </section>
      )}

      <section className="section tight wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t("home.cal.eyebrow")}</span>
            <h2 className="display" style={{ marginTop: 14 }}>
              {racesData.length > 0 ? t("home.cal.title", { n: racesData.length }) : t("home.cal.soon")}
            </h2>
          </div>
          {racesData.length > 0 && <button className="btn ghost sm" onClick={() => go("races")}><span>{t("btn.detailsRaces")}</span></button>}
        </div>
        {racesData.length > 0
          ? <ScheduleStrip go={go} races={racesData} />
          : (
            <div style={{ padding: "32px 0", fontFamily: "var(--mono)", color: "var(--muted)", fontSize: 14, letterSpacing: "0.08em", display: "flex", alignItems: "center", gap: 16 }}>
              <span style={{ color: "var(--accent)", fontSize: 20 }}>◈</span>
              {t("home.cal.soonText")}
            </div>
          )
        }
      </section>

      <CtaBand go={go} />
    </div>
  );
}

/* ---------- RACES ---------- */
function RacesPage({ go, races: racesProp }) {
  const { t, fmtYear } = useT();
  const [filter, setFilter] = useStateP("all");
  const racesData = racesProp || [];
  const spa = racesData.find(r => r.featured && r.status !== "done") || racesData.find(r => r.status !== "done") || null;
  const rest = racesData.filter(r => r !== spa);
  const filtered = rest.filter(r => filter === "all" ? true : r.status === filter);
  const filters = [["all", t("filter.all")], ["open", t("filter.open")], ["filling", t("filter.filling")]];

  return (
    <div>
      <section className="section wrap" style={{ paddingBottom: 40 }}>
        <span className="eyebrow">{t("races.eyebrow", { y: SEASON.year, n: SEASON.rounds })}</span>
        <h1 className="display" style={{ fontSize: "clamp(48px,7vw,92px)", marginTop: 16, whiteSpace: "pre-line" }}>{t("races.title")}</h1>
        <p className="lead" style={{ maxWidth: 560, marginTop: 18, color: "var(--muted)", fontSize: 18 }}>{t("races.lead")}</p>
      </section>

      {spa && (
        <section className="wrap" style={{ paddingBottom: 30 }}>
          <FeatureRace r={spa} go={go} />
        </section>
      )}

      <section className="section tight wrap">
        <div className="section-head" style={{ marginBottom: 26 }}>
          <h2 className="display" style={{ fontSize: "clamp(28px,4vw,44px)" }}>{t("races.rest")}</h2>
          <div className="choice">
            {filters.map(([id, lab]) => (
              <button key={id} className={filter === id ? "on" : ""} onClick={() => setFilter(id)}>{lab}</button>
            ))}
          </div>
        </div>
        <div style={{ display: "grid", gap: 14 }}>
          {filtered.length === 0
            ? <p className="muted" style={{ fontFamily: "var(--mono)" }}>{t("races.empty")}</p>
            : filtered.map((r) => <RaceCard key={r.id} r={r} go={go} />)}
        </div>
      </section>

      <CtaBand go={go} />
    </div>
  );
}

/* ---------- CTA band ---------- */
function CtaBand({ go }) {
  const { t } = useT();
  const { discordUrl } = useCfg();
  return (
    <section className="cta-band">
      <div className="cta-stripes" />
      <div className="wrap">
        <div>
          <h2 style={{ whiteSpace: "pre-line" }}>{t("cta.title")}</h2>
          <p>{t("cta.text")}</p>
        </div>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a className="btn" href={discordUrl} target="_blank" rel="noopener noreferrer"><span>{t("btn.enterDiscord")}</span></a>
          <button className="btn" onClick={() => go("signup")} style={{ background: "transparent", color: "var(--accent-ink)", boxShadow: "inset 0 0 0 1.5px currentColor" }}><span>{t("btn.signupNow")}</span></button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage, RacesPage, FeatureRace, ScheduleStrip, CtaBand, useCountdown });