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

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

      <main className="container px-4 py-12">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <div className="float mb-6">
              <Star 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">About Banksy</h1>
            <p className="text-xl text-muted-foreground text-pretty">The artist behind Paint Spark ✨</p>
          </div>

          {/* Main Content */}
          <Card className="p-8 md:p-12 mb-8 border-2">
            <div className="prose prose-lg max-w-none">
              <div className="flex items-center gap-3 mb-6">
                <Smile className="h-8 w-8 text-primary flex-shrink-0" />
                <h2 className="text-3xl font-bold m-0 text-card-foreground">Hi! I'm Banksy! 👋</h2>
              </div>

              <p className="text-lg leading-relaxed text-card-foreground">
                I'm a 10-year-old artist who absolutely LOVES anime! Ever since I was little, I've been drawing my
                favorite characters and creating my own magical worlds filled with colors, sparkles, and adventure.
              </p>

              <div className="flex items-center gap-3 mb-4 mt-8">
                <Palette className="h-8 w-8 text-secondary flex-shrink-0" />
                <h3 className="text-2xl font-bold m-0 text-card-foreground">My Art Journey</h3>
              </div>

              <p className="text-lg leading-relaxed text-card-foreground">
                I started drawing when I was 6 years old, and I haven't stopped since! My favorite things to draw are
                anime characters with big expressive eyes, colorful hair, and magical powers. I love adding rainbows,
                sparkles, and special anime effect symbols like sweat drops, stars, and speed lines to make my art come
                alive!
              </p>

              <div className="flex items-center gap-3 mb-4 mt-8">
                <Heart className="h-8 w-8 text-accent flex-shrink-0" />
                <h3 className="text-2xl font-bold m-0 text-card-foreground">What I Love</h3>
              </div>

              <ul className="space-y-3 text-lg text-card-foreground">
                <li className="flex items-start gap-2">
                  <span className="text-primary">✨</span>
                  <span>Drawing anime characters with unique personalities</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-secondary">🌈</span>
                  <span>Using ALL the colors - especially rainbows!</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-accent">⭐</span>
                  <span>Adding magical effects and sparkles to everything</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary">💫</span>
                  <span>Creating stories for each character I draw</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-secondary">🎨</span>
                  <span>Experimenting with different art styles and techniques</span>
                </li>
              </ul>

              <div className="flex items-center gap-3 mb-4 mt-8">
                <Sparkles className="h-8 w-8 text-primary flex-shrink-0" />
                <h3 className="text-2xl font-bold m-0 text-card-foreground">My Dream</h3>
              </div>

              <p className="text-lg leading-relaxed text-card-foreground">
                My biggest dream is to become a professional anime artist and maybe even create my own manga series one
                day! I want to share my art with people all around the world and make them smile. Every drawing I create
                is a step closer to that dream!
              </p>

              <p className="text-lg leading-relaxed text-card-foreground mt-6">
                Thank you so much for visiting Paint Spark and supporting my art journey! Your encouragement means the
                world to me! 💖✨
              </p>
            </div>
          </Card>

          {/* Fun Facts */}
          <div className="grid md:grid-cols-2 gap-6">
            <Card className="p-6 border-2">
              <h3 className="text-xl font-bold mb-3 text-card-foreground">🎨 Favorite Tools</h3>
              <p className="text-muted-foreground leading-relaxed">
                Colored pencils, markers, and digital drawing tablets. I love mixing traditional and digital art!
              </p>
            </Card>

            <Card className="p-6 border-2">
              <h3 className="text-xl font-bold mb-3 text-card-foreground">⏰ Drawing Time</h3>
              <p className="text-muted-foreground leading-relaxed">
                I draw every day after school and on weekends. Art is my favorite hobby!
              </p>
            </Card>

            <Card className="p-6 border-2">
              <h3 className="text-xl font-bold mb-3 text-card-foreground">🌟 Inspiration</h3>
              <p className="text-muted-foreground leading-relaxed">
                My favorite anime shows, nature, and my imagination. I find inspiration everywhere!
              </p>
            </Card>

            <Card className="p-6 border-2">
              <h3 className="text-xl font-bold mb-3 text-card-foreground">💫 Special Style</h3>
              <p className="text-muted-foreground leading-relaxed">
                Lots of sparkles, rainbows, and anime expressions. Every piece has its own magic!
              </p>
            </Card>
          </div>
        </div>
      </main>

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