// 🤖 The shared masthead + status nav — ONE copy for all twelve dashboards.
// Each page ships two empty mounts and this include:
//   <header data-title="The prompt registry"></header>
//   <nav class="status-nav" aria-label="Status"></nav>
//   <script src="./status-nav.js"></script>
// and this script builds both, marking the current page from the URL. The
// pages drifted while each carried its own copy of this markup (stale nav
// lists, local h1 overrides quietly moving the masthead) — with one builder
// they can't. Styles live in status.css; same-origin like everything else on
// the status bucket, uploaded by deploy/status-publish.sh before the pages.
(function () {
  "use strict";
  var GROUPS = [
    ["Operations", [["index.html", "Fleet"], ["hardening.html", "Hardening"], ["security.html", "Security"]]],
    ["Money", [["books.html", "Income & Expenditure"], ["economics.html", "Economics"], ["funding.html", "Investing"]]],
    ["Ledgers", [["carbon.html", "Carbon"], ["contributors.html", "Contributors"], ["prompts.html", "Prompts"], ["ssh.html", "Access"], ["music.html", "Music"]]],
    ["Plan", [["roadmap.html", "Roadmap"], ["milestones.html", "Milestones"]]],
  ];
  var here = location.pathname.split("/").pop() || "index.html";

  var header = document.querySelector("header[data-title]");
  if (header) {
    var img = document.createElement("img");
    img.src = "./icon-192.png";
    img.alt = "";
    var box = document.createElement("div");
    var brand = document.createElement("p");
    brand.className = "brand";
    brand.textContent = "Eleven Messenger";
    var h1 = document.createElement("h1");
    h1.textContent = header.dataset.title;
    box.append(brand, h1);
    header.append(img, box);
  }

  var nav = document.querySelector("nav.status-nav");
  if (nav) {
    // The narrow-screen disclosure: CSS hides the groups (and shows this
    // button) under 640px; aria-expanded tracks the .open state.
    var toggle = document.createElement("button");
    toggle.type = "button";
    toggle.className = "menu-toggle";
    toggle.setAttribute("aria-expanded", "false");
    var glyph = document.createElement("span");
    glyph.className = "glyph";
    glyph.setAttribute("aria-hidden", "true");
    glyph.textContent = "☰";
    toggle.append(glyph, document.createTextNode("Menu"));
    toggle.addEventListener("click", function () {
      toggle.setAttribute("aria-expanded", String(nav.classList.toggle("open")));
    });
    nav.appendChild(toggle);
    for (var g = 0; g < GROUPS.length; g++) {
      var group = document.createElement("span");
      group.className = "group";
      var tag = document.createElement("span");
      tag.className = "group-label";
      tag.textContent = GROUPS[g][0];
      group.appendChild(tag);
      var pages = GROUPS[g][1];
      for (var p = 0; p < pages.length; p++) {
        var item;
        if (pages[p][0] === here) {
          item = document.createElement("span");
          item.setAttribute("aria-current", "page");
        } else {
          item = document.createElement("a");
          item.href = "./" + pages[p][0];
        }
        item.textContent = pages[p][1];
        group.appendChild(item);
      }
      nav.appendChild(group);
    }
  }
})();