import {
  Handshake,
  MessageCircle,
  Calendar,
  Trophy,
} from 'lucide-react';

export default function WhyJoinTeamSection() {
  const benefits = [
    {
      icon: Handshake,
      title: 'Shared Strategy',
      description: 'Develop setups together, share telemetry, and coordinate pit strategies for endurance races.',
    },
    {
      icon: MessageCircle,
      title: 'Team Communication',
      description: 'Discord integration, voice chat during races, and dedicated team channels.',
    },
    {
      icon: Calendar,
      title: 'Coordinated Schedule',
      description: 'Team calendars, practice sessions, and organized race attendance.',
    },
    {
      icon: Trophy,
      title: 'Team Championships',
      description: 'Compete in team-based leagues and build your collective reputation.',
    },
  ];

  return (
    <div className="mb-12">
      <div className="text-center mb-8">
        <h2 className="text-2xl font-bold text-white mb-2">Why Join a Team?</h2>
        <p className="text-gray-400">Racing is better when you have teammates to share the journey</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {benefits.map((benefit) => (
          <div
            key={benefit.title}
            className="p-5 rounded-xl bg-iron-gray/50 border border-charcoal-outline/50 hover:border-purple-500/30 transition-all duration-300"
          >
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10 border border-purple-500/20 mb-3">
              <benefit.icon className="w-5 h-5 text-purple-400" />
            </div>
            <h3 className="text-white font-semibold mb-1">{benefit.title}</h3>
            <p className="text-sm text-gray-500">{benefit.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}