document.addEventListener("DOMContentLoaded", function () {
  const modal = document.getElementById("story-modal");
  const content = document.getElementById("modal-content");
  const close = document.getElementById("close-modal");

  document.querySelectorAll(".open-modal").forEach((btn) => {
    btn.addEventListener("click", async function () {
      const url = this.getAttribute("data-story-url");

      try {
        const res = await fetch(url);
        const html = await res.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, "text/html");

        // Optional: target only the article content
        const article = doc.querySelector("article") || doc.body;
        content.innerHTML = article.innerHTML;

        modal.classList.add("show-story-modal");
      } catch (err) {
        content.innerHTML = "<p>Failed to load content.</p>";
        modal.classList.add("show-story-modal");
      }
    });
  });

  close.addEventListener("click", () => modal.classList.remove("show-story-modal"));
});