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

  /* ================================
     Event-Daten (hier später befüllen)
  ================================ */
  const events = [
    {
      id: 1,
      img: "/images/items/runenhaufen.png",
      label: "Werfe heute deine Runen",
    },
    {
      id: 2,
      img: "/images/items/runenhaufen.png",
      label: "Spiele heute ein 1v1",
    },
    {
      id: 3,
      img: "/images/items/runenhaufen.png",
      label: "Spiele heute ein 2v2",
    },
    {
      id: 4,
      img: "/images/items/runenhaufen.png",
      label: "Spende ein wenig Holz.",
    },
    {
      id: 5,
      img: "/images/items/runenhaufen.png",
      label: "Spende ein wenig Gold.",
    },
  ];

  /* ================================
     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");
  });
}