export function renderHeader(state) {
  const overview = state.overview || {};
  const status = overview.overall_status || "offline";

  const dot = document.getElementById("overall-dot");
  if (dot) {
    dot.style.background = status === "online" ? "var(--teal)" : status === "degraded" ? "var(--yellow)" : "var(--red)";
    dot.style.boxShadow = status === "online" ? "0 0 8px var(--teal-glow)" : "";
  }

  const txt = document.getElementById("overall-status-text");
  if (txt) txt.textContent = status.toUpperCase();

  const upd = document.getElementById("last-updated");
  if (upd && overview.generated_at) {
    const d = new Date(overview.generated_at);
    const pad = n => String(n).padStart(2, "0");
    upd.textContent = `updated ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
  }
}