function renderProjects() {
  const container = document.getElementById("project-list");
  if (!container || typeof projects === "undefined") return;

  container.innerHTML = projects.map(function (p) {
    var tags = p.tags.map(function (t) {
      return '<span class="project-card-tag">' + t + "</span>";
    }).join("");

    var links = "";
    if (p.links && p.links.length > 0) {
      links = '<div class="project-card-links">' +
        p.links.map(function (l) {
          return '<a href="' + l.url + '" class="btn btn-sm" target="_blank" rel="noopener">' + l.label + '</a>';
        }).join("") +
      "</div>";
    }

    return (
      '<div class="project-card">' +
        '<div class="project-card-header">' +
          '<span class="project-card-name">' + p.name + "</span>" +
          '<span class="project-card-category">' + p.category + "</span>" +
        "</div>" +
        (p.period ? '<span class="project-card-period">' + p.period + '</span>' : '') +
        '<p class="project-card-desc">' + p.description + "</p>" +
        '<div class="project-card-tags">' + tags + "</div>" +
        links +
      "</div>"
    );
  }).join("");
}

function setupNavHighlight() {
  var links = document.querySelectorAll(".nav-link[href^='#']");
  var sections = [];

  links.forEach(function (link) {
    var id = link.getAttribute("href").slice(1);
    var el = document.getElementById(id);
    if (el) sections.push({ el: el, link: link });
  });

  if (sections.length === 0) return;

  window.addEventListener("scroll", function () {
    var scrollY = window.scrollY + 80;

    var current = sections[0];
    for (var i = 0; i < sections.length; i++) {
      if (sections[i].el.offsetTop <= scrollY) {
        current = sections[i];
      }
    }

    links.forEach(function (l) { l.classList.remove("active"); });
    current.link.classList.add("active");
  });
}

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