import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"

export default function GalleryPage() {
  const photos = [
    {
      src: "/images/20220429-145734.jpg",
      alt: "Commons Hub venue with Austrian Alps mountains backdrop",
      caption: "The Commons Hub nestled in the foothills of the Austrian Alps",
    },
    {
      src: "/images/20220505-113225.jpg",
      alt: "CCG 2022 group photo with all participants",
      caption: "The CCG community gathered together in 2022",
    },
    {
      src: "/images/20220830-104828.jpg",
      alt: "Overhead view of unconference discussion circle",
      caption: "Unconference discussion circles at CCG",
    },
    {
      src: "/images/20220503-155430.jpg",
      alt: "Ground-level view of discussion circle in courtyard",
      caption: "Participant-driven sessions in the Commons Hub courtyard",
    },
    {
      src: "/images/20220429-145359.jpg",
      alt: "Yellow tulips at Hirschwangerhof venue",
      caption: "Spring at the Hirschwangerhof venue",
    },
    {
      src: "/images/image.jpeg",
      alt: "Evening bonfire gathering",
      caption: "Evening bonfire gathering with the community",
    },
    {
      src: "/images/image.png",
      alt: "Alpine wildflowers with mountain backdrop",
      caption: "The natural beauty surrounding the venue",
    },
    {
      src: "/images/image.jpeg",
      alt: "Outdoor discussion session with mountain views",
      caption: "Sessions in a circle with the Austrian Alps as backdrop",
    },
    {
      src: "/images/image.png",
      alt: "Hacking session with participants",
      caption: "Hands-on building and prototyping sessions",
    },
    {
      src: "/images/image.jpeg",
      alt: "Community meal together",
      caption: "Shared meals and convivial moments",
    },
  ]

  return (
    <div className="min-h-screen">
      {/* Header */}
      <section className="py-16 px-4 bg-muted/30">
        <div className="container mx-auto max-w-6xl">
          <Button variant="ghost" className="mb-8" asChild>
            <Link href="/">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back to Home
            </Link>
          </Button>

          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-balance">Gallery</h1>
          <p className="text-lg text-muted-foreground max-w-2xl">
            Explore moments from past Crypto Commons Gatherings - from unconference sessions in the Austrian Alps to
            community building and lifelong friendships.
          </p>
        </div>
      </section>

      {/* Photo Grid */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-7xl">
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {photos.map((photo, index) => (
              <div key={index} className="group relative overflow-hidden rounded-lg bg-card border border-border">
                <div className="aspect-[4/3] overflow-hidden">
                  <img
                    src={photo.src || "/placeholder.svg"}
                    alt={photo.alt}
                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                  />
                </div>
                <div className="p-4">
                  <p className="text-sm text-muted-foreground">{photo.caption}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4 bg-muted/30">
        <div className="container mx-auto max-w-3xl text-center">
          <h2 className="text-3xl font-bold mb-4">Join Us in 2026</h2>
          <p className="text-muted-foreground mb-8">
            Be part of the next chapter of Crypto Commons Gathering and create new memories in the Austrian Alps.
          </p>
          <Button size="lg" asChild>
            <Link href="/register">Register for CCG 2026</Link>
          </Button>
        </div>
      </section>
    </div>
  )
}