Implement image enlargement modal and enhance product detail functionality

- Replaced static quantity controls with a modal for image enlargement on product detail and catalog pages.
- Added event listeners for image clicks to trigger modal display with enlarged images.
- Updated product detail page to dynamically load images and descriptions, improving user experience.
- Refactored JavaScript to streamline image handling and modal interactions.
- Enhanced CSS for modal styling and transitions, ensuring a smooth user experience.

scripts/products.js

@@ -123,6 +123,11 @@ class ProductManager {
       .join("");
     this.updateResultsCount();
     this.updatePagination();
+
+    // Re-add image enlargement listeners after products are rendered
+    setTimeout(() => {
+      addImageEnlargementListeners();
+    }, 50);
   }
 
   // Create individual product card HTML
@@ -140,7 +145,8 @@ class ProductManager {
           <img
             src="${product.image}"
             alt="${product.alt}"
-            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer"
+            data-enlarge-src="${product.image}"
           />
           <!-- Hover Overlay -->
           <div class="absolute inset-0 bg-dark-charcoal bg-opacity-70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
@@ -454,7 +460,76 @@ class ProductManager {
 // Initialize product manager
 const productManager = new ProductManager();
 
+// Image enlargement modal functionality
+function addImageEnlargementListeners() {
+  const productImages = document.querySelectorAll(
+    "#product-grid img[data-enlarge-src]"
+  );
+  const modal = document.getElementById("image-modal");
+  const modalImage = document.getElementById("modal-image");
+  const modalCloseBtn = document.getElementById("modal-close-btn");
+
+  if (!modal || !modalImage || !modalCloseBtn) return;
+
+  productImages.forEach((img) => {
+    img.addEventListener("click", function (e) {
+      e.preventDefault(); // Prevent any default behavior
+      e.stopPropagation(); // Stop event bubbling to parent elements
+
+      const imageSrc = this.getAttribute("data-enlarge-src");
+      const imageAlt = this.getAttribute("alt");
+
+      modalImage.src = imageSrc;
+      modalImage.alt = imageAlt;
+
+      // Show modal with animation
+      modal.classList.remove("hidden");
+      document.body.style.overflow = "hidden"; // Prevent background scrolling
+
+      // Trigger animation after a brief delay
+      setTimeout(() => {
+        modalImage.classList.remove("scale-95");
+        modalImage.classList.add("scale-100");
+      }, 10);
+    });
+  });
+
+  // Close modal functionality
+  function closeModal() {
+    // Animate out
+    modalImage.classList.remove("scale-100");
+    modalImage.classList.add("scale-95");
+
+    // Hide modal after animation
+    setTimeout(() => {
+      modal.classList.add("hidden");
+      document.body.style.overflow = ""; // Restore scrolling
+    }, 300);
+  }
+
+  modalCloseBtn.addEventListener("click", closeModal);
+
+  // Close modal when clicking outside the image
+  modal.addEventListener("click", function (e) {
+    if (e.target === modal) {
+      closeModal();
+    }
+  });
+
+  // Close modal with Escape key
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" && !modal.classList.contains("hidden")) {
+      closeModal();
+    }
+  });
+}
+
 // Load products when DOM is ready
 document.addEventListener("DOMContentLoaded", () => {
   productManager.loadProducts();
+
+  // Add image enlargement listeners after products are loaded
+  setTimeout(() => {
+    addImageEnlargementListeners();
+  }, 100);
 });