"use client"

import { useState } from "react"
import Image from "next/image"
import SiteFooter from "@/components/site-footer"
import ImageLightbox from "@/components/image-lightbox"

const galleryImages = [
  {
    src: "/images/gallery-1.webp",
    alt: "Upcycled denim jacket with purple velvet lace detailing and fringe trim",
  },
  {
    src: "/images/gallery-2.webp",
    alt: "Vintage-style denim jacket with aged patches and distressed details",
  },
  {
    src: "/images/gallery-3.webp",
    alt: "Denim jacket with bright pink fabric panels and colorful trim",
  },
  {
    src: "/images/gallery-4.webp",
    alt: "Denim jacket featuring delicate floral embroidery and decorative trim",
  },
  {
    src: "/images/gallery-5.webp",
    alt: "Denim jacket with colorful tassel fringe and heart-shaped beaded patches",
  },
  {
    src: "/images/gallery-6.webp",
    alt: "Cropped denim jacket with sequined red lips patch and geometric mesh detailing",
  },
  {
    src: "/images/gallery-7.webp",
    alt: "Denim jacket with burgundy floral embroidery and decorative trim work",
  },
  {
    src: "/images/gallery-8.webp",
    alt: "Patchwork denim jacket with golden fabric panels and embroidered cuff details",
  },
  {
    src: "/images/gallery-9.webp",
    alt: "Denim jacket with vibrant botanical patchwork panel featuring colorful folk art illustrations",
  },
  {
    src: "/images/gallery-10.webp",
    alt: "Close-up detail of denim jacket with purple velvet patches on collar and cuff",
  },
  {
    src: "/images/gallery-11.webp",
    alt: "Classic upcycled denim jacket styled for everyday wear in outdoor setting",
  },
]

export default function Gallery() {
  const [lightboxImage, setLightboxImage] = useState<{ src: string; alt: string } | null>(null)

  const openLightbox = (src: string, alt: string) => {
    setLightboxImage({ src, alt })
  }

  const closeLightbox = () => {
    setLightboxImage(null)
  }

  return (
    <div className="min-h-screen bg-black">
      {/* Header */}
      <header className="bg-[#e8e4d3] py-4">
        <div className="container mx-auto px-4 flex items-center justify-between">
          <div className="flex items-center">
            <a href="/" className="flex items-center">
              <Image
                src="/images/logo-black-white.png"
                alt="Aunty Sparkles Logo"
                width={96}
                height={96}
                className="mr-4"
              />
            </a>
          </div>
          <div className="flex items-center space-x-8">
            <nav>
              <ul className="flex space-x-8 text-xl font-bold">
                <li>
                  <a href="/about" className="text-gray-700 hover:text-gray-900 transition-colors">
                    About
                  </a>
                </li>
                <li>
                  <a href="/gallery" className="text-blue-600 hover:text-blue-800 transition-colors">
                    Gallery
                  </a>
                </li>
                <li>
                  <a href="/contact" className="text-gray-700 hover:text-gray-900 transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </nav>
            <a
              href="/shop"
              className="bg-pink-500 text-white px-6 py-2 font-semibold hover:bg-pink-400 transition-colors rounded-full shadow-lg"
            >
              SHOP NOW
            </a>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="hero-bg py-20">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-5xl font-bold text-white mb-4">Gallery</h1>
          <div className="w-16 h-1 bg-yellow-400 mb-8 mx-auto"></div>
          <p className="text-lg text-gray-300 max-w-2xl mx-auto">
            Each jacket here started as something forgotten and unloved, thrifted or rescued before heading to the
            landfill. I reimagine every piece with unique details, playful textures, and a whole lot of love. No two are
            ever the same—just like the people who wear them. ✨
          </p>
        </div>
      </section>

      {/* Gallery Grid */}
      <section className="section-dark py-20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {galleryImages.map((image, index) => (
              <div
                key={index}
                className="aspect-square cursor-pointer group overflow-hidden rounded-lg"
                onClick={() => openLightbox(image.src, image.alt)}
              >
                <Image
                  src={image.src || "/placeholder.svg"}
                  alt={image.alt}
                  width={400}
                  height={400}
                  className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Lightbox */}
      <ImageLightbox
        src={lightboxImage?.src || ""}
        alt={lightboxImage?.alt || ""}
        isOpen={!!lightboxImage}
        onClose={closeLightbox}
      />

      {/* Footer */}
      <SiteFooter />
    </div>
  )
}