function renderSitemap() {
  if (typeof sites === "undefined") return;

  var projectContainer = document.getElementById("project-cards");
  if (projectContainer) {
    projectContainer.innerHTML = sites.projects.map(function (s) {
      var subLink = "";
      if (s.subLinks && s.subLinks.length > 0) {
        subLink = s.subLinks.map(function (sl) {
          return '<a href="' + sl.url + '" class="site-card-sublink" target="_blank" rel="noopener">' + sl.label + ' ↗</a>';
        }).join("");
      }

      return (
        '<div class="site-card-wrapper">' +
          '<a href="' + s.url + '" class="site-card" target="_blank" rel="noopener">' +
            '<div class="site-card-icon">' + s.icon + "</div>" +
            '<div class="site-card-name">' + s.name + "</div>" +
            '<div class="site-card-desc">' + s.description + "</div>" +
          "</a>" +
          subLink +
        "</div>"
      );
    }).join("");
  }

  var infraContainer = document.getElementById("infra-cards");
  if (infraContainer) {
    infraContainer.innerHTML = sites.infra.map(function (s) {
      return (
        '<a href="' + s.url + '" class="infra-card" target="_blank" rel="noopener">' +
          '<div class="infra-card-icon">' + s.icon + "</div>" +
          '<div class="infra-card-name">' + s.name + "</div>" +
          '<div class="infra-card-desc">' + s.description + "</div>" +
        "</a>"
      );
    }).join("");
  }
}

document.addEventListener("DOMContentLoaded", function () {
  renderSitemap();
});