import Link from "next/link"
import { Navigation } from "@/components/navigation"
import { ArrowRight } from 'lucide-react'

export default function HomePage() {
  return (
    <div className="min-h-screen">
      <Navigation />
      
      {/* Hero Section */}
      <section className="relative h-screen flex items-center justify-center">
        <div className="absolute inset-0 z-0">
          <img
            src="/dramatic-landscape-photography-golden-hour.jpg"
            alt="Hero image"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/20 to-black/60" />
        </div>
        
        <div className="relative z-10 text-center px-6 text-white">
          <h1 className="font-sans text-6xl md:text-8xl mb-6 tracking-tight text-balance">
            Visual Storytelling
          </h1>
          <p className="text-lg md:text-xl mb-8 text-white/90 max-w-2xl mx-auto text-balance">
            Capturing moments that transcend time, transforming light and emotion into lasting memories
          </p>
          <Link 
            href="/gallery"
            className="inline-flex items-center gap-2 bg-white text-primary px-8 py-4 hover:bg-white/90 transition-all"
          >
            View Portfolio
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>
      </section>

      {/* Featured Work */}
      <section className="py-24 px-6">
        <div className="container mx-auto max-w-7xl">
          <div className="mb-16 text-center">
            <h2 className="font-sans text-4xl md:text-5xl mb-4 tracking-tight">Featured Work</h2>
            <p className="text-muted-foreground text-lg">Selected highlights from recent projects</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Featured Image 1 */}
            <Link href="/gallery/urban-portraits" className="group relative aspect-[4/5] overflow-hidden">
              <img
                src="/urban-portrait-photography-dramatic-lighting.jpg"
                alt="Urban Portraits"
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
              <div className="absolute bottom-0 left-0 right-0 p-8 text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                <h3 className="font-sans text-3xl mb-2">Urban Portraits</h3>
                <p className="text-white/80">City life through intimate moments</p>
              </div>
            </Link>

            {/* Featured Image 2 */}
            <Link href="/gallery/natural-landscapes" className="group relative aspect-[4/5] overflow-hidden">
              <img
                src="/mountain-sunset-landscape.png"
                alt="Natural Landscapes"
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
              <div className="absolute bottom-0 left-0 right-0 p-8 text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                <h3 className="font-sans text-3xl mb-2">Natural Landscapes</h3>
                <p className="text-white/80">The raw beauty of untouched earth</p>
              </div>
            </Link>

            {/* Featured Image 3 */}
            <Link href="/gallery/wedding-moments" className="group relative aspect-[4/5] overflow-hidden">
              <img
                src="/wedding-photography-emotional-candid-moment.jpg"
                alt="Wedding Moments"
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
              <div className="absolute bottom-0 left-0 right-0 p-8 text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                <h3 className="font-sans text-3xl mb-2">Wedding Moments</h3>
                <p className="text-white/80">Love stories beautifully preserved</p>
              </div>
            </Link>

            {/* Featured Image 4 */}
            <Link href="/gallery/editorial-fashion" className="group relative aspect-[4/5] overflow-hidden">
              <img
                src="/fashion-editorial-photography-high-contrast.jpg"
                alt="Editorial Fashion"
                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
              <div className="absolute bottom-0 left-0 right-0 p-8 text-white translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                <h3 className="font-sans text-3xl mb-2">Editorial Fashion</h3>
                <p className="text-white/80">Bold statements through style</p>
              </div>
            </Link>
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-24 px-6 bg-primary text-primary-foreground">
        <div className="container mx-auto max-w-4xl text-center">
          <h2 className="font-sans text-4xl md:text-5xl mb-6 tracking-tight">
            Let's Create Together
          </h2>
          <p className="text-lg mb-8 text-primary-foreground/90 text-balance">
            Available for commissions, collaborations, and creative projects worldwide
          </p>
          <Link 
            href="/contact"
            className="inline-flex items-center gap-2 bg-background text-foreground px-8 py-4 hover:bg-background/90 transition-all"
          >
            Get in Touch
            <ArrowRight className="w-5 h-5" />
          </Link>
        </div>
      </section>
    </div>
  )
}