wip

apps/website/app/leagues/[id]/layout.tsx

@@ -4,11 +4,25 @@ import React, { useState, useEffect } from 'react';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import LeagueHeader from '@/components/leagues/LeagueHeader';
-import { getLeagueRepository, getDriverRepository, getLeagueMembershipRepository } from '@/lib/di-container';
+import {
+  getLeagueRepository,
+  getDriverRepository,
+  getLeagueMembershipRepository,
+  getSeasonRepository,
+  getSponsorRepository,
+  getSeasonSponsorshipRepository,
+} from '@/lib/di-container';
 import { useEffectiveDriverId } from '@/lib/currentDriver';
 import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
 import type { League } from '@gridpilot/racing/domain/entities/League';
 
+// Main sponsor info for "by XYZ" display
+interface MainSponsorInfo {
+  name: string;
+  logoUrl?: string;
+  websiteUrl?: string;
+}
+
 export default function LeagueLayout({
   children,
 }: {
@@ -22,6 +36,7 @@ export default function LeagueLayout({
   
   const [league, setLeague] = useState<League | null>(null);
   const [ownerName, setOwnerName] = useState<string>('');
+  const [mainSponsor, setMainSponsor] = useState<MainSponsorInfo | null>(null);
   const [isAdmin, setIsAdmin] = useState(false);
   const [loading, setLoading] = useState(true);
 
@@ -31,6 +46,9 @@ export default function LeagueLayout({
         const leagueRepo = getLeagueRepository();
         const driverRepo = getDriverRepository();
         const membershipRepo = getLeagueMembershipRepository();
+        const seasonRepo = getSeasonRepository();
+        const sponsorRepo = getSponsorRepository();
+        const sponsorshipRepo = getSeasonSponsorshipRepository();
         
         const leagueData = await leagueRepo.findById(leagueId);
         
@@ -47,6 +65,30 @@ export default function LeagueLayout({
         // Check if current user is admin
         const membership = await membershipRepo.getMembership(leagueId, currentDriverId);
         setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
+
+        // Load main sponsor for "by XYZ" display
+        try {
+          const seasons = await seasonRepo.findByLeagueId(leagueId);
+          const activeSeason = seasons.find((s: { status: string }) => s.status === 'active') ?? seasons[0];
+          
+          if (activeSeason) {
+            const sponsorships = await sponsorshipRepo.findBySeasonId(activeSeason.id);
+            const mainSponsorship = sponsorships.find(s => s.tier === 'main' && s.status === 'active');
+            
+            if (mainSponsorship) {
+              const sponsor = await sponsorRepo.findById(mainSponsorship.sponsorId);
+              if (sponsor) {
+                setMainSponsor({
+                  name: sponsor.name,
+                  logoUrl: sponsor.logoUrl,
+                  websiteUrl: sponsor.websiteUrl,
+                });
+              }
+            }
+          }
+        } catch (sponsorError) {
+          console.warn('Failed to load main sponsor:', sponsorError);
+        }
       } catch (error) {
         console.error('Failed to load league:', error);
       } finally {
@@ -86,7 +128,9 @@ export default function LeagueLayout({
   ];
 
   const adminTabs = [
+    { label: 'Sponsorships', href: `/leagues/${leagueId}/sponsorships`, exact: false },
     { label: 'Stewarding', href: `/leagues/${leagueId}/stewarding`, exact: false },
+    { label: 'Wallet', href: `/leagues/${leagueId}/wallet`, exact: false },
     { label: 'Settings', href: `/leagues/${leagueId}/settings`, exact: false },
   ];
 
@@ -114,6 +158,7 @@ export default function LeagueLayout({
           description={league.description}
           ownerId={league.ownerId}
           ownerName={ownerName}
+          mainSponsor={mainSponsor}
         />
 
         {/* Tab Navigation */}

apps/website/app/leagues/[id]/page.tsx

@@ -8,6 +8,12 @@ import JoinLeagueButton from '@/components/leagues/JoinLeagueButton';
 import LeagueActivityFeed from '@/components/leagues/LeagueActivityFeed';
 import DriverIdentity from '@/components/drivers/DriverIdentity';
 import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
+import SponsorInsightsCard, {
+  useSponsorMode,
+  MetricBuilders,
+  SlotTemplates,
+  type SponsorMetric,
+} from '@/components/sponsors/SponsorInsightsCard';
 import {
   League,
   Driver,
@@ -23,16 +29,30 @@ import {
   getDriverStats,
   getAllDriverRankings,
   getGetLeagueStatsQuery,
+  getSeasonRepository,
+  getSponsorRepository,
+  getSeasonSponsorshipRepository,
 } from '@/lib/di-container';
-import { Zap, Users, Trophy, Calendar } from 'lucide-react';
+import { Trophy, Star, ExternalLink } from 'lucide-react';
 import { getMembership, getLeagueMembers } from '@/lib/leagueMembership';
 import { useEffectiveDriverId } from '@/lib/currentDriver';
 import { getLeagueRoleDisplay } from '@/lib/leagueRoles';
 
+// Sponsor info type
+interface SponsorInfo {
+  id: string;
+  name: string;
+  logoUrl?: string;
+  websiteUrl?: string;
+  tier: 'main' | 'secondary';
+  tagline?: string;
+}
+
 export default function LeagueDetailPage() {
   const router = useRouter();
   const params = useParams();
   const leagueId = params.id as string;
+  const isSponsor = useSponsorMode();
 
   const [league, setLeague] = useState<League | null>(null);
   const [owner, setOwner] = useState<Driver | null>(null);
@@ -40,12 +60,44 @@ export default function LeagueDetailPage() {
   const [scoringConfig, setScoringConfig] = useState<LeagueScoringConfigDTO | null>(null);
   const [averageSOF, setAverageSOF] = useState<number | null>(null);
   const [completedRacesCount, setCompletedRacesCount] = useState<number>(0);
+  const [sponsors, setSponsors] = useState<SponsorInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [refreshKey, setRefreshKey] = useState(0);
 
   const currentDriverId = useEffectiveDriverId();
   const membership = getMembership(leagueId, currentDriverId);
+  const leagueMemberships = getLeagueMembers(leagueId);
+
+  // Sponsor insights data - uses leagueMemberships and averageSOF
+  const sponsorInsights = useMemo(() => {
+    const memberCount = leagueMemberships?.length || 20;
+    const mainSponsorTaken = sponsors.some(s => s.tier === 'main');
+    const secondaryTaken = sponsors.filter(s => s.tier === 'secondary').length;
+    
+    return {
+      avgViewsPerRace: 5400 + memberCount * 50,
+      totalImpressions: 45000 + memberCount * 500,
+      engagementRate: (3.5 + (memberCount / 50)).toFixed(1),
+      estimatedReach: memberCount * 150,
+      mainSponsorAvailable: !mainSponsorTaken,
+      secondarySlotsAvailable: Math.max(0, 2 - secondaryTaken),
+      mainSponsorPrice: 800 + Math.floor(memberCount * 10),
+      secondaryPrice: 250 + Math.floor(memberCount * 3),
+      tier: (averageSOF && averageSOF > 3000 ? 'premium' : averageSOF && averageSOF > 2000 ? 'standard' : 'starter') as 'premium' | 'standard' | 'starter',
+      trustScore: Math.min(100, 60 + memberCount + completedRacesCount),
+      discordMembers: memberCount * 3,
+      monthlyActivity: Math.min(100, 40 + completedRacesCount * 2),
+    };
+  }, [averageSOF, leagueMemberships?.length, sponsors, completedRacesCount]);
+  
+  // Build metrics for SponsorInsightsCard
+  const leagueMetrics: SponsorMetric[] = useMemo(() => [
+    MetricBuilders.views(sponsorInsights.avgViewsPerRace, 'Avg Views/Race'),
+    MetricBuilders.engagement(sponsorInsights.engagementRate),
+    MetricBuilders.reach(sponsorInsights.estimatedReach),
+    MetricBuilders.sof(averageSOF ?? '—'),
+  ], [sponsorInsights, averageSOF]);
 
   const loadLeagueData = async () => {
     try {
@@ -53,6 +105,9 @@ export default function LeagueDetailPage() {
       const raceRepo = getRaceRepository();
       const driverRepo = getDriverRepository();
       const leagueStatsQuery = getGetLeagueStatsQuery();
+      const seasonRepo = getSeasonRepository();
+      const sponsorRepo = getSponsorRepository();
+      const sponsorshipRepo = getSeasonSponsorshipRepository();
 
       const leagueData = await leagueRepo.findById(leagueId);
       
@@ -92,6 +147,47 @@ export default function LeagueDetailPage() {
         const completedRaces = leagueRaces.filter(r => r.status === 'completed');
         setCompletedRacesCount(completedRaces.length);
       }
+
+      // Load sponsors for this league
+      try {
+        const seasons = await seasonRepo.findByLeagueId(leagueId);
+        const activeSeason = seasons.find((s: { status: string }) => s.status === 'active') ?? seasons[0];
+        
+        if (activeSeason) {
+          const sponsorships = await sponsorshipRepo.findBySeasonId(activeSeason.id);
+          const activeSponsorships = sponsorships.filter(s => s.status === 'active');
+          
+          const sponsorInfos: SponsorInfo[] = [];
+          for (const sponsorship of activeSponsorships) {
+            const sponsor = await sponsorRepo.findById(sponsorship.sponsorId);
+            if (sponsor) {
+              // Get tagline from demo data if available
+              const demoSponsors = (await import('@gridpilot/testing-support')).sponsors;
+              const demoSponsor = demoSponsors.find((s: any) => s.id === sponsor.id);
+              
+              sponsorInfos.push({
+                id: sponsor.id,
+                name: sponsor.name,
+                logoUrl: sponsor.logoUrl,
+                websiteUrl: sponsor.websiteUrl,
+                tier: sponsorship.tier,
+                tagline: demoSponsor?.tagline,
+              });
+            }
+          }
+          
+          // Sort: main sponsors first, then secondary
+          sponsorInfos.sort((a, b) => {
+            if (a.tier === 'main' && b.tier !== 'main') return -1;
+            if (a.tier !== 'main' && b.tier === 'main') return 1;
+            return 0;
+          });
+          
+          setSponsors(sponsorInfos);
+        }
+      } catch (sponsorError) {
+        console.warn('Failed to load sponsors:', sponsorError);
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to load league');
     } finally {
@@ -117,7 +213,6 @@ export default function LeagueDetailPage() {
     return map;
   }, [drivers]);
 
-  const leagueMemberships = getLeagueMembers(leagueId);
   const ownerMembership = leagueMemberships.find((m) => m.role === 'owner') ?? null;
   const adminMemberships = leagueMemberships.filter((m) => m.role === 'admin');
   const stewardMemberships = leagueMemberships.filter((m) => m.role === 'steward');
@@ -179,8 +274,36 @@ export default function LeagueDetailPage() {
     </Card>
   ) : (
     <>
+      {/* Sponsor Insights Card - Only shown to sponsors, at top of page */}
+      {isSponsor && league && (
+        <SponsorInsightsCard
+          entityType="league"
+          entityId={leagueId}
+          entityName={league.name}
+          tier={sponsorInsights.tier}
+          metrics={leagueMetrics}
+          slots={SlotTemplates.league(
+            sponsorInsights.mainSponsorAvailable,
+            sponsorInsights.secondarySlotsAvailable,
+            sponsorInsights.mainSponsorPrice,
+            sponsorInsights.secondaryPrice
+          )}
+          trustScore={sponsorInsights.trustScore}
+          discordMembers={sponsorInsights.discordMembers}
+          monthlyActivity={sponsorInsights.monthlyActivity}
+          additionalStats={{
+            label: 'League Stats',
+            items: [
+              { label: 'Total Races', value: completedRacesCount },
+              { label: 'Active Members', value: leagueMemberships.length },
+              { label: 'Total Impressions', value: sponsorInsights.totalImpressions },
+            ],
+          }}
+        />
+      )}
+
       {/* Action Card */}
-      {!membership && (
+      {!membership && !isSponsor && (
         <Card className="mb-6">
           <div className="flex items-center justify-between">
             <div>
@@ -288,6 +411,102 @@ export default function LeagueDetailPage() {
             )}
           </Card>
 
+          {/* Sponsors Section - Show sponsor logos */}
+          {sponsors.length > 0 && (
+            <Card>
+              <h3 className="text-lg font-semibold text-white mb-4">
+                {sponsors.find(s => s.tier === 'main') ? 'Presented by' : 'Sponsors'}
+              </h3>
+              <div className="space-y-3">
+                {/* Main Sponsor - Featured prominently */}
+                {sponsors.filter(s => s.tier === 'main').map(sponsor => (
+                  <div
+                    key={sponsor.id}
+                    className="p-3 rounded-lg bg-gradient-to-r from-yellow-500/10 to-transparent border border-yellow-500/30"
+                  >
+                    <div className="flex items-center gap-3">
+                      {sponsor.logoUrl ? (
+                        <div className="w-12 h-12 rounded-lg bg-white flex items-center justify-center overflow-hidden">
+                          <img
+                            src={sponsor.logoUrl}
+                            alt={sponsor.name}
+                            className="w-10 h-10 object-contain"
+                          />
+                        </div>
+                      ) : (
+                        <div className="w-12 h-12 rounded-lg bg-yellow-500/20 flex items-center justify-center">
+                          <Trophy className="w-6 h-6 text-yellow-400" />
+                        </div>
+                      )}
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="font-semibold text-white truncate">{sponsor.name}</span>
+                          <span className="px-1.5 py-0.5 rounded text-[10px] bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">
+                            Main
+                          </span>
+                        </div>
+                        {sponsor.tagline && (
+                          <p className="text-xs text-gray-400 truncate mt-0.5">{sponsor.tagline}</p>
+                        )}
+                      </div>
+                      {sponsor.websiteUrl && (
+                        <a
+                          href={sponsor.websiteUrl}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="p-1.5 rounded-lg bg-iron-gray hover:bg-charcoal-outline transition-colors"
+                        >
+                          <ExternalLink className="w-4 h-4 text-gray-400" />
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                ))}
+
+                {/* Secondary Sponsors - Smaller display */}
+                {sponsors.filter(s => s.tier === 'secondary').length > 0 && (
+                  <div className="grid grid-cols-2 gap-2">
+                    {sponsors.filter(s => s.tier === 'secondary').map(sponsor => (
+                      <div
+                        key={sponsor.id}
+                        className="p-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline"
+                      >
+                        <div className="flex items-center gap-2">
+                          {sponsor.logoUrl ? (
+                            <div className="w-8 h-8 rounded bg-white flex items-center justify-center overflow-hidden flex-shrink-0">
+                              <img
+                                src={sponsor.logoUrl}
+                                alt={sponsor.name}
+                                className="w-6 h-6 object-contain"
+                              />
+                            </div>
+                          ) : (
+                            <div className="w-8 h-8 rounded bg-purple-500/20 flex items-center justify-center flex-shrink-0">
+                              <Star className="w-4 h-4 text-purple-400" />
+                            </div>
+                          )}
+                          <div className="flex-1 min-w-0">
+                            <span className="text-sm text-white truncate block">{sponsor.name}</span>
+                          </div>
+                          {sponsor.websiteUrl && (
+                            <a
+                              href={sponsor.websiteUrl}
+                              target="_blank"
+                              rel="noreferrer"
+                              className="p-1 rounded hover:bg-charcoal-outline transition-colors"
+                            >
+                              <ExternalLink className="w-3 h-3 text-gray-500" />
+                            </a>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </Card>
+          )}
+
           {/* Management */}
           {(ownerMembership || adminMemberships.length > 0 || stewardMemberships.length > 0) && (
             <Card>

apps/website/app/leagues/[id]/sponsorships/page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { LeagueSponsorshipsSection } from '@/components/leagues/LeagueSponsorshipsSection';
+import {
+  getLeagueRepository,
+  getLeagueMembershipRepository,
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
+import { AlertTriangle, Building, DollarSign } from 'lucide-react';
+import type { League } from '@gridpilot/racing/domain/entities/League';
+
+export default function LeagueSponsorshipsPage() {
+  const params = useParams();
+  const leagueId = params.id as string;
+  const currentDriverId = useEffectiveDriverId();
+
+  const [league, setLeague] = useState<League | null>(null);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const leagueRepo = getLeagueRepository();
+        const membershipRepo = getLeagueMembershipRepository();
+
+        const [leagueData, membership] = await Promise.all([
+          leagueRepo.findById(leagueId),
+          membershipRepo.getMembership(leagueId, currentDriverId),
+        ]);
+
+        setLeague(leagueData);
+        setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
+      } catch (err) {
+        console.error('Failed to load league:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadData();
+  }, [leagueId, currentDriverId]);
+
+  if (loading) {
+    return (
+      <Card>
+        <div className="py-6 text-sm text-gray-400 text-center">Loading sponsorships...</div>
+      </Card>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <Card>
+        <div className="text-center py-12">
+          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-warning-amber" />
+          </div>
+          <h3 className="text-lg font-medium text-white mb-2">Admin Access Required</h3>
+          <p className="text-sm text-gray-400">
+            Only league admins can manage sponsorships.
+          </p>
+        </div>
+      </Card>
+    );
+  }
+
+  if (!league) {
+    return (
+      <Card>
+        <div className="py-6 text-sm text-gray-500 text-center">
+          League not found.
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
+          <Building className="w-6 h-6 text-primary-blue" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-white">Sponsorships</h1>
+          <p className="text-sm text-gray-400">Manage sponsorship slots and review requests</p>
+        </div>
+      </div>
+
+      {/* Sponsorships Section */}
+      <Card>
+        <LeagueSponsorshipsSection
+          leagueId={leagueId}
+          readOnly={false}
+        />
+      </Card>
+    </div>
+  );
+}

apps/website/app/leagues/[id]/wallet/page.tsx

@@ -0,0 +1,483 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { 
+  Wallet, 
+  DollarSign, 
+  ArrowUpRight, 
+  ArrowDownLeft, 
+  Clock,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  Download,
+  CreditCard,
+  TrendingUp,
+  Calendar
+} from 'lucide-react';
+
+interface Transaction {
+  id: string;
+  type: 'sponsorship' | 'membership' | 'withdrawal' | 'prize';
+  description: string;
+  amount: number;
+  fee: number;
+  netAmount: number;
+  date: Date;
+  status: 'completed' | 'pending' | 'failed';
+  reference?: string;
+}
+
+interface WalletData {
+  balance: number;
+  currency: string;
+  totalRevenue: number;
+  totalFees: number;
+  totalWithdrawals: number;
+  pendingPayouts: number;
+  transactions: Transaction[];
+  canWithdraw: boolean;
+  withdrawalBlockReason?: string;
+}
+
+// Mock data for demonstration
+const MOCK_WALLET: WalletData = {
+  balance: 2450.00,
+  currency: 'USD',
+  totalRevenue: 3200.00,
+  totalFees: 320.00,
+  totalWithdrawals: 430.00,
+  pendingPayouts: 150.00,
+  canWithdraw: false,
+  withdrawalBlockReason: 'Season 2 is still active. Withdrawals are available after season completion.',
+  transactions: [
+    {
+      id: 'txn-1',
+      type: 'sponsorship',
+      description: 'Main Sponsor - TechCorp',
+      amount: 1200.00,
+      fee: 120.00,
+      netAmount: 1080.00,
+      date: new Date('2025-12-01'),
+      status: 'completed',
+      reference: 'SP-2025-001',
+    },
+    {
+      id: 'txn-2',
+      type: 'sponsorship',
+      description: 'Secondary Sponsor - RaceFuel',
+      amount: 400.00,
+      fee: 40.00,
+      netAmount: 360.00,
+      date: new Date('2025-12-01'),
+      status: 'completed',
+      reference: 'SP-2025-002',
+    },
+    {
+      id: 'txn-3',
+      type: 'membership',
+      description: 'Season Fee - 32 drivers',
+      amount: 1600.00,
+      fee: 160.00,
+      netAmount: 1440.00,
+      date: new Date('2025-11-15'),
+      status: 'completed',
+      reference: 'MF-2025-032',
+    },
+    {
+      id: 'txn-4',
+      type: 'withdrawal',
+      description: 'Bank Transfer - Season 1 Payout',
+      amount: -430.00,
+      fee: 0,
+      netAmount: -430.00,
+      date: new Date('2025-10-30'),
+      status: 'completed',
+      reference: 'WD-2025-001',
+    },
+    {
+      id: 'txn-5',
+      type: 'prize',
+      description: 'Championship Prize Pool (reserved)',
+      amount: -150.00,
+      fee: 0,
+      netAmount: -150.00,
+      date: new Date('2025-12-05'),
+      status: 'pending',
+      reference: 'PZ-2025-001',
+    },
+  ],
+};
+
+function TransactionRow({ transaction }: { transaction: Transaction }) {
+  const isIncoming = transaction.amount > 0;
+  
+  const typeIcons = {
+    sponsorship: DollarSign,
+    membership: CreditCard,
+    withdrawal: ArrowUpRight,
+    prize: TrendingUp,
+  };
+  const TypeIcon = typeIcons[transaction.type];
+
+  const statusConfig = {
+    completed: { color: 'text-performance-green', bg: 'bg-performance-green/10', icon: CheckCircle },
+    pending: { color: 'text-warning-amber', bg: 'bg-warning-amber/10', icon: Clock },
+    failed: { color: 'text-racing-red', bg: 'bg-racing-red/10', icon: XCircle },
+  };
+  const status = statusConfig[transaction.status];
+  const StatusIcon = status.icon;
+
+  return (
+    <div className="flex items-center justify-between p-4 border-b border-charcoal-outline last:border-b-0 hover:bg-iron-gray/30 transition-colors">
+      <div className="flex items-center gap-4">
+        <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${isIncoming ? 'bg-performance-green/10' : 'bg-iron-gray/50'}`}>
+          {isIncoming ? (
+            <ArrowDownLeft className="w-5 h-5 text-performance-green" />
+          ) : (
+            <ArrowUpRight className="w-5 h-5 text-gray-400" />
+          )}
+        </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="font-medium text-white">{transaction.description}</span>
+            <span className={`px-2 py-0.5 rounded text-xs ${status.bg} ${status.color}`}>
+              {transaction.status}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
+            <TypeIcon className="w-3 h-3" />
+            <span className="capitalize">{transaction.type}</span>
+            {transaction.reference && (
+              <>
+                <span>•</span>
+                <span>{transaction.reference}</span>
+              </>
+            )}
+            <span>•</span>
+            <span>{transaction.date.toLocaleDateString()}</span>
+          </div>
+        </div>
+      </div>
+      <div className="text-right">
+        <div className={`font-semibold ${isIncoming ? 'text-performance-green' : 'text-white'}`}>
+          {isIncoming ? '+' : ''}{transaction.amount < 0 ? '-' : ''}${Math.abs(transaction.amount).toFixed(2)}
+        </div>
+        {transaction.fee > 0 && (
+          <div className="text-xs text-gray-500">
+            Fee: ${transaction.fee.toFixed(2)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function LeagueWalletPage() {
+  const params = useParams();
+  const [wallet, setWallet] = useState<WalletData>(MOCK_WALLET);
+  const [withdrawAmount, setWithdrawAmount] = useState('');
+  const [showWithdrawModal, setShowWithdrawModal] = useState(false);
+  const [processing, setProcessing] = useState(false);
+  const [filterType, setFilterType] = useState<'all' | 'sponsorship' | 'membership' | 'withdrawal' | 'prize'>('all');
+
+  const filteredTransactions = wallet.transactions.filter(
+    t => filterType === 'all' || t.type === filterType
+  );
+
+  const handleWithdraw = async () => {
+    if (!withdrawAmount || parseFloat(withdrawAmount) <= 0) return;
+    
+    setProcessing(true);
+    try {
+      const response = await fetch(`/api/wallets/${params.id}/withdraw`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          amount: parseFloat(withdrawAmount),
+          currency: wallet.currency,
+          seasonId: 'season-2', // Current active season
+          destinationAccount: 'bank-account-***1234',
+        }),
+      });
+
+      const result = await response.json();
+      
+      if (!response.ok) {
+        alert(result.reason || result.error || 'Withdrawal failed');
+        return;
+      }
+
+      alert(`Withdrawal of $${withdrawAmount} processed successfully!`);
+      setShowWithdrawModal(false);
+      setWithdrawAmount('');
+      // Refresh wallet data
+    } catch (err) {
+      console.error('Withdrawal error:', err);
+      alert('Failed to process withdrawal');
+    } finally {
+      setProcessing(false);
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto py-8 px-4">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-2xl font-bold text-white">League Wallet</h1>
+          <p className="text-gray-400">Manage your league's finances and payouts</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="secondary">
+            <Download className="w-4 h-4 mr-2" />
+            Export
+          </Button>
+          <Button 
+            variant="primary"
+            onClick={() => setShowWithdrawModal(true)}
+            disabled={!wallet.canWithdraw}
+          >
+            <ArrowUpRight className="w-4 h-4 mr-2" />
+            Withdraw
+          </Button>
+        </div>
+      </div>
+
+      {/* Withdrawal Warning */}
+      {!wallet.canWithdraw && wallet.withdrawalBlockReason && (
+        <div className="mb-6 p-4 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-warning-amber shrink-0 mt-0.5" />
+            <div>
+              <h3 className="font-medium text-warning-amber">Withdrawals Temporarily Unavailable</h3>
+              <p className="text-sm text-gray-400 mt-1">{wallet.withdrawalBlockReason}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-performance-green/10">
+              <Wallet className="w-6 h-6 text-performance-green" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-white">${wallet.balance.toFixed(2)}</div>
+              <div className="text-sm text-gray-400">Available Balance</div>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
+              <TrendingUp className="w-6 h-6 text-primary-blue" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-white">${wallet.totalRevenue.toFixed(2)}</div>
+              <div className="text-sm text-gray-400">Total Revenue</div>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-warning-amber/10">
+              <DollarSign className="w-6 h-6 text-warning-amber" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-white">${wallet.totalFees.toFixed(2)}</div>
+              <div className="text-sm text-gray-400">Platform Fees (10%)</div>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-500/10">
+              <Clock className="w-6 h-6 text-purple-400" />
+            </div>
+            <div>
+              <div className="text-2xl font-bold text-white">${wallet.pendingPayouts.toFixed(2)}</div>
+              <div className="text-sm text-gray-400">Pending Payouts</div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Transactions */}
+      <Card>
+        <div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white">Transaction History</h2>
+          <select
+            value={filterType}
+            onChange={(e) => setFilterType(e.target.value as typeof filterType)}
+            className="px-3 py-1.5 rounded-lg border border-charcoal-outline bg-iron-gray text-white text-sm focus:border-primary-blue focus:outline-none"
+          >
+            <option value="all">All Transactions</option>
+            <option value="sponsorship">Sponsorships</option>
+            <option value="membership">Memberships</option>
+            <option value="withdrawal">Withdrawals</option>
+            <option value="prize">Prizes</option>
+          </select>
+        </div>
+
+        {filteredTransactions.length === 0 ? (
+          <div className="text-center py-12">
+            <Wallet className="w-12 h-12 text-gray-500 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-white mb-2">No Transactions</h3>
+            <p className="text-gray-400">
+              {filterType === 'all' 
+                ? 'Revenue from sponsorships and fees will appear here.'
+                : `No ${filterType} transactions found.`}
+            </p>
+          </div>
+        ) : (
+          <div>
+            {filteredTransactions.map((transaction) => (
+              <TransactionRow key={transaction.id} transaction={transaction} />
+            ))}
+          </div>
+        )}
+      </Card>
+
+      {/* Revenue Breakdown */}
+      <div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="p-4">
+          <h3 className="text-lg font-semibold text-white mb-4">Revenue Breakdown</h3>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-primary-blue" />
+                <span className="text-gray-400">Sponsorships</span>
+              </div>
+              <span className="font-medium text-white">$1,600.00</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="w-3 h-3 rounded-full bg-performance-green" />
+                <span className="text-gray-400">Membership Fees</span>
+              </div>
+              <span className="font-medium text-white">$1,600.00</span>
+            </div>
+            <div className="flex items-center justify-between pt-2 border-t border-charcoal-outline">
+              <span className="text-gray-300 font-medium">Total Gross Revenue</span>
+              <span className="font-bold text-white">$3,200.00</span>
+            </div>
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-warning-amber">Platform Fee (10%)</span>
+              <span className="text-warning-amber">-$320.00</span>
+            </div>
+            <div className="flex items-center justify-between pt-2 border-t border-charcoal-outline">
+              <span className="text-performance-green font-medium">Net Revenue</span>
+              <span className="font-bold text-performance-green">$2,880.00</span>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <h3 className="text-lg font-semibold text-white mb-4">Payout Schedule</h3>
+          <div className="space-y-3">
+            <div className="p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-sm font-medium text-white">Season 2 Prize Pool</span>
+                <span className="text-sm font-medium text-warning-amber">Pending</span>
+              </div>
+              <p className="text-xs text-gray-500">
+                Distributed after season completion to top 3 drivers
+              </p>
+            </div>
+            <div className="p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+              <div className="flex items-center justify-between mb-1">
+                <span className="text-sm font-medium text-white">Available for Withdrawal</span>
+                <span className="text-sm font-medium text-performance-green">${wallet.balance.toFixed(2)}</span>
+              </div>
+              <p className="text-xs text-gray-500">
+                Available after Season 2 ends (estimated: Jan 15, 2026)
+              </p>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Withdraw Modal */}
+      {showWithdrawModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <Card className="w-full max-w-md p-6">
+            <h2 className="text-xl font-semibold text-white mb-4">Withdraw Funds</h2>
+            
+            {!wallet.canWithdraw ? (
+              <div className="p-4 rounded-lg bg-warning-amber/10 border border-warning-amber/30 mb-4">
+                <p className="text-sm text-warning-amber">{wallet.withdrawalBlockReason}</p>
+              </div>
+            ) : (
+              <>
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-gray-300 mb-2">
+                    Amount to Withdraw
+                  </label>
+                  <div className="relative">
+                    <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">$</span>
+                    <input
+                      type="number"
+                      value={withdrawAmount}
+                      onChange={(e) => setWithdrawAmount(e.target.value)}
+                      max={wallet.balance}
+                      className="w-full pl-8 pr-4 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
+                      placeholder="0.00"
+                    />
+                  </div>
+                  <p className="text-xs text-gray-500 mt-1">
+                    Available: ${wallet.balance.toFixed(2)}
+                  </p>
+                </div>
+
+                <div className="mb-4">
+                  <label className="block text-sm font-medium text-gray-300 mb-2">
+                    Destination
+                  </label>
+                  <select className="w-full px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none">
+                    <option>Bank Account ***1234</option>
+                  </select>
+                </div>
+              </>
+            )}
+
+            <div className="flex gap-3 mt-6">
+              <Button
+                variant="secondary"
+                onClick={() => setShowWithdrawModal(false)}
+                className="flex-1"
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="primary"
+                onClick={handleWithdraw}
+                disabled={!wallet.canWithdraw || processing || !withdrawAmount}
+                className="flex-1"
+              >
+                {processing ? 'Processing...' : 'Withdraw'}
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Alpha Notice */}
+      <div className="mt-6 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
+        <p className="text-xs text-gray-400">
+          <strong className="text-warning-amber">Alpha Note:</strong> Wallet management is demonstration-only.
+          Real payment processing and bank integrations will be available when the payment system is fully implemented.
+          The 10% platform fee and season-based withdrawal restrictions are enforced in the actual implementation.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/website/app/leagues/page.tsx

@@ -65,361 +65,6 @@ interface Category {
 // DEMO LEAGUES DATA
 // ============================================================================
 
-const DEMO_LEAGUES: LeagueSummaryDTO[] = [
-  // Driver Championships
-  {
-    id: 'demo-1',
-    name: 'iRacing GT3 Pro Series',
-    description: 'Elite GT3 competition for serious sim racers. Weekly races on iconic tracks with professional stewarding and live commentary.',
-    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
-    ownerId: 'owner-1',
-    maxDrivers: 32,
-    usedDriverSlots: 28,
-    structureSummary: 'Solo • 32 drivers',
-    scoringPatternSummary: 'Sprint + Main • Best 8 of 10',
-    timingSummary: '20 min Quali • 45 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'driver',
-      scoringPresetId: 'sprint-main-driver',
-      scoringPresetName: 'Sprint + Main (Driver)',
-      dropPolicySummary: 'Best 8 of 10',
-      scoringPatternSummary: 'Sprint + Main • Best 8 of 10',
-    },
-  },
-  {
-    id: 'demo-2',
-    name: 'iRacing IMSA Championship',
-    description: 'Race across continents in the most prestigious GT championship. Professional-grade competition with real-world rules.',
-    createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-2',
-    maxDrivers: 40,
-    usedDriverSlots: 35,
-    structureSummary: 'Solo • 40 drivers',
-    scoringPatternSummary: 'Feature Race • Best 6 of 8',
-    timingSummary: '30 min Quali • 60 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'driver',
-      scoringPresetId: 'feature-driver',
-      scoringPresetName: 'Feature Race (Driver)',
-      dropPolicySummary: 'Best 6 of 8',
-      scoringPatternSummary: 'Feature Race • Best 6 of 8',
-    },
-  },
-  {
-    id: 'demo-3',
-    name: 'iRacing Formula Championship',
-    description: 'The ultimate open-wheel experience. Full calendar, realistic regulations, and championship-level competition.',
-    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // Yesterday
-    ownerId: 'owner-3',
-    maxDrivers: 20,
-    usedDriverSlots: 20,
-    structureSummary: 'Solo • 20 drivers',
-    scoringPatternSummary: 'Sprint + Feature • All rounds count',
-    timingSummary: '18 min Quali • 50% Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'driver',
-      scoringPresetId: 'sprint-feature-driver',
-      scoringPresetName: 'Sprint + Feature (Driver)',
-      dropPolicySummary: 'All rounds count',
-      scoringPatternSummary: 'Sprint + Feature • All rounds count',
-    },
-  },
-  // Team Championships
-  {
-    id: 'demo-4',
-    name: 'Le Mans Virtual Series',
-    description: 'Endurance racing at its finest. Multi-class prototype and GT competition with team strategy at the core.',
-    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-4',
-    maxDrivers: 48,
-    usedDriverSlots: 42,
-    maxTeams: 16,
-    usedTeamSlots: 14,
-    structureSummary: 'Teams • 16 × 3 drivers',
-    scoringPatternSummary: 'Endurance • Best 4 of 6',
-    timingSummary: '30 min Quali • 6h Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'team',
-      scoringPresetId: 'endurance-team',
-      scoringPresetName: 'Endurance (Team)',
-      dropPolicySummary: 'Best 4 of 6',
-      scoringPatternSummary: 'Endurance • Best 4 of 6',
-    },
-  },
-  {
-    id: 'demo-5',
-    name: 'iRacing British GT Teams',
-    description: 'British GT-style team championship. Pro-Am format with driver ratings and team strategy.',
-    createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-5',
-    maxDrivers: 40,
-    usedDriverSlots: 32,
-    maxTeams: 20,
-    usedTeamSlots: 16,
-    structureSummary: 'Teams • 20 × 2 drivers',
-    scoringPatternSummary: 'Sprint + Main • Best 8 of 10',
-    timingSummary: '15 min Quali • 60 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'team',
-      scoringPresetId: 'sprint-main-team',
-      scoringPresetName: 'Sprint + Main (Team)',
-      dropPolicySummary: 'Best 8 of 10',
-      scoringPatternSummary: 'Sprint + Main • Best 8 of 10',
-    },
-  },
-  // Nations Cup
-  {
-    id: 'demo-6',
-    name: 'FIA Nations Cup iRacing',
-    description: 'Represent your nation in this prestigious international competition. Pride, glory, and national anthems.',
-    createdAt: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-6',
-    maxDrivers: 50,
-    usedDriverSlots: 45,
-    structureSummary: 'Nations • 50 drivers',
-    scoringPatternSummary: 'Feature Race • All rounds count',
-    timingSummary: '20 min Quali • 40 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'nations',
-      scoringPresetId: 'feature-nations',
-      scoringPresetName: 'Feature Race (Nations)',
-      dropPolicySummary: 'All rounds count',
-      scoringPatternSummary: 'Feature Race • All rounds count',
-    },
-  },
-  {
-    id: 'demo-7',
-    name: 'European Nations GT Cup',
-    description: 'The best European nations battle it out in GT3 machinery. Honor your flag.',
-    createdAt: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-7',
-    maxDrivers: 30,
-    usedDriverSlots: 24,
-    structureSummary: 'Nations • 30 drivers',
-    scoringPatternSummary: 'Sprint + Main • Best 6 of 8',
-    timingSummary: '15 min Quali • 45 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'nations',
-      scoringPresetId: 'sprint-main-nations',
-      scoringPresetName: 'Sprint + Main (Nations)',
-      dropPolicySummary: 'Best 6 of 8',
-      scoringPatternSummary: 'Sprint + Main • Best 6 of 8',
-    },
-  },
-  // Trophy Series
-  {
-    id: 'demo-8',
-    name: 'Rookie Trophy Challenge',
-    description: 'Perfect for newcomers! Learn the ropes of competitive racing in a supportive environment.',
-    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), // Yesterday
-    ownerId: 'owner-8',
-    maxDrivers: 24,
-    usedDriverSlots: 18,
-    structureSummary: 'Solo • 24 drivers',
-    scoringPatternSummary: 'Feature Race • Best 8 of 10',
-    timingSummary: '10 min Quali • 20 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'trophy',
-      scoringPresetId: 'feature-trophy',
-      scoringPresetName: 'Feature Race (Trophy)',
-      dropPolicySummary: 'Best 8 of 10',
-      scoringPatternSummary: 'Feature Race • Best 8 of 10',
-    },
-  },
-  {
-    id: 'demo-9',
-    name: 'Porsche Cup Masters',
-    description: 'One-make series featuring the iconic Porsche 911 GT3 Cup. Pure driving skill determines the winner.',
-    createdAt: new Date(Date.now() - 8 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-9',
-    maxDrivers: 28,
-    usedDriverSlots: 26,
-    structureSummary: 'Solo • 28 drivers',
-    scoringPatternSummary: 'Sprint + Main • Best 10 of 12',
-    timingSummary: '15 min Quali • 30 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'trophy',
-      scoringPresetId: 'sprint-main-trophy',
-      scoringPresetName: 'Sprint + Main (Trophy)',
-      dropPolicySummary: 'Best 10 of 12',
-      scoringPatternSummary: 'Sprint + Main • Best 10 of 12',
-    },
-  },
-  // More variety - Recently Added
-  {
-    id: 'demo-10',
-    name: 'GT World Challenge Sprint',
-    description: 'Fast-paced sprint racing in GT3 machinery. Short, intense races that reward consistency.',
-    createdAt: new Date(Date.now() - 12 * 60 * 60 * 1000), // 12 hours ago
-    ownerId: 'owner-10',
-    maxDrivers: 36,
-    usedDriverSlots: 12,
-    structureSummary: 'Solo • 36 drivers',
-    scoringPatternSummary: 'Sprint Format • Best 8 of 10',
-    timingSummary: '10 min Quali • 25 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'driver',
-      scoringPresetId: 'sprint-driver',
-      scoringPresetName: 'Sprint (Driver)',
-      dropPolicySummary: 'Best 8 of 10',
-      scoringPatternSummary: 'Sprint Format • Best 8 of 10',
-    },
-  },
-  {
-    id: 'demo-11',
-    name: 'Nürburgring 24h League',
-    description: 'The ultimate test of endurance. Teams battle through day and night at the legendary Nordschleife.',
-    createdAt: new Date(Date.now() - 6 * 60 * 60 * 1000), // 6 hours ago
-    ownerId: 'owner-11',
-    maxDrivers: 60,
-    usedDriverSlots: 8,
-    maxTeams: 20,
-    usedTeamSlots: 4,
-    structureSummary: 'Teams • 20 × 3 drivers',
-    scoringPatternSummary: 'Endurance • All races count',
-    timingSummary: '45 min Quali • 24h Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'team',
-      scoringPresetId: 'endurance-team',
-      scoringPresetName: 'Endurance (Team)',
-      dropPolicySummary: 'All races count',
-      scoringPatternSummary: 'Endurance • All races count',
-    },
-  },
-  {
-    id: 'demo-12',
-    name: 'iRacing Constructors Battle',
-    description: 'Team-based championship. Coordinate with your teammate to maximize constructor points.',
-    createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
-    ownerId: 'owner-12',
-    maxDrivers: 20,
-    usedDriverSlots: 6,
-    maxTeams: 10,
-    usedTeamSlots: 3,
-    structureSummary: 'Teams • 10 × 2 drivers',
-    scoringPatternSummary: 'Full Season • All rounds count',
-    timingSummary: '18 min Quali • 60 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'team',
-      scoringPresetId: 'full-season-team',
-      scoringPresetName: 'Full Season (Team)',
-      dropPolicySummary: 'All rounds count',
-      scoringPatternSummary: 'Full Season • All rounds count',
-    },
-  },
-  // Additional popular leagues
-  {
-    id: 'demo-13',
-    name: 'VRS GT Endurance Series',
-    description: 'Multi-class endurance racing with LMP2 and GT3. Strategic pit stops and driver changes required.',
-    createdAt: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-13',
-    maxDrivers: 54,
-    usedDriverSlots: 51,
-    maxTeams: 18,
-    usedTeamSlots: 17,
-    structureSummary: 'Teams • 18 × 3 drivers',
-    scoringPatternSummary: 'Endurance • Best 5 of 6',
-    timingSummary: '30 min Quali • 4h Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'team',
-      scoringPresetId: 'endurance-team',
-      scoringPresetName: 'Endurance (Team)',
-      dropPolicySummary: 'Best 5 of 6',
-      scoringPatternSummary: 'Endurance • Best 5 of 6',
-    },
-  },
-  {
-    id: 'demo-14',
-    name: 'Ferrari Challenge Series',
-    description: 'One-make Ferrari 488 Challenge championship. Italian passion meets precision racing.',
-    createdAt: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-14',
-    maxDrivers: 24,
-    usedDriverSlots: 22,
-    structureSummary: 'Solo • 24 drivers',
-    scoringPatternSummary: 'Sprint + Main • Best 10 of 12',
-    timingSummary: '15 min Quali • 35 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'trophy',
-      scoringPresetId: 'sprint-main-trophy',
-      scoringPresetName: 'Sprint + Main (Trophy)',
-      dropPolicySummary: 'Best 10 of 12',
-      scoringPatternSummary: 'Sprint + Main • Best 10 of 12',
-    },
-  },
-  {
-    id: 'demo-15',
-    name: 'Oceania Nations Cup',
-    description: 'Australia and New Zealand battle for Pacific supremacy in this regional nations championship.',
-    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000),
-    ownerId: 'owner-15',
-    maxDrivers: 20,
-    usedDriverSlots: 15,
-    structureSummary: 'Nations • 20 drivers',
-    scoringPatternSummary: 'Feature Race • Best 6 of 8',
-    timingSummary: '15 min Quali • 45 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'nations',
-      scoringPresetId: 'feature-nations',
-      scoringPresetName: 'Feature Race (Nations)',
-      dropPolicySummary: 'Best 6 of 8',
-      scoringPatternSummary: 'Feature Race • Best 6 of 8',
-    },
-  },
-  {
-    id: 'demo-16',
-    name: 'iRacing Sprint Series',
-    description: 'Quick 20-minute races for drivers with limited time. Maximum action, minimum commitment.',
-    createdAt: new Date(Date.now() - 18 * 60 * 60 * 1000), // 18 hours ago
-    ownerId: 'owner-16',
-    maxDrivers: 28,
-    usedDriverSlots: 14,
-    structureSummary: 'Solo • 28 drivers',
-    scoringPatternSummary: 'Sprint Only • All races count',
-    timingSummary: '8 min Quali • 20 min Race',
-    scoring: {
-      gameId: 'iracing',
-      gameName: 'iRacing',
-      primaryChampionshipType: 'driver',
-      scoringPresetId: 'sprint-driver',
-      scoringPresetName: 'Sprint (Driver)',
-      dropPolicySummary: 'All races count',
-      scoringPatternSummary: 'Sprint Only • All races count',
-    },
-  },
-];
-
 // ============================================================================
 // CATEGORIES
 // ============================================================================
@@ -754,14 +399,11 @@ export default function LeaguesPage() {
     }
   };
 
-  // Combine real leagues with demo leagues
-  const leagues = [...realLeagues, ...DEMO_LEAGUES];
+  // Use only real leagues from repository
+  const leagues = realLeagues;
 
   const handleLeagueClick = (leagueId: string) => {
-    // Don't navigate for demo leagues
-    if (leagueId.startsWith('demo-')) {
-      return;
-    }
+    // Navigate to league - all leagues are clickable
     router.push(`/leagues/${leagueId}`);
   };