Photography-Portfolio/app/gallery/[slug]/page.tsx

import Link from "next/link"
import { Navigation } from "@/components/navigation"
import { ArrowLeft, Calendar, Camera } from 'lucide-react'

// This would typically come from a database or CMS
const photoshootData: Record<string, any> = {
  "urban-portraits": {
    title: "Urban Portraits",
    description: "A visual exploration of city dwellers in their natural habitat. These portraits capture the essence of urban life—raw, authentic, and beautifully complex.",
    date: "December 2024",
    location: "New York City",
    camera: "Canon EOS R5, 85mm f/1.2",
    images: Array.from({ length: 12 }, (_, i) => ({
      id: i + 1,
      url: `/placeholder.svg?height=1200&width=800&query=urban+portrait+photography+candid+street+${i + 1}`,
      alt: `Urban portrait ${i + 1}`
    }))
  },
  "natural-landscapes": {
    title: "Natural Landscapes",
    description: "Journey through untouched wilderness where mountains meet sky and valleys cradle ancient forests. These landscapes remind us of nature's timeless grandeur.",
    date: "November 2024",
    location: "Pacific Northwest",
    camera: "Sony A7R V, 24-70mm f/2.8",
    images: Array.from({ length: 12 }, (_, i) => ({
      id: i + 1,
      url: `/placeholder.svg?height=1200&width=1600&query=landscape+nature+photography+mountains+forests+${i + 1}`,
      alt: `Landscape ${i + 1}`
    }))
  }
}

export default async function PhotoshootPage({ 
  params 
}: { 
  params: Promise<{ slug: string }> 
}) {
  const { slug } = await params
  const photoshoot = photoshootData[slug] || photoshootData["urban-portraits"]

  return (
    <div className="min-h-screen">
      <Navigation />
      
      <main className="pt-24 pb-16 px-6">
        <div className="container mx-auto max-w-7xl">
          {/* Back Button */}
          <Link 
            href="/gallery"
            className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-8"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Gallery
          </Link>

          {/* Header */}
          <div className="mb-16 max-w-3xl">
            <h1 className="font-sans text-5xl md:text-6xl mb-6 tracking-tight">
              {photoshoot.title}
            </h1>
            <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
              {photoshoot.description}
            </p>
            
            {/* Metadata */}
            <div className="flex flex-wrap gap-6 text-sm">
              <div className="flex items-center gap-2">
                <Calendar className="w-4 h-4 text-muted-foreground" />
                <span>{photoshoot.date}</span>
              </div>
              <div className="flex items-center gap-2">
                <Camera className="w-4 h-4 text-muted-foreground" />
                <span>{photoshoot.camera}</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-muted-foreground">📍</span>
                <span>{photoshoot.location}</span>
              </div>
            </div>
          </div>

          {/* Image Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {photoshoot.images.map((image: any) => (
              <div 
                key={image.id}
                className="relative aspect-[4/5] overflow-hidden group cursor-pointer"
              >
                <img
                  src={image.url || "/placeholder.svg"}
                  alt={image.alt}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                />
              </div>
            ))}
          </div>

          {/* Navigation to other shoots */}
          <div className="mt-24 pt-16 border-t border-border">
            <h3 className="font-sans text-2xl mb-8">More Projects</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Link href="/gallery/wedding-moments" className="group">
                <div className="relative aspect-[4/5] overflow-hidden mb-4">
                  <img
                    src="/wedding-photography-romantic.jpg"
                    alt="Wedding Moments"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                </div>
                <h4 className="font-sans text-xl group-hover:text-accent transition-colors">
                  Wedding Moments
                </h4>
              </Link>
              
              <Link href="/gallery/editorial-fashion" className="group">
                <div className="relative aspect-[4/5] overflow-hidden mb-4">
                  <img
                    src="/fashion-editorial-photography.jpg"
                    alt="Editorial Fashion"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                </div>
                <h4 className="font-sans text-xl group-hover:text-accent transition-colors">
                  Editorial Fashion
                </h4>
              </Link>
              
              <Link href="/gallery/architectural-spaces" className="group">
                <div className="relative aspect-[4/5] overflow-hidden mb-4">
                  <img
                    src="/modern-architecture-photo.png"
                    alt="Architectural Spaces"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                </div>
                <h4 className="font-sans text-xl group-hover:text-accent transition-colors">
                  Architectural Spaces
                </h4>
              </Link>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}