document.addEventListener("DOMContentLoaded", () => {
  fetch("/data/werke.json")
    .then(r => {
      if (!r.ok) throw new Error("werke.json nicht ladbar");
      return r.json();
    })
    .then(werke => {
      const grid = document.getElementById("chronologischGrid");
      if (!grid) return;

      werke
        .filter(w => Array.isArray(w.kategorien) && w.kategorien.includes("chronologisch"))
        .forEach(w => {
          if (!w.images?.thumb?.sw || !w.images?.thumb?.color) return;

          const a = document.createElement("a");
          a.className = "work-item";
          a.href = `werk.html?id=${w.id}`;

          const img = document.createElement("img");
          img.src = w.images.thumb.sw;
          img.dataset.color = w.images.thumb.color;

          img.addEventListener("mouseenter", () => {
            img.src = img.dataset.color;
          });
          img.addEventListener("mouseleave", () => {
            img.src = w.images.thumb.sw;
          });

          a.appendChild(img);
          grid.appendChild(a);
        });
    })
    .catch(err => console.error(err));
});