Removed unused imports

app/(pages)/gallery/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import Image from "next/image";
 import { 
   Search, 
-  Filter, 
+  Filter,
   Heart, 
   Monitor, 
   Palette, 
@@ -133,9 +134,38 @@ export default function GalleryPage() {
   const [searchQuery, setSearchQuery] = useState("");
   const [viewMode, setViewMode] = useState<"grid" | "large">("grid");
   const [selectedArtwork, setSelectedArtwork] = useState<typeof mockArtworks[0] | null>(null);
-  const [votedArtworks, setVotedArtworks] = useState<Set<string>>(new Set());
+  const [votedArtworks, setVotedArtworks] = useState<Set<string>>(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem("artsplash-votes");
+        return stored ? new Set(JSON.parse(stored)) : new Set();
+      } catch {
+        return new Set();
+      }
+    }
+    return new Set();
+  });
   const [showFilters, setShowFilters] = useState(false);
 
+  // Lock body scroll when modal is open
+  useEffect(() => {
+    if (selectedArtwork) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => { document.body.style.overflow = ""; };
+  }, [selectedArtwork]);
+
+  // Close modal on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setSelectedArtwork(null);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
   // Use a daily seed for consistent randomization throughout the day
   const dailySeed = useMemo(() => {
     const today = new Date();
@@ -165,14 +195,16 @@ export default function GalleryPage() {
     return seededShuffle(result, dailySeed);
   }, [selectedCategory, searchQuery, dailySeed]);
 
-  const handleVote = (artworkId: string) => {
-    if (votedArtworks.has(artworkId)) {
-      // Already voted - in production, show a message
-      return;
-    }
-    setVotedArtworks(prev => new Set([...prev, artworkId]));
-    // TODO: Send vote to API
-  };
+  const handleVote = useCallback((artworkId: string) => {
+    if (votedArtworks.has(artworkId)) return;
+    setVotedArtworks(prev => {
+      const next = new Set([...prev, artworkId]);
+      try {
+        localStorage.setItem("artsplash-votes", JSON.stringify([...next]));
+      } catch { /* storage full - ignore */ }
+      return next;
+    });
+  }, [votedArtworks]);
 
   return (
     <main className="min-h-screen bg-black pt-32 pb-20">
@@ -328,10 +360,13 @@ export default function GalleryPage() {
                   className="relative aspect-square cursor-pointer overflow-hidden"
                   onClick={() => setSelectedArtwork(artwork)}
                 >
-                  <img
+                  <Image
                     src={artwork.imageUrl}
                     alt={artwork.title}
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                    fill
+                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    className="object-cover group-hover:scale-105 transition-transform duration-500"
+                    loading="lazy"
                   />
                   <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                     <Eye className="w-8 h-8 text-white" />
@@ -400,11 +435,16 @@ export default function GalleryPage() {
               onClick={(e) => e.stopPropagation()}
             >
               <div className="relative">
-                <img
-                  src={selectedArtwork.imageUrl}
-                  alt={selectedArtwork.title}
-                  className="w-full aspect-video object-cover"
-                />
+                <div className="relative aspect-video">
+                  <Image
+                    src={selectedArtwork.imageUrl}
+                    alt={selectedArtwork.title}
+                    fill
+                    sizes="(max-width: 1024px) 100vw, 896px"
+                    className="object-cover"
+                    priority
+                  />
+                </div>
                 <button
                   onClick={() => setSelectedArtwork(null)}
                   className="absolute top-4 right-4 p-2 bg-black/50 backdrop-blur-sm rounded-full hover:bg-black/70 transition-colors"