import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Navigation } from "@/components/navigation"
import { SparkleEffect } from "@/components/sparkle-effect"
import { Sparkles, Palette, Heart, Star } from "lucide-react"

export default function HomePage() {
  return (
    <div className="min-h-screen">
      <Navigation />
      <SparkleEffect />

      <main className="container px-4 py-12">
        {/* Hero Section */}
        <section className="text-center py-20 relative">
          <div className="float mb-8">
            <Sparkles className="h-20 w-20 mx-auto text-primary" />
          </div>
          <h1 className="text-6xl md:text-8xl font-bold mb-6 rainbow-text text-balance">Paint Spark</h1>
          <p className="text-2xl md:text-3xl mb-4 text-foreground font-semibold">by Banksy</p>
          <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto text-pretty">
            Welcome to my magical world of anime art! ✨ I'm a 10-year-old artist who loves bringing characters to life
            with colors and sparkles!
          </p>
          <div className="flex gap-4 justify-center flex-wrap">
            <Button asChild size="lg" className="text-lg">
              <Link href="/gallery">
                <Palette className="mr-2 h-5 w-5" />
                View Gallery
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="text-lg bg-transparent">
              <Link href="/about">
                <Star className="mr-2 h-5 w-5" />
                About Me
              </Link>
            </Button>
          </div>
        </section>

        {/* Features Section */}
        <section className="py-12 grid md:grid-cols-3 gap-6">
          <Card className="p-6 text-center hover:shadow-lg transition-shadow border-2">
            <div className="mb-4 flex justify-center">
              <div className="p-4 bg-primary/10 rounded-full">
                <Palette className="h-8 w-8 text-primary" />
              </div>
            </div>
            <h3 className="text-xl font-bold mb-2 text-card-foreground">Anime Art</h3>
            <p className="text-muted-foreground text-pretty">
              Beautiful anime characters with vibrant colors and expressive emotions
            </p>
          </Card>

          <Card className="p-6 text-center hover:shadow-lg transition-shadow border-2">
            <div className="mb-4 flex justify-center">
              <div className="p-4 bg-secondary/10 rounded-full">
                <Sparkles className="h-8 w-8 text-secondary" />
              </div>
            </div>
            <h3 className="text-xl font-bold mb-2 text-card-foreground">Magical Effects</h3>
            <p className="text-muted-foreground text-pretty">
              Every piece is filled with sparkles, rainbows, and special anime symbols
            </p>
          </Card>

          <Card className="p-6 text-center hover:shadow-lg transition-shadow border-2">
            <div className="mb-4 flex justify-center">
              <div className="p-4 bg-accent/10 rounded-full">
                <Heart className="h-8 w-8 text-accent" />
              </div>
            </div>
            <h3 className="text-xl font-bold mb-2 text-card-foreground">Made with Love</h3>
            <p className="text-muted-foreground text-pretty">
              Each artwork is created with passion and lots of imagination
            </p>
          </Card>
        </section>

        {/* Call to Action */}
        <section className="py-20 text-center">
          <div className="max-w-3xl mx-auto bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 rounded-2xl p-12 border-2 border-border">
            <h2 className="text-4xl font-bold mb-4 text-foreground text-balance">Support My Art Journey! 🌟</h2>
            <p className="text-lg text-muted-foreground mb-6 text-pretty">
              Help me continue creating amazing anime art and bring more magical characters to life!
            </p>
            <Button asChild size="lg" className="text-lg">
              <Link href="/sponsor">
                <Heart className="mr-2 h-5 w-5" />
                Become a Sponsor
              </Link>
            </Button>
          </div>
        </section>
      </main>

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