// Get elements
const modal = document.getElementById("imgModal");
const modalImg = document.getElementById("modalImg");
const thumbnails = document.querySelectorAll(".gallery-img");

// 1. Click Thumbnail -> Open Modal
thumbnails.forEach(img => {
    img.addEventListener("click", () => {
        modal.style.display = "flex";
        modalImg.src = img.src;
        modalImg.classList.remove("zoomed"); // Reset zoom on new open
        console.log("Navi: Image expanded to screen.");
    });
});

// 2. Click Big Image -> Zoom In/Out
modalImg.addEventListener("click", (e) => {
    e.stopPropagation(); // Prevents modal from closing
    modalImg.classList.toggle("zoomed");
    console.log("Navi: Zoom toggled.");
});

// 3. Click Background -> Close Modal
modal.addEventListener("click", () => {
    modal.style.display = "none";
    modalImg.classList.remove("zoomed");
});

// 4. Press 'Esc' to Close
document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
        modal.style.display = "none";
    }
});