export async function loadEvents() {
  const body = document.getElementById("qm-body-events");
  if (!body) return;

  /* ================================
     CSS einmalig laden
  ================================ */
  if (!document.querySelector('link[href="/css/events.css"]')) {
    const link = document.createElement("link");
    link.rel  = "stylesheet";
    link.href = "/css/events.css";
    document.head.appendChild(link);
  }

  /* ================================
     Event-Daten (hier später befüllen)
  ================================ */
  const events = [
    { id: 1, img: "/images/items/runenhaufen.png", label: "Textzeile 1" },
    { id: 2, img: "/images/items/runenhaufen.png", label: "Textzeile 2" },
    { id: 3, img: "/images/items/runenhaufen.png", label: "Textzeile 3" },
    { id: 4, img: "/images/items/runenhaufen.png", label: "Textzeile 4" },
    { id: 5, img: "/images/items/runenhaufen.png", label: "Textzeile 5" },
  ];

  /* ================================
     Haupt-HTML injizieren
  ================================ */
  body.innerHTML = `
    <!-- 5er Event-Grid -->
    <div class="events-grid">
      ${events
        .map(
          (ev) => `
        <div class="event-card" data-event-id="${ev.id}">
          <div class="event-card-img-wrap">
            <img src="${ev.img}" alt="${ev.label}" draggable="false">
          </div>
          <span class="event-card-label">${ev.label}</span>
        </div>`
        )
        .join("")}
    </div>

    <!-- Detail-Popup -->
    <div id="event-detail-overlay">
      <div id="event-detail-popup">
        <button class="edp-close" id="edp-close-btn">✕</button>
        <img class="edp-img" id="edp-img" src="" alt="">
        <div class="edp-title" id="edp-title"></div>
        <div class="edp-body" id="edp-body">Inhalt folgt...</div>
      </div>
    </div>
  `;

  /* ================================
     Event-Karten klickbar machen
  ================================ */

  const overlay  = body.querySelector("#event-detail-overlay");
  const edpImg   = body.querySelector("#edp-img");
  const edpTitle = body.querySelector("#edp-title");
  const edpBody  = body.querySelector("#edp-body");

  body.querySelectorAll(".event-card").forEach((card) => {
    card.addEventListener("click", () => {
      const id = Number(card.dataset.eventId);
      const ev = events.find((e) => e.id === id);
      if (!ev) return;

      edpImg.src           = ev.img;
      edpImg.alt           = ev.label;
      edpTitle.textContent = ev.label;
      edpBody.textContent  = "Inhalt folgt..."; // hier später befüllen

      overlay.classList.add("active");
    });
  });

  /* Detail-Popup schließen */
  body.querySelector("#edp-close-btn").addEventListener("click", () => {
    overlay.classList.remove("active");
  });

  overlay.addEventListener("click", (e) => {
    if (e.target === overlay) overlay.classList.remove("active");
  });

  document.addEventListener("keydown", function edpEsc(e) {
    if (e.key === "Escape") overlay.classList.remove("active");
  });
}