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

export default function SponsorPage() {
  const tiers = [
    {
      name: "Sparkle Friend",
      icon: Sparkles,
      amount: "$5/month",
      color: "text-primary",
      benefits: [
        "Thank you message on social media",
        "Early access to new artwork",
        "Monthly digital wallpaper",
        "Supporter badge on website",
      ],
    },
    {
      name: "Rainbow Supporter",
      icon: Star,
      amount: "$15/month",
      color: "text-secondary",
      benefits: [
        "Everything from Sparkle Friend",
        "Exclusive behind-the-scenes content",
        "Monthly art process videos",
        "Vote on next artwork themes",
        "Personalized thank you card",
      ],
    },
    {
      name: "Magic Patron",
      icon: Heart,
      amount: "$30/month",
      color: "text-accent",
      benefits: [
        "Everything from Rainbow Supporter",
        "Custom artwork request once per year",
        "Physical print of your favorite piece",
        "Video call to see art process live",
        "Name in special supporters gallery",
      ],
    },
  ]

  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">
              <Heart 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">Become a Sponsor</h1>
            <p className="text-xl text-muted-foreground mb-6 text-pretty">
              Help support my art journey and get amazing rewards! 💖✨
            </p>
          </div>

          {/* Why Sponsor Section */}
          <Card className="p-8 md:p-12 mb-12 border-2">
            <div className="flex items-center gap-3 mb-6">
              <Gift className="h-8 w-8 text-primary flex-shrink-0" />
              <h2 className="text-3xl font-bold m-0 text-card-foreground">Why Sponsor Me?</h2>
            </div>
            <p className="text-lg leading-relaxed text-card-foreground mb-4">
              Your support helps me continue creating amazing anime art and pursuing my dream of becoming a professional
              artist! With your help, I can:
            </p>
            <ul className="space-y-3 text-lg text-card-foreground">
              <li className="flex items-start gap-2">
                <span className="text-primary">🎨</span>
                <span>Buy better art supplies and tools</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-secondary">📚</span>
                <span>Take art classes and learn new techniques</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-accent">💻</span>
                <span>Get digital art software and equipment</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-primary">✨</span>
                <span>Create more artwork to share with everyone</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-secondary">🌟</span>
                <span>Attend art workshops and conventions</span>
              </li>
            </ul>
          </Card>

          {/* Sponsorship Tiers */}
          <div className="mb-12">
            <h2 className="text-3xl font-bold text-center mb-8 text-foreground">Choose Your Support Level</h2>
            <div className="grid md:grid-cols-3 gap-6">
              {tiers.map((tier) => {
                const Icon = tier.icon
                return (
                  <Card key={tier.name} className="p-6 border-2 hover:shadow-xl transition-shadow flex flex-col">
                    <div className="text-center mb-6">
                      <div className="mb-4 flex justify-center">
                        <div className="p-4 bg-primary/10 rounded-full">
                          <Icon className={`h-10 w-10 ${tier.color}`} />
                        </div>
                      </div>
                      <h3 className="text-2xl font-bold mb-2 text-card-foreground">{tier.name}</h3>
                      <p className="text-3xl font-bold text-primary">{tier.amount}</p>
                    </div>

                    <ul className="space-y-3 mb-6 flex-grow">
                      {tier.benefits.map((benefit, index) => (
                        <li key={index} className="flex items-start gap-2 text-muted-foreground">
                          <span className="text-primary mt-1">✓</span>
                          <span className="text-sm leading-relaxed">{benefit}</span>
                        </li>
                      ))}
                    </ul>

                    <Button className="w-full" size="lg">
                      <Heart className="mr-2 h-4 w-4" />
                      Support Now
                    </Button>
                  </Card>
                )
              })}
            </div>
          </div>

          {/* One-Time Support */}
          <Card className="p-8 border-2 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5">
            <div className="text-center">
              <h2 className="text-3xl font-bold mb-4 text-card-foreground">Prefer a One-Time Gift?</h2>
              <p className="text-lg text-muted-foreground mb-6 text-pretty">
                You can also support my art with a one-time contribution of any amount! Every bit helps me continue
                creating magical anime art! 🌈✨
              </p>
              <Button size="lg" variant="outline">
                <Sparkles className="mr-2 h-5 w-5" />
                Make a One-Time Gift
              </Button>
            </div>
          </Card>

          {/* Thank You Message */}
          <div className="mt-12 text-center">
            <Card className="p-8 border-2">
              <h2 className="text-2xl font-bold mb-3 text-card-foreground">Thank You! 💖</h2>
              <p className="text-lg text-muted-foreground text-pretty">
                Your support means everything to me and helps me keep creating art that brings joy to others. Together,
                we can make the world more colorful and magical! Thank you for believing in my dreams! ✨🌟
              </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>
  )
}