import Link from "next/link"
import { Navigation } from "@/components/navigation"

const photoshoots = [
  {
    id: "urban-portraits",
    title: "Urban Portraits",
    description: "City life through intimate moments",
    imageCount: 24,
    date: "December 2024",
    coverImage: "/urban-portrait-photography-street.jpg"
  },
  {
    id: "natural-landscapes",
    title: "Natural Landscapes",
    description: "The raw beauty of untouched earth",
    imageCount: 18,
    date: "November 2024",
    coverImage: "/mountain-landscape-photography-nature.jpg"
  },
  {
    id: "wedding-moments",
    title: "Wedding Moments",
    description: "Love stories beautifully preserved",
    imageCount: 42,
    date: "October 2024",
    coverImage: "/wedding-photography-couple-ceremony.jpg"
  },
  {
    id: "editorial-fashion",
    title: "Editorial Fashion",
    description: "Bold statements through style",
    imageCount: 16,
    date: "September 2024",
    coverImage: "/fashion-editorial-photography-studio.jpg"
  },
  {
    id: "architectural-spaces",
    title: "Architectural Spaces",
    description: "Form and function in modern design",
    imageCount: 28,
    date: "August 2024",
    coverImage: "/modern-building-architecture.png"
  },
  {
    id: "intimate-portraits",
    title: "Intimate Portraits",
    description: "Personal stories, authentic expressions",
    imageCount: 20,
    date: "July 2024",
    coverImage: "/intimate-portrait-photography-natural-light.jpg"
  }
]

export default function GalleryPage() {
  return (
    <div className="min-h-screen">
      <Navigation />
      
      <main className="pt-24 pb-16 px-6">
        <div className="container mx-auto max-w-7xl">
          {/* Header */}
          <div className="mb-16">
            <h1 className="font-sans text-5xl md:text-6xl mb-4 tracking-tight">Gallery</h1>
            <p className="text-muted-foreground text-lg max-w-2xl">
              Explore a curated collection of photoshoots spanning diverse styles and subjects. Each project tells its own unique story.
            </p>
          </div>

          {/* Gallery Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {photoshoots.map((shoot) => (
              <Link 
                key={shoot.id}
                href={`/gallery/${shoot.id}`}
                className="group"
              >
                <div className="relative aspect-[3/4] overflow-hidden mb-4">
                  <img
                    src={shoot.coverImage || "/placeholder.svg"}
                    alt={shoot.title}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-500" />
                </div>
                
                <div>
                  <h3 className="font-sans text-2xl mb-2 group-hover:text-accent transition-colors">
                    {shoot.title}
                  </h3>
                  <p className="text-muted-foreground mb-1">{shoot.description}</p>
                  <div className="flex items-center gap-3 text-sm text-muted-foreground">
                    <span>{shoot.imageCount} images</span>
                    <span>•</span>
                    <span>{shoot.date}</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </main>
    </div>
  )
}