import Link from "next/link"
import { ChevronLeft, Check, Music, Download, Zap, Headphones } from "lucide-react"
import { Button } from "@/components/ui/button"
import { BottomNav } from "@/components/bottom-nav"

const features = [
  { icon: Music, title: "Écoute sans pub", description: "Profitez de votre musique sans interruption" },
  { icon: Download, title: "Téléchargement", description: "Écoutez hors connexion où que vous soyez" },
  { icon: Zap, title: "Haute qualité", description: "Audio en qualité studio jusqu'à 320 kbps" },
  { icon: Headphones, title: "Écoute illimitée", description: "Accès à plus de 100 millions de titres" },
]

const plans = [
  {
    id: "individual",
    name: "Individuel",
    price: "6,554 FCFA",
    period: "/mois",
    features: ["1 compte", "Écoute sans pub", "Téléchargement", "Haute qualité"],
  },
  {
    id: "duo",
    name: "Duo",
    price: "8,521 FCFA",
    period: "/mois",
    features: ["2 comptes", "Écoute sans pub", "Téléchargement", "Haute qualité"],
    popular: true,
  },
  {
    id: "family",
    name: "Famille",
    price: "10,489 FCFA",
    period: "/mois",
    features: ["6 comptes", "Écoute sans pub", "Téléchargement", "Contrôle parental"],
  },
]

export default function PremiumPage() {
  return (
    <div className="min-h-screen bg-background pb-24">
      {/* Hero */}
      <div className="relative overflow-hidden bg-gradient-to-br from-primary via-violet-600 to-indigo-800 pb-12 pt-6">
        <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
        <div className="absolute -bottom-10 -left-10 h-48 w-48 rounded-full bg-white/10 blur-3xl" />

        {/* Header */}
        <div className="relative z-10 flex items-center gap-4 px-4">
          <Link href="/profile" className="text-white hover:text-white/80">
            <ChevronLeft className="h-6 w-6" />
          </Link>
          <h1 className="text-xl font-bold text-white">Premium</h1>
        </div>

        {/* Hero Content */}
        <div className="relative z-10 mt-8 px-4 text-center">
          <h2 className="mb-2 text-3xl font-bold text-white">Passez à Premium</h2>
          <p className="text-white/80">Débloquez une expérience musicale sans limite</p>
        </div>
      </div>

      <div className="mx-auto max-w-md px-4">
        {/* Features */}
        <section className="-mt-6 mb-8">
          <div className="grid grid-cols-2 gap-3">
            {features.map((feature) => (
              <div key={feature.title} className="rounded-xl bg-secondary/80 p-4 backdrop-blur-sm">
                <feature.icon className="mb-2 h-6 w-6 text-primary" />
                <p className="font-medium text-foreground">{feature.title}</p>
                <p className="text-xs text-muted-foreground">{feature.description}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Plans */}
        <section className="mb-8">
          <h3 className="mb-4 text-lg font-semibold text-foreground">Choisissez votre forfait</h3>
          <div className="space-y-3">
            {plans.map((plan) => (
              <div
                key={plan.id}
                className={`relative rounded-xl border p-4 transition-colors ${
                  plan.popular ? "border-primary bg-primary/10" : "border-border bg-secondary/50"
                }`}
              >
                {plan.popular && (
                  <span className="absolute -top-2.5 right-4 rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground">
                    Populaire
                  </span>
                )}
                <div className="mb-3 flex items-baseline justify-between">
                  <h4 className="text-lg font-semibold text-foreground">{plan.name}</h4>
                  <div>
                    <span className="text-2xl font-bold text-foreground">{plan.price}</span>
                    <span className="text-muted-foreground">{plan.period}</span>
                  </div>
                </div>
                <ul className="space-y-1">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Check className="h-4 w-4 text-primary" />
                      {feature}
                    </li>
                  ))}
                </ul>
                <Button className="mt-4 w-full" variant={plan.popular ? "default" : "outline"}>
                  Choisir
                </Button>
              </div>
            ))}
          </div>
        </section>

        {/* Trial */}
        <div className="mb-8 rounded-xl bg-gradient-to-r from-primary/20 to-violet-600/20 p-4 text-center">
          <p className="text-sm text-muted-foreground">Essayez Premium gratuitement pendant 1 mois</p>
          <Button className="mt-3 bg-transparent" variant="outline">
            Commencer l{"'"}essai gratuit
          </Button>
        </div>
      </div>

      <BottomNav />
    </div>
  )
}
