components/SportSelector.jsx

const sports = [
  {
    id: 'football',
    name: 'Football',
    icon: '🏈',
    description: 'NFL games with QB ratings, rushing yards, and more',
    color: 'from-brown-600 to-orange-700'
  },
  {
    id: 'baseball',
    name: 'Baseball',
    icon: '⚾',
    description: 'MLB games with batting averages, ERA, and home runs',
    color: 'from-blue-600 to-cyan-700'
  },
  {
    id: 'basketball',
    name: 'Basketball',
    icon: '🏀',
    description: 'NBA games with points per game, rebounds, and assists',
    color: 'from-orange-600 to-red-700'
  }
]

export default function SportSelector({ onSelect }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {sports.map((sport) => (
        <button
          key={sport.id}
          onClick={() => onSelect(sport.id)}
          className="group relative overflow-hidden rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 p-8 text-left transition-all duration-300 hover:scale-105 hover:shadow-2xl border border-gray-700 hover:border-accent"
        >
          <div className={`absolute inset-0 bg-gradient-to-br ${sport.color} opacity-0 transition-opacity duration-300 group-hover:opacity-10`} />
          
          <div className="relative z-10">
            <span className="text-6xl mb-4 block">{sport.icon}</span>
            <h3 className="text-2xl font-bold text-white mb-2">{sport.name}</h3>
            <p className="text-gray-400 text-sm leading-relaxed">{sport.description}</p>
            
            <div className="mt-6 flex items-center text-accent font-medium">
              Select Sport
              <svg className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </div>
          </div>
        </button>
      ))}
    </div>
  )
}