// Activity banner: latest run + Live Twitch indicator + API status
function ActivityBanner() {
  useDataTick();
  const runs = window.RUN_DATA.runs;
  const isLive = !!window.RUN_DATA.isLive;
  // Most recent by date
  const latest = [...runs].sort((a, b) => (b.date || "").localeCompare(a.date || ""))[0];
  const params = new URLSearchParams(location.search);
  const twitchLive = params.get("live") === "1";

  if (!latest) return null;

  return (
    <div className={`activity ${twitchLive ? "is-live" : ""}`}>
      <div className="activity__inner">
        <a className="activity__live" href="https://www.twitch.tv/mirrorsedger" target="_blank" rel="noreferrer">
          <span className="activity__live-dot" aria-hidden="true" />
          <span className="activity__live-label">{twitchLive ? "LIVE NOW" : "OFFLINE"}</span>
          <span className="activity__live-host">twitch.tv/mirrorsedger</span>
        </a>
        <div className="activity__sep" aria-hidden="true" />
        <a className="activity__latest" href={latest.speedrun} target="_blank" rel="noreferrer">
          <span className="activity__latest-label">LATEST RUN</span>
          <span className="activity__latest-body">
            <strong>{latest.name}</strong> · {latest.time} · {relativeTime(latest.date)}
          </span>
        </a>
        <div className="activity__sep activity__sep--end" aria-hidden="true" />
        <span className={`activity__sync ${isLive ? "is-on" : ""}`} title={isLive ? "Live data from speedrun.com API" : "Awaiting speedrun.com API…"}>
          <span className="activity__sync-dot" aria-hidden="true" />
          <span className="activity__sync-label">{isLive ? "SYNCED · speedrun.com" : "SYNCING…"}</span>
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { ActivityBanner });