export function renderServices(state) {
  const services = state.services || {};
  const summary = services.summary || {};

  const set = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };

  set("svc-online", summary.online ?? "—");
  set("svc-degraded", summary.degraded ?? "—");
  set("svc-offline", summary.offline ?? "—");
  set("svc-total", summary.total ?? "—");

  const pill = document.getElementById("services-pill");
  if (pill) {
    const s = summary.overall_status || "offline";
    pill.textContent = s.toUpperCase();
    pill.className = "status-pill " + (s === "online" ? "pill-online" : s === "degraded" ? "pill-degraded" : "pill-offline");
  }

  // Colour counts
  const degEl = document.getElementById("svc-degraded");
  if (degEl) degEl.className = "stat-num" + ((summary.degraded ?? 0) > 0 ? " warn" : "");
  const offEl = document.getElementById("svc-offline");
  if (offEl) offEl.className = "stat-num" + ((summary.offline ?? 0) > 0 ? " danger" : "");
}