// Hero strip: brand + big clock + day counter + weather summary
const Hero = ({ data, tick }) => {
  const ig   = data.ingame;
  const w    = data.weather;
  const meta = data.live_meta || {};

  // Interpolate the in-game clock between syncs at the rate the server
  // reports (default 2.5 real sec per game min). If the Lua mod hasn't
  // re-written state.json in a while, the world is probably paused
  // (PauseEmpty + no players) so freeze the clock instead of extrapolating.
  const secPerMin         = meta.seconds_per_game_minute || 2.5;
  const realSecsSinceSync = meta.synced_at ? (Date.now() - meta.synced_at) / 1000 : 0;
  const luaStale          = meta.pushed_at && meta.world_written_at
    ? (meta.pushed_at - meta.world_written_at) > 90
    : false;
  void tick; // re-render every second to advance the clock
  const elapsedGameMin = luaStale ? 0 : Math.floor(realSecsSinceSync / secPerMin);
  const totalMin       = ig.hour * 60 + ig.minute + elapsedGameMin;
  const hour           = Math.floor(totalMin / 60) % 24;
  const minute         = totalMin % 60;

  return (
    <div className="hero">
      <div className="panel bracketed" style={{ padding: "20px 22px" }}>
        <div className="h-label">
          <span>▸ KNOX COUNTY · BROADCAST CLOCK</span>
          <span>SYS-CLK</span>
        </div>
        <div className="bigclock">
          {pad2(hour)}<span className="colon">:</span>{pad2(minute)}
        </div>
        <div className="day-line">
          {ig.weekday}, {ig.month} {ig.date}, {ig.year} · {ig.period}
        </div>
        <div className="day-counter" style={{ marginTop: 6 }}>
          DAY <b>{ig.day}</b> SINCE THE OUTBREAK
        </div>
      </div>

      <div className="panel bracketed">
        <div className="h-label">
          <span>▸ SERVER PULSE</span>
          <span className="status-tag status-ALIVE">{data.server.status}</span>
        </div>
        <div className="h-value">
          {data.server.population}<span style={{ color: "var(--amber-mute)", fontSize: 24 }}>/{data.server.population_max}</span>
        </div>
        <div className="h-sub">SURVIVORS ON THE AIR</div>
        <div className="h-sub" style={{ marginTop: 10, color: "var(--amber-mute)" }}>
          UPTIME · {data.server.uptime_days}d {data.server.uptime_hours}h {data.server.uptime_minutes}m
        </div>
      </div>

      <div className="panel bracketed">
        <div className="h-label">
          <span>▸ WEATHER</span>
          <span>{w.wind_dir ?? "—"}</span>
        </div>
        <div className="h-value">{w.temp_f != null ? `${w.temp_f}°F` : "—°F"}</div>
        <div className="h-sub">{w.condition}</div>
        <div className="h-sub" style={{ marginTop: 10, color: "var(--amber-mute)" }}>
          WIND {w.wind_mph != null ? `${w.wind_mph} MPH` : "—"} · HUM {w.humidity != null ? `${w.humidity}%` : "—"}
        </div>
      </div>

      <div className="panel bracketed">
        <div className="h-label">
          <span>▸ SIGNAL</span>
          <span>{data.server.ping_ms}ms</span>
        </div>
        <div className="h-value" style={{ fontSize: 28 }}>{data.server.version}</div>
        <div className="h-sub">BUILD · STABLE</div>
        <div className="h-sub" style={{ marginTop: 10, color: "var(--amber-mute)" }}>
          PATCH NOTES POSTED IN #ANNOUNCEMENTS
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Hero });