import { Header } from '@/components/layout/Header'
import { Users, DollarSign, TrendingUp, BarChart3, Wallet } from 'lucide-react'

const AFFILIATE_FEATURES = [
  {
    icon: DollarSign,
    title: 'Up to 50% Commission',
    description: 'Earn up to 50% commission on every bet your referrals place'
  },
  {
    icon: TrendingUp,
    title: 'Lifetime Earnings',
    description: 'Continue earning from your referrals for as long as they bet'
  },
  {
    icon: BarChart3,
    title: 'Real-Time Dashboard',
    description: 'Track your earnings, clicks, and conversions in real-time'
  },
  {
    icon: Wallet,
    title: 'Weekly Payouts',
    description: 'Receive your commissions every week, no minimum threshold'
  }
]

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

      {/* Hero Section */}
      <div className="bg-gradient-to-r from-green-900 to-green-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-green-500/20 text-green-400 px-4 py-2 rounded-full mb-6">
              <Users size={20} />
              <span className="font-medium">Affiliate Program</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Earn Up to 50% Commission Per Bet
            </h1>
            <p className="text-green-100 text-lg mb-8">
              Join our affiliate program and start earning passive income by promoting H2H to your audience.
            </p>
            <button className="bg-white text-green-900 hover:bg-green-50 px-8 py-3 rounded-lg font-medium transition-colors">
              Become an Affiliate
            </button>
          </div>
        </div>
      </div>

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

      {/* Commission 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">Commission Structure</h2>
          <div className="max-w-2xl mx-auto">
            <div className="space-y-4">
              <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                <span className="font-medium text-gray-900">0-10 referrals/month</span>
                <span className="text-xl font-bold text-green-600">30% Commission</span>
              </div>
              <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                <span className="font-medium text-gray-900">11-50 referrals/month</span>
                <span className="text-xl font-bold text-green-600">40% Commission</span>
              </div>
              <div className="flex items-center justify-between p-4 bg-green-50 rounded-lg border-2 border-green-500">
                <span className="font-medium text-gray-900">50+ referrals/month</span>
                <span className="text-xl font-bold text-green-600">50% Commission</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
