@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/components/addOns/functional/ImageDescCarousel.tsx

@@ -1,731 +1,731 @@
-// src/components/addOns/functional/ImageDescCarousel.tsx
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import {
-  ActionButton,
-  EditIconButton,
-  TrashIconButton,
-  CloseButton,
-  SubmitButton,
-  CancelButton,
-  NextButton,
-  PrevButton,
-  FilterButton,
-  DeleteButton,
-} from "@/components/other/button";
-import { Card } from "@/components/other/card";
-import Image from "next/image";
-import { Upload, ChevronRight, X, ChevronLeft } from "lucide-react";
-import { motion, useScroll, useTransform } from "framer-motion";
-import { useAuth, useUser } from "@clerk/nextjs";
-import { StrapiUser, UploadedImage, Category } from "@/components/types";
-
-interface ImageDescCarouselProps {
-  user: StrapiUser | null;
-  uploadedImages: UploadedImage[];
-  setUploadedImages: (images: UploadedImage[]) => void;
-  error: string | null;
-  setError: (error: string | null) => void;
-  isLoading: boolean;
-  setIsLoading: (isLoading: boolean) => void;
-  handleImageUpload: (
-    e: React.FormEvent<HTMLFormElement>,
-    file: File | null,
-    title: string,
-    description: string,
-    category: Category
-  ) => Promise<void>;
-  handleDeleteImage: (documentId: string) => Promise<void>;
-}
-
-const Slideshow = ({
-  images,
-  altPrefix,
-  currentSlide,
-  setCurrentSlide,
-  isAdmin,
-  handleImageClick,
-  handleEditImage,
-  handleDeleteImage,
-}: {
-  images: UploadedImage[];
-  altPrefix: string;
-  currentSlide: number;
-  setCurrentSlide: React.Dispatch<React.SetStateAction<number>>;
-  isAdmin: boolean;
-  handleImageClick: (image: UploadedImage) => void;
-  handleEditImage: (image: UploadedImage) => void;
-  handleDeleteImage: (documentId: string) => void;
-}) => {
-  const slideshowRef = useRef<HTMLDivElement>(null);
-
-  const goToPrev = () => setCurrentSlide((prev) => (prev - 1 + images.length) % images.length);
-  const goToNext = () => setCurrentSlide((prev) => (prev + 1) % images.length);
-
-  if (!images.length || !images[currentSlide]) {
-    return (
-      <Card
-        className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-3xl overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl w-full mx-auto max-w-3xl md:max-w-none md:mx-0 flex items-center justify-center supports-[not(backdrop-filter:blur(10px))]:bg-white/20"
-        ref={slideshowRef}
-      >
-        <p className="text-gray-600 text-lg">No images available</p>
-      </Card>
-    );
-  }
-
-  return (
-    <div
-      className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-3xl overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl w-full mx-auto max-w-3xl md:max-w-none md:mx-0 supports-[not(backdrop-filter:blur(10px))]:bg-white/20"
-      ref={slideshowRef}
-    >
-      <div
-        className="relative w-full h-full cursor-pointer"
-        onClick={() => handleImageClick(images[currentSlide])}
-      >
-        <Image
-          src={images[currentSlide].url}
-          alt={
-            images[currentSlide].title?.trim() &&
-            !images[currentSlide].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
-              ? images[currentSlide].title
-              : altPrefix
-          }
-          fill
-          className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
-          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
-          loading="lazy"
-          quality={85}
-        />
-        {isAdmin && (
-          <div className="absolute top-2 right-2 flex space-x-2 opacity-0 hover:opacity-100 transition-opacity duration-500">
-            <EditIconButton
-              onClick={(e) => {
-                e.stopPropagation();
-                handleEditImage(images[currentSlide]);
-              }}
-            />
-            <TrashIconButton
-              onClick={(e) => {
-                e.stopPropagation();
-                handleDeleteImage(images[currentSlide].documentId);
-              }}
-            />
-          </div>
-        )}
-      </div>
-      {images.length > 1 && (
-        <>
-          <PrevButton
-            onClick={(e) => {
-              e.stopPropagation();
-              goToPrev();
-            }}
-          />
-          <NextButton
-            onClick={(e) => {
-              e.stopPropagation();
-              goToNext();
-            }}
-          />
-        </>
-      )}
-    </div>
-  );
-};
-
-export function ImageDescCarousel({
-  user,
-  uploadedImages,
-  setUploadedImages,
-  error,
-  setError,
-  isLoading,
-  setIsLoading,
-  handleImageUpload,
-  handleDeleteImage,
-}: ImageDescCarouselProps) {
-  const { isSignedIn } = useUser();
-  const { getToken } = useAuth();
-  const [activeTab, setActiveTab] = useState<Category>("indoor");
-  const [currentSlide, setCurrentSlide] = useState(0);
-  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
-  const [documentIdToDelete, setDocumentIdToDelete] = useState<string | null>(null);
-  const [selectedImage, setSelectedImage] = useState<UploadedImage | null>(null);
-  const [uploadForm, setUploadForm] = useState<{
-    file: File | null;
-    title: string;
-    description: string;
-    category: Category;
-  }>({ file: null, title: "", description: "", category: "indoor" });
-  const [editForm, setEditForm] = useState<{
-    id: number;
-    documentId: string;
-    title: string;
-    description: string;
-    category: Category;
-    file: File | null;
-  }>({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const { scrollYProgress } = useScroll({
-    target: containerRef,
-    offset: ["start end", "end start"],
-  });
-  const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
-
-  useEffect(() => {
-    const isAnyModalOpen = isUploadModalOpen || isEditModalOpen || isConfirmDeleteOpen || !!selectedImage;
-    if (isAnyModalOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    window.dispatchEvent(
-      new CustomEvent("modalStateChange", { detail: { isOpen: isAnyModalOpen } })
-    );
-
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [isUploadModalOpen, isEditModalOpen, isConfirmDeleteOpen, selectedImage]);
-
-  const filteredImages = uploadedImages.filter(
-    (img) => (img.category || "none") === activeTab
-  );
-
-  const handleImageClick = (image: UploadedImage) => {
-    setSelectedImage(image);
-  };
-
-  const handleCloseModal = () => {
-    setSelectedImage(null);
-  };
-
-  const openEditModal = (image: UploadedImage) => {
-    if (!isAdmin) {
-      setError("Unauthorized: Only admins can edit images");
-      return;
-    }
-    setEditForm({
-      id: image.id,
-      documentId: image.documentId,
-      title: image.title?.trim() && !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ? image.title : "",
-      description: image.description || "",
-      category: image.category && image.category !== "none" ? image.category : "indoor",
-      file: null,
-    });
-    setIsEditModalOpen(true);
-  };
-
-  const handleCloseEditModal = () => {
-    setIsEditModalOpen(false);
-    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
-  };
-
-  const handleCloseUploadModal = () => {
-    setIsUploadModalOpen(false);
-    setUploadForm({ file: null, title: "", description: "", category: "indoor" });
-  };
-
-  const openConfirmDelete = (documentId: string) => {
-    if (!isAdmin) {
-      setError("Unauthorized: Only admins can delete images");
-      return;
-    }
-    setDocumentIdToDelete(documentId);
-    setIsConfirmDeleteOpen(true);
-  };
-
-  const handleConfirmDelete = async () => {
-    if (!isAdmin) {
-      setError("Unauthorized: Only admins can delete images");
-      setIsConfirmDeleteOpen(false);
-      return;
-    }
-    if (documentIdToDelete !== null) {
-      setIsLoading(true);
-      try {
-        await handleDeleteImage(documentIdToDelete);
-      } finally {
-        setIsLoading(false);
-        setIsConfirmDeleteOpen(false);
-        setDocumentIdToDelete(null);
-      }
-    }
-  };
-
-  const handleCancelDelete = () => {
-    setIsConfirmDeleteOpen(false);
-    setDocumentIdToDelete(null);
-  };
-
-  const handleEditImage = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (!isAdmin) {
-      console.error("ImageDescCarousel: Unauthorized edit attempt", {
-        isSignedIn,
-        businessAdminId: user?.businessAdminId,
-      });
-      setError("Unauthorized: Only admins can edit images");
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-      setIsSubmitting(true);
-      const token = await getToken();
-      if (!token) {
-        console.error("ImageDescCarousel: No authentication token available");
-        setError("Authentication error: Please log in again");
-        return;
-      }
-
-      const formData = new FormData();
-      formData.append("documentId", editForm.documentId);
-      formData.append("title", editForm.title || `Image ${new Date().toISOString()}`);
-      formData.append("description", editForm.description || "");
-      formData.append("category", editForm.category);
-      if (editForm.file) {
-        formData.append("file", editForm.file);
-      }
-
-      const response = await fetch("/api/gallery-data", {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        console.error("ImageDescCarousel: Edit failed", { status: response.status, errorData });
-        if (response.status === 401) {
-          setError("Authentication error: Please log in again");
-          return;
-        }
-        throw new Error(errorData.error || `Failed to edit image (Status: ${response.status})`);
-      }
-
-      const { data } = await response.json();
-      setUploadedImages(data || []);
-      setError(null);
-      setIsEditModalOpen(false);
-      setEditForm({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
-    } catch (err) {
-      console.error("ImageDescCarousel: Edit Error", err);
-      setError(err instanceof Error ? err.message : "Failed to edit image");
-    } finally {
-      setIsLoading(false);
-      setIsSubmitting(false);
-    }
-  };
-
-  const sectionVariants = {
-    hidden: { opacity: 0 },
-    visible: {
-      opacity: 1,
-      transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 },
-    },
-  };
-
-  const modalVariants = {
-    hidden: { opacity: 0, y: "100vh" },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
-    exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
-  };
-
-  return (
-    <div className="w-full">
-      {/* Gallery Section */}
-      <motion.section
-        variants={sectionVariants}
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true }}
-        className="relative py-12 sm:py-16 lg:pb-24 w-full bg-gray-50/50 backdrop-blur-sm"
-        ref={containerRef}
-        style={{ y: parallaxY }}
-      >
-        <div className="relative z-10 w-full px-4 sm:px-6 lg:px-8">
-          {error && <p className="text-red-600 text-lg text-center mb-8">{error}</p>}
-          {user && !isAdmin && (
-            <p className="text-yellow-600 text-lg text-center mb-8">
-              You are logged in but do not have admin privileges.
-            </p>
-          )}
-          {isAdmin && (
-            <div className="flex justify-center mb-12">
-              <ActionButton
-                onClick={() => setIsUploadModalOpen(true)}
-                className="flex items-center"
-                disabled={isLoading || isSubmitting}
-              >
-                <Upload className="mr-2 h-4 w-4" />
-                Upload New Image
-              </ActionButton>
-            </div>
-          )}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-12 items-start">
-            <div className="h-auto min-h-[600px] bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl p-6 sm:p-8 lg:p-10 rounded-3xl flex flex-col space-y-4 sm:space-y-6 order-2 max-w-3xl mx-auto md:max-w-none md:mx-0 md:order-1 supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
-              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900">
-                {filteredImages[currentSlide]?.title?.trim() &&
-                !filteredImages[currentSlide]?.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
-                  ? filteredImages[currentSlide].title
-                  : "Image Gallery"}
-              </h2>
-              <div className="text-sm sm:text-base lg:text-lg text-gray-700">
-                {filteredImages.length > 0 && currentSlide >= 0 && currentSlide < filteredImages.length ? (
-                  (filteredImages[currentSlide].description || "")
-                    .split("\n")
-                    .filter((paragraph) => paragraph.trim() !== "")
-                    .map((paragraph, index) => (
-                      <p key={index} className="mb-4">
-                        {paragraph}
-                      </p>
-                    )) || <p className="mb-4">No description available.</p>
-                ) : (
-                  <p className="mb-4">No description available.</p>
-                )}
-              </div>
-            </div>
-            <div className="order-1 md:order-2">
-              <Slideshow
-                images={filteredImages}
-                altPrefix="Image Gallery"
-                currentSlide={currentSlide}
-                setCurrentSlide={setCurrentSlide}
-                isAdmin={isAdmin}
-                handleImageClick={handleImageClick}
-                handleEditImage={openEditModal}
-                handleDeleteImage={openConfirmDelete}
-              />
-              <div className="flex flex-wrap justify-center gap-2 sm:gap-4 mt-6 z-20">
-                {["indoor", "outdoor", "commercial"].map((tab) => (
-                  <FilterButton
-                    key={tab}
-                    isActive={activeTab === tab}
-                    onClick={() => {
-                      setActiveTab(tab as Category);
-                      setCurrentSlide(0);
-                    }}
-                  >
-                    {tab.charAt(0).toUpperCase() + tab.slice(1)}
-                  </FilterButton>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </motion.section>
-
-      {/* Upload Modal */}
-      {isAdmin && isUploadModalOpen && (
-        <motion.div
-          variants={modalVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
-          onClick={handleCloseUploadModal}
-          aria-modal="true"
-          role="dialog"
-        >
-          <div
-            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <CloseButton onClick={handleCloseUploadModal}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8" />
-            </CloseButton>
-            <h3 className="text-xl font-bold text-white mb-4">Upload Image</h3>
-            <form
-              onSubmit={(e) => {
-                setIsSubmitting(true);
-                handleImageUpload(e, uploadForm.file, uploadForm.title, uploadForm.description, uploadForm.category).then(() => {
-                  handleCloseUploadModal();
-                  setIsSubmitting(false);
-                });
-              }}
-              className="space-y-4"
-            >
-              <div>
-                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
-                  Choose Image
-                </label>
-                <input
-                  type="file"
-                  accept="image/jpeg,image/png,image/gif"
-                  onChange={(e) => setUploadForm({ ...uploadForm, file: e.target.files?.[0] || null })}
-                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
-                  id="image-upload"
-                  disabled={isSubmitting}
-                />
-                {uploadForm.file && (
-                  <p className="mt-2 text-gray-300 text-sm max-[320px]:text-xs">Selected: {uploadForm.file.name}</p>
-                )}
-              </div>
-              <div>
-                <label htmlFor="image-title" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
-                  Image Title (optional)
-                </label>
-                <input
-                  id="image-title"
-                  value={uploadForm.title}
-                  onChange={(e) => setUploadForm({ ...uploadForm, title: e.target.value })}
-                  placeholder="Enter image title"
-                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
-                  disabled={isSubmitting}
-                />
-              </div>
-              <div>
-                <label htmlFor="image-description" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
-                  Image Description (optional)
-                </label>
-                <textarea
-                  id="image-description"
-                  value={uploadForm.description}
-                  onChange={(e) => setUploadForm({ ...uploadForm, description: e.target.value })}
-                  placeholder="Enter image description"
-                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px] max-[768px]:text-sm max-[768px]:min-h-[80px] max-[320px]:text-xs max-[320px]:p-2"
-                  disabled={isSubmitting}
-                />
-              </div>
-              <div>
-                <label htmlFor="image-category" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
-                  Category
-                </label>
-                <select
-                  id="image-category"
-                  value={uploadForm.category}
-                  onChange={(e) =>
-                    setUploadForm({
-                      ...uploadForm,
-                      category: e.target.value as Category,
-                    })
-                  }
-                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
-                  disabled={isSubmitting}
-                >
-                  <option value="indoor">Indoor</option>
-                  <option value="outdoor">Outdoor</option>
-                  <option value="commercial">Commercial</option>
-                  {/* Add project-specific categories, e.g.:
-                  <option value="landscape-boulders">Landscape Boulders</option>
-                  */}
-                </select>
-              </div>
-              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
-                <SubmitButton type="submit" disabled={isSubmitting || !uploadForm.file}>
-                  {isSubmitting ? "Uploading..." : "Upload"}
-                </SubmitButton>
-                <CancelButton onClick={handleCloseUploadModal} disabled={isSubmitting} />
-              </div>
-              {error && <p className="text-red-400 text-sm font-medium max-[320px]:text-xs">{error}</p>}
-            </form>
-          </div>
-        </motion.div>
-      )}
-
-      {/* Edit Modal */}
-      {isAdmin && isEditModalOpen && (
-        <motion.div
-          variants={modalVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
-          onClick={handleCloseEditModal}
-          aria-modal="true"
-          role="dialog"
-        >
-          <div
-            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <CloseButton onClick={handleCloseEditModal}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8" />
-            </CloseButton>
-            <h3 className="text-xl font-bold text-white mb-4">Edit Image</h3>
-            <form
-              onSubmit={handleEditImage}
-              className="space-y-4"
-            >
-              <div>
-                <label htmlFor="edit-image" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
-                  Replace Image (optional)
-                </label>
-                <input
-                  id="edit-image"
-                  type="file"
-                  accept="image/jpeg,image/png,image/gif"
-                  onChange={(e) => setEditForm({ ...editForm, file: e.target.files?.[0] || null })}
-                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
-                  disabled={isSubmitting}
-                />
-                {editForm.file && (
-                  <p className="mt-2 text-gray-300 text-sm max-[320px]:text-xs">Selected: {editForm.file.name}</p>
-                )}
-              </div>
-              <div>
-                <label htmlFor="edit-title" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
-                  Image Title (optional)
-                </label>
-                <input
-                  id="edit-title"
-                  value={editForm.title}
-                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
-                  placeholder="Enter image title"
-                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
-                  disabled={isSubmitting}
-                />
-              </div>
-              <div>
-                <label htmlFor="edit-description" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
-                  Image Description (optional)
-                </label>
-                <textarea
-                  id="edit-description"
-                  value={editForm.description}
-                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
-                  placeholder="Enter image description"
-                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px] max-[768px]:text-sm max-[768px]:min-h-[80px] max-[320px]:text-xs max-[320px]:p-2"
-                  disabled={isSubmitting}
-                />
-              </div>
-              <div>
-                <label htmlFor="edit-category" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
-                  Category
-                </label>
-                <select
-                  id="edit-category"
-                  value={editForm.category}
-                  onChange={(e) =>
-                    setEditForm({
-                      ...editForm,
-                      category: e.target.value as Category,
-                    })
-                  }
-                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
-                  disabled={isSubmitting}
-                >
-                  <option value="indoor">Indoor</option>
-                  <option value="outdoor">Outdoor</option>
-                  <option value="commercial">Commercial</option>
-                  {/* Add project-specific categories, e.g.:
-                  <option value="landscape-boulders">Landscape Boulders</option>
-                  */}
-                </select>
-              </div>
-              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
-                <SubmitButton type="submit" disabled={isSubmitting}>
-                  {isSubmitting ? "Saving..." : "Save"}
-                </SubmitButton>
-                <CancelButton onClick={handleCloseEditModal} disabled={isSubmitting} />
-              </div>
-              {error && <p className="text-red-400 text-sm font-medium max-[320px]:text-xs">{error}</p>}
-            </form>
-          </div>
-        </motion.div>
-      )}
-
-      {/* Delete Confirmation Modal */}
-      {isAdmin && isConfirmDeleteOpen && (
-        <motion.div
-          variants={modalVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
-          onClick={handleCancelDelete}
-          aria-modal="true"
-          role="dialog"
-        >
-          <div
-            className="relative max-w-sm w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <CloseButton onClick={handleCancelDelete}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8" />
-            </CloseButton>
-            <h3 className="text-xl font-bold text-white mb-4">Confirm Deletion</h3>
-            <p className="text-gray-300 mb-6">Are you sure you want to delete this image?</p>
-            <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
-              <DeleteButton
-                onClick={handleConfirmDelete}
-                disabled={isSubmitting}
-              >
-                {isSubmitting ? "Deleting..." : "Delete"}
-              </DeleteButton>
-              <CancelButton onClick={handleCancelDelete} disabled={isSubmitting} />
-            </div>
-          </div>
-        </motion.div>
-      )}
-
-      {/* View Image Modal */}
-      {selectedImage && (
-        <motion.div
-          variants={modalVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10001] p-2 sm:p-4 isolate"
-          onClick={handleCloseModal}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="modal-image"
-        >
-          <div
-            className="relative max-w-5xl w-full mx-2 sm:mx-4 max-h-[90vh] bg-gray-800/50 border border-gray-700/50 rounded-2xl shadow-lg overflow-hidden"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <CloseButton
-              variant="close-form"
-              onClick={handleCloseModal}
-            >
-              <X className="h-6 w-6 sm:h-8 sm:w-8" />
-            </CloseButton>
-            <div className="relative w-full h-[70vh] sm:h-[80vh]">
-              <Image
-                src={selectedImage.url}
-                alt={
-                  selectedImage.title?.trim() &&
-                  !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
-                    ? selectedImage.title
-                    : "Gallery image"
-                }
-                fill
-                className="object-contain rounded-2xl"
-                quality={85}
-              />
-              {(selectedImage.title?.trim() &&
-                !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
-                selectedImage.description) && (
-                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 sm:p-4">
-                  {selectedImage.title?.trim() &&
-                    !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (
-                      <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white drop-shadow-lg">
-                        {selectedImage.title}
-                      </h3>
-                    )}
-                  {selectedImage.description && (
-                    <p className="text-xs sm:text-sm md:text-base text-gray-200 drop-shadow-md line-clamp-2">
-                      {selectedImage.description}
-                    </p>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </motion.div>
-      )}
-    </div>
-  );
+// src/components/addOns/functional/ImageDescCarousel.tsx
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import {
+  ActionButton,
+  EditIconButton,
+  TrashIconButton,
+  CloseButton,
+  SubmitButton,
+  CancelButton,
+  NextButton,
+  PrevButton,
+  FilterButton,
+  DeleteButton,
+} from "@/components/other/button";
+import { Card } from "@/components/other/card";
+import Image from "next/image";
+import { Upload, ChevronRight, X, ChevronLeft } from "lucide-react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { StrapiUser, UploadedImage, Category } from "@/components/types";
+
+interface ImageDescCarouselProps {
+  user: StrapiUser | null;
+  uploadedImages: UploadedImage[];
+  setUploadedImages: (images: UploadedImage[]) => void;
+  error: string | null;
+  setError: (error: string | null) => void;
+  isLoading: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+  handleImageUpload: (
+    e: React.FormEvent<HTMLFormElement>,
+    file: File | null,
+    title: string,
+    description: string,
+    category: Category
+  ) => Promise<void>;
+  handleDeleteImage: (documentId: string) => Promise<void>;
+}
+
+const Slideshow = ({
+  images,
+  altPrefix,
+  currentSlide,
+  setCurrentSlide,
+  isAdmin,
+  handleImageClick,
+  handleEditImage,
+  handleDeleteImage,
+}: {
+  images: UploadedImage[];
+  altPrefix: string;
+  currentSlide: number;
+  setCurrentSlide: React.Dispatch<React.SetStateAction<number>>;
+  isAdmin: boolean;
+  handleImageClick: (image: UploadedImage) => void;
+  handleEditImage: (image: UploadedImage) => void;
+  handleDeleteImage: (documentId: string) => void;
+}) => {
+  const slideshowRef = useRef<HTMLDivElement>(null);
+
+  const goToPrev = () => setCurrentSlide((prev) => (prev - 1 + images.length) % images.length);
+  const goToNext = () => setCurrentSlide((prev) => (prev + 1) % images.length);
+
+  if (!images.length || !images[currentSlide]) {
+    return (
+      <Card
+        className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-3xl overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl w-full mx-auto max-w-3xl md:max-w-none md:mx-0 flex items-center justify-center supports-[not(backdrop-filter:blur(10px))]:bg-white/20"
+        ref={slideshowRef}
+      >
+        <p className="text-gray-600 text-lg">No images available</p>
+      </Card>
+    );
+  }
+
+  return (
+    <div
+      className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-3xl overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl w-full mx-auto max-w-3xl md:max-w-none md:mx-0 supports-[not(backdrop-filter:blur(10px))]:bg-white/20"
+      ref={slideshowRef}
+    >
+      <div
+        className="relative w-full h-full cursor-pointer"
+        onClick={() => handleImageClick(images[currentSlide])}
+      >
+        <Image
+          src={images[currentSlide].url}
+          alt={
+            images[currentSlide].title?.trim() &&
+            !images[currentSlide].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+              ? images[currentSlide].title
+              : altPrefix
+          }
+          fill
+          className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
+          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+          loading="lazy"
+          quality={85}
+        />
+        {isAdmin && (
+          <div className="absolute top-2 right-2 flex space-x-2 opacity-0 hover:opacity-100 transition-opacity duration-500">
+            <EditIconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                handleEditImage(images[currentSlide]);
+              }}
+            />
+            <TrashIconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDeleteImage(images[currentSlide].documentId);
+              }}
+            />
+          </div>
+        )}
+      </div>
+      {images.length > 1 && (
+        <>
+          <PrevButton
+            onClick={(e) => {
+              e.stopPropagation();
+              goToPrev();
+            }}
+          />
+          <NextButton
+            onClick={(e) => {
+              e.stopPropagation();
+              goToNext();
+            }}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export function ImageDescCarousel({
+  user,
+  uploadedImages,
+  setUploadedImages,
+  error,
+  setError,
+  isLoading,
+  setIsLoading,
+  handleImageUpload,
+  handleDeleteImage,
+}: ImageDescCarouselProps) {
+  const { isSignedIn } = useUser();
+  const { getToken } = useAuth();
+  const [activeTab, setActiveTab] = useState<Category>("indoor");
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [documentIdToDelete, setDocumentIdToDelete] = useState<string | null>(null);
+  const [selectedImage, setSelectedImage] = useState<UploadedImage | null>(null);
+  const [uploadForm, setUploadForm] = useState<{
+    file: File | null;
+    title: string;
+    description: string;
+    category: Category;
+  }>({ file: null, title: "", description: "", category: "indoor" });
+  const [editForm, setEditForm] = useState<{
+    id: number;
+    documentId: string;
+    title: string;
+    description: string;
+    category: Category;
+    file: File | null;
+  }>({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end start"],
+  });
+  const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId || false;
+
+  useEffect(() => {
+    const isAnyModalOpen = isUploadModalOpen || isEditModalOpen || isConfirmDeleteOpen || !!selectedImage;
+    if (isAnyModalOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    window.dispatchEvent(
+      new CustomEvent("modalStateChange", { detail: { isOpen: isAnyModalOpen } })
+    );
+
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isUploadModalOpen, isEditModalOpen, isConfirmDeleteOpen, selectedImage]);
+
+  const filteredImages = uploadedImages.filter(
+    (img) => (img.category || "none") === activeTab
+  );
+
+  const handleImageClick = (image: UploadedImage) => {
+    setSelectedImage(image);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedImage(null);
+  };
+
+  const openEditModal = (image: UploadedImage) => {
+    if (!isAdmin) {
+      setError("Unauthorized: Only admins can edit images");
+      return;
+    }
+    setEditForm({
+      id: image.id,
+      documentId: image.documentId,
+      title: image.title?.trim() && !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ? image.title : "",
+      description: image.description || "",
+      category: image.category && image.category !== "none" ? image.category : "indoor",
+      file: null,
+    });
+    setIsEditModalOpen(true);
+  };
+
+  const handleCloseEditModal = () => {
+    setIsEditModalOpen(false);
+    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
+  };
+
+  const handleCloseUploadModal = () => {
+    setIsUploadModalOpen(false);
+    setUploadForm({ file: null, title: "", description: "", category: "indoor" });
+  };
+
+  const openConfirmDelete = (documentId: string) => {
+    if (!isAdmin) {
+      setError("Unauthorized: Only admins can delete images");
+      return;
+    }
+    setDocumentIdToDelete(documentId);
+    setIsConfirmDeleteOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!isAdmin) {
+      setError("Unauthorized: Only admins can delete images");
+      setIsConfirmDeleteOpen(false);
+      return;
+    }
+    if (documentIdToDelete !== null) {
+      setIsLoading(true);
+      try {
+        await handleDeleteImage(documentIdToDelete);
+      } finally {
+        setIsLoading(false);
+        setIsConfirmDeleteOpen(false);
+        setDocumentIdToDelete(null);
+      }
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setIsConfirmDeleteOpen(false);
+    setDocumentIdToDelete(null);
+  };
+
+  const handleEditImage = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!isAdmin) {
+      console.error("ImageDescCarousel: Unauthorized edit attempt", {
+        isSignedIn,
+        businessAdminId: user?.businessAdminId,
+      });
+      setError("Unauthorized: Only admins can edit images");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      setIsSubmitting(true);
+      const token = await getToken();
+      if (!token) {
+        console.error("ImageDescCarousel: No authentication token available");
+        setError("Authentication error: Please log in again");
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append("documentId", editForm.documentId);
+      formData.append("title", editForm.title || `Image ${new Date().toISOString()}`);
+      formData.append("description", editForm.description || "");
+      formData.append("category", editForm.category);
+      if (editForm.file) {
+        formData.append("file", editForm.file);
+      }
+
+      const response = await fetch("/api/gallery-data", {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        console.error("ImageDescCarousel: Edit failed", { status: response.status, errorData });
+        if (response.status === 401) {
+          setError("Authentication error: Please log in again");
+          return;
+        }
+        throw new Error(errorData.error || `Failed to edit image (Status: ${response.status})`);
+      }
+
+      const { data } = await response.json();
+      setUploadedImages(data || []);
+      setError(null);
+      setIsEditModalOpen(false);
+      setEditForm({ id: 0, documentId: "", title: "", description: "", category: "indoor", file: null });
+    } catch (err) {
+      console.error("ImageDescCarousel: Edit Error", err);
+      setError(err instanceof Error ? err.message : "Failed to edit image");
+    } finally {
+      setIsLoading(false);
+      setIsSubmitting(false);
+    }
+  };
+
+  const sectionVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 },
+    },
+  };
+
+  const modalVariants = {
+    hidden: { opacity: 0, y: "100vh" },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+    exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+  };
+
+  return (
+    <div className="w-full">
+      {/* Gallery Section */}
+      <motion.section
+        variants={sectionVariants}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        className="relative py-12 sm:py-16 lg:pb-24 w-full bg-gray-50/50 backdrop-blur-sm"
+        ref={containerRef}
+        style={{ y: parallaxY }}
+      >
+        <div className="relative z-10 w-full px-4 sm:px-6 lg:px-8">
+          {error && <p className="text-red-600 text-lg text-center mb-8">{error}</p>}
+          {user && !isAdmin && (
+            <p className="text-yellow-600 text-lg text-center mb-8">
+              You are logged in but do not have admin privileges.
+            </p>
+          )}
+          {isAdmin && (
+            <div className="flex justify-center mb-12">
+              <ActionButton
+                onClick={() => setIsUploadModalOpen(true)}
+                className="flex items-center"
+                disabled={isLoading || isSubmitting}
+              >
+                <Upload className="mr-2 h-4 w-4" />
+                Upload New Image
+              </ActionButton>
+            </div>
+          )}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-12 items-start">
+            <div className="h-auto min-h-[600px] bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl p-6 sm:p-8 lg:p-10 rounded-3xl flex flex-col space-y-4 sm:space-y-6 order-2 max-w-3xl mx-auto md:max-w-none md:mx-0 md:order-1 supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
+              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900">
+                {filteredImages[currentSlide]?.title?.trim() &&
+                !filteredImages[currentSlide]?.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                  ? filteredImages[currentSlide].title
+                  : "Image Gallery"}
+              </h2>
+              <div className="text-sm sm:text-base lg:text-lg text-gray-700">
+                {filteredImages.length > 0 && currentSlide >= 0 && currentSlide < filteredImages.length ? (
+                  (filteredImages[currentSlide].description || "")
+                    .split("\n")
+                    .filter((paragraph) => paragraph.trim() !== "")
+                    .map((paragraph, index) => (
+                      <p key={index} className="mb-4">
+                        {paragraph}
+                      </p>
+                    )) || <p className="mb-4">No description available.</p>
+                ) : (
+                  <p className="mb-4">No description available.</p>
+                )}
+              </div>
+            </div>
+            <div className="order-1 md:order-2">
+              <Slideshow
+                images={filteredImages}
+                altPrefix="Image Gallery"
+                currentSlide={currentSlide}
+                setCurrentSlide={setCurrentSlide}
+                isAdmin={isAdmin}
+                handleImageClick={handleImageClick}
+                handleEditImage={openEditModal}
+                handleDeleteImage={openConfirmDelete}
+              />
+              <div className="flex flex-wrap justify-center gap-2 sm:gap-4 mt-6 z-20">
+                {["indoor", "outdoor", "commercial"].map((tab) => (
+                  <FilterButton
+                    key={tab}
+                    isActive={activeTab === tab}
+                    onClick={() => {
+                      setActiveTab(tab as Category);
+                      setCurrentSlide(0);
+                    }}
+                  >
+                    {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                  </FilterButton>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.section>
+
+      {/* Upload Modal */}
+      {isAdmin && isUploadModalOpen && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+          onClick={handleCloseUploadModal}
+          aria-modal="true"
+          role="dialog"
+        >
+          <div
+            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCloseUploadModal}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">Upload Image</h3>
+            <form
+              onSubmit={(e) => {
+                setIsSubmitting(true);
+                handleImageUpload(e, uploadForm.file, uploadForm.title, uploadForm.description, uploadForm.category).then(() => {
+                  handleCloseUploadModal();
+                  setIsSubmitting(false);
+                });
+              }}
+              className="space-y-4"
+            >
+              <div>
+                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
+                  Choose Image
+                </label>
+                <input
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif"
+                  onChange={(e) => setUploadForm({ ...uploadForm, file: e.target.files?.[0] || null })}
+                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
+                  id="image-upload"
+                  disabled={isSubmitting}
+                />
+                {uploadForm.file && (
+                  <p className="mt-2 text-gray-300 text-sm max-[320px]:text-xs">Selected: {uploadForm.file.name}</p>
+                )}
+              </div>
+              <div>
+                <label htmlFor="image-title" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
+                  Image Title (optional)
+                </label>
+                <input
+                  id="image-title"
+                  value={uploadForm.title}
+                  onChange={(e) => setUploadForm({ ...uploadForm, title: e.target.value })}
+                  placeholder="Enter image title"
+                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
+                  disabled={isSubmitting}
+                />
+              </div>
+              <div>
+                <label htmlFor="image-description" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
+                  Image Description (optional)
+                </label>
+                <textarea
+                  id="image-description"
+                  value={uploadForm.description}
+                  onChange={(e) => setUploadForm({ ...uploadForm, description: e.target.value })}
+                  placeholder="Enter image description"
+                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px] max-[768px]:text-sm max-[768px]:min-h-[80px] max-[320px]:text-xs max-[320px]:p-2"
+                  disabled={isSubmitting}
+                />
+              </div>
+              <div>
+                <label htmlFor="image-category" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
+                  Category
+                </label>
+                <select
+                  id="image-category"
+                  value={uploadForm.category}
+                  onChange={(e) =>
+                    setUploadForm({
+                      ...uploadForm,
+                      category: e.target.value as Category,
+                    })
+                  }
+                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
+                  disabled={isSubmitting}
+                >
+                  <option value="indoor">Indoor</option>
+                  <option value="outdoor">Outdoor</option>
+                  <option value="commercial">Commercial</option>
+                  {/* Add project-specific categories, e.g.:
+                  <option value="landscape-boulders">Landscape Boulders</option>
+                  */}
+                </select>
+              </div>
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                <SubmitButton type="submit" disabled={isSubmitting || !uploadForm.file}>
+                  {isSubmitting ? "Uploading..." : "Upload"}
+                </SubmitButton>
+                <CancelButton onClick={handleCloseUploadModal} disabled={isSubmitting} />
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium max-[320px]:text-xs">{error}</p>}
+            </form>
+          </div>
+        </motion.div>
+      )}
+
+      {/* Edit Modal */}
+      {isAdmin && isEditModalOpen && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+          onClick={handleCloseEditModal}
+          aria-modal="true"
+          role="dialog"
+        >
+          <div
+            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCloseEditModal}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">Edit Image</h3>
+            <form
+              onSubmit={handleEditImage}
+              className="space-y-4"
+            >
+              <div>
+                <label htmlFor="edit-image" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
+                  Replace Image (optional)
+                </label>
+                <input
+                  id="edit-image"
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif"
+                  onChange={(e) => setEditForm({ ...editForm, file: e.target.files?.[0] || null })}
+                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
+                  disabled={isSubmitting}
+                />
+                {editForm.file && (
+                  <p className="mt-2 text-gray-300 text-sm max-[320px]:text-xs">Selected: {editForm.file.name}</p>
+                )}
+              </div>
+              <div>
+                <label htmlFor="edit-title" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
+                  Image Title (optional)
+                </label>
+                <input
+                  id="edit-title"
+                  value={editForm.title}
+                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+                  placeholder="Enter image title"
+                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
+                  disabled={isSubmitting}
+                />
+              </div>
+              <div>
+                <label htmlFor="edit-description" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
+                  Image Description (optional)
+                </label>
+                <textarea
+                  id="edit-description"
+                  value={editForm.description}
+                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                  placeholder="Enter image description"
+                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px] max-[768px]:text-sm max-[768px]:min-h-[80px] max-[320px]:text-xs max-[320px]:p-2"
+                  disabled={isSubmitting}
+                />
+              </div>
+              <div>
+                <label htmlFor="edit-category" className="block text-sm font-medium text-gray-300 mb-1 max-[320px]:text-xs">
+                  Category
+                </label>
+                <select
+                  id="edit-category"
+                  value={editForm.category}
+                  onChange={(e) =>
+                    setEditForm({
+                      ...editForm,
+                      category: e.target.value as Category,
+                    })
+                  }
+                  className="w-full p-2 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm max-[768px]:text-sm max-[320px]:text-xs max-[320px]:p-2"
+                  disabled={isSubmitting}
+                >
+                  <option value="indoor">Indoor</option>
+                  <option value="outdoor">Outdoor</option>
+                  <option value="commercial">Commercial</option>
+                  {/* Add project-specific categories, e.g.:
+                  <option value="landscape-boulders">Landscape Boulders</option>
+                  */}
+                </select>
+              </div>
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                <SubmitButton type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? "Saving..." : "Save"}
+                </SubmitButton>
+                <CancelButton onClick={handleCloseEditModal} disabled={isSubmitting} />
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium max-[320px]:text-xs">{error}</p>}
+            </form>
+          </div>
+        </motion.div>
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {isAdmin && isConfirmDeleteOpen && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+          onClick={handleCancelDelete}
+          aria-modal="true"
+          role="dialog"
+        >
+          <div
+            className="relative max-w-sm w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCancelDelete}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">Confirm Deletion</h3>
+            <p className="text-gray-300 mb-6">Are you sure you want to delete this image?</p>
+            <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+              <DeleteButton
+                onClick={handleConfirmDelete}
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? "Deleting..." : "Delete"}
+              </DeleteButton>
+              <CancelButton onClick={handleCancelDelete} disabled={isSubmitting} />
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {/* View Image Modal */}
+      {selectedImage && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10001] p-2 sm:p-4 isolate"
+          onClick={handleCloseModal}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-image"
+        >
+          <div
+            className="relative max-w-5xl w-full mx-2 sm:mx-4 max-h-[90vh] bg-gray-800/50 border border-gray-700/50 rounded-2xl shadow-lg overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton
+              variant="close-form"
+              onClick={handleCloseModal}
+            >
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <div className="relative w-full h-[70vh] sm:h-[80vh]">
+              <Image
+                src={selectedImage.url}
+                alt={
+                  selectedImage.title?.trim() &&
+                  !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                    ? selectedImage.title
+                    : "Gallery image"
+                }
+                fill
+                className="object-contain rounded-2xl"
+                quality={85}
+              />
+              {(selectedImage.title?.trim() &&
+                !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
+                selectedImage.description) && (
+                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 sm:p-4">
+                  {selectedImage.title?.trim() &&
+                    !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (
+                      <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white drop-shadow-lg">
+                        {selectedImage.title}
+                      </h3>
+                    )}
+                  {selectedImage.description && (
+                    <p className="text-xs sm:text-sm md:text-base text-gray-200 drop-shadow-md line-clamp-2">
+                      {selectedImage.description}
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
 }