gridpilot.gg/apps/website/components/teams/TeamHeroSection.tsx

'use client';

import {
  Users,
  Search,
  Plus,
  Crown,
  Star,
  TrendingUp,
  Shield,
  UserPlus,
} from 'lucide-react';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';

type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';

interface SkillLevelConfig {
  id: SkillLevel;
  label: string;
  icon: React.ElementType;
  color: string;
  bgColor: string;
  borderColor: string;
  description: string;
}

const SKILL_LEVELS: SkillLevelConfig[] = [
  {
    id: 'pro',
    label: 'Pro',
    icon: Crown,
    color: 'text-yellow-400',
    bgColor: 'bg-yellow-400/10',
    borderColor: 'border-yellow-400/30',
    description: 'Elite competition, sponsored teams',
  },
  {
    id: 'advanced',
    label: 'Advanced',
    icon: Star,
    color: 'text-purple-400',
    bgColor: 'bg-purple-400/10',
    borderColor: 'border-purple-400/30',
    description: 'Competitive racing, high consistency',
  },
  {
    id: 'intermediate',
    label: 'Intermediate',
    icon: TrendingUp,
    color: 'text-primary-blue',
    bgColor: 'bg-primary-blue/10',
    borderColor: 'border-primary-blue/30',
    description: 'Growing skills, regular practice',
  },
  {
    id: 'beginner',
    label: 'Beginner',
    icon: Shield,
    color: 'text-green-400',
    bgColor: 'bg-green-400/10',
    borderColor: 'border-green-400/30',
    description: 'Learning the basics, friendly environment',
  },
];

interface TeamHeroSectionProps {
  teams: TeamSummaryViewModel[];
  teamsByLevel: Record<string, TeamSummaryViewModel[]>;
  recruitingCount: number;
  onShowCreateForm: () => void;
  onBrowseTeams: () => void;
  onSkillLevelClick: (level: SkillLevel) => void;
}

export default function TeamHeroSection({
  teams,
  teamsByLevel,
  recruitingCount,
  onShowCreateForm,
  onBrowseTeams,
  onSkillLevelClick,
}: TeamHeroSectionProps) {
  return (
    <div className="relative mb-10 overflow-hidden">
      {/* Main Hero Card */}
      <div className="relative py-12 px-8 rounded-2xl bg-gradient-to-br from-purple-900/30 via-iron-gray/80 to-deep-graphite border border-purple-500/20">
        {/* Background decorations */}
        <div className="absolute top-0 right-0 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-yellow-400/5 rounded-full blur-2xl" />

        <div className="relative z-10">
          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
            <div className="max-w-xl">
              {/* Badge */}
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-medium mb-4">
                <Users className="w-3.5 h-3.5" />
                Team Racing
              </div>

              <Heading level={1} className="text-4xl lg:text-5xl mb-4">
                Find Your
                <span className="text-purple-400"> Crew</span>
              </Heading>

              <p className="text-gray-400 text-lg leading-relaxed mb-6">
                Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions.
              </p>

              {/* Quick Stats */}
              <div className="flex flex-wrap gap-4 mb-6">
                <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
                  <Users className="w-4 h-4 text-purple-400" />
                  <span className="text-white font-semibold">{teams.length}</span>
                  <span className="text-gray-500 text-sm">Teams</span>
                </div>
                <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
                  <UserPlus className="w-4 h-4 text-performance-green" />
                  <span className="text-white font-semibold">{recruitingCount}</span>
                  <span className="text-gray-500 text-sm">Recruiting</span>
                </div>
              </div>

              {/* CTA Buttons */}
              <div className="flex flex-wrap gap-3">
                <Button
                  variant="primary"
                  onClick={onShowCreateForm}
                  className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-500"
                >
                  <Plus className="w-4 h-4" />
                  Create Team
                </Button>
                <Button
                  variant="secondary"
                  onClick={onBrowseTeams}
                  className="flex items-center gap-2"
                >
                  <Search className="w-4 h-4" />
                  Browse Teams
                </Button>
              </div>
            </div>

            {/* Skill Level Quick Nav */}
            <div className="lg:w-72">
              <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">Find Your Level</p>
              <div className="space-y-2">
                {SKILL_LEVELS.map((level) => {
                  const LevelIcon = level.icon;
                  const count = teamsByLevel[level.id]?.length || 0;

                  return (
                    <button
                      key={level.id}
                      type="button"
                      onClick={() => onSkillLevelClick(level.id)}
                      className={`w-full flex items-center justify-between p-3 rounded-lg ${level.bgColor} border ${level.borderColor} hover:scale-[1.02] transition-all duration-200`}
                    >
                      <div className="flex items-center gap-2">
                        <LevelIcon className={`w-4 h-4 ${level.color}`} />
                        <span className="text-white font-medium">{level.label}</span>
                      </div>
                      <span className="text-gray-400 text-sm">{count} teams</span>
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}