import { Header } from '@/components/layout/Header'
import { Crown, Shield, Zap, Users, TrendingUp, Award } from 'lucide-react'

const VIP_BENEFITS = [
  {
    icon: Crown,
    title: 'Exclusive VIP Status',
    description: 'Join an elite group of high-volume bettors with premium benefits'
  },
  {
    icon: Shield,
    title: 'Lower Fees',
    description: 'Enjoy significantly reduced house fees on all your bets'
  },
  {
    icon: Zap,
    title: 'Priority Support',
    description: '24/7 dedicated account manager and priority customer support'
  },
  {
    icon: Users,
    title: 'Institutional Access',
    description: 'API access and custom solutions for institutional traders'
  },
  {
    icon: TrendingUp,
    title: 'Higher Limits',
    description: 'Increased betting limits and exclusive high-stakes events'
  },
  {
    icon: Award,
    title: 'Exclusive Rewards',
    description: 'Access to VIP-only airdrops, events, and promotional offers'
  }
]

export default function VIP() {
  return (
    <div className="min-h-screen bg-gray-50">
      <Header />

      {/* Hero Section */}
      <div className="bg-gradient-to-r from-gray-900 to-gray-800 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="text-center max-w-3xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-yellow-500/20 text-yellow-400 px-4 py-2 rounded-full mb-6">
              <Crown size={20} />
              <span className="font-medium">VIP & Institutional Program</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Your Trusted Digital Betting Platform for VIPs and Institutions
            </h1>
            <p className="text-gray-300 text-lg mb-8">
              Experience premium benefits, lower fees, and exclusive access designed for high-volume traders and institutional clients.
            </p>
            <div className="flex gap-4 justify-center">
              <button className="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium transition-colors">
                Apply for VIP Status
              </button>
              <button className="bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-lg font-medium transition-colors">
                Contact Sales
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Benefits Grid */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <h2 className="text-2xl font-bold text-gray-900 text-center mb-12">VIP Benefits</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {VIP_BENEFITS.map((benefit, index) => {
            const Icon = benefit.icon
            return (
              <div key={index} className="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                  <Icon className="text-primary" size={24} />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-2">{benefit.title}</h3>
                <p className="text-gray-600">{benefit.description}</p>
              </div>
            )
          })}
        </div>
      </div>

      {/* VIP Tiers */}
      <div className="bg-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-gray-900 text-center mb-12">VIP Levels</h2>
          <div className="grid md:grid-cols-3 gap-6">
            <div className="border rounded-xl p-6 text-center">
              <div className="text-4xl mb-4">🥉</div>
              <h3 className="text-xl font-bold text-gray-900 mb-2">VIP Bronze</h3>
              <p className="text-gray-600 mb-4">Starting tier for active traders</p>
              <p className="text-2xl font-bold text-primary">8% Fees</p>
            </div>
            <div className="border-2 border-primary rounded-xl p-6 text-center relative">
              <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-white px-3 py-1 rounded-full text-sm">
                Popular
              </div>
              <div className="text-4xl mb-4">🥇</div>
              <h3 className="text-xl font-bold text-gray-900 mb-2">VIP Gold</h3>
              <p className="text-gray-600 mb-4">For high-volume traders</p>
              <p className="text-2xl font-bold text-primary">5% Fees</p>
            </div>
            <div className="border rounded-xl p-6 text-center bg-gradient-to-b from-gray-900 to-gray-800 text-white">
              <div className="text-4xl mb-4">💎</div>
              <h3 className="text-xl font-bold mb-2">Institutional</h3>
              <p className="text-gray-300 mb-4">For whales & institutions</p>
              <p className="text-2xl font-bold text-yellow-400">Custom Rates</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
