// Accordion toggle functionality
document.querySelectorAll(".accordion").forEach(accordion => {
  accordion.querySelectorAll(".card-header").forEach(header => {
    header.addEventListener("click", function () {
      const currentCard = this.parentElement;
      const isExpanded = this.getAttribute("aria-expanded") === "true";

      // Close all other cards inside this accordion
      accordion.querySelectorAll(".card").forEach(card => {
        const cardHeader = card.querySelector(".card-header");
        const cardBody = card.querySelector(".card-body");
        const arrow = card.querySelector(".arrow");

        if (cardHeader) {
          cardHeader.setAttribute("aria-expanded", "false");
        }
        if (cardBody) {
          cardBody.style.display = "none";
        }
        if (arrow) {
          arrow.textContent = "+";
        }
      });

      // Toggle current card
      if (!isExpanded) {
        this.setAttribute("aria-expanded", "true");
        currentCard.querySelector(".card-body").style.display = "block";
        currentCard.querySelector(".arrow").textContent = "-";
      }
    });
  });
});

// imageHandler
  document.addEventListener("DOMContentLoaded", async function () {
    const img = document.getElementById("hero-image");
    if (!img) return;

    const filename = img.dataset.filename;
    const isProtected = parseInt(img.dataset.isprotected || "0", 10);

    if (!filename) {
      img.src = "#";
      return;
    }

    try {
      await window.ImageHandler.displayImageSecurely(filename, img.id, isProtected);
    } catch (error) {
      img.src = "#";
    }
  });