"use client"

import { ArrowLeft, Crown, Check, Star, Zap, Shield, Gift, Sparkles, Trophy, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { useState } from "react"

export default function VipPage() {
  const [selectedPlan, setSelectedPlan] = useState("monthly")

  const plans = [
    {
      id: "daily",
      name: "体验版",
      duration: "1天",
      price: 9.9,
      originalPrice: 19.9,
      discount: "限时5折",
      popular: false,
      badge: "试用",
      color: "from-blue-400 to-blue-500",
    },
    {
      id: "monthly",
      name: "月度会员",
      duration: "1个月",
      price: 68,
      originalPrice: 98,
      discount: "7折优惠",
      popular: true,
      badge: "推荐",
      color: "from-purple-400 to-purple-500",
    },
    {
      id: "quarterly",
      name: "季度会员",
      duration: "3个月",
      price: 168,
      originalPrice: 294,
      discount: "超值4.3折",
      popular: false,
      badge: "超值",
      color: "from-pink-400 to-pink-500",
    },
    {
      id: "yearly",
      name: "年度会员",
      duration: "1年",
      price: 588,
      originalPrice: 1176,
      discount: "超值5折",
      popular: false,
      badge: "最划算",
      color: "from-orange-400 to-orange-500",
    },
  ]

  const privileges = [
    {
      icon: <Crown className="w-6 h-6" />,
      title: "专属身份标识",
      desc: "VIP专属标识，彰显尊贵身份",
      color: "from-yellow-400 to-orange-500",
    },
    {
      icon: <Zap className="w-6 h-6" />,
      title: "优先预约权",
      desc: "热门场馆优先预约，不再排队等待",
      color: "from-blue-400 to-blue-500",
    },
    {
      icon: <Gift className="w-6 h-6" />,
      title: "专属折扣",
      desc: "场馆预订享受VIP专属折扣优惠",
      color: "from-green-400 to-green-500",
    },
    {
      icon: <Shield className="w-6 h-6" />,
      title: "免费取消",
      desc: "预约后可免费取消，无违约金",
      color: "from-purple-400 to-purple-500",
    },
    {
      icon: <Star className="w-6 h-6" />,
      title: "专属客服",
      desc: "7x24小时VIP专属客服服务",
      color: "from-pink-400 to-pink-500",
    },
    {
      icon: <Check className="w-6 h-6" />,
      title: "高清回放",
      desc: "无限制观看高清比赛回放视频",
      color: "from-indigo-400 to-indigo-500",
    },
  ]

  const stats = [
    { label: "活跃用户", value: "50万+", icon: <Users className="w-5 h-5" /> },
    { label: "满意度", value: "98%", icon: <Star className="w-5 h-5" /> },
    { label: "场馆覆盖", value: "1000+", icon: <Trophy className="w-5 h-5" /> },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-yellow-50 via-orange-50 to-red-50">
      {/* Header with premium gradient */}
      <div className="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 px-4 py-4 sticky top-0 z-10 shadow-2xl">
        <div className="flex items-center justify-between">
          <Link href="/profile">
            <div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center transition-all duration-300 hover:scale-105">
              <ArrowLeft className="w-5 h-5 text-white" />
            </div>
          </Link>
          <h1 className="text-xl font-bold text-white">VIP会员</h1>
          <div className="w-10 h-10"></div>
        </div>
      </div>

      {/* VIP Banner with enhanced styling */}
      <div className="bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 px-4 pb-12 relative overflow-hidden">
        {/* Background decorations */}
        <div className="absolute top-0 left-0 w-32 h-32 bg-white/10 rounded-full -translate-x-16 -translate-y-16"></div>
        <div className="absolute top-20 right-0 w-24 h-24 bg-white/10 rounded-full translate-x-12"></div>
        <div className="absolute bottom-0 left-1/2 w-40 h-40 bg-white/5 rounded-full translate-x-20 translate-y-20"></div>

        <div className="text-center relative z-10">
          <div className="w-24 h-24 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-4 shadow-2xl">
            <Crown className="w-12 h-12 text-white" />
          </div>
          <h2 className="text-3xl font-bold text-white mb-2">LIMO VIP会员</h2>
          <p className="text-white/90 text-lg">开启专属运动体验</p>

          {/* Stats */}
          <div className="flex justify-center space-x-8 mt-6">
            {stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center mx-auto mb-1">
                  {stat.icon}
                </div>
                <div className="text-white font-bold text-lg">{stat.value}</div>
                <div className="text-white/80 text-xs">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Pricing Plans with premium styling */}
      <div className="px-4 -mt-8 relative z-10">
        <div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
          <div className="text-center mb-6">
            <h3 className="text-2xl font-bold text-gray-900 mb-2">选择会员套餐</h3>
            <p className="text-gray-500">解锁更多专属特权</p>
          </div>

          <div className="grid grid-cols-2 gap-4">
            {plans.map((plan) => (
              <div
                key={plan.id}
                onClick={() => setSelectedPlan(plan.id)}
                className={`relative border-2 rounded-3xl p-5 cursor-pointer transition-all duration-300 ${
                  selectedPlan === plan.id
                    ? "border-transparent bg-gradient-to-br from-[#05C7C7]/10 to-[#04B5B5]/10 shadow-xl scale-[1.02]"
                    : "border-gray-200/50 bg-white/50 hover:border-gray-300/50 hover:shadow-lg"
                } ${plan.popular ? "ring-2 ring-yellow-400/50" : ""}`}
              >
                {plan.popular && (
                  <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                    <div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-4 py-1 rounded-full text-xs font-bold shadow-lg">
                      <Sparkles className="w-3 h-3 inline mr-1" />
                      最受欢迎
                    </div>
                  </div>
                )}

                <div className="text-center">
                  <div
                    className={`w-12 h-12 bg-gradient-to-r ${plan.color} rounded-2xl flex items-center justify-center mx-auto mb-3 shadow-lg`}
                  >
                    <Crown className="w-6 h-6 text-white" />
                  </div>

                  <h4 className="font-bold text-gray-900 mb-1 text-lg">{plan.name}</h4>
                  <p className="text-sm text-gray-500 mb-3">{plan.duration}</p>

                  <div className="mb-3">
                    <span className="text-3xl font-bold text-[#05C7C7]">¥{plan.price}</span>
                    <span className="text-sm text-gray-400 line-through ml-2">¥{plan.originalPrice}</span>
                  </div>

                  <div className="bg-gradient-to-r from-red-100 to-red-50 text-red-600 px-3 py-1 rounded-xl text-xs font-bold border border-red-200/50">
                    {plan.discount}
                  </div>
                </div>

                {selectedPlan === plan.id && (
                  <div className="absolute top-3 right-3">
                    <div className="w-6 h-6 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] rounded-full flex items-center justify-center shadow-lg">
                      <Check className="w-4 h-4 text-white" />
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* VIP Privileges with enhanced styling */}
      <div className="px-4 mt-8">
        <div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
          <h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center justify-center">
            <div className="w-8 h-8 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-2xl flex items-center justify-center mr-3 shadow-lg">
              <Crown className="w-5 h-5 text-white" />
            </div>
            VIP专属特权
          </h3>

          <div className="grid grid-cols-1 gap-4">
            {privileges.map((privilege, index) => (
              <div
                key={index}
                className="flex items-start space-x-4 p-4 bg-gradient-to-r from-gray-50/50 to-white/50 rounded-2xl border border-gray-100/50 transition-all duration-300 hover:shadow-lg hover:scale-[1.01]"
              >
                <div
                  className={`w-12 h-12 bg-gradient-to-r ${privilege.color} rounded-2xl flex items-center justify-center text-white flex-shrink-0 shadow-lg`}
                >
                  {privilege.icon}
                </div>
                <div className="flex-1">
                  <h4 className="font-bold text-gray-900 text-lg mb-1">{privilege.title}</h4>
                  <p className="text-sm text-gray-600 leading-relaxed">{privilege.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Testimonials */}
      <div className="px-4 mt-8">
        <div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
          <h3 className="text-xl font-bold text-gray-900 mb-4 text-center">用户好评</h3>
          <div className="space-y-4">
            <div className="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-2xl border border-blue-100/50">
              <div className="flex items-center space-x-2 mb-2">
                <div className="w-8 h-8 bg-gradient-to-r from-blue-400 to-blue-500 rounded-full flex items-center justify-center">
                  <span className="text-white text-sm font-bold">张</span>
                </div>
                <span className="font-semibold text-gray-900">张先生</span>
                <div className="flex space-x-1">
                  {[1, 2, 3, 4, 5].map((i) => (
                    <Star key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" />
                  ))}
                </div>
              </div>
              <p className="text-sm text-gray-600">"VIP服务真的很棒，预约场馆再也不用排队了！"</p>
            </div>
            <div className="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-2xl border border-green-100/50">
              <div className="flex items-center space-x-2 mb-2">
                <div className="w-8 h-8 bg-gradient-to-r from-green-400 to-green-500 rounded-full flex items-center justify-center">
                  <span className="text-white text-sm font-bold">李</span>
                </div>
                <span className="font-semibold text-gray-900">李女士</span>
                <div className="flex space-x-1">
                  {[1, 2, 3, 4, 5].map((i) => (
                    <Star key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" />
                  ))}
                </div>
              </div>
              <p className="text-sm text-gray-600">"专属客服响应很快，解决问题很及时，值得推荐！"</p>
            </div>
          </div>
        </div>
      </div>

      {/* Purchase Section with enhanced styling */}
      <div className="px-4 mt-8 pb-8">
        <div className="bg-white/90 backdrop-blur-xl rounded-3xl shadow-2xl p-6 border border-white/50">
          <div className="flex items-center justify-between mb-6 p-4 bg-gradient-to-r from-gray-50 to-white rounded-2xl border border-gray-100/50">
            <span className="text-gray-600 font-medium">选择套餐:</span>
            <div className="text-right">
              <div className="font-bold text-gray-900 text-lg">{plans.find((p) => p.id === selectedPlan)?.name}</div>
              <div className="text-2xl font-bold text-[#05C7C7]">
                ¥{plans.find((p) => p.id === selectedPlan)?.price}
              </div>
            </div>
          </div>

          <Button className="w-full bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 hover:from-yellow-500 hover:via-orange-600 hover:to-red-600 text-white py-5 rounded-2xl font-bold text-lg shadow-2xl shadow-orange-500/30 transition-all duration-300 hover:scale-[1.02] relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
            <Crown className="w-6 h-6 mr-2" />
            立即开通VIP会员
          </Button>

          <div className="flex items-center justify-center space-x-4 mt-4 text-xs text-gray-400">
            <div className="flex items-center space-x-1">
              <Shield className="w-3 h-3" />
              <span>安全支付</span>
            </div>
            <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
            <div className="flex items-center space-x-1">
              <Check className="w-3 h-3" />
              <span>随时取消</span>
            </div>
            <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
            <span>7天无理由退款</span>
          </div>

          <p className="text-xs text-gray-400 text-center mt-4">开通即表示同意《VIP会员服务协议》</p>
        </div>
      </div>

      {/* Bottom Spacing */}
      <div className="h-8"></div>
    </div>
  )
}