import { Navigation } from "@/components/navigation"
import { SparkleEffect } from "@/components/sparkle-effect"
import { Card } from "@/components/ui/card"
import { Palette } from "lucide-react"

export default function GalleryPage() {
  const artworks = [
    {
      id: 1,
      title: "Magical Girl Transformation",
      description: "A magical girl in the middle of her transformation sequence with sparkles everywhere!",
      query: "anime magical girl transformation with sparkles and rainbow effects",
    },
    {
      id: 2,
      title: "Dragon Spirit",
      description: "A cute dragon spirit with colorful scales and glowing eyes",
      query: "cute anime dragon spirit with rainbow scales and sparkles",
    },
    {
      id: 3,
      title: "Cherry Blossom Dreams",
      description: "An anime character surrounded by cherry blossoms and petals",
      query: "anime character with cherry blossoms and pink petals floating",
    },
    {
      id: 4,
      title: "Star Guardian",
      description: "A hero protecting the stars with magical powers",
      query: "anime star guardian with magical staff and celestial effects",
    },
    {
      id: 5,
      title: "Rainbow Warrior",
      description: "A brave warrior with rainbow-colored armor and weapons",
      query: "anime warrior with rainbow armor and colorful magical effects",
    },
    {
      id: 6,
      title: "Fairy Friend",
      description: "A tiny fairy with glittering wings and a big smile",
      query: "cute anime fairy with sparkly wings and magical dust",
    },
  ]

  return (
    <div className="min-h-screen">
      <Navigation />
      <SparkleEffect />

      <main className="container px-4 py-12">
        <div className="max-w-6xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <div className="float mb-6">
              <Palette className="h-16 w-16 mx-auto text-primary" />
            </div>
            <h1 className="text-5xl md:text-6xl font-bold mb-4 rainbow-text text-balance">Art Gallery</h1>
            <p className="text-xl text-muted-foreground text-pretty">Explore my magical anime creations! ✨🎨</p>
          </div>

          {/* Gallery Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {artworks.map((artwork) => (
              <Card key={artwork.id} className="overflow-hidden hover:shadow-xl transition-shadow border-2 group">
                <div className="aspect-square bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 relative overflow-hidden">
                  <img
                    src={`/.jpg?height=400&width=400&query=${encodeURIComponent(artwork.query)}`}
                    alt={artwork.title}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-bold mb-2 text-card-foreground text-balance">{artwork.title}</h3>
                  <p className="text-muted-foreground text-pretty">{artwork.description}</p>
                </div>
              </Card>
            ))}
          </div>

          {/* Coming Soon */}
          <div className="mt-12 text-center">
            <Card className="p-8 border-2 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5">
              <h2 className="text-2xl font-bold mb-3 text-card-foreground">More Art Coming Soon! 🌟</h2>
              <p className="text-muted-foreground text-pretty">
                I'm always creating new pieces! Check back often to see my latest anime artwork filled with rainbows and
                sparkles!
              </p>
            </Card>
          </div>
        </div>
      </main>

      <footer className="border-t border-border py-6 text-center text-muted-foreground mt-8">
        <p>© 2025 Paint Spark by Banksy • Made with ✨ and 🌈</p>
      </footer>
    </div>
  )
}