import { Header } from '@/components/layout/Header'
import { Rocket, Clock, Trophy, ArrowRight } from 'lucide-react'

const UPCOMING_POOLS = [
  {
    name: 'UFC 300 Special',
    description: 'Exclusive early access to UFC 300 betting markets',
    starts: 'Jan 15, 2026',
    reward: '2x XP Boost',
    status: 'upcoming'
  },
  {
    name: 'Super Bowl LXIII',
    description: 'Premium props and side bets for the big game',
    starts: 'Feb 1, 2026',
    reward: 'VIP Airdrop',
    status: 'upcoming'
  },
  {
    name: 'March Madness Early Bird',
    description: 'Get first access to tournament brackets',
    starts: 'Mar 1, 2026',
    reward: 'Exclusive Badge',
    status: 'upcoming'
  }
]

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

      {/* Hero Section */}
      <div className="bg-gradient-to-r from-blue-900 to-blue-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-blue-500/20 text-blue-300 px-4 py-2 rounded-full mb-6">
              <Rocket size={20} />
              <span className="font-medium">Launchpool</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold mb-4">
              Discover and Gain Early Access to New Bets
            </h1>
            <p className="text-blue-100 text-lg mb-8">
              Be the first to access exclusive betting markets before they go live. Place early bets to earn rewards and priority access.
            </p>
          </div>
        </div>
      </div>

      {/* How It Works */}
      <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">How Launchpool Works</h2>
        <div className="grid md:grid-cols-4 gap-6">
          <div className="text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span className="text-xl font-bold text-blue-600">1</span>
            </div>
            <h3 className="font-bold text-gray-900 mb-2">Browse Pools</h3>
            <p className="text-gray-600 text-sm">Explore upcoming betting events and markets</p>
          </div>
          <div className="text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span className="text-xl font-bold text-blue-600">2</span>
            </div>
            <h3 className="font-bold text-gray-900 mb-2">Reserve Your Spot</h3>
            <p className="text-gray-600 text-sm">Commit funds to secure early access to the pool</p>
          </div>
          <div className="text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span className="text-xl font-bold text-blue-600">3</span>
            </div>
            <h3 className="font-bold text-gray-900 mb-2">Earn Rewards</h3>
            <p className="text-gray-600 text-sm">Get XP boosts, badges, and exclusive perks</p>
          </div>
          <div className="text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span className="text-xl font-bold text-blue-600">4</span>
            </div>
            <h3 className="font-bold text-gray-900 mb-2">Get Early Access</h3>
            <p className="text-gray-600 text-sm">Place bets before the general public</p>
          </div>
        </div>
      </div>

      {/* Upcoming Pools */}
      <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">Upcoming Pools</h2>
          <div className="space-y-4 max-w-3xl mx-auto">
            {UPCOMING_POOLS.map((pool, index) => (
              <div key={index} className="bg-gray-50 rounded-xl p-6 flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <Rocket className="text-blue-600" size={24} />
                  </div>
                  <div>
                    <h3 className="font-bold text-gray-900">{pool.name}</h3>
                    <p className="text-sm text-gray-600">{pool.description}</p>
                    <div className="flex items-center gap-4 mt-2">
                      <span className="text-xs text-gray-500 flex items-center gap-1">
                        <Clock size={12} />
                        Starts {pool.starts}
                      </span>
                      <span className="text-xs text-blue-600 flex items-center gap-1">
                        <Trophy size={12} />
                        {pool.reward}
                      </span>
                    </div>
                  </div>
                </div>
                <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2">
                  Join Pool
                  <ArrowRight size={16} />
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
