wip

apps/website/app/leaderboards/drivers/page.tsx

@@ -0,0 +1,545 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Trophy,
+  Medal,
+  Crown,
+  Star,
+  TrendingUp,
+  Shield,
+  Search,
+  Filter,
+  Flag,
+  ArrowLeft,
+  Hash,
+  Percent,
+} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import Heading from '@/components/ui/Heading';
+import { getDriverRepository, getDriverStats, getAllDriverRankings, getImageService } from '@/lib/di-container';
+import Image from 'next/image';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type SkillLevel = 'beginner' | 'intermediate' | 'advanced' | 'pro';
+type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';
+
+interface DriverListItem {
+  id: string;
+  name: string;
+  rating: number;
+  skillLevel: SkillLevel;
+  nationality: string;
+  racesCompleted: number;
+  wins: number;
+  podiums: number;
+  rank: number;
+}
+
+// ============================================================================
+// DEMO DATA
+// ============================================================================
+
+const DEMO_DRIVERS: DriverListItem[] = [
+  { id: 'demo-1', name: 'Max Verstappen', rating: 4250, skillLevel: 'pro', nationality: 'NL', racesCompleted: 156, wins: 47, podiums: 89, rank: 1 },
+  { id: 'demo-2', name: 'Lewis Hamilton', rating: 4180, skillLevel: 'pro', nationality: 'GB', racesCompleted: 198, wins: 52, podiums: 112, rank: 2 },
+  { id: 'demo-3', name: 'Charles Leclerc', rating: 3950, skillLevel: 'pro', nationality: 'MC', racesCompleted: 134, wins: 28, podiums: 67, rank: 3 },
+  { id: 'demo-4', name: 'Lando Norris', rating: 3820, skillLevel: 'advanced', nationality: 'GB', racesCompleted: 112, wins: 18, podiums: 45, rank: 4 },
+  { id: 'demo-5', name: 'Carlos Sainz', rating: 3750, skillLevel: 'advanced', nationality: 'ES', racesCompleted: 145, wins: 15, podiums: 52, rank: 5 },
+  { id: 'demo-6', name: 'Oscar Piastri', rating: 3680, skillLevel: 'advanced', nationality: 'AU', racesCompleted: 78, wins: 8, podiums: 24, rank: 6 },
+  { id: 'demo-7', name: 'George Russell', rating: 3620, skillLevel: 'advanced', nationality: 'GB', racesCompleted: 98, wins: 6, podiums: 31, rank: 7 },
+  { id: 'demo-8', name: 'Fernando Alonso', rating: 3580, skillLevel: 'advanced', nationality: 'ES', racesCompleted: 256, wins: 32, podiums: 98, rank: 8 },
+  { id: 'demo-9', name: 'Nico Hülkenberg', rating: 3420, skillLevel: 'advanced', nationality: 'DE', racesCompleted: 167, wins: 2, podiums: 18, rank: 9 },
+  { id: 'demo-10', name: 'Yuki Tsunoda', rating: 3250, skillLevel: 'intermediate', nationality: 'JP', racesCompleted: 89, wins: 1, podiums: 8, rank: 10 },
+  { id: 'demo-11', name: 'Alex Albon', rating: 3180, skillLevel: 'intermediate', nationality: 'TH', racesCompleted: 102, wins: 0, podiums: 4, rank: 11 },
+  { id: 'demo-12', name: 'Kevin Magnussen', rating: 3050, skillLevel: 'intermediate', nationality: 'DK', racesCompleted: 145, wins: 0, podiums: 2, rank: 12 },
+  { id: 'demo-13', name: 'Pierre Gasly', rating: 2980, skillLevel: 'intermediate', nationality: 'FR', racesCompleted: 124, wins: 1, podiums: 5, rank: 13 },
+  { id: 'demo-14', name: 'Esteban Ocon', rating: 2920, skillLevel: 'intermediate', nationality: 'FR', racesCompleted: 118, wins: 1, podiums: 4, rank: 14 },
+  { id: 'demo-15', name: 'Lance Stroll', rating: 2850, skillLevel: 'intermediate', nationality: 'CA', racesCompleted: 134, wins: 0, podiums: 3, rank: 15 },
+];
+
+// ============================================================================
+// SKILL LEVEL CONFIG
+// ============================================================================
+
+const SKILL_LEVELS: {
+  id: SkillLevel;
+  label: string;
+  icon: React.ElementType;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+}[] = [
+  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'advanced', label: 'Advanced', icon: Star, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'intermediate', label: 'Intermediate', icon: TrendingUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+];
+
+// ============================================================================
+// SORT OPTIONS
+// ============================================================================
+
+const SORT_OPTIONS: { id: SortBy; label: string; icon: React.ElementType }[] = [
+  { id: 'rank', label: 'Rank', icon: Hash },
+  { id: 'rating', label: 'Rating', icon: Star },
+  { id: 'wins', label: 'Wins', icon: Trophy },
+  { id: 'podiums', label: 'Podiums', icon: Medal },
+  { id: 'winRate', label: 'Win Rate', icon: Percent },
+];
+
+// ============================================================================
+// TOP 3 PODIUM COMPONENT
+// ============================================================================
+
+interface TopThreePodiumProps {
+  drivers: DriverListItem[];
+  onDriverClick: (id: string) => void;
+}
+
+function TopThreePodium({ drivers, onDriverClick }: TopThreePodiumProps) {
+  const imageService = getImageService();
+  const top3 = drivers.slice(0, 3);
+
+  if (top3.length < 3) return null;
+
+  const podiumOrder = [top3[1], top3[0], top3[2]]; // 2nd, 1st, 3rd
+  const podiumHeights = ['h-32', 'h-40', 'h-24'];
+  const podiumColors = [
+    'from-gray-400/20 to-gray-500/10 border-gray-400/40',
+    'from-yellow-400/20 to-amber-500/10 border-yellow-400/40',
+    'from-amber-600/20 to-amber-700/10 border-amber-600/40',
+  ];
+  const crownColors = ['text-gray-300', 'text-yellow-400', 'text-amber-600'];
+  const positions = [2, 1, 3];
+
+  return (
+    <div className="mb-10">
+      <div className="flex items-end justify-center gap-4 lg:gap-8">
+        {podiumOrder.map((driver, index) => {
+          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+          const position = positions[index];
+
+          return (
+            <button
+              key={driver.id}
+              type="button"
+              onClick={() => onDriverClick(driver.id)}
+              className="flex flex-col items-center group"
+            >
+              {/* Driver Avatar & Info */}
+              <div className="relative mb-4">
+                {/* Crown for 1st place */}
+                {position === 1 && (
+                  <div className="absolute -top-6 left-1/2 -translate-x-1/2 animate-bounce">
+                    <Crown className="w-8 h-8 text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]" />
+                  </div>
+                )}
+
+                {/* Avatar */}
+                <div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
+                  <Image
+                    src={imageService.getDriverAvatar(driver.id)}
+                    alt={driver.name}
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+
+                {/* Position badge */}
+                <div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${podiumColors[index]} border-2 ${crownColors[index]}`}>
+                  {position}
+                </div>
+              </div>
+
+              {/* Driver Name */}
+              <p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
+                {driver.name}
+              </p>
+
+              {/* Rating */}
+              <p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
+                {driver.rating.toLocaleString()}
+              </p>
+
+              {/* Stats */}
+              <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
+                <span className="flex items-center gap-1">
+                  <Trophy className="w-3 h-3 text-performance-green" />
+                  {driver.wins}
+                </span>
+                <span>•</span>
+                <span className="flex items-center gap-1">
+                  <Medal className="w-3 h-3 text-warning-amber" />
+                  {driver.podiums}
+                </span>
+              </div>
+
+              {/* Podium Stand */}
+              <div className={`mt-4 w-28 lg:w-36 ${podiumHeights[index]} rounded-t-lg bg-gradient-to-t ${podiumColors[index]} border-t border-x flex items-end justify-center pb-4`}>
+                <span className={`text-4xl lg:text-5xl font-black ${crownColors[index]}`}>
+                  {position}
+                </span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// MAIN PAGE COMPONENT
+// ============================================================================
+
+export default function DriverLeaderboardPage() {
+  const router = useRouter();
+  const imageService = getImageService();
+  const [drivers, setDrivers] = useState<DriverListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSkill, setSelectedSkill] = useState<'all' | SkillLevel>('all');
+  const [sortBy, setSortBy] = useState<SortBy>('rank');
+  const [showFilters, setShowFilters] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      const driverRepo = getDriverRepository();
+      const allDrivers = await driverRepo.findAll();
+      const rankings = getAllDriverRankings();
+
+      const items: DriverListItem[] = allDrivers.map((driver) => {
+        const stats = getDriverStats(driver.id);
+        const rating = stats?.rating ?? 0;
+        const wins = stats?.wins ?? 0;
+        const podiums = stats?.podiums ?? 0;
+        const totalRaces = stats?.totalRaces ?? 0;
+
+        let effectiveRank = Number.POSITIVE_INFINITY;
+        if (typeof stats?.overallRank === 'number' && stats.overallRank > 0) {
+          effectiveRank = stats.overallRank;
+        } else {
+          const indexInGlobal = rankings.findIndex((entry) => entry.driverId === driver.id);
+          if (indexInGlobal !== -1) {
+            effectiveRank = indexInGlobal + 1;
+          }
+        }
+
+        const skillLevel: SkillLevel =
+          rating >= 3000 ? 'pro' : rating >= 2500 ? 'advanced' : rating >= 1800 ? 'intermediate' : 'beginner';
+
+        return {
+          id: driver.id,
+          name: driver.name,
+          rating,
+          skillLevel,
+          nationality: driver.country,
+          racesCompleted: totalRaces,
+          wins,
+          podiums,
+          rank: effectiveRank,
+        };
+      });
+
+      setDrivers(items.length > 0 ? items : DEMO_DRIVERS);
+      setLoading(false);
+    };
+
+    void load();
+  }, []);
+
+  const filteredDrivers = drivers.filter((driver) => {
+    const matchesSearch = driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesSkill = selectedSkill === 'all' || driver.skillLevel === selectedSkill;
+    return matchesSearch && matchesSkill;
+  });
+
+  const sortedDrivers = [...filteredDrivers].sort((a, b) => {
+    const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
+    const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;
+
+    switch (sortBy) {
+      case 'rank':
+        return rankA - rankB || b.rating - a.rating || a.name.localeCompare(b.name);
+      case 'rating':
+        return b.rating - a.rating;
+      case 'wins':
+        return b.wins - a.wins;
+      case 'podiums':
+        return b.podiums - a.podiums;
+      case 'winRate': {
+        const aRate = a.racesCompleted > 0 ? a.wins / a.racesCompleted : 0;
+        const bRate = b.racesCompleted > 0 ? b.wins / b.racesCompleted : 0;
+        return bRate - aRate;
+      }
+      default:
+        return 0;
+    }
+  });
+
+  const handleDriverClick = (driverId: string) => {
+    if (driverId.startsWith('demo-')) return;
+    router.push(`/drivers/${driverId}`);
+  };
+
+  const getMedalColor = (position: number) => {
+    switch (position) {
+      case 1: return 'text-yellow-400';
+      case 2: return 'text-gray-300';
+      case 3: return 'text-amber-600';
+      default: return 'text-gray-500';
+    }
+  };
+
+  const getMedalBg = (position: number) => {
+    switch (position) {
+      case 1: return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
+      case 2: return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
+      case 3: return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
+      default: return 'bg-iron-gray/50 border-charcoal-outline';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading driver rankings...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Header */}
+      <div className="mb-8">
+        <Button
+          variant="secondary"
+          onClick={() => router.push('/leaderboards')}
+          className="flex items-center gap-2 mb-6"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Leaderboards
+        </Button>
+
+        <div className="flex items-center gap-4 mb-2">
+          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+            <Trophy className="w-7 h-7 text-primary-blue" />
+          </div>
+          <div>
+            <Heading level={1} className="text-3xl lg:text-4xl">
+              Driver Leaderboard
+            </Heading>
+            <p className="text-gray-400">Full rankings of all drivers by performance metrics</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Top 3 Podium */}
+      {!searchQuery && sortBy === 'rank' && <TopThreePodium drivers={sortedDrivers} onDriverClick={handleDriverClick} />}
+
+      {/* Filters */}
+      <div className="mb-6 space-y-4">
+        <div className="flex flex-col lg:flex-row gap-4">
+          <div className="flex-1 relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
+            <Input
+              type="text"
+              placeholder="Search drivers by name or nationality..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-11"
+            />
+          </div>
+          <Button
+            type="button"
+            variant="secondary"
+            onClick={() => setShowFilters(!showFilters)}
+            className="lg:hidden flex items-center gap-2"
+          >
+            <Filter className="w-4 h-4" />
+            Filters
+          </Button>
+        </div>
+
+        <div className={`flex flex-wrap gap-2 ${showFilters ? 'block' : 'hidden lg:flex'}`}>
+          <button
+            type="button"
+            onClick={() => setSelectedSkill('all')}
+            className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+              selectedSkill === 'all'
+                ? 'bg-primary-blue text-white'
+                : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
+            }`}
+          >
+            All Levels
+          </button>
+          {SKILL_LEVELS.map((level) => {
+            const LevelIcon = level.icon;
+            return (
+              <button
+                key={level.id}
+                type="button"
+                onClick={() => setSelectedSkill(level.id)}
+                className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
+                  selectedSkill === level.id
+                    ? `${level.bgColor} ${level.color} border ${level.borderColor}`
+                    : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
+                }`}
+              >
+                <LevelIcon className="w-4 h-4" />
+                {level.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-500">Sort by:</span>
+          <div className="flex items-center gap-1 p-1 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+            {SORT_OPTIONS.map((option) => (
+              <button
+                key={option.id}
+                type="button"
+                onClick={() => setSortBy(option.id)}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
+                  sortBy === option.id
+                    ? 'bg-primary-blue text-white'
+                    : 'text-gray-400 hover:text-white hover:bg-iron-gray'
+                }`}
+              >
+                <option.icon className="w-3.5 h-3.5" />
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Leaderboard Table */}
+      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
+        {/* Table Header */}
+        <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
+          <div className="col-span-1 text-center">Rank</div>
+          <div className="col-span-5 lg:col-span-4">Driver</div>
+          <div className="col-span-2 text-center hidden md:block">Races</div>
+          <div className="col-span-2 lg:col-span-1 text-center">Rating</div>
+          <div className="col-span-2 lg:col-span-1 text-center">Wins</div>
+          <div className="col-span-1 text-center hidden lg:block">Podiums</div>
+          <div className="col-span-2 text-center">Win Rate</div>
+        </div>
+
+        {/* Table Body */}
+        <div className="divide-y divide-charcoal-outline/50">
+          {sortedDrivers.map((driver, index) => {
+            const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+            const LevelIcon = levelConfig?.icon || Shield;
+            const winRate = driver.racesCompleted > 0 ? ((driver.wins / driver.racesCompleted) * 100).toFixed(1) : '0.0';
+            const position = index + 1;
+
+            return (
+              <button
+                key={driver.id}
+                type="button"
+                onClick={() => handleDriverClick(driver.id)}
+                className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+              >
+                {/* Position */}
+                <div className="col-span-1 flex items-center justify-center">
+                  <div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
+                    {position <= 3 ? <Medal className="w-4 h-4" /> : position}
+                  </div>
+                </div>
+
+                {/* Driver Info */}
+                <div className="col-span-5 lg:col-span-4 flex items-center gap-3">
+                  <div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
+                    <Image src={imageService.getDriverAvatar(driver.id)} alt={driver.name} fill className="object-cover" />
+                  </div>
+                  <div className="min-w-0">
+                    <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
+                      {driver.name}
+                    </p>
+                    <div className="flex items-center gap-2 text-xs text-gray-500">
+                      <span className="flex items-center gap-1">
+                        <Flag className="w-3 h-3" />
+                        {driver.nationality}
+                      </span>
+                      <span className={`flex items-center gap-1 ${levelConfig?.color}`}>
+                        <LevelIcon className="w-3 h-3" />
+                        {levelConfig?.label}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Races */}
+                <div className="col-span-2 items-center justify-center hidden md:flex">
+                  <span className="text-gray-400">{driver.racesCompleted}</span>
+                </div>
+
+                {/* Rating */}
+                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
+                  <span className={`font-mono font-semibold ${sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}`}>
+                    {driver.rating.toLocaleString()}
+                  </span>
+                </div>
+
+                {/* Wins */}
+                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
+                  <span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-primary-blue' : 'text-performance-green'}`}>
+                    {driver.wins}
+                  </span>
+                </div>
+
+                {/* Podiums */}
+                <div className="col-span-1 items-center justify-center hidden lg:flex">
+                  <span className={`font-mono font-semibold ${sortBy === 'podiums' ? 'text-primary-blue' : 'text-warning-amber'}`}>
+                    {driver.podiums}
+                  </span>
+                </div>
+
+                {/* Win Rate */}
+                <div className="col-span-2 flex items-center justify-center">
+                  <span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
+                    {winRate}%
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Empty State */}
+        {sortedDrivers.length === 0 && (
+          <div className="py-16 text-center">
+            <Search className="w-12 h-12 text-gray-600 mx-auto mb-4" />
+            <p className="text-gray-400 mb-2">No drivers found</p>
+            <p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
+            <Button
+              variant="secondary"
+              onClick={() => {
+                setSearchQuery('');
+                setSelectedSkill('all');
+              }}
+              className="mt-4"
+            >
+              Clear Filters
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/website/app/leaderboards/page.tsx

@@ -0,0 +1,515 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Trophy,
+  Users,
+  Crown,
+  Star,
+  TrendingUp,
+  Shield,
+  Medal,
+  ChevronRight,
+  Award,
+  Flag,
+  Target,
+  Zap,
+  Hash,
+  Percent,
+} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+import { getDriverRepository, getDriverStats, getAllDriverRankings, getImageService, getGetAllTeamsQuery, getGetTeamMembersQuery } from '@/lib/di-container';
+import Image from 'next/image';
+import type { Team } from '@gridpilot/racing';
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+type SkillLevel = 'beginner' | 'intermediate' | 'advanced' | 'pro';
+
+interface DriverListItem {
+  id: string;
+  name: string;
+  rating: number;
+  skillLevel: SkillLevel;
+  nationality: string;
+  wins: number;
+  podiums: number;
+  rank: number;
+}
+
+interface TeamDisplayData {
+  id: string;
+  name: string;
+  memberCount: number;
+  rating: number | null;
+  totalWins: number;
+  totalRaces: number;
+  performanceLevel: SkillLevel;
+}
+
+// ============================================================================
+// DEMO DATA
+// ============================================================================
+
+const DEMO_DRIVERS: DriverListItem[] = [
+  { id: 'demo-1', name: 'Max Verstappen', rating: 4250, skillLevel: 'pro', nationality: 'NL', wins: 47, podiums: 89, rank: 1 },
+  { id: 'demo-2', name: 'Lewis Hamilton', rating: 4180, skillLevel: 'pro', nationality: 'GB', wins: 52, podiums: 112, rank: 2 },
+  { id: 'demo-3', name: 'Charles Leclerc', rating: 3950, skillLevel: 'pro', nationality: 'MC', wins: 28, podiums: 67, rank: 3 },
+  { id: 'demo-4', name: 'Lando Norris', rating: 3820, skillLevel: 'advanced', nationality: 'GB', wins: 18, podiums: 45, rank: 4 },
+  { id: 'demo-5', name: 'Carlos Sainz', rating: 3750, skillLevel: 'advanced', nationality: 'ES', wins: 15, podiums: 52, rank: 5 },
+  { id: 'demo-6', name: 'Oscar Piastri', rating: 3680, skillLevel: 'advanced', nationality: 'AU', wins: 8, podiums: 24, rank: 6 },
+  { id: 'demo-7', name: 'George Russell', rating: 3620, skillLevel: 'advanced', nationality: 'GB', wins: 6, podiums: 31, rank: 7 },
+  { id: 'demo-8', name: 'Fernando Alonso', rating: 3580, skillLevel: 'advanced', nationality: 'ES', wins: 32, podiums: 98, rank: 8 },
+  { id: 'demo-9', name: 'Nico Hülkenberg', rating: 3420, skillLevel: 'advanced', nationality: 'DE', wins: 2, podiums: 18, rank: 9 },
+  { id: 'demo-10', name: 'Yuki Tsunoda', rating: 3250, skillLevel: 'intermediate', nationality: 'JP', wins: 1, podiums: 8, rank: 10 },
+];
+
+const DEMO_TEAMS: TeamDisplayData[] = [
+  { id: 'demo-team-1', name: 'Apex Predators Racing', memberCount: 8, rating: 4850, totalWins: 47, totalRaces: 156, performanceLevel: 'pro' },
+  { id: 'demo-team-2', name: 'Velocity Esports', memberCount: 12, rating: 5200, totalWins: 63, totalRaces: 198, performanceLevel: 'pro' },
+  { id: 'demo-team-3', name: 'Nitro Motorsport', memberCount: 6, rating: 4720, totalWins: 38, totalRaces: 112, performanceLevel: 'pro' },
+  { id: 'demo-team-4', name: 'Horizon Racing Collective', memberCount: 10, rating: 3800, totalWins: 24, totalRaces: 89, performanceLevel: 'advanced' },
+  { id: 'demo-team-5', name: 'Phoenix Rising eSports', memberCount: 7, rating: 3650, totalWins: 19, totalRaces: 76, performanceLevel: 'advanced' },
+];
+
+// ============================================================================
+// SKILL LEVEL CONFIG
+// ============================================================================
+
+const SKILL_LEVELS: {
+  id: SkillLevel;
+  label: string;
+  icon: React.ElementType;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+}[] = [
+  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
+  { id: 'advanced', label: 'Advanced', icon: Star, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
+  { id: 'intermediate', label: 'Intermediate', icon: TrendingUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
+  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
+];
+
+// ============================================================================
+// DRIVER LEADERBOARD PREVIEW
+// ============================================================================
+
+interface DriverLeaderboardPreviewProps {
+  drivers: DriverListItem[];
+  onDriverClick: (id: string) => void;
+}
+
+function DriverLeaderboardPreview({ drivers, onDriverClick }: DriverLeaderboardPreviewProps) {
+  const router = useRouter();
+  const imageService = getImageService();
+  const top10 = drivers.slice(0, 10);
+
+  const getMedalColor = (position: number) => {
+    switch (position) {
+      case 1: return 'text-yellow-400';
+      case 2: return 'text-gray-300';
+      case 3: return 'text-amber-600';
+      default: return 'text-gray-500';
+    }
+  };
+
+  const getMedalBg = (position: number) => {
+    switch (position) {
+      case 1: return 'bg-yellow-400/10 border-yellow-400/30';
+      case 2: return 'bg-gray-300/10 border-gray-300/30';
+      case 3: return 'bg-amber-600/10 border-amber-600/30';
+      default: return 'bg-iron-gray/50 border-charcoal-outline';
+    }
+  };
+
+  return (
+    <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
+            <Trophy className="w-5 h-5 text-primary-blue" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white">Driver Rankings</h3>
+            <p className="text-xs text-gray-500">Top performers across all leagues</p>
+          </div>
+        </div>
+        <Button
+          variant="secondary"
+          onClick={() => router.push('/leaderboards/drivers')}
+          className="flex items-center gap-2 text-sm"
+        >
+          View All
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Leaderboard Rows */}
+      <div className="divide-y divide-charcoal-outline/50">
+        {top10.map((driver, index) => {
+          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
+          const position = index + 1;
+
+          return (
+            <button
+              key={driver.id}
+              type="button"
+              onClick={() => onDriverClick(driver.id)}
+              className="flex items-center gap-4 px-5 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+            >
+              {/* Position */}
+              <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
+                {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
+              </div>
+
+              {/* Avatar */}
+              <div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
+                <Image src={imageService.getDriverAvatar(driver.id)} alt={driver.name} fill className="object-cover" />
+              </div>
+
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
+                  {driver.name}
+                </p>
+                <div className="flex items-center gap-2 text-xs text-gray-500">
+                  <Flag className="w-3 h-3" />
+                  {driver.nationality}
+                  <span className={levelConfig?.color}>{levelConfig?.label}</span>
+                </div>
+              </div>
+
+              {/* Stats */}
+              <div className="flex items-center gap-4 text-sm">
+                <div className="text-center">
+                  <p className="text-primary-blue font-mono font-semibold">{driver.rating.toLocaleString()}</p>
+                  <p className="text-[10px] text-gray-500">Rating</p>
+                </div>
+                <div className="text-center">
+                  <p className="text-performance-green font-mono font-semibold">{driver.wins}</p>
+                  <p className="text-[10px] text-gray-500">Wins</p>
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// TEAM LEADERBOARD PREVIEW
+// ============================================================================
+
+interface TeamLeaderboardPreviewProps {
+  teams: TeamDisplayData[];
+  onTeamClick: (id: string) => void;
+}
+
+function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeaderboardPreviewProps) {
+  const router = useRouter();
+  const imageService = getImageService();
+  const top5 = [...teams]
+    .filter((t) => t.rating !== null)
+    .sort((a, b) => (b.rating ?? 0) - (a.rating ?? 0))
+    .slice(0, 5);
+
+  const getMedalColor = (position: number) => {
+    switch (position) {
+      case 1: return 'text-yellow-400';
+      case 2: return 'text-gray-300';
+      case 3: return 'text-amber-600';
+      default: return 'text-gray-500';
+    }
+  };
+
+  const getMedalBg = (position: number) => {
+    switch (position) {
+      case 1: return 'bg-yellow-400/10 border-yellow-400/30';
+      case 2: return 'bg-gray-300/10 border-gray-300/30';
+      case 3: return 'bg-amber-600/10 border-amber-600/30';
+      default: return 'bg-iron-gray/50 border-charcoal-outline';
+    }
+  };
+
+  return (
+    <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-charcoal-outline bg-iron-gray/20">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-500/5 border border-purple-500/20">
+            <Users className="w-5 h-5 text-purple-400" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white">Team Rankings</h3>
+            <p className="text-xs text-gray-500">Top performing racing teams</p>
+          </div>
+        </div>
+        <Button
+          variant="secondary"
+          onClick={() => router.push('/teams/leaderboard')}
+          className="flex items-center gap-2 text-sm"
+        >
+          View All
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Leaderboard Rows */}
+      <div className="divide-y divide-charcoal-outline/50">
+        {top5.map((team, index) => {
+          const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
+          const LevelIcon = levelConfig?.icon || Shield;
+          const position = index + 1;
+
+          return (
+            <button
+              key={team.id}
+              type="button"
+              onClick={() => onTeamClick(team.id)}
+              className="flex items-center gap-4 px-5 py-3 w-full text-left hover:bg-iron-gray/30 transition-colors group"
+            >
+              {/* Position */}
+              <div className={`flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
+                {position <= 3 ? <Crown className="w-3.5 h-3.5" /> : position}
+              </div>
+
+              {/* Team Icon */}
+              <div className={`flex h-9 w-9 items-center justify-center rounded-lg ${levelConfig?.bgColor} border ${levelConfig?.borderColor}`}>
+                <LevelIcon className={`w-4 h-4 ${levelConfig?.color}`} />
+              </div>
+
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <p className="text-white font-medium truncate group-hover:text-purple-400 transition-colors">
+                  {team.name}
+                </p>
+                <div className="flex items-center gap-2 text-xs text-gray-500">
+                  <Users className="w-3 h-3" />
+                  {team.memberCount} members
+                  <span className={levelConfig?.color}>{levelConfig?.label}</span>
+                </div>
+              </div>
+
+              {/* Stats */}
+              <div className="flex items-center gap-4 text-sm">
+                <div className="text-center">
+                  <p className="text-purple-400 font-mono font-semibold">{team.rating?.toLocaleString()}</p>
+                  <p className="text-[10px] text-gray-500">Rating</p>
+                </div>
+                <div className="text-center">
+                  <p className="text-performance-green font-mono font-semibold">{team.totalWins}</p>
+                  <p className="text-[10px] text-gray-500">Wins</p>
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// MAIN PAGE COMPONENT
+// ============================================================================
+
+export default function LeaderboardsPage() {
+  const router = useRouter();
+  const [drivers, setDrivers] = useState<DriverListItem[]>([]);
+  const [teams, setTeams] = useState<TeamDisplayData[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        // Load drivers
+        const driverRepo = getDriverRepository();
+        const allDrivers = await driverRepo.findAll();
+        const rankings = getAllDriverRankings();
+
+        const driverItems: DriverListItem[] = allDrivers.map((driver) => {
+          const stats = getDriverStats(driver.id);
+          const rating = stats?.rating ?? 0;
+          const wins = stats?.wins ?? 0;
+          const podiums = stats?.podiums ?? 0;
+
+          let effectiveRank = Number.POSITIVE_INFINITY;
+          if (typeof stats?.overallRank === 'number' && stats.overallRank > 0) {
+            effectiveRank = stats.overallRank;
+          } else {
+            const indexInGlobal = rankings.findIndex((entry) => entry.driverId === driver.id);
+            if (indexInGlobal !== -1) {
+              effectiveRank = indexInGlobal + 1;
+            }
+          }
+
+          const skillLevel: SkillLevel =
+            rating >= 3000 ? 'pro' : rating >= 2500 ? 'advanced' : rating >= 1800 ? 'intermediate' : 'beginner';
+
+          return {
+            id: driver.id,
+            name: driver.name,
+            rating,
+            skillLevel,
+            nationality: driver.country,
+            wins,
+            podiums,
+            rank: effectiveRank,
+          };
+        });
+
+        // Sort by rank
+        driverItems.sort((a, b) => {
+          const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
+          const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;
+          return rankA - rankB || b.rating - a.rating;
+        });
+
+        // Load teams
+        const allTeamsQuery = getGetAllTeamsQuery();
+        const teamMembersQuery = getGetTeamMembersQuery();
+        const allTeams = await allTeamsQuery.execute();
+        const teamData: TeamDisplayData[] = [];
+
+        await Promise.all(
+          allTeams.map(async (team: Team) => {
+            const memberships = await teamMembersQuery.execute({ teamId: team.id });
+            const memberCount = memberships.length;
+
+            let ratingSum = 0;
+            let ratingCount = 0;
+            let totalWins = 0;
+            let totalRaces = 0;
+
+            for (const membership of memberships) {
+              const stats = getDriverStats(membership.driverId);
+              if (!stats) continue;
+              if (typeof stats.rating === 'number') {
+                ratingSum += stats.rating;
+                ratingCount += 1;
+              }
+              totalWins += stats.wins ?? 0;
+              totalRaces += stats.totalRaces ?? 0;
+            }
+
+            const averageRating = ratingCount > 0 ? ratingSum / ratingCount : null;
+
+            let performanceLevel: SkillLevel = 'beginner';
+            if (averageRating !== null) {
+              if (averageRating >= 4500) performanceLevel = 'pro';
+              else if (averageRating >= 3000) performanceLevel = 'advanced';
+              else if (averageRating >= 2000) performanceLevel = 'intermediate';
+            }
+
+            teamData.push({
+              id: team.id,
+              name: team.name,
+              memberCount,
+              rating: averageRating,
+              totalWins,
+              totalRaces,
+              performanceLevel,
+            });
+          }),
+        );
+
+        setDrivers(driverItems.length > 0 ? driverItems : DEMO_DRIVERS);
+        setTeams(teamData.length > 0 ? teamData : DEMO_TEAMS);
+      } catch (error) {
+        console.error('Failed to load leaderboard data:', error);
+        setDrivers(DEMO_DRIVERS);
+        setTeams(DEMO_TEAMS);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void load();
+  }, []);
+
+  const handleDriverClick = (driverId: string) => {
+    if (driverId.startsWith('demo-')) return;
+    router.push(`/drivers/${driverId}`);
+  };
+
+  const handleTeamClick = (teamId: string) => {
+    if (teamId.startsWith('demo-team-')) return;
+    router.push(`/teams/${teamId}`);
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading leaderboards...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Hero Section */}
+      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite border border-yellow-500/20 overflow-hidden">
+        {/* Background decoration */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-yellow-400/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 bg-amber-600/5 rounded-full blur-3xl" />
+        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-purple-500/5 rounded-full blur-2xl" />
+
+        <div className="relative z-10">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
+              <Award className="w-7 h-7 text-yellow-400" />
+            </div>
+            <div>
+              <Heading level={1} className="text-3xl lg:text-4xl">
+                Leaderboards
+              </Heading>
+              <p className="text-gray-400">Where champions rise and legends are made</p>
+            </div>
+          </div>
+
+          <p className="text-gray-400 text-lg leading-relaxed max-w-2xl mb-6">
+            Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
+          </p>
+
+          {/* Quick Nav */}
+          <div className="flex flex-wrap gap-3">
+            <Button
+              variant="secondary"
+              onClick={() => router.push('/leaderboards/drivers')}
+              className="flex items-center gap-2"
+            >
+              <Trophy className="w-4 h-4 text-primary-blue" />
+              Driver Rankings
+            </Button>
+            <Button
+              variant="secondary"
+              onClick={() => router.push('/teams/leaderboard')}
+              className="flex items-center gap-2"
+            >
+              <Users className="w-4 h-4 text-purple-400" />
+              Team Rankings
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Leaderboard Grids */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <DriverLeaderboardPreview drivers={drivers} onDriverClick={handleDriverClick} />
+        <TeamLeaderboardPreview teams={teams} onTeamClick={handleTeamClick} />
+      </div>
+    </div>
+  );
+}