wip

apps/website/app/api/payments/membership-fees/route.ts

@@ -0,0 +1,171 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Alpha: In-memory membership fee storage
+const membershipFees: Map<string, {
+  id: string;
+  leagueId: string;
+  seasonId?: string;
+  type: 'season' | 'monthly' | 'per_race';
+  amount: number;
+  enabled: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}> = new Map();
+
+const memberPayments: Map<string, {
+  id: string;
+  feeId: string;
+  driverId: string;
+  amount: number;
+  platformFee: number;
+  netAmount: number;
+  status: 'pending' | 'paid' | 'overdue';
+  dueDate: Date;
+  paidAt?: Date;
+}> = new Map();
+
+const PLATFORM_FEE_RATE = 0.10;
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const leagueId = searchParams.get('leagueId');
+  const driverId = searchParams.get('driverId');
+
+  if (!leagueId) {
+    return NextResponse.json(
+      { error: 'leagueId is required' },
+      { status: 400 }
+    );
+  }
+
+  const fee = Array.from(membershipFees.values()).find(f => f.leagueId === leagueId);
+  
+  let payments: typeof memberPayments extends Map<string, infer V> ? V[] : never[] = [];
+  if (driverId) {
+    payments = Array.from(memberPayments.values()).filter(
+      p => membershipFees.get(p.feeId)?.leagueId === leagueId && p.driverId === driverId
+    );
+  }
+
+  return NextResponse.json({ fee, payments });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { leagueId, seasonId, type, amount } = body;
+
+    if (!leagueId || !type || amount === undefined) {
+      return NextResponse.json(
+        { error: 'Missing required fields: leagueId, type, amount' },
+        { status: 400 }
+      );
+    }
+
+    if (!['season', 'monthly', 'per_race'].includes(type)) {
+      return NextResponse.json(
+        { error: 'Type must be "season", "monthly", or "per_race"' },
+        { status: 400 }
+      );
+    }
+
+    // Check for existing fee config
+    const existingFee = Array.from(membershipFees.values()).find(f => f.leagueId === leagueId);
+    
+    if (existingFee) {
+      // Update existing fee
+      existingFee.type = type;
+      existingFee.amount = amount;
+      existingFee.seasonId = seasonId || existingFee.seasonId;
+      existingFee.enabled = amount > 0;
+      existingFee.updatedAt = new Date();
+      membershipFees.set(existingFee.id, existingFee);
+      return NextResponse.json({ fee: existingFee });
+    }
+
+    const id = `fee-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const fee = {
+      id,
+      leagueId,
+      seasonId: seasonId || undefined,
+      type,
+      amount,
+      enabled: amount > 0,
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    membershipFees.set(id, fee);
+
+    return NextResponse.json({ fee }, { status: 201 });
+  } catch (err) {
+    console.error('Membership fee creation failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to create membership fee' },
+      { status: 500 }
+    );
+  }
+}
+
+// Record a member payment
+export async function PATCH(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { feeId, driverId, status, paidAt } = body;
+
+    if (!feeId || !driverId) {
+      return NextResponse.json(
+        { error: 'Missing required fields: feeId, driverId' },
+        { status: 400 }
+      );
+    }
+
+    const fee = membershipFees.get(feeId);
+    if (!fee) {
+      return NextResponse.json(
+        { error: 'Membership fee configuration not found' },
+        { status: 404 }
+      );
+    }
+
+    // Find or create payment record
+    let payment = Array.from(memberPayments.values()).find(
+      p => p.feeId === feeId && p.driverId === driverId
+    );
+
+    if (!payment) {
+      const platformFee = fee.amount * PLATFORM_FEE_RATE;
+      const netAmount = fee.amount - platformFee;
+
+      const paymentId = `mp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      payment = {
+        id: paymentId,
+        feeId,
+        driverId,
+        amount: fee.amount,
+        platformFee,
+        netAmount,
+        status: 'pending',
+        dueDate: new Date(),
+      };
+      memberPayments.set(paymentId, payment);
+    }
+
+    if (status) {
+      payment.status = status;
+    }
+    if (paidAt || status === 'paid') {
+      payment.paidAt = paidAt ? new Date(paidAt) : new Date();
+    }
+
+    memberPayments.set(payment.id, payment);
+
+    return NextResponse.json({ payment });
+  } catch (err) {
+    console.error('Member payment update failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to update member payment' },
+      { status: 500 }
+    );
+  }
+}

apps/website/app/api/payments/prizes/route.ts

@@ -0,0 +1,180 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Alpha: In-memory prize storage
+const prizes: Map<string, {
+  id: string;
+  leagueId: string;
+  seasonId: string;
+  position: number;
+  name: string;
+  amount: number;
+  type: 'cash' | 'merchandise' | 'other';
+  description?: string;
+  awarded: boolean;
+  awardedTo?: string;
+  awardedAt?: Date;
+  createdAt: Date;
+}> = new Map();
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const leagueId = searchParams.get('leagueId');
+  const seasonId = searchParams.get('seasonId');
+
+  if (!leagueId) {
+    return NextResponse.json(
+      { error: 'leagueId is required' },
+      { status: 400 }
+    );
+  }
+
+  let results = Array.from(prizes.values()).filter(p => p.leagueId === leagueId);
+  
+  if (seasonId) {
+    results = results.filter(p => p.seasonId === seasonId);
+  }
+
+  results.sort((a, b) => a.position - b.position);
+
+  return NextResponse.json({ prizes: results });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { leagueId, seasonId, position, name, amount, type, description } = body;
+
+    if (!leagueId || !seasonId || !position || !name || amount === undefined || !type) {
+      return NextResponse.json(
+        { error: 'Missing required fields: leagueId, seasonId, position, name, amount, type' },
+        { status: 400 }
+      );
+    }
+
+    if (!['cash', 'merchandise', 'other'].includes(type)) {
+      return NextResponse.json(
+        { error: 'Type must be \"cash\", \"merchandise\", or \"other\"' },
+        { status: 400 }
+      );
+    }
+
+    // Check for duplicate position
+    const existingPrize = Array.from(prizes.values()).find(
+      p => p.leagueId === leagueId && p.seasonId === seasonId && p.position === position
+    );
+
+    if (existingPrize) {
+      return NextResponse.json(
+        { error: `Prize for position ${position} already exists` },
+        { status: 409 }
+      );
+    }
+
+    const id = `prize-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const prize = {
+      id,
+      leagueId,
+      seasonId,
+      position,
+      name,
+      amount,
+      type,
+      description: description || undefined,
+      awarded: false,
+      createdAt: new Date(),
+    };
+
+    prizes.set(id, prize);
+
+    return NextResponse.json({ prize }, { status: 201 });
+  } catch (err) {
+    console.error('Prize creation failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to create prize' },
+      { status: 500 }
+    );
+  }
+}
+
+// Award a prize
+export async function PATCH(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { prizeId, driverId } = body;
+
+    if (!prizeId || !driverId) {
+      return NextResponse.json(
+        { error: 'Missing required fields: prizeId, driverId' },
+        { status: 400 }
+      );
+    }
+
+    const prize = prizes.get(prizeId);
+    if (!prize) {
+      return NextResponse.json(
+        { error: 'Prize not found' },
+        { status: 404 }
+      );
+    }
+
+    if (prize.awarded) {
+      return NextResponse.json(
+        { error: 'Prize has already been awarded' },
+        { status: 400 }
+      );
+    }
+
+    prize.awarded = true;
+    prize.awardedTo = driverId;
+    prize.awardedAt = new Date();
+
+    prizes.set(prizeId, prize);
+
+    return NextResponse.json({ prize });
+  } catch (err) {
+    console.error('Prize awarding failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to award prize' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const prizeId = searchParams.get('prizeId');
+
+    if (!prizeId) {
+      return NextResponse.json(
+        { error: 'prizeId is required' },
+        { status: 400 }
+      );
+    }
+
+    const prize = prizes.get(prizeId);
+    if (!prize) {
+      return NextResponse.json(
+        { error: 'Prize not found' },
+        { status: 404 }
+      );
+    }
+
+    if (prize.awarded) {
+      return NextResponse.json(
+        { error: 'Cannot delete an awarded prize' },
+        { status: 400 }
+      );
+    }
+
+    prizes.delete(prizeId);
+
+    return NextResponse.json({ success: true });
+  } catch (err) {
+    console.error('Prize deletion failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to delete prize' },
+      { status: 500 }
+    );
+  }
+}

apps/website/app/api/payments/route.ts

@@ -0,0 +1,141 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Alpha: In-memory payment storage (mock payment gateway)
+const payments: Map<string, {
+  id: string;
+  type: 'sponsorship' | 'membership_fee';
+  amount: number;
+  platformFee: number;
+  netAmount: number;
+  payerId: string;
+  payerType: 'sponsor' | 'driver';
+  leagueId: string;
+  seasonId?: string;
+  status: 'pending' | 'completed' | 'failed' | 'refunded';
+  createdAt: Date;
+  completedAt?: Date;
+}> = new Map();
+
+const PLATFORM_FEE_RATE = 0.10;
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const leagueId = searchParams.get('leagueId');
+  const payerId = searchParams.get('payerId');
+  const type = searchParams.get('type');
+
+  let results = Array.from(payments.values());
+
+  if (leagueId) {
+    results = results.filter(p => p.leagueId === leagueId);
+  }
+  if (payerId) {
+    results = results.filter(p => p.payerId === payerId);
+  }
+  if (type) {
+    results = results.filter(p => p.type === type);
+  }
+
+  return NextResponse.json({ payments: results });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { type, amount, payerId, payerType, leagueId, seasonId } = body;
+
+    if (!type || !amount || !payerId || !payerType || !leagueId) {
+      return NextResponse.json(
+        { error: 'Missing required fields: type, amount, payerId, payerType, leagueId' },
+        { status: 400 }
+      );
+    }
+
+    if (!['sponsorship', 'membership_fee'].includes(type)) {
+      return NextResponse.json(
+        { error: 'Type must be "sponsorship" or "membership_fee"' },
+        { status: 400 }
+      );
+    }
+
+    if (!['sponsor', 'driver'].includes(payerType)) {
+      return NextResponse.json(
+        { error: 'PayerType must be "sponsor" or "driver"' },
+        { status: 400 }
+      );
+    }
+
+    const platformFee = amount * PLATFORM_FEE_RATE;
+    const netAmount = amount - platformFee;
+
+    const id = `payment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const payment = {
+      id,
+      type,
+      amount,
+      platformFee,
+      netAmount,
+      payerId,
+      payerType,
+      leagueId,
+      seasonId: seasonId || undefined,
+      status: 'pending' as const,
+      createdAt: new Date(),
+    };
+
+    payments.set(id, payment);
+
+    return NextResponse.json({ payment }, { status: 201 });
+  } catch (err) {
+    console.error('Payment creation failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to create payment' },
+      { status: 500 }
+    );
+  }
+}
+
+// Complete a payment (mock payment gateway callback)
+export async function PATCH(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { paymentId, status } = body;
+
+    if (!paymentId || !status) {
+      return NextResponse.json(
+        { error: 'Missing required fields: paymentId, status' },
+        { status: 400 }
+      );
+    }
+
+    if (!['completed', 'failed', 'refunded'].includes(status)) {
+      return NextResponse.json(
+        { error: 'Status must be "completed", "failed", or "refunded"' },
+        { status: 400 }
+      );
+    }
+
+    const payment = payments.get(paymentId);
+    if (!payment) {
+      return NextResponse.json(
+        { error: 'Payment not found' },
+        { status: 404 }
+      );
+    }
+
+    payment.status = status;
+    if (status === 'completed') {
+      payment.completedAt = new Date();
+    }
+
+    payments.set(paymentId, payment);
+
+    return NextResponse.json({ payment });
+  } catch (err) {
+    console.error('Payment update failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to update payment' },
+      { status: 500 }
+    );
+  }
+}

apps/website/app/api/payments/wallets/route.ts

@@ -0,0 +1,142 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Alpha: In-memory wallet storage
+const wallets: Map<string, {
+  id: string;
+  leagueId: string;
+  balance: number;
+  totalRevenue: number;
+  totalPlatformFees: number;
+  totalWithdrawn: number;
+  createdAt: Date;
+}> = new Map();
+
+const transactions: Map<string, {
+  id: string;
+  walletId: string;
+  type: 'deposit' | 'withdrawal' | 'platform_fee';
+  amount: number;
+  description: string;
+  referenceId?: string;
+  referenceType?: 'sponsorship' | 'membership_fee' | 'prize';
+  createdAt: Date;
+}> = new Map();
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const leagueId = searchParams.get('leagueId');
+
+  if (!leagueId) {
+    return NextResponse.json(
+      { error: 'leagueId is required' },
+      { status: 400 }
+    );
+  }
+
+  let wallet = Array.from(wallets.values()).find(w => w.leagueId === leagueId);
+  
+  if (!wallet) {
+    // Create wallet if doesn't exist
+    const id = `wallet-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    wallet = {
+      id,
+      leagueId,
+      balance: 0,
+      totalRevenue: 0,
+      totalPlatformFees: 0,
+      totalWithdrawn: 0,
+      createdAt: new Date(),
+    };
+    wallets.set(id, wallet);
+  }
+
+  const walletTransactions = Array.from(transactions.values())
+    .filter(t => t.walletId === wallet!.id)
+    .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+
+  return NextResponse.json({ wallet, transactions: walletTransactions });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { leagueId, type, amount, description, referenceId, referenceType } = body;
+
+    if (!leagueId || !type || !amount || !description) {
+      return NextResponse.json(
+        { error: 'Missing required fields: leagueId, type, amount, description' },
+        { status: 400 }
+      );
+    }
+
+    if (!['deposit', 'withdrawal'].includes(type)) {
+      return NextResponse.json(
+        { error: 'Type must be "deposit" or "withdrawal"' },
+        { status: 400 }
+      );
+    }
+
+    // Get or create wallet
+    let wallet = Array.from(wallets.values()).find(w => w.leagueId === leagueId);
+    
+    if (!wallet) {
+      const id = `wallet-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      wallet = {
+        id,
+        leagueId,
+        balance: 0,
+        totalRevenue: 0,
+        totalPlatformFees: 0,
+        totalWithdrawn: 0,
+        createdAt: new Date(),
+      };
+      wallets.set(id, wallet);
+    }
+
+    if (type === 'withdrawal') {
+      if (amount > wallet.balance) {
+        return NextResponse.json(
+          { error: 'Insufficient balance' },
+          { status: 400 }
+        );
+      }
+      
+      // Alpha: In production, check if season is over before allowing withdrawal
+      // For now we allow it for demo purposes
+    }
+
+    // Create transaction
+    const transactionId = `txn-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const transaction = {
+      id: transactionId,
+      walletId: wallet.id,
+      type,
+      amount,
+      description,
+      referenceId: referenceId || undefined,
+      referenceType: referenceType || undefined,
+      createdAt: new Date(),
+    };
+
+    transactions.set(transactionId, transaction);
+
+    // Update wallet balance
+    if (type === 'deposit') {
+      wallet.balance += amount;
+      wallet.totalRevenue += amount;
+    } else {
+      wallet.balance -= amount;
+      wallet.totalWithdrawn += amount;
+    }
+
+    wallets.set(wallet.id, wallet);
+
+    return NextResponse.json({ wallet, transaction }, { status: 201 });
+  } catch (err) {
+    console.error('Wallet transaction failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to process wallet transaction' },
+      { status: 500 }
+    );
+  }
+}

apps/website/app/api/sponsors/dashboard/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { cookies } from 'next/headers';
+import { getGetSponsorDashboardQuery } from '@/lib/di-container';
+
+export async function GET(request: NextRequest) {
+  try {
+    // Get sponsor ID from cookie (set during demo login)
+    const cookieStore = await cookies();
+    const sponsorId = cookieStore.get('gridpilot_sponsor_id')?.value;
+
+    if (!sponsorId) {
+      return NextResponse.json(
+        { error: 'Not authenticated as sponsor' },
+        { status: 401 }
+      );
+    }
+
+    const query = getGetSponsorDashboardQuery();
+    const dashboard = await query.execute({ sponsorId });
+
+    if (!dashboard) {
+      return NextResponse.json(
+        { error: 'Sponsor not found' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(dashboard);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Failed to get sponsor dashboard';
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

apps/website/app/api/sponsors/route.ts

@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// Alpha: In-memory sponsor storage
+const sponsors: Map<string, {
+  id: string;
+  name: string;
+  contactEmail: string;
+  websiteUrl?: string;
+  logoUrl?: string;
+  createdAt: Date;
+}> = new Map();
+
+export async function GET() {
+  const allSponsors = Array.from(sponsors.values());
+  return NextResponse.json({ sponsors: allSponsors });
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { name, contactEmail, websiteUrl, logoUrl } = body;
+
+    if (!name || !contactEmail) {
+      return NextResponse.json(
+        { error: 'Name and contact email are required' },
+        { status: 400 }
+      );
+    }
+
+    const id = `sponsor-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const sponsor = {
+      id,
+      name,
+      contactEmail,
+      websiteUrl: websiteUrl || undefined,
+      logoUrl: logoUrl || undefined,
+      createdAt: new Date(),
+    };
+
+    sponsors.set(id, sponsor);
+
+    return NextResponse.json({ sponsor }, { status: 201 });
+  } catch (err) {
+    console.error('Sponsor creation failed:', err);
+    return NextResponse.json(
+      { error: 'Failed to create sponsor' },
+      { status: 500 }
+    );
+  }
+}

apps/website/app/api/sponsors/sponsorships/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { cookies } from 'next/headers';
+import { getGetSponsorSponsorshipsQuery } from '@/lib/di-container';
+
+export async function GET(request: NextRequest) {
+  try {
+    // Get sponsor ID from cookie (set during demo login)
+    const cookieStore = await cookies();
+    const sponsorId = cookieStore.get('gridpilot_sponsor_id')?.value;
+
+    if (!sponsorId) {
+      return NextResponse.json(
+        { error: 'Not authenticated as sponsor' },
+        { status: 401 }
+      );
+    }
+
+    const query = getGetSponsorSponsorshipsQuery();
+    const sponsorships = await query.execute({ sponsorId });
+
+    if (!sponsorships) {
+      return NextResponse.json(
+        { error: 'Sponsor not found' },
+        { status: 404 }
+      );
+    }
+
+    return NextResponse.json(sponsorships);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Failed to get sponsor sponsorships';
+    return NextResponse.json({ error: message }, { status: 500 });
+  }
+}

apps/website/app/api/wallets/[leagueId]/withdraw/route.ts

@@ -0,0 +1,202 @@
+/**
+ * API Route: Wallet Withdrawal
+ * 
+ * POST /api/wallets/:leagueId/withdraw
+ * 
+ * Handles withdrawal requests from league wallets.
+ * Enforces the rule that withdrawals are only allowed after season is completed.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+interface WithdrawRequest {
+  amount: number;
+  currency: string;
+  seasonId: string;
+  destinationAccount: string;
+}
+
+// Mock season status lookup
+const MOCK_SEASONS: Record<string, { status: 'planned' | 'active' | 'completed'; name: string }> = {
+  'season-1': { status: 'completed', name: 'Season 1' },
+  'season-2': { status: 'active', name: 'Season 2' },
+  'season-3': { status: 'planned', name: 'Season 3' },
+};
+
+// Mock wallet balances
+const MOCK_WALLETS: Record<string, { balance: number; currency: string }> = {
+  'league-1': { balance: 2500, currency: 'USD' },
+  'league-2': { balance: 1200, currency: 'USD' },
+};
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ leagueId: string }> }
+) {
+  try {
+    const { leagueId } = await params;
+    const body: WithdrawRequest = await request.json();
+
+    // Validate required fields
+    if (!body.amount || body.amount <= 0) {
+      return NextResponse.json(
+        { error: 'Invalid withdrawal amount' },
+        { status: 400 }
+      );
+    }
+
+    if (!body.seasonId) {
+      return NextResponse.json(
+        { error: 'Season ID is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!body.destinationAccount) {
+      return NextResponse.json(
+        { error: 'Destination account is required' },
+        { status: 400 }
+      );
+    }
+
+    // Get season status
+    const season = MOCK_SEASONS[body.seasonId];
+    if (!season) {
+      return NextResponse.json(
+        { error: 'Season not found' },
+        { status: 404 }
+      );
+    }
+
+    // CRITICAL: Enforce withdrawal restriction based on season status
+    // Withdrawals are ONLY allowed when the season is completed
+    if (season.status !== 'completed') {
+      return NextResponse.json(
+        { 
+          error: 'Withdrawal not allowed',
+          reason: `Withdrawals are only permitted after the season is completed. "${season.name}" is currently ${season.status}.`,
+          seasonStatus: season.status,
+        },
+        { status: 403 }
+      );
+    }
+
+    // Get wallet
+    const wallet = MOCK_WALLETS[leagueId];
+    if (!wallet) {
+      return NextResponse.json(
+        { error: 'Wallet not found' },
+        { status: 404 }
+      );
+    }
+
+    // Check sufficient balance
+    if (wallet.balance < body.amount) {
+      return NextResponse.json(
+        { 
+          error: 'Insufficient balance',
+          available: wallet.balance,
+          requested: body.amount,
+        },
+        { status: 400 }
+      );
+    }
+
+    // Check currency match
+    if (wallet.currency !== body.currency) {
+      return NextResponse.json(
+        { 
+          error: 'Currency mismatch',
+          walletCurrency: wallet.currency,
+          requestedCurrency: body.currency,
+        },
+        { status: 400 }
+      );
+    }
+
+    // Process withdrawal (in-memory mock)
+    const newBalance = wallet.balance - body.amount;
+    MOCK_WALLETS[leagueId] = { ...wallet, balance: newBalance };
+
+    // Generate transaction ID
+    const transactionId = `txn-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    return NextResponse.json({
+      success: true,
+      transactionId,
+      amount: body.amount,
+      currency: body.currency,
+      newBalance,
+      destinationAccount: body.destinationAccount,
+      processedAt: new Date().toISOString(),
+    });
+
+  } catch (error) {
+    console.error('Wallet withdrawal error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * GET /api/wallets/:leagueId/withdraw
+ * 
+ * Check withdrawal eligibility for a league's wallet
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ leagueId: string }> }
+) {
+  try {
+    const { leagueId } = await params;
+    const { searchParams } = new URL(request.url);
+    const seasonId = searchParams.get('seasonId');
+
+    if (!seasonId) {
+      return NextResponse.json(
+        { error: 'Season ID is required' },
+        { status: 400 }
+      );
+    }
+
+    const season = MOCK_SEASONS[seasonId];
+    if (!season) {
+      return NextResponse.json(
+        { error: 'Season not found' },
+        { status: 404 }
+      );
+    }
+
+    const wallet = MOCK_WALLETS[leagueId];
+    if (!wallet) {
+      return NextResponse.json(
+        { error: 'Wallet not found' },
+        { status: 404 }
+      );
+    }
+
+    const canWithdraw = season.status === 'completed';
+    
+    return NextResponse.json({
+      leagueId,
+      seasonId,
+      seasonName: season.name,
+      seasonStatus: season.status,
+      canWithdraw,
+      reason: canWithdraw 
+        ? 'Season is completed, withdrawals are allowed'
+        : `Withdrawals are only permitted after the season is completed. Season is currently ${season.status}.`,
+      balance: wallet.balance,
+      currency: wallet.currency,
+    });
+
+  } catch (error) {
+    console.error('Withdrawal eligibility check error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -4,6 +4,7 @@ import { useState, useEffect, use } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter, useParams } from 'next/navigation';
+import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
 import {
   User,
   Trophy,
@@ -32,6 +33,8 @@ import {
   Shield,
   Percent,
   Activity,
+  Megaphone,
+  DollarSign,
 } from 'lucide-react';
 import {
   getDriverRepository,
@@ -350,6 +353,8 @@ export default function DriverDetailPage({
     backLink = null;
   }
 
+  const isSponsorMode = useSponsorMode();
+
   useEffect(() => {
     loadDriver();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -447,6 +452,14 @@ export default function DriverDetailPage({
   const allRankings = getAllDriverRankings();
   const globalRank = stats?.overallRank ?? allRankings.findIndex(r => r.driverId === driver.id) + 1;
 
+  // Build sponsor insights for driver
+  const driverMetrics = [
+    MetricBuilders.rating(stats?.rating ?? 0, 'Driver Rating'),
+    MetricBuilders.views((friends.length * 8) + 50),
+    MetricBuilders.engagement(stats?.consistency ?? 75),
+    MetricBuilders.reach((friends.length * 12) + 100),
+  ];
+
   return (
     <div className="max-w-6xl mx-auto px-4 pb-12 space-y-6">
       {/* Back Navigation */}
@@ -478,6 +491,20 @@ export default function DriverDetailPage({
         ]}
       />
 
+      {/* Sponsor Insights Card - Consistent placement at top */}
+      {isSponsorMode && driver && (
+        <SponsorInsightsCard
+          entityType="driver"
+          entityId={driver.id}
+          entityName={driver.name}
+          tier="standard"
+          metrics={driverMetrics}
+          slots={SlotTemplates.driver(true, 200)}
+          trustScore={88}
+          monthlyActivity={stats?.consistency ?? 75}
+        />
+      )}
+
       {/* Hero Header Section */}
       <div className="relative rounded-2xl overflow-hidden bg-gradient-to-br from-iron-gray/80 via-iron-gray/60 to-deep-graphite border border-charcoal-outline">
         {/* Background Pattern */}

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}`);
   };
 

apps/website/app/profile/liveries/page.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { useState } from 'react';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { Paintbrush, Upload, Car, Download, Trash2, Edit } from 'lucide-react';
+import Link from 'next/link';
+
+interface DriverLiveryItem {
+  id: string;
+  carId: string;
+  carName: string;
+  thumbnailUrl: string;
+  uploadedAt: Date;
+  isValidated: boolean;
+}
+
+export default function DriverLiveriesPage() {
+  const [liveries] = useState<DriverLiveryItem[]>([]);
+
+  return (
+    <div className="max-w-4xl mx-auto py-12">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center gap-3">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
+            <Paintbrush className="w-6 h-6 text-primary-blue" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-white">My Liveries</h1>
+            <p className="text-sm text-gray-400">Manage your car liveries across leagues</p>
+          </div>
+        </div>
+        <Link href="/profile/liveries/upload">
+          <Button variant="primary">
+            <Upload className="w-4 h-4 mr-2" />
+            Upload Livery
+          </Button>
+        </Link>
+      </div>
+
+      {/* Livery Collection */}
+      {liveries.length === 0 ? (
+        <Card>
+          <div className="text-center py-16">
+            <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-iron-gray/50 flex items-center justify-center">
+              <Car className="w-10 h-10 text-gray-500" />
+            </div>
+            <h3 className="text-xl font-medium text-white mb-3">No Liveries Yet</h3>
+            <p className="text-sm text-gray-400 max-w-md mx-auto mb-6">
+              Upload your first livery. Use the same livery across multiple leagues or create custom ones for each.
+            </p>
+            <Link href="/profile/liveries/upload">
+              <Button variant="primary">
+                <Upload className="w-4 h-4 mr-2" />
+                Upload Your First Livery
+              </Button>
+            </Link>
+          </div>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {liveries.map((livery) => (
+            <Card key={livery.id} className="overflow-hidden hover:border-primary-blue/50 transition-colors">
+              {/* Livery Preview */}
+              <div className="aspect-video bg-deep-graphite rounded-lg mb-4 flex items-center justify-center border border-charcoal-outline">
+                <Car className="w-16 h-16 text-gray-600" />
+              </div>
+
+              {/* Livery Info */}
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold text-white">{livery.carName}</h3>
+                  {livery.isValidated ? (
+                    <span className="px-2 py-0.5 text-xs bg-performance-green/10 text-performance-green border border-performance-green/30 rounded-full">
+                      Validated
+                    </span>
+                  ) : (
+                    <span className="px-2 py-0.5 text-xs bg-warning-amber/10 text-warning-amber border border-warning-amber/30 rounded-full">
+                      Pending
+                    </span>
+                  )}
+                </div>
+
+                <p className="text-xs text-gray-500">
+                  Uploaded {new Date(livery.uploadedAt).toLocaleDateString()}
+                </p>
+
+                {/* Actions */}
+                <div className="flex gap-2 pt-2">
+                  <Button variant="secondary" className="flex-1 px-3 py-1.5">
+                    <Edit className="w-4 h-4 mr-1" />
+                    Edit
+                  </Button>
+                  <Button variant="secondary" className="px-3 py-1.5">
+                    <Download className="w-4 h-4" />
+                  </Button>
+                  <Button variant="danger" className="px-3 py-1.5">
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* Info Section */}
+      <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <h3 className="text-lg font-semibold text-white mb-3">Livery Requirements</h3>
+          <ul className="space-y-2 text-sm text-gray-400">
+            <li className="flex items-start gap-2">
+              <span className="text-primary-blue mt-0.5">•</span>
+              PNG or DDS format, max 5MB
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary-blue mt-0.5">•</span>
+              No logos or text allowed on base livery
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary-blue mt-0.5">•</span>
+              Sponsor decals are added by league admins
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary-blue mt-0.5">•</span>
+              Your driver name and number are added automatically
+            </li>
+          </ul>
+        </Card>
+
+        <Card>
+          <h3 className="text-lg font-semibold text-white mb-3">How It Works</h3>
+          <ol className="space-y-2 text-sm text-gray-400">
+            <li className="flex items-start gap-2">
+              <span className="text-primary-blue font-semibold">1.</span>
+              Upload your base livery for each car you race
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary-blue font-semibold">2.</span>
+              Position your name and number decals
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary-blue font-semibold">3.</span>
+              League admins add sponsor logos
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary-blue font-semibold">4.</span>
+              Download the final pack with all decals burned in
+            </li>
+          </ol>
+        </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> Livery management is demonstration-only.
+          In production, liveries are stored in cloud storage and composited with sponsor decals.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/website/app/profile/liveries/upload/page.tsx

@@ -0,0 +1,405 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { Upload, Paintbrush, Move, ZoomIn, Check, X, AlertTriangle, Car, RotateCw, Gamepad2 } from 'lucide-react';
+
+interface DecalPosition {
+  id: string;
+  type: 'name' | 'number' | 'rank';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+}
+
+interface GameOption {
+  id: string;
+  name: string;
+}
+
+interface CarOption {
+  id: string;
+  name: string;
+  manufacturer: string;
+  gameId: string;
+}
+
+// Mock data - in production these would come from API
+const GAMES: GameOption[] = [
+  { id: 'iracing', name: 'iRacing' },
+  { id: 'acc', name: 'Assetto Corsa Competizione' },
+  { id: 'ac', name: 'Assetto Corsa' },
+  { id: 'rf2', name: 'rFactor 2' },
+  { id: 'ams2', name: 'Automobilista 2' },
+  { id: 'lmu', name: 'Le Mans Ultimate' },
+];
+
+const CARS: CarOption[] = [
+  // iRacing cars
+  { id: 'ir-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'iracing' },
+  { id: 'ir-ferrari-296-gt3', name: '296 GT3', manufacturer: 'Ferrari', gameId: 'iracing' },
+  { id: 'ir-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'iracing' },
+  { id: 'ir-mercedes-amg-gt3', name: 'AMG GT3 Evo', manufacturer: 'Mercedes-AMG', gameId: 'iracing' },
+  { id: 'ir-audi-r8-gt3', name: 'R8 LMS GT3 Evo II', manufacturer: 'Audi', gameId: 'iracing' },
+  { id: 'ir-dallara-f3', name: 'F3', manufacturer: 'Dallara', gameId: 'iracing' },
+  { id: 'ir-dallara-ir18', name: 'IR-18', manufacturer: 'Dallara', gameId: 'iracing' },
+  // ACC cars
+  { id: 'acc-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'acc' },
+  { id: 'acc-ferrari-296-gt3', name: '296 GT3', manufacturer: 'Ferrari', gameId: 'acc' },
+  { id: 'acc-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'acc' },
+  { id: 'acc-mercedes-amg-gt3', name: 'AMG GT3 Evo', manufacturer: 'Mercedes-AMG', gameId: 'acc' },
+  { id: 'acc-lamborghini-huracan-gt3', name: 'Huracán GT3 Evo2', manufacturer: 'Lamborghini', gameId: 'acc' },
+  { id: 'acc-aston-martin-v8-gt3', name: 'V8 Vantage GT3', manufacturer: 'Aston Martin', gameId: 'acc' },
+  // AC cars
+  { id: 'ac-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'ac' },
+  { id: 'ac-ferrari-488-gt3', name: '488 GT3', manufacturer: 'Ferrari', gameId: 'ac' },
+  { id: 'ac-lotus-exos', name: 'Exos 125', manufacturer: 'Lotus', gameId: 'ac' },
+  // rFactor 2 cars
+  { id: 'rf2-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'rf2' },
+  { id: 'rf2-bmw-m4-gt3', name: 'M4 GT3', manufacturer: 'BMW', gameId: 'rf2' },
+  // AMS2 cars
+  { id: 'ams2-porsche-911-gt3r', name: '911 GT3 R', manufacturer: 'Porsche', gameId: 'ams2' },
+  { id: 'ams2-mclaren-720s-gt3', name: '720S GT3', manufacturer: 'McLaren', gameId: 'ams2' },
+  // LMU cars
+  { id: 'lmu-porsche-963', name: '963 LMDh', manufacturer: 'Porsche', gameId: 'lmu' },
+  { id: 'lmu-ferrari-499p', name: '499P', manufacturer: 'Ferrari', gameId: 'lmu' },
+  { id: 'lmu-toyota-gr010', name: 'GR010', manufacturer: 'Toyota', gameId: 'lmu' },
+];
+
+export default function LiveryUploadPage() {
+  const router = useRouter();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [selectedGame, setSelectedGame] = useState<string>('');
+  const [selectedCar, setSelectedCar] = useState<string>('');
+  const [filteredCars, setFilteredCars] = useState<CarOption[]>([]);
+  const [decals, setDecals] = useState<DecalPosition[]>([
+    { id: 'name', type: 'name', x: 0.1, y: 0.8, width: 0.2, height: 0.05, rotation: 0 },
+    { id: 'number', type: 'number', x: 0.8, y: 0.1, width: 0.15, height: 0.15, rotation: 0 },
+    { id: 'rank', type: 'rank', x: 0.05, y: 0.1, width: 0.1, height: 0.1, rotation: 0 },
+  ]);
+  const [activeDecal, setActiveDecal] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  // Filter cars when game changes
+  useEffect(() => {
+    if (selectedGame) {
+      const cars = CARS.filter(car => car.gameId === selectedGame);
+      setFilteredCars(cars);
+      setSelectedCar(''); // Reset car selection when game changes
+    } else {
+      setFilteredCars([]);
+      setSelectedCar('');
+    }
+  }, [selectedGame]);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setUploadedFile(file);
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      setUploadedFile(file);
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!uploadedFile || !selectedGame || !selectedCar) return;
+
+    setSubmitting(true);
+
+    try {
+      // Alpha: In-memory only
+      console.log('Livery upload:', {
+        file: uploadedFile.name,
+        gameId: selectedGame,
+        carId: selectedCar,
+        decals,
+      });
+
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      alert('Livery uploaded successfully.');
+      router.push('/profile/liveries');
+    } catch (err) {
+      console.error('Upload failed:', err);
+      alert('Upload failed. Try again.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto py-12">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
+            <Upload className="w-6 h-6 text-primary-blue" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-white">Upload Livery</h1>
+            <p className="text-sm text-gray-400">Add a new livery to your collection</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Upload Section */}
+        <Card>
+          <h2 className="text-lg font-semibold text-white mb-4">Livery File</h2>
+
+          {/* Game Selection */}
+          <div className="mb-4">
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Gamepad2 className="w-4 h-4" />
+                Select Game
+              </div>
+            </label>
+            <select
+              value={selectedGame}
+              onChange={(e) => setSelectedGame(e.target.value)}
+              className="w-full rounded-lg border border-charcoal-outline bg-iron-gray px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none"
+            >
+              <option value="">Choose a game...</option>
+              {GAMES.map((game) => (
+                <option key={game.id} value={game.id}>
+                  {game.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Car Selection */}
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Car className="w-4 h-4" />
+                Select Car
+              </div>
+            </label>
+            <select
+              value={selectedCar}
+              onChange={(e) => setSelectedCar(e.target.value)}
+              disabled={!selectedGame}
+              className="w-full rounded-lg border border-charcoal-outline bg-iron-gray px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <option value="">{selectedGame ? 'Choose a car...' : 'Select a game first...'}</option>
+              {filteredCars.map((car) => (
+                <option key={car.id} value={car.id}>
+                  {car.manufacturer} {car.name}
+                </option>
+              ))}
+            </select>
+            {selectedGame && filteredCars.length === 0 && (
+              <p className="text-xs text-gray-500 mt-1">No cars available for this game</p>
+            )}
+          </div>
+
+          {/* File Upload */}
+          <div
+            onClick={() => fileInputRef.current?.click()}
+            onDrop={handleDrop}
+            onDragOver={(e) => e.preventDefault()}
+            className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
+              previewUrl
+                ? 'border-performance-green/50 bg-performance-green/5'
+                : 'border-charcoal-outline hover:border-primary-blue/50 hover:bg-primary-blue/5'
+            }`}
+          >
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".png,.dds"
+              onChange={handleFileChange}
+              className="hidden"
+            />
+
+            {previewUrl ? (
+              <div className="space-y-3">
+                <Check className="w-12 h-12 text-performance-green mx-auto" />
+                <p className="text-sm text-white font-medium">{uploadedFile?.name}</p>
+                <p className="text-xs text-gray-500">Click to replace</p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                <Upload className="w-12 h-12 text-gray-500 mx-auto" />
+                <p className="text-sm text-gray-400">
+                  Drop your livery here or click to browse
+                </p>
+                <p className="text-xs text-gray-500">PNG or DDS, max 5MB</p>
+              </div>
+            )}
+          </div>
+
+          {/* Validation Warning */}
+          <div className="mt-4 p-3 rounded-lg bg-warning-amber/10 border border-warning-amber/30">
+            <div className="flex items-start gap-2">
+              <AlertTriangle className="w-4 h-4 text-warning-amber shrink-0 mt-0.5" />
+              <p className="text-xs text-gray-400">
+                <strong className="text-warning-amber">No logos or text allowed.</strong>{' '}
+                Your base livery must be clean. Sponsor logos are added by league admins.
+              </p>
+            </div>
+          </div>
+        </Card>
+
+        {/* Decal Editor */}
+        <Card>
+          <h2 className="text-lg font-semibold text-white mb-4">Position Decals</h2>
+          <p className="text-sm text-gray-400 mb-4">
+            Drag to position your driver name, number, and rank badge.
+          </p>
+
+          {/* Preview Canvas */}
+          <div className="relative aspect-video bg-deep-graphite rounded-lg border border-charcoal-outline overflow-hidden mb-4">
+            {previewUrl ? (
+              <img
+                src={previewUrl}
+                alt="Livery preview"
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <div className="w-full h-full flex items-center justify-center">
+                <Car className="w-20 h-20 text-gray-600" />
+              </div>
+            )}
+
+            {/* Decal Placeholders */}
+            {decals.map((decal) => (
+              <div
+                key={decal.id}
+                onClick={() => setActiveDecal(decal.id === activeDecal ? null : decal.id)}
+                className={`absolute cursor-move border-2 rounded flex items-center justify-center text-xs font-medium transition-all ${
+                  activeDecal === decal.id
+                    ? 'border-primary-blue bg-primary-blue/20 text-primary-blue'
+                    : 'border-white/30 bg-black/30 text-white/70'
+                }`}
+                style={{
+                  left: `${decal.x * 100}%`,
+                  top: `${decal.y * 100}%`,
+                  width: `${decal.width * 100}%`,
+                  height: `${decal.height * 100}%`,
+                  transform: `rotate(${decal.rotation}deg)`,
+                }}
+              >
+                {decal.type === 'name' && 'NAME'}
+                {decal.type === 'number' && '#'}
+                {decal.type === 'rank' && 'RANK'}
+              </div>
+            ))}
+          </div>
+
+          {/* Decal Controls */}
+          <div className="grid grid-cols-3 gap-3">
+            {decals.map((decal) => (
+              <button
+                key={decal.id}
+                onClick={() => setActiveDecal(decal.id === activeDecal ? null : decal.id)}
+                className={`p-3 rounded-lg border text-center transition-all ${
+                  activeDecal === decal.id
+                    ? 'border-primary-blue bg-primary-blue/10 text-primary-blue'
+                    : 'border-charcoal-outline bg-iron-gray/30 text-gray-400 hover:border-primary-blue/50'
+                }`}
+              >
+                <div className="text-xs font-medium capitalize mb-1">{decal.type}</div>
+                <div className="text-xs text-gray-500">
+                  {Math.round(decal.x * 100)}%, {Math.round(decal.y * 100)}%
+                </div>
+                <div className="text-xs text-gray-600">
+                  {decal.rotation}°
+                </div>
+              </button>
+            ))}
+          </div>
+
+          {/* Rotation Controls */}
+          {activeDecal && (
+            <div className="mt-4 p-3 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-xs font-medium text-gray-300 capitalize">
+                  {decals.find(d => d.id === activeDecal)?.type} Rotation
+                </span>
+                <span className="text-xs text-gray-500">
+                  {decals.find(d => d.id === activeDecal)?.rotation}°
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <input
+                  type="range"
+                  min="0"
+                  max="360"
+                  step="15"
+                  value={decals.find(d => d.id === activeDecal)?.rotation ?? 0}
+                  onChange={(e) => {
+                    const rotation = parseInt(e.target.value, 10);
+                    setDecals(decals.map(d =>
+                      d.id === activeDecal ? { ...d, rotation } : d
+                    ));
+                  }}
+                  className="flex-1 h-2 bg-charcoal-outline rounded-lg appearance-none cursor-pointer accent-primary-blue"
+                />
+                <button
+                  onClick={() => {
+                    setDecals(decals.map(d =>
+                      d.id === activeDecal ? { ...d, rotation: (d.rotation + 90) % 360 } : d
+                    ));
+                  }}
+                  className="p-2 rounded-lg border border-charcoal-outline bg-iron-gray/30 hover:bg-iron-gray/50 transition-colors"
+                  title="Rotate 90°"
+                >
+                  <RotateCw className="w-4 h-4 text-gray-400" />
+                </button>
+              </div>
+            </div>
+          )}
+
+          <p className="text-xs text-gray-500 mt-4">
+            Click a decal above, then drag on preview to reposition. Use the slider or button to rotate.
+          </p>
+        </Card>
+      </div>
+
+      {/* Actions */}
+      <div className="mt-6 flex gap-3">
+        <Button
+          variant="primary"
+          onClick={handleSubmit}
+          disabled={!uploadedFile || !selectedGame || !selectedCar || submitting}
+        >
+          {submitting ? 'Uploading...' : 'Upload Livery'}
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() => router.back()}
+          disabled={submitting}
+        >
+          Cancel
+        </Button>
+      </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> Livery upload is demonstration-only.
+          Decal positioning and image validation are not functional in this preview.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/website/app/profile/sponsorship-requests/page.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import PendingSponsorshipRequests, { type PendingRequestDTO } from '@/components/sponsors/PendingSponsorshipRequests';
+import {
+  getGetPendingSponsorshipRequestsQuery,
+  getAcceptSponsorshipRequestUseCase,
+  getRejectSponsorshipRequestUseCase,
+  getDriverRepository,
+  getLeagueRepository,
+  getTeamRepository,
+  getLeagueMembershipRepository,
+  getTeamMembershipRepository,
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
+import { Handshake, User, Users, Trophy, ChevronRight, Building, AlertTriangle } from 'lucide-react';
+import Link from 'next/link';
+
+interface EntitySection {
+  entityType: 'driver' | 'team' | 'race' | 'season';
+  entityId: string;
+  entityName: string;
+  requests: PendingRequestDTO[];
+}
+
+export default function SponsorshipRequestsPage() {
+  const router = useRouter();
+  const currentDriverId = useEffectiveDriverId();
+  
+  const [sections, setSections] = useState<EntitySection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadAllRequests = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const driverRepo = getDriverRepository();
+      const leagueRepo = getLeagueRepository();
+      const teamRepo = getTeamRepository();
+      const leagueMembershipRepo = getLeagueMembershipRepository();
+      const teamMembershipRepo = getTeamMembershipRepository();
+      const query = getGetPendingSponsorshipRequestsQuery();
+      
+      const allSections: EntitySection[] = [];
+      
+      // 1. Driver's own sponsorship requests
+      const driverResult = await query.execute({
+        entityType: 'driver',
+        entityId: currentDriverId,
+      });
+      
+      if (driverResult.requests.length > 0) {
+        const driver = await driverRepo.findById(currentDriverId);
+        allSections.push({
+          entityType: 'driver',
+          entityId: currentDriverId,
+          entityName: driver?.name ?? 'Your Profile',
+          requests: driverResult.requests,
+        });
+      }
+      
+      // 2. Leagues where the user is admin/owner
+      const allLeagues = await leagueRepo.findAll();
+      for (const league of allLeagues) {
+        const membership = await leagueMembershipRepo.getMembership(league.id, currentDriverId);
+        if (membership && isLeagueAdminOrHigherRole(membership.role)) {
+          // Load sponsorship requests for this league's active season
+          try {
+            // For simplicity, we'll query by season entityType - in production you'd get the active season ID
+            const leagueResult = await query.execute({
+              entityType: 'season',
+              entityId: league.id, // Using league ID as a proxy for now
+            });
+            
+            if (leagueResult.requests.length > 0) {
+              allSections.push({
+                entityType: 'season',
+                entityId: league.id,
+                entityName: league.name,
+                requests: leagueResult.requests,
+              });
+            }
+          } catch (err) {
+            // Silently skip if no requests found
+          }
+        }
+      }
+      
+      // 3. Teams where the user is owner/manager
+      const allTeams = await teamRepo.findAll();
+      for (const team of allTeams) {
+        const membership = await teamMembershipRepo.getMembership(team.id, currentDriverId);
+        if (membership && (membership.role === 'owner' || membership.role === 'manager')) {
+          const teamResult = await query.execute({
+            entityType: 'team',
+            entityId: team.id,
+          });
+          
+          if (teamResult.requests.length > 0) {
+            allSections.push({
+              entityType: 'team',
+              entityId: team.id,
+              entityName: team.name,
+              requests: teamResult.requests,
+            });
+          }
+        }
+      }
+      
+      setSections(allSections);
+    } catch (err) {
+      console.error('Failed to load sponsorship requests:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load requests');
+    } finally {
+      setLoading(false);
+    }
+  }, [currentDriverId]);
+
+  useEffect(() => {
+    loadAllRequests();
+  }, [loadAllRequests]);
+
+  const handleAccept = async (requestId: string) => {
+    const useCase = getAcceptSponsorshipRequestUseCase();
+    await useCase.execute({
+      requestId,
+      respondedBy: currentDriverId,
+    });
+    await loadAllRequests();
+  };
+
+  const handleReject = async (requestId: string, reason?: string) => {
+    const useCase = getRejectSponsorshipRequestUseCase();
+    await useCase.execute({
+      requestId,
+      respondedBy: currentDriverId,
+      reason,
+    });
+    await loadAllRequests();
+  };
+
+  const getEntityIcon = (type: 'driver' | 'team' | 'race' | 'season') => {
+    switch (type) {
+      case 'driver':
+        return User;
+      case 'team':
+        return Users;
+      case 'race':
+        return Trophy;
+      case 'season':
+        return Trophy;
+      default:
+        return Building;
+    }
+  };
+
+  const getEntityLink = (type: 'driver' | 'team' | 'race' | 'season', id: string) => {
+    switch (type) {
+      case 'driver':
+        return `/drivers/${id}`;
+      case 'team':
+        return `/teams/${id}`;
+      case 'race':
+        return `/races/${id}`;
+      case 'season':
+        return `/leagues/${id}/sponsorships`;
+      default:
+        return '#';
+    }
+  };
+
+  const totalRequests = sections.reduce((sum, s) => sum + s.requests.length, 0);
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8">
+      <Breadcrumbs
+        items={[
+          { label: 'Profile', href: '/profile' },
+          { label: 'Sponsorship Requests' },
+        ]}
+      />
+
+      {/* Header */}
+      <div className="flex items-center gap-4 mt-6 mb-8">
+        <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-performance-green/10 border border-performance-green/30">
+          <Handshake className="w-7 h-7 text-performance-green" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-white">Sponsorship Requests</h1>
+          <p className="text-sm text-gray-400">
+            Manage sponsorship requests for your profile, teams, and leagues
+          </p>
+        </div>
+        {totalRequests > 0 && (
+          <div className="ml-auto px-3 py-1 rounded-full bg-performance-green/20 text-performance-green text-sm font-semibold">
+            {totalRequests} pending
+          </div>
+        )}
+      </div>
+
+      {loading ? (
+        <Card>
+          <div className="text-center py-12 text-gray-400">
+            <div className="animate-pulse">Loading sponsorship requests...</div>
+          </div>
+        </Card>
+      ) : error ? (
+        <Card>
+          <div className="text-center py-12">
+            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-red-500/10 flex items-center justify-center">
+              <AlertTriangle className="w-8 h-8 text-red-400" />
+            </div>
+            <h3 className="text-lg font-medium text-white mb-2">Error Loading Requests</h3>
+            <p className="text-sm text-gray-400">{error}</p>
+            <Button variant="secondary" onClick={loadAllRequests} className="mt-4">
+              Try Again
+            </Button>
+          </div>
+        </Card>
+      ) : sections.length === 0 ? (
+        <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">
+              <Handshake className="w-8 h-8 text-gray-500" />
+            </div>
+            <h3 className="text-lg font-medium text-white mb-2">No Pending Requests</h3>
+            <p className="text-sm text-gray-400">
+              You don't have any pending sponsorship requests at the moment.
+            </p>
+            <p className="text-xs text-gray-500 mt-2">
+              Sponsors can apply to sponsor your profile, teams, or leagues you manage.
+            </p>
+          </div>
+        </Card>
+      ) : (
+        <div className="space-y-6">
+          {sections.map((section) => {
+            const Icon = getEntityIcon(section.entityType);
+            const entityLink = getEntityLink(section.entityType, section.entityId);
+            
+            return (
+              <Card key={`${section.entityType}-${section.entityId}`}>
+                {/* Section Header */}
+                <div className="flex items-center justify-between mb-6 pb-4 border-b border-charcoal-outline">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-iron-gray/50">
+                      <Icon className="w-5 h-5 text-gray-400" />
+                    </div>
+                    <div>
+                      <h2 className="text-lg font-semibold text-white">{section.entityName}</h2>
+                      <p className="text-xs text-gray-500 capitalize">{section.entityType}</p>
+                    </div>
+                  </div>
+                  <Link
+                    href={entityLink}
+                    className="flex items-center gap-1 text-sm text-primary-blue hover:text-primary-blue/80 transition-colors"
+                  >
+                    View {section.entityType === 'season' ? 'Sponsorships' : section.entityType}
+                    <ChevronRight className="w-4 h-4" />
+                  </Link>
+                </div>
+
+                {/* Requests */}
+                <PendingSponsorshipRequests
+                  entityType={section.entityType}
+                  entityId={section.entityId}
+                  entityName={section.entityName}
+                  requests={section.requests}
+                  onAccept={handleAccept}
+                  onReject={handleReject}
+                />
+              </Card>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Info Card */}
+      <Card className="mt-8 bg-gradient-to-r from-primary-blue/5 to-transparent border-primary-blue/20">
+        <div className="flex items-start gap-4">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/20 flex-shrink-0">
+            <Building className="w-5 h-5 text-primary-blue" />
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-white mb-1">How Sponsorships Work</h3>
+            <p className="text-xs text-gray-400 leading-relaxed">
+              Sponsors can apply to sponsor your driver profile, teams you manage, or leagues you administer.
+              Review each request carefully - accepting will activate the sponsorship and the sponsor will be
+              charged. You'll receive the payment minus a 10% platform fee.
+            </p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

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

@@ -8,6 +8,7 @@ import Card from '@/components/ui/Card';
 import Heading from '@/components/ui/Heading';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import FileProtestModal from '@/components/races/FileProtestModal';
+import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
 import type { Race } from '@gridpilot/racing/domain/entities/Race';
 import type { League } from '@gridpilot/racing/domain/entities/League';
 import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
@@ -73,6 +74,7 @@ export default function RaceDetailPage() {
   const [showProtestModal, setShowProtestModal] = useState(false);
 
   const currentDriverId = useEffectiveDriverId();
+  const isSponsorMode = useSponsorMode();
 
   const loadRaceData = async () => {
     try {
@@ -408,6 +410,21 @@ export default function RaceDetailPage() {
     return { rating: stats.rating, rank };
   };
 
+  // Build sponsor insights for race
+  const sponsorInsights = {
+    tier: 'gold' as const,
+    trustScore: 92,
+    discordMembers: league ? 1847 : undefined,
+    monthlyActivity: 156,
+  };
+
+  const raceMetrics = [
+    MetricBuilders.views(entryList.length * 12),
+    MetricBuilders.engagement(78),
+    { label: 'SOF', value: raceSOF?.toString() ?? '—', icon: Zap, color: 'text-warning-amber' as const },
+    MetricBuilders.reach(entryList.length * 45),
+  ];
+
   return (
     <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
       <div className="max-w-7xl mx-auto space-y-6">
@@ -424,6 +441,20 @@ export default function RaceDetailPage() {
           </Button>
         </div>
 
+        {/* Sponsor Insights Card - Consistent placement at top */}
+        {isSponsorMode && race && league && (
+          <SponsorInsightsCard
+            entityType="race"
+            entityId={raceId}
+            entityName={race.track}
+            tier="premium"
+            metrics={raceMetrics}
+            slots={SlotTemplates.race(true, 500)}
+            trustScore={sponsorInsights.trustScore}
+            monthlyActivity={sponsorInsights.monthlyActivity}
+          />
+        )}
+
         {/* User Result - Premium Achievement Card */}
         {userResult && (
           <div className={`
@@ -905,11 +936,11 @@ export default function RaceDetailPage() {
                     <XCircle className="w-4 h-4" />
                     {cancelling ? 'Cancelling...' : 'Cancel Race'}
                   </Button>
-                )}
-              </div>
-            </Card>
-
-            {/* Status Info */}
+                  )}
+                </div>
+              </Card>
+  
+              {/* Status Info */}
             <Card className={`${config.bg} border ${config.border}`}>
               <div className="flex items-start gap-3">
                 <div className={`p-2 rounded-lg ${config.bg}`}>

apps/website/app/sponsor/billing/page.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { 
+  CreditCard, 
+  DollarSign, 
+  Calendar,
+  Download,
+  Plus,
+  Check,
+  AlertTriangle,
+  FileText,
+  ArrowRight
+} from 'lucide-react';
+
+interface PaymentMethod {
+  id: string;
+  type: 'card' | 'bank';
+  last4: string;
+  brand?: string;
+  isDefault: boolean;
+  expiryMonth?: number;
+  expiryYear?: number;
+}
+
+interface Invoice {
+  id: string;
+  date: Date;
+  amount: number;
+  status: 'paid' | 'pending' | 'failed';
+  description: string;
+}
+
+// Mock data
+const MOCK_PAYMENT_METHODS: PaymentMethod[] = [
+  {
+    id: 'pm-1',
+    type: 'card',
+    last4: '4242',
+    brand: 'Visa',
+    isDefault: true,
+    expiryMonth: 12,
+    expiryYear: 2027,
+  },
+  {
+    id: 'pm-2',
+    type: 'card',
+    last4: '5555',
+    brand: 'Mastercard',
+    isDefault: false,
+    expiryMonth: 6,
+    expiryYear: 2026,
+  },
+];
+
+const MOCK_INVOICES: Invoice[] = [
+  {
+    id: 'inv-1',
+    date: new Date('2025-11-01'),
+    amount: 1200,
+    status: 'paid',
+    description: 'GT3 Pro Championship - Main Sponsor (Q4 2025)',
+  },
+  {
+    id: 'inv-2',
+    date: new Date('2025-10-01'),
+    amount: 400,
+    status: 'paid',
+    description: 'Formula Sim Series - Secondary Sponsor (Q4 2025)',
+  },
+  {
+    id: 'inv-3',
+    date: new Date('2025-12-01'),
+    amount: 350,
+    status: 'pending',
+    description: 'Touring Car Cup - Secondary Sponsor (Q1 2026)',
+  },
+];
+
+function PaymentMethodCard({ method, onSetDefault }: { method: PaymentMethod; onSetDefault: () => void }) {
+  return (
+    <div className={`p-4 rounded-lg border ${method.isDefault ? 'border-primary-blue/50 bg-primary-blue/5' : 'border-charcoal-outline bg-iron-gray/30'}`}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center">
+            <CreditCard className="w-5 h-5 text-gray-400" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-white">{method.brand} •••• {method.last4}</span>
+              {method.isDefault && (
+                <span className="px-2 py-0.5 rounded text-xs bg-primary-blue/20 text-primary-blue">Default</span>
+              )}
+            </div>
+            {method.expiryMonth && method.expiryYear && (
+              <span className="text-sm text-gray-500">Expires {method.expiryMonth}/{method.expiryYear}</span>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {!method.isDefault && (
+            <Button variant="secondary" onClick={onSetDefault} className="text-xs">
+              Set Default
+            </Button>
+          )}
+          <Button variant="secondary" className="text-xs text-gray-400">
+            Remove
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InvoiceRow({ invoice }: { invoice: Invoice }) {
+  const statusConfig = {
+    paid: { icon: Check, color: 'text-performance-green', bg: 'bg-performance-green/10' },
+    pending: { icon: AlertTriangle, color: 'text-warning-amber', bg: 'bg-warning-amber/10' },
+    failed: { icon: AlertTriangle, color: 'text-racing-red', bg: 'bg-racing-red/10' },
+  };
+
+  const status = statusConfig[invoice.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/20 transition-colors">
+      <div className="flex items-center gap-4">
+        <div className="w-10 h-10 rounded-lg bg-iron-gray flex items-center justify-center">
+          <FileText className="w-5 h-5 text-gray-400" />
+        </div>
+        <div>
+          <div className="font-medium text-white">{invoice.description}</div>
+          <div className="text-sm text-gray-500">
+            {invoice.date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center gap-4">
+        <div className="text-right">
+          <div className="font-semibold text-white">${invoice.amount.toLocaleString()}</div>
+          <div className={`flex items-center gap-1 text-xs ${status.color}`}>
+            <StatusIcon className="w-3 h-3" />
+            {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
+          </div>
+        </div>
+        <Button variant="secondary" className="text-xs">
+          <Download className="w-3 h-3 mr-1" />
+          PDF
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default function SponsorBillingPage() {
+  const router = useRouter();
+  const [paymentMethods, setPaymentMethods] = useState(MOCK_PAYMENT_METHODS);
+
+  const handleSetDefault = (methodId: string) => {
+    setPaymentMethods(methods => 
+      methods.map(m => ({ ...m, isDefault: m.id === methodId }))
+    );
+  };
+
+  const totalSpent = MOCK_INVOICES.filter(i => i.status === 'paid').reduce((sum, i) => sum + i.amount, 0);
+  const pendingAmount = MOCK_INVOICES.filter(i => i.status === 'pending').reduce((sum, i) => sum + i.amount, 0);
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-white flex items-center gap-3">
+          <CreditCard className="w-7 h-7 text-warning-amber" />
+          Billing & Payments
+        </h1>
+        <p className="text-gray-400 mt-1">Manage payment methods and view invoices</p>
+      </div>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <Card className="p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <DollarSign className="w-5 h-5 text-performance-green" />
+            <span className="text-sm text-gray-400">Total Spent</span>
+          </div>
+          <div className="text-2xl font-bold text-white">${totalSpent.toLocaleString()}</div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <AlertTriangle className="w-5 h-5 text-warning-amber" />
+            <span className="text-sm text-gray-400">Pending</span>
+          </div>
+          <div className="text-2xl font-bold text-warning-amber">${pendingAmount.toLocaleString()}</div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-3 mb-2">
+            <Calendar className="w-5 h-5 text-primary-blue" />
+            <span className="text-sm text-gray-400">Next Payment</span>
+          </div>
+          <div className="text-lg font-bold text-white">Dec 15, 2025</div>
+        </Card>
+      </div>
+
+      {/* Payment Methods */}
+      <Card className="mb-8">
+        <div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white">Payment Methods</h2>
+          <Button variant="secondary" className="text-sm">
+            <Plus className="w-4 h-4 mr-2" />
+            Add Payment Method
+          </Button>
+        </div>
+        <div className="p-4 space-y-3">
+          {paymentMethods.map((method) => (
+            <PaymentMethodCard 
+              key={method.id} 
+              method={method} 
+              onSetDefault={() => handleSetDefault(method.id)}
+            />
+          ))}
+        </div>
+      </Card>
+
+      {/* Billing History */}
+      <Card>
+        <div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white">Billing History</h2>
+          <Button variant="secondary" className="text-sm">
+            <Download className="w-4 h-4 mr-2" />
+            Export All
+          </Button>
+        </div>
+        <div>
+          {MOCK_INVOICES.map((invoice) => (
+            <InvoiceRow key={invoice.id} invoice={invoice} />
+          ))}
+        </div>
+        <div className="p-4 border-t border-charcoal-outline">
+          <Button variant="secondary" className="w-full">
+            View All Invoices
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </div>
+      </Card>
+
+      {/* Platform Fee Notice */}
+      <div className="mt-6 rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
+        <h3 className="font-medium text-white mb-2">Platform Fee</h3>
+        <p className="text-sm text-gray-400">
+          A 10% platform fee is applied to all sponsorship payments. This fee helps maintain the platform,
+          provide analytics, and ensure quality sponsorship placements.
+        </p>
+      </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> Payment processing is demonstration-only.
+          Real billing will be available when the payment system is fully implemented.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/website/app/sponsor/campaigns/page.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { 
+  Megaphone, 
+  Trophy, 
+  Users, 
+  Eye, 
+  Calendar,
+  ExternalLink,
+  Plus,
+  ChevronRight,
+  Check,
+  Clock,
+  XCircle
+} from 'lucide-react';
+
+interface Sponsorship {
+  id: string;
+  leagueId: string;
+  leagueName: string;
+  tier: 'main' | 'secondary';
+  status: 'active' | 'pending' | 'expired';
+  startDate: Date;
+  endDate: Date;
+  price: number;
+  impressions: number;
+  drivers: number;
+}
+
+// Mock data - in production would come from repository
+const MOCK_SPONSORSHIPS: Sponsorship[] = [
+  {
+    id: 'sp-1',
+    leagueId: 'league-1',
+    leagueName: 'GT3 Pro Championship',
+    tier: 'main',
+    status: 'active',
+    startDate: new Date('2025-01-01'),
+    endDate: new Date('2025-06-30'),
+    price: 1200,
+    impressions: 45200,
+    drivers: 32,
+  },
+  {
+    id: 'sp-2',
+    leagueId: 'league-2',
+    leagueName: 'Endurance Masters',
+    tier: 'main',
+    status: 'active',
+    startDate: new Date('2025-02-01'),
+    endDate: new Date('2025-07-31'),
+    price: 1000,
+    impressions: 38100,
+    drivers: 48,
+  },
+  {
+    id: 'sp-3',
+    leagueId: 'league-3',
+    leagueName: 'Formula Sim Series',
+    tier: 'secondary',
+    status: 'active',
+    startDate: new Date('2025-03-01'),
+    endDate: new Date('2025-08-31'),
+    price: 400,
+    impressions: 22800,
+    drivers: 24,
+  },
+  {
+    id: 'sp-4',
+    leagueId: 'league-4',
+    leagueName: 'Touring Car Cup',
+    tier: 'secondary',
+    status: 'pending',
+    startDate: new Date('2025-04-01'),
+    endDate: new Date('2025-09-30'),
+    price: 350,
+    impressions: 0,
+    drivers: 28,
+  },
+];
+
+function SponsorshipCard({ sponsorship }: { sponsorship: Sponsorship }) {
+  const router = useRouter();
+  
+  const statusConfig = {
+    active: { icon: Check, color: 'text-performance-green', bg: 'bg-performance-green/10', label: 'Active' },
+    pending: { icon: Clock, color: 'text-warning-amber', bg: 'bg-warning-amber/10', label: 'Pending' },
+    expired: { icon: XCircle, color: 'text-gray-400', bg: 'bg-gray-400/10', label: 'Expired' },
+  };
+
+  const tierConfig = {
+    main: { color: 'text-primary-blue', bg: 'bg-primary-blue/10', border: 'border-primary-blue/30', label: 'Main Sponsor' },
+    secondary: { color: 'text-purple-400', bg: 'bg-purple-400/10', border: 'border-purple-400/30', label: 'Secondary' },
+  };
+
+  const status = statusConfig[sponsorship.status];
+  const tier = tierConfig[sponsorship.tier];
+  const StatusIcon = status.icon;
+
+  return (
+    <Card className="hover:border-charcoal-outline/80 transition-colors">
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className={`px-2 py-1 rounded text-xs font-medium border ${tier.bg} ${tier.color} ${tier.border}`}>
+            {tier.label}
+          </div>
+          <div className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium ${status.bg} ${status.color}`}>
+            <StatusIcon className="w-3 h-3" />
+            {status.label}
+          </div>
+        </div>
+        <Button
+          variant="secondary"
+          onClick={() => router.push(`/leagues/${sponsorship.leagueId}`)}
+          className="text-xs"
+        >
+          <ExternalLink className="w-3 h-3 mr-1" />
+          View League
+        </Button>
+      </div>
+
+      <h3 className="text-lg font-semibold text-white mb-2">{sponsorship.leagueName}</h3>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
+        <div className="bg-iron-gray/50 rounded-lg p-3">
+          <div className="flex items-center gap-1 text-gray-400 text-xs mb-1">
+            <Eye className="w-3 h-3" />
+            Impressions
+          </div>
+          <div className="text-white font-semibold">{sponsorship.impressions.toLocaleString()}</div>
+        </div>
+        <div className="bg-iron-gray/50 rounded-lg p-3">
+          <div className="flex items-center gap-1 text-gray-400 text-xs mb-1">
+            <Users className="w-3 h-3" />
+            Drivers
+          </div>
+          <div className="text-white font-semibold">{sponsorship.drivers}</div>
+        </div>
+        <div className="bg-iron-gray/50 rounded-lg p-3">
+          <div className="flex items-center gap-1 text-gray-400 text-xs mb-1">
+            <Calendar className="w-3 h-3" />
+            Period
+          </div>
+          <div className="text-white font-semibold text-xs">
+            {sponsorship.startDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })} - {sponsorship.endDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
+          </div>
+        </div>
+        <div className="bg-iron-gray/50 rounded-lg p-3">
+          <div className="flex items-center gap-1 text-gray-400 text-xs mb-1">
+            <Trophy className="w-3 h-3" />
+            Investment
+          </div>
+          <div className="text-white font-semibold">${sponsorship.price}</div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50">
+        <span className="text-xs text-gray-500">
+          {Math.ceil((sponsorship.endDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24))} days remaining
+        </span>
+        <Button
+          variant="secondary"
+          className="text-xs"
+          onClick={() => router.push(`/sponsor/campaigns/${sponsorship.id}`)}
+        >
+          View Details
+          <ChevronRight className="w-3 h-3 ml-1" />
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
+export default function SponsorCampaignsPage() {
+  const router = useRouter();
+  const [filter, setFilter] = useState<'all' | 'active' | 'pending' | 'expired'>('all');
+  
+  const filteredSponsorships = filter === 'all' 
+    ? MOCK_SPONSORSHIPS 
+    : MOCK_SPONSORSHIPS.filter(s => s.status === filter);
+
+  const stats = {
+    total: MOCK_SPONSORSHIPS.length,
+    active: MOCK_SPONSORSHIPS.filter(s => s.status === 'active').length,
+    pending: MOCK_SPONSORSHIPS.filter(s => s.status === 'pending').length,
+    totalInvestment: MOCK_SPONSORSHIPS.reduce((sum, s) => sum + s.price, 0),
+  };
+
+  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 flex items-center gap-3">
+            <Megaphone className="w-7 h-7 text-primary-blue" />
+            My Sponsorships
+          </h1>
+          <p className="text-gray-400 mt-1">Manage your league sponsorships</p>
+        </div>
+        <Button
+          variant="primary"
+          onClick={() => router.push('/leagues')}
+        >
+          <Plus className="w-4 h-4 mr-2" />
+          Find Leagues to Sponsor
+        </Button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <Card className="p-4">
+          <div className="text-2xl font-bold text-white">{stats.total}</div>
+          <div className="text-sm text-gray-400">Total Sponsorships</div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-2xl font-bold text-performance-green">{stats.active}</div>
+          <div className="text-sm text-gray-400">Active</div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-2xl font-bold text-warning-amber">{stats.pending}</div>
+          <div className="text-sm text-gray-400">Pending</div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-2xl font-bold text-white">${stats.totalInvestment.toLocaleString()}</div>
+          <div className="text-sm text-gray-400">Total Investment</div>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-2 mb-6">
+        {(['all', 'active', 'pending', 'expired'] as const).map((f) => (
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filter === f
+                ? 'bg-primary-blue text-white'
+                : 'bg-iron-gray/50 text-gray-400 hover:bg-iron-gray'
+            }`}
+          >
+            {f.charAt(0).toUpperCase() + f.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      {/* Sponsorship List */}
+      {filteredSponsorships.length === 0 ? (
+        <Card className="text-center py-12">
+          <Megaphone className="w-12 h-12 text-gray-600 mx-auto mb-4" />
+          <h3 className="text-lg font-semibold text-white mb-2">No sponsorships found</h3>
+          <p className="text-gray-400 mb-6">Start sponsoring leagues to grow your brand visibility</p>
+          <Button variant="primary" onClick={() => router.push('/leagues')}>
+            Browse Leagues
+          </Button>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {filteredSponsorships.map((sponsorship) => (
+            <SponsorshipCard key={sponsorship.id} sponsorship={sponsorship} />
+          ))}
+        </div>
+      )}
+
+      {/* Alpha Notice */}
+      <div className="mt-8 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> Sponsorship data shown here is demonstration-only.
+          Real sponsorship management will be available when the system is fully implemented.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/website/app/sponsor/dashboard/page.tsx

@@ -0,0 +1,404 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { 
+  BarChart3, 
+  Eye, 
+  Users, 
+  Trophy, 
+  TrendingUp, 
+  Calendar,
+  DollarSign,
+  Target,
+  ArrowUpRight,
+  ArrowDownRight,
+  ExternalLink,
+  Loader2
+} from 'lucide-react';
+import Link from 'next/link';
+
+interface SponsorshipMetrics {
+  impressions: number;
+  impressionsChange: number;
+  uniqueViewers: number;
+  viewersChange: number;
+  races: number;
+  drivers: number;
+  exposure: number;
+  exposureChange: number;
+}
+
+interface SponsoredLeague {
+  id: string;
+  name: string;
+  tier: 'main' | 'secondary';
+  drivers: number;
+  races: number;
+  impressions: number;
+  status: 'active' | 'upcoming' | 'completed';
+}
+
+interface SponsorDashboardData {
+  sponsorId: string;
+  sponsorName: string;
+  metrics: SponsorshipMetrics;
+  sponsoredLeagues: SponsoredLeague[];
+  investment: {
+    activeSponsorships: number;
+    totalInvestment: number;
+    costPerThousandViews: number;
+  };
+}
+
+// Fallback mock data for demo mode
+const MOCK_DASHBOARD: SponsorDashboardData = {
+  sponsorId: 'demo-sponsor',
+  sponsorName: 'Demo Sponsor',
+  metrics: {
+    impressions: 124500,
+    impressionsChange: 12.5,
+    uniqueViewers: 8420,
+    viewersChange: 8.3,
+    races: 24,
+    drivers: 156,
+    exposure: 87.5,
+    exposureChange: 5.2,
+  },
+  sponsoredLeagues: [
+    {
+      id: 'league-1',
+      name: 'GT3 Pro Championship',
+      tier: 'main',
+      drivers: 32,
+      races: 12,
+      impressions: 45200,
+      status: 'active',
+    },
+    {
+      id: 'league-2',
+      name: 'Endurance Masters',
+      tier: 'main',
+      drivers: 48,
+      races: 6,
+      impressions: 38100,
+      status: 'active',
+    },
+    {
+      id: 'league-3',
+      name: 'Formula Sim Series',
+      tier: 'secondary',
+      drivers: 24,
+      races: 8,
+      impressions: 22800,
+      status: 'active',
+    },
+    {
+      id: 'league-4',
+      name: 'Touring Car Cup',
+      tier: 'secondary',
+      drivers: 28,
+      races: 10,
+      impressions: 18400,
+      status: 'upcoming',
+    },
+  ],
+  investment: {
+    activeSponsorships: 4,
+    totalInvestment: 2400,
+    costPerThousandViews: 19.28,
+  },
+};
+
+function MetricCard({ 
+  title, 
+  value, 
+  change, 
+  icon: Icon,
+  suffix = '',
+}: { 
+  title: string; 
+  value: number | string; 
+  change?: number;
+  icon: typeof Eye;
+  suffix?: string;
+}) {
+  const isPositive = change && change > 0;
+  const isNegative = change && change < 0;
+
+  return (
+    <Card className="p-4">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
+          <Icon className="w-5 h-5 text-primary-blue" />
+        </div>
+        {change !== undefined && (
+          <div className={`flex items-center gap-1 text-sm ${
+            isPositive ? 'text-performance-green' : isNegative ? 'text-racing-red' : 'text-gray-400'
+          }`}>
+            {isPositive ? <ArrowUpRight className="w-4 h-4" /> : isNegative ? <ArrowDownRight className="w-4 h-4" /> : null}
+            {Math.abs(change)}%
+          </div>
+        )}
+      </div>
+      <div className="text-2xl font-bold text-white mb-1">
+        {typeof value === 'number' ? value.toLocaleString() : value}{suffix}
+      </div>
+      <div className="text-sm text-gray-400">{title}</div>
+    </Card>
+  );
+}
+
+function LeagueRow({ league }: { league: SponsoredLeague }) {
+  const statusColors = {
+    active: 'bg-performance-green/20 text-performance-green',
+    upcoming: 'bg-warning-amber/20 text-warning-amber',
+    completed: 'bg-gray-500/20 text-gray-400',
+  };
+
+  const tierColors = {
+    main: 'bg-primary-blue/20 text-primary-blue border-primary-blue/30',
+    secondary: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
+  };
+
+  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={`px-2 py-1 rounded text-xs font-medium border ${tierColors[league.tier]}`}>
+          {league.tier === 'main' ? 'Main Sponsor' : 'Secondary'}
+        </div>
+        <div>
+          <div className="font-medium text-white">{league.name}</div>
+          <div className="text-sm text-gray-400">
+            {league.drivers} drivers • {league.races} races
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center gap-6">
+        <div className="text-right">
+          <div className="text-sm font-medium text-white">{league.impressions.toLocaleString()}</div>
+          <div className="text-xs text-gray-500">impressions</div>
+        </div>
+        <div className={`px-2 py-1 rounded text-xs font-medium ${statusColors[league.status]}`}>
+          {league.status}
+        </div>
+        <Link href={`/leagues/${league.id}`}>
+          <Button variant="secondary" className="text-xs">
+            <ExternalLink className="w-3 h-3 mr-1" />
+            View
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function SponsorDashboardPage() {
+  const [timeRange, setTimeRange] = useState<'7d' | '30d' | '90d' | 'all'>('30d');
+  const [data, setData] = useState<SponsorDashboardData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchDashboard() {
+      try {
+        const response = await fetch('/api/sponsors/dashboard');
+        if (response.ok) {
+          const dashboardData = await response.json();
+          setData(dashboardData);
+        } else {
+          // Use mock data for demo mode
+          setData(MOCK_DASHBOARD);
+        }
+      } catch {
+        // Use mock data on error
+        setData(MOCK_DASHBOARD);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchDashboard();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
+        <Loader2 className="w-8 h-8 animate-spin text-primary-blue" />
+      </div>
+    );
+  }
+
+  const dashboardData = data || MOCK_DASHBOARD;
+
+  return (
+    <div className="max-w-7xl 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">Sponsor Dashboard</h1>
+          <p className="text-gray-400">Track your sponsorship performance and exposure</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {(['7d', '30d', '90d', 'all'] as const).map((range) => (
+            <button
+              key={range}
+              onClick={() => setTimeRange(range)}
+              className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                timeRange === range
+                  ? 'bg-primary-blue text-white'
+                  : 'bg-iron-gray/50 text-gray-400 hover:bg-iron-gray'
+              }`}
+            >
+              {range === 'all' ? 'All Time' : range}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Metrics Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+        <MetricCard
+          title="Total Impressions"
+          value={dashboardData.metrics.impressions}
+          change={dashboardData.metrics.impressionsChange}
+          icon={Eye}
+        />
+        <MetricCard
+          title="Unique Viewers"
+          value={dashboardData.metrics.uniqueViewers}
+          change={dashboardData.metrics.viewersChange}
+          icon={Users}
+        />
+        <MetricCard
+          title="Exposure Score"
+          value={dashboardData.metrics.exposure}
+          change={dashboardData.metrics.exposureChange}
+          icon={Target}
+          suffix="%"
+        />
+        <MetricCard
+          title="Active Drivers"
+          value={dashboardData.metrics.drivers}
+          icon={Trophy}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Sponsored Leagues */}
+        <div className="lg:col-span-2">
+          <Card>
+            <div className="flex items-center justify-between p-4 border-b border-charcoal-outline">
+              <h2 className="text-lg font-semibold text-white">Sponsored Leagues</h2>
+              <Link href="/leagues">
+                <Button variant="secondary" className="text-sm">
+                  Browse Leagues
+                </Button>
+              </Link>
+            </div>
+            <div>
+              {dashboardData.sponsoredLeagues.length > 0 ? (
+                dashboardData.sponsoredLeagues.map((league) => (
+                  <LeagueRow key={league.id} league={league} />
+                ))
+              ) : (
+                <div className="p-8 text-center text-gray-400">
+                  <p>No active sponsorships yet.</p>
+                  <Link href="/leagues" className="text-primary-blue hover:underline mt-2 inline-block">
+                    Browse leagues to sponsor
+                  </Link>
+                </div>
+              )}
+            </div>
+          </Card>
+        </div>
+
+        {/* Quick Stats & Actions */}
+        <div className="space-y-6">
+          {/* Investment Summary */}
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Investment Summary</h3>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Active Sponsorships</span>
+                <span className="font-medium text-white">{dashboardData.investment.activeSponsorships}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Total Investment</span>
+                <span className="font-medium text-white">${dashboardData.investment.totalInvestment.toLocaleString()}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Cost per 1K Views</span>
+                <span className="font-medium text-performance-green">${dashboardData.investment.costPerThousandViews.toFixed(2)}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-gray-400">Next Payment</span>
+                <span className="font-medium text-white">Dec 15, 2025</span>
+              </div>
+            </div>
+          </Card>
+
+          {/* Recent Activity */}
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Recent Activity</h3>
+            <div className="space-y-3">
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 rounded-full bg-performance-green mt-2" />
+                <div>
+                  <p className="text-sm text-white">GT3 Pro Championship race completed</p>
+                  <p className="text-xs text-gray-500">2 hours ago • 1,240 views</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 rounded-full bg-primary-blue mt-2" />
+                <div>
+                  <p className="text-sm text-white">New driver joined Endurance Masters</p>
+                  <p className="text-xs text-gray-500">5 hours ago</p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-2 h-2 rounded-full bg-warning-amber mt-2" />
+                <div>
+                  <p className="text-sm text-white">Touring Car Cup season starting soon</p>
+                  <p className="text-xs text-gray-500">1 day ago</p>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Quick Actions */}
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Quick Actions</h3>
+            <div className="space-y-2">
+              <Button variant="secondary" className="w-full justify-start">
+                <BarChart3 className="w-4 h-4 mr-2" />
+                View Detailed Analytics
+              </Button>
+              <Link href="/sponsor/billing" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <DollarSign className="w-4 h-4 mr-2" />
+                  Manage Payments
+                </Button>
+              </Link>
+              <Link href="/leagues" className="block">
+                <Button variant="secondary" className="w-full justify-start">
+                  <Target className="w-4 h-4 mr-2" />
+                  Find New Leagues
+                </Button>
+              </Link>
+            </div>
+          </Card>
+        </div>
+      </div>
+
+      {/* Alpha Notice */}
+      <div className="mt-8 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> Sponsor analytics data shown here is demonstration-only.
+          Real analytics will be available when the sponsorship system is fully implemented.
+        </p>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,311 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import {
+  Trophy,
+  Users,
+  Calendar,
+  Eye,
+  TrendingUp,
+  Download,
+  Image as ImageIcon,
+  ExternalLink,
+  ChevronRight
+} from 'lucide-react';
+
+interface LeagueDriver {
+  id: string;
+  name: string;
+  country: string;
+  position: number;
+  races: number;
+  impressions: number;
+}
+
+// Mock data
+const MOCK_LEAGUE = {
+  id: 'league-1',
+  name: 'GT3 Pro Championship',
+  tier: 'main' as const,
+  season: 'Season 3',
+  drivers: 32,
+  races: 12,
+  completedRaces: 8,
+  impressions: 45200,
+  avgViewsPerRace: 5650,
+  logoPlacement: 'Primary hood placement + League page banner',
+  status: 'active' as const,
+};
+
+const MOCK_DRIVERS: LeagueDriver[] = [
+  { id: 'd1', name: 'Max Verstappen', country: 'NL', position: 1, races: 8, impressions: 4200 },
+  { id: 'd2', name: 'Lewis Hamilton', country: 'GB', position: 2, races: 8, impressions: 3980 },
+  { id: 'd3', name: 'Charles Leclerc', country: 'MC', position: 3, races: 8, impressions: 3750 },
+  { id: 'd4', name: 'Lando Norris', country: 'GB', position: 4, races: 7, impressions: 3420 },
+  { id: 'd5', name: 'Carlos Sainz', country: 'ES', position: 5, races: 8, impressions: 3100 },
+];
+
+const MOCK_RACES = [
+  { id: 'r1', name: 'Spa-Francorchamps', date: '2025-12-01', views: 6200, status: 'completed' },
+  { id: 'r2', name: 'Monza', date: '2025-12-08', views: 5800, status: 'completed' },
+  { id: 'r3', name: 'Nürburgring', date: '2025-12-15', views: 0, status: 'upcoming' },
+  { id: 'r4', name: 'Suzuka', date: '2025-12-22', views: 0, status: 'upcoming' },
+];
+
+export default function SponsorLeagueDetailPage() {
+  const params = useParams();
+  const [activeTab, setActiveTab] = useState<'overview' | 'drivers' | 'races' | 'assets'>('overview');
+
+  return (
+    <div className="max-w-7xl mx-auto py-8 px-4">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
+        <Link href="/sponsor/dashboard" className="hover:text-white">Dashboard</Link>
+        <ChevronRight className="w-4 h-4" />
+        <Link href="/sponsor/leagues" className="hover:text-white">Leagues</Link>
+        <ChevronRight className="w-4 h-4" />
+        <span className="text-white">{MOCK_LEAGUE.name}</span>
+      </div>
+
+      {/* Header */}
+      <div className="flex items-start justify-between mb-8">
+        <div>
+          <div className="flex items-center gap-3 mb-2">
+            <h1 className="text-2xl font-bold text-white">{MOCK_LEAGUE.name}</h1>
+            <span className="px-2 py-1 rounded text-xs font-medium bg-primary-blue/20 text-primary-blue border border-primary-blue/30">
+              Main Sponsor
+            </span>
+          </div>
+          <p className="text-gray-400">{MOCK_LEAGUE.season} • {MOCK_LEAGUE.completedRaces}/{MOCK_LEAGUE.races} races completed</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="secondary">
+            <ExternalLink className="w-4 h-4 mr-2" />
+            View League Page
+          </Button>
+          <Button variant="primary">
+            <Download className="w-4 h-4 mr-2" />
+            Download Report
+          </Button>
+        </div>
+      </div>
+
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
+              <Eye className="w-5 h-5 text-primary-blue" />
+            </div>
+            <div>
+              <div className="text-xl font-bold text-white">{MOCK_LEAGUE.impressions.toLocaleString()}</div>
+              <div className="text-sm text-gray-400">Total Impressions</div>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
+              <TrendingUp className="w-5 h-5 text-performance-green" />
+            </div>
+            <div>
+              <div className="text-xl font-bold text-white">{MOCK_LEAGUE.avgViewsPerRace.toLocaleString()}</div>
+              <div className="text-sm text-gray-400">Avg Views/Race</div>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-500/10">
+              <Users className="w-5 h-5 text-purple-400" />
+            </div>
+            <div>
+              <div className="text-xl font-bold text-white">{MOCK_LEAGUE.drivers}</div>
+              <div className="text-sm text-gray-400">Active Drivers</div>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10">
+              <Calendar className="w-5 h-5 text-warning-amber" />
+            </div>
+            <div>
+              <div className="text-xl font-bold text-white">{MOCK_LEAGUE.races - MOCK_LEAGUE.completedRaces}</div>
+              <div className="text-sm text-gray-400">Races Remaining</div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 mb-6 border-b border-charcoal-outline">
+        {(['overview', 'drivers', 'races', 'assets'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-4 py-2 text-sm font-medium capitalize transition-colors border-b-2 -mb-px ${
+              activeTab === tab
+                ? 'text-primary-blue border-primary-blue'
+                : 'text-gray-400 border-transparent hover:text-white'
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Content */}
+      {activeTab === 'overview' && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Sponsorship Details</h3>
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <span className="text-gray-400">Tier</span>
+                <span className="text-white">Main Sponsor</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-400">Logo Placement</span>
+                <span className="text-white">{MOCK_LEAGUE.logoPlacement}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-400">Season Duration</span>
+                <span className="text-white">Oct 2025 - Feb 2026</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-400">Investment</span>
+                <span className="text-white">$800/season</span>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Performance Metrics</h3>
+            <div className="space-y-3">
+              <div className="flex justify-between">
+                <span className="text-gray-400">Cost per 1K Impressions</span>
+                <span className="text-performance-green">$17.70</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-400">Engagement Rate</span>
+                <span className="text-white">4.2%</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-400">Brand Recall Score</span>
+                <span className="text-white">78/100</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-400">ROI Estimate</span>
+                <span className="text-performance-green">+24%</span>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {activeTab === 'drivers' && (
+        <Card>
+          <div className="p-4 border-b border-charcoal-outline">
+            <h3 className="text-lg font-semibold text-white">Drivers Carrying Your Brand</h3>
+            <p className="text-sm text-gray-400">Top performing drivers with your sponsorship</p>
+          </div>
+          <div className="divide-y divide-charcoal-outline">
+            {MOCK_DRIVERS.map((driver) => (
+              <div key={driver.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
+                <div className="flex items-center gap-4">
+                  <div className="w-8 h-8 rounded-full bg-iron-gray flex items-center justify-center text-sm font-bold text-white">
+                    {driver.position}
+                  </div>
+                  <div>
+                    <div className="font-medium text-white">{driver.name}</div>
+                    <div className="text-sm text-gray-400">{driver.country} • {driver.races} races</div>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <div className="font-medium text-white">{driver.impressions.toLocaleString()}</div>
+                  <div className="text-xs text-gray-500">impressions</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {activeTab === 'races' && (
+        <Card>
+          <div className="p-4 border-b border-charcoal-outline">
+            <h3 className="text-lg font-semibold text-white">Race Schedule & Performance</h3>
+          </div>
+          <div className="divide-y divide-charcoal-outline">
+            {MOCK_RACES.map((race) => (
+              <div key={race.id} className="flex items-center justify-between p-4 hover:bg-iron-gray/30 transition-colors">
+                <div className="flex items-center gap-4">
+                  <div className={`w-3 h-3 rounded-full ${
+                    race.status === 'completed' ? 'bg-performance-green' : 'bg-warning-amber'
+                  }`} />
+                  <div>
+                    <div className="font-medium text-white">{race.name}</div>
+                    <div className="text-sm text-gray-400">{race.date}</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-4">
+                  {race.status === 'completed' ? (
+                    <div className="text-right">
+                      <div className="font-medium text-white">{race.views.toLocaleString()}</div>
+                      <div className="text-xs text-gray-500">views</div>
+                    </div>
+                  ) : (
+                    <span className="text-sm text-warning-amber">Upcoming</span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      )}
+
+      {activeTab === 'assets' && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Your Logo Assets</h3>
+            <div className="space-y-4">
+              <div className="aspect-video bg-iron-gray rounded-lg flex items-center justify-center border border-charcoal-outline">
+                <ImageIcon className="w-12 h-12 text-gray-500" aria-label="Logo placeholder" />
+              </div>
+              <div className="flex gap-2">
+                <Button variant="secondary" className="flex-1">
+                  <Download className="w-4 h-4 mr-2" />
+                  Download Logo Pack
+                </Button>
+                <Button variant="secondary">
+                  Update Logo
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          <Card className="p-4">
+            <h3 className="text-lg font-semibold text-white mb-4">Livery Preview</h3>
+            <div className="space-y-4">
+              <div className="aspect-video bg-iron-gray rounded-lg flex items-center justify-center border border-charcoal-outline">
+                <Trophy className="w-12 h-12 text-gray-500" />
+              </div>
+              <p className="text-sm text-gray-400">
+                Your logo appears on the primary hood position for all 32 drivers in this league.
+              </p>
+              <Button variant="secondary" className="w-full">
+                <Download className="w-4 h-4 mr-2" />
+                Download Sample Livery
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/app/sponsor/leagues/page.tsx

@@ -0,0 +1,298 @@
+'use client';
+
+import { useState } from 'react';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { 
+  Trophy, 
+  Users, 
+  Eye,
+  Search,
+  Filter,
+  Star,
+  ChevronRight
+} from 'lucide-react';
+
+interface AvailableLeague {
+  id: string;
+  name: string;
+  game: string;
+  drivers: number;
+  avgViewsPerRace: number;
+  mainSponsorSlot: { available: boolean; price: number };
+  secondarySlots: { available: number; total: number; price: number };
+  rating: number;
+  tier: 'premium' | 'standard' | 'starter';
+}
+
+const MOCK_AVAILABLE_LEAGUES: AvailableLeague[] = [
+  {
+    id: 'league-1',
+    name: 'GT3 Masters Championship',
+    game: 'iRacing',
+    drivers: 48,
+    avgViewsPerRace: 8200,
+    mainSponsorSlot: { available: true, price: 1200 },
+    secondarySlots: { available: 1, total: 2, price: 400 },
+    rating: 4.8,
+    tier: 'premium',
+  },
+  {
+    id: 'league-2',
+    name: 'Endurance Pro Series',
+    game: 'ACC',
+    drivers: 72,
+    avgViewsPerRace: 12500,
+    mainSponsorSlot: { available: false, price: 1500 },
+    secondarySlots: { available: 2, total: 2, price: 500 },
+    rating: 4.9,
+    tier: 'premium',
+  },
+  {
+    id: 'league-3',
+    name: 'Formula Sim League',
+    game: 'iRacing',
+    drivers: 24,
+    avgViewsPerRace: 5400,
+    mainSponsorSlot: { available: true, price: 800 },
+    secondarySlots: { available: 2, total: 2, price: 300 },
+    rating: 4.5,
+    tier: 'standard',
+  },
+  {
+    id: 'league-4',
+    name: 'Touring Car Masters',
+    game: 'rFactor 2',
+    drivers: 32,
+    avgViewsPerRace: 3200,
+    mainSponsorSlot: { available: true, price: 500 },
+    secondarySlots: { available: 2, total: 2, price: 200 },
+    rating: 4.2,
+    tier: 'starter',
+  },
+  {
+    id: 'league-5',
+    name: 'LMP Challenge',
+    game: 'Le Mans Ultimate',
+    drivers: 36,
+    avgViewsPerRace: 6800,
+    mainSponsorSlot: { available: true, price: 900 },
+    secondarySlots: { available: 1, total: 2, price: 350 },
+    rating: 4.6,
+    tier: 'standard',
+  },
+];
+
+function LeagueCard({ league }: { league: AvailableLeague }) {
+  const tierColors = {
+    premium: 'bg-gradient-to-r from-yellow-500/20 to-amber-500/20 border-yellow-500/30',
+    standard: 'bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border-blue-500/30',
+    starter: 'bg-gradient-to-r from-gray-500/20 to-slate-500/20 border-gray-500/30',
+  };
+
+  const tierBadgeColors = {
+    premium: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+    standard: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+    starter: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+  };
+
+  return (
+    <Card className={`overflow-hidden border ${tierColors[league.tier]}`}>
+      <div className="p-4">
+        <div className="flex items-start justify-between mb-3">
+          <div>
+            <div className="flex items-center gap-2 mb-1">
+              <h3 className="font-semibold text-white">{league.name}</h3>
+              <span className={`px-2 py-0.5 rounded text-xs font-medium capitalize border ${tierBadgeColors[league.tier]}`}>
+                {league.tier}
+              </span>
+            </div>
+            <p className="text-sm text-gray-400">{league.game}</p>
+          </div>
+          <div className="flex items-center gap-1">
+            <Star className="w-4 h-4 text-yellow-400 fill-yellow-400" />
+            <span className="text-sm text-white">{league.rating}</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-3 gap-3 mb-4">
+          <div className="text-center p-2 bg-iron-gray/50 rounded">
+            <div className="text-lg font-bold text-white">{league.drivers}</div>
+            <div className="text-xs text-gray-500">Drivers</div>
+          </div>
+          <div className="text-center p-2 bg-iron-gray/50 rounded">
+            <div className="text-lg font-bold text-white">{(league.avgViewsPerRace / 1000).toFixed(1)}k</div>
+            <div className="text-xs text-gray-500">Avg Views</div>
+          </div>
+          <div className="text-center p-2 bg-iron-gray/50 rounded">
+            <div className="text-lg font-bold text-white">${(league.mainSponsorSlot.price / league.avgViewsPerRace * 1000).toFixed(0)}</div>
+            <div className="text-xs text-gray-500">CPM</div>
+          </div>
+        </div>
+
+        <div className="space-y-2 mb-4">
+          <div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
+            <div className="flex items-center gap-2">
+              <div className={`w-2 h-2 rounded-full ${league.mainSponsorSlot.available ? 'bg-performance-green' : 'bg-racing-red'}`} />
+              <span className="text-sm text-gray-300">Main Sponsor</span>
+            </div>
+            <div className="text-sm">
+              {league.mainSponsorSlot.available ? (
+                <span className="text-white font-medium">${league.mainSponsorSlot.price}/season</span>
+              ) : (
+                <span className="text-gray-500">Taken</span>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center justify-between p-2 bg-iron-gray/30 rounded">
+            <div className="flex items-center gap-2">
+              <div className={`w-2 h-2 rounded-full ${league.secondarySlots.available > 0 ? 'bg-performance-green' : 'bg-racing-red'}`} />
+              <span className="text-sm text-gray-300">Secondary Slots</span>
+            </div>
+            <div className="text-sm">
+              {league.secondarySlots.available > 0 ? (
+                <span className="text-white font-medium">{league.secondarySlots.available}/{league.secondarySlots.total} @ ${league.secondarySlots.price}</span>
+              ) : (
+                <span className="text-gray-500">Full</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <Button variant="secondary" className="flex-1">
+            View Details
+          </Button>
+          {(league.mainSponsorSlot.available || league.secondarySlots.available > 0) && (
+            <Button variant="primary" className="flex-1">
+              Sponsor
+            </Button>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export default function SponsorLeaguesPage() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [tierFilter, setTierFilter] = useState<'all' | 'premium' | 'standard' | 'starter'>('all');
+  const [availabilityFilter, setAvailabilityFilter] = useState<'all' | 'main' | 'secondary'>('all');
+
+  const filteredLeagues = MOCK_AVAILABLE_LEAGUES.filter(league => {
+    if (searchQuery && !league.name.toLowerCase().includes(searchQuery.toLowerCase())) {
+      return false;
+    }
+    if (tierFilter !== 'all' && league.tier !== tierFilter) {
+      return false;
+    }
+    if (availabilityFilter === 'main' && !league.mainSponsorSlot.available) {
+      return false;
+    }
+    if (availabilityFilter === 'secondary' && league.secondarySlots.available === 0) {
+      return false;
+    }
+    return true;
+  });
+
+  return (
+    <div className="max-w-7xl mx-auto py-8 px-4">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
+        <a href="/sponsor/dashboard" className="hover:text-white">Dashboard</a>
+        <ChevronRight className="w-4 h-4" />
+        <span className="text-white">Browse Leagues</span>
+      </div>
+
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-white mb-2">Find Leagues to Sponsor</h1>
+        <p className="text-gray-400">Discover racing leagues looking for sponsors and grow your brand</p>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-col md:flex-row gap-4 mb-6">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+          <input
+            type="text"
+            placeholder="Search leagues..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white placeholder-gray-500 focus:border-primary-blue focus:outline-none"
+          />
+        </div>
+        <div className="flex gap-2">
+          <select
+            value={tierFilter}
+            onChange={(e) => setTierFilter(e.target.value as typeof tierFilter)}
+            className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
+          >
+            <option value="all">All Tiers</option>
+            <option value="premium">Premium</option>
+            <option value="standard">Standard</option>
+            <option value="starter">Starter</option>
+          </select>
+          <select
+            value={availabilityFilter}
+            onChange={(e) => setAvailabilityFilter(e.target.value as typeof availabilityFilter)}
+            className="px-3 py-2 rounded-lg border border-charcoal-outline bg-iron-gray text-white focus:border-primary-blue focus:outline-none"
+          >
+            <option value="all">All Slots</option>
+            <option value="main">Main Available</option>
+            <option value="secondary">Secondary Available</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Stats Banner */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+        <Card className="p-4 text-center">
+          <div className="text-2xl font-bold text-white">{MOCK_AVAILABLE_LEAGUES.length}</div>
+          <div className="text-sm text-gray-400">Available Leagues</div>
+        </Card>
+        <Card className="p-4 text-center">
+          <div className="text-2xl font-bold text-performance-green">
+            {MOCK_AVAILABLE_LEAGUES.filter(l => l.mainSponsorSlot.available).length}
+          </div>
+          <div className="text-sm text-gray-400">Main Slots Open</div>
+        </Card>
+        <Card className="p-4 text-center">
+          <div className="text-2xl font-bold text-primary-blue">
+            {MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.secondarySlots.available, 0)}
+          </div>
+          <div className="text-sm text-gray-400">Secondary Slots Open</div>
+        </Card>
+        <Card className="p-4 text-center">
+          <div className="text-2xl font-bold text-white">
+            {MOCK_AVAILABLE_LEAGUES.reduce((sum, l) => sum + l.drivers, 0)}
+          </div>
+          <div className="text-sm text-gray-400">Total Drivers</div>
+        </Card>
+      </div>
+
+      {/* League Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredLeagues.map((league) => (
+          <LeagueCard key={league.id} league={league} />
+        ))}
+      </div>
+
+      {filteredLeagues.length === 0 && (
+        <div className="text-center py-12">
+          <Trophy className="w-12 h-12 text-gray-500 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-white mb-2">No leagues found</h3>
+          <p className="text-gray-400">Try adjusting your filters to see more results</p>
+        </div>
+      )}
+
+      {/* Alpha Notice */}
+      <div className="mt-8 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> League sponsorship marketplace is demonstration-only.
+          Actual sponsorship purchases will be available when the payment system is fully implemented.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/website/app/sponsor/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function SponsorPage() {
+  redirect('/sponsor/dashboard');
+}

apps/website/app/sponsor/settings/page.tsx

@@ -0,0 +1,333 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import { 
+  Settings, 
+  Building2, 
+  Mail, 
+  Globe,
+  Upload,
+  Save,
+  Bell,
+  Shield,
+  Eye,
+  Trash2
+} from 'lucide-react';
+
+interface SponsorProfile {
+  name: string;
+  email: string;
+  website: string;
+  description: string;
+  logoUrl: string | null;
+}
+
+interface NotificationSettings {
+  emailNewSponsorships: boolean;
+  emailWeeklyReport: boolean;
+  emailRaceAlerts: boolean;
+  emailPaymentAlerts: boolean;
+}
+
+// Mock data
+const MOCK_PROFILE: SponsorProfile = {
+  name: 'Acme Racing Co.',
+  email: 'sponsor@acme-racing.com',
+  website: 'https://acme-racing.com',
+  description: 'Premium sim racing equipment and accessories for competitive drivers.',
+  logoUrl: null,
+};
+
+const MOCK_NOTIFICATIONS: NotificationSettings = {
+  emailNewSponsorships: true,
+  emailWeeklyReport: true,
+  emailRaceAlerts: false,
+  emailPaymentAlerts: true,
+};
+
+function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (checked: boolean) => void; label: string }) {
+  return (
+    <label className="flex items-center justify-between cursor-pointer">
+      <span className="text-gray-300">{label}</span>
+      <button
+        type="button"
+        onClick={() => onChange(!checked)}
+        className={`relative w-11 h-6 rounded-full transition-colors ${checked ? 'bg-primary-blue' : 'bg-iron-gray'}`}
+      >
+        <span 
+          className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${checked ? 'translate-x-5' : ''}`}
+        />
+      </button>
+    </label>
+  );
+}
+
+export default function SponsorSettingsPage() {
+  const router = useRouter();
+  const [profile, setProfile] = useState(MOCK_PROFILE);
+  const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  const handleSaveProfile = async () => {
+    setSaving(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 800));
+    setSaving(false);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 3000);
+  };
+
+  const handleDeleteAccount = () => {
+    if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone.')) {
+      // Clear demo cookies and redirect
+      document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+      document.cookie = 'gridpilot_sponsor_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+      router.push('/');
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto py-8 px-4">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-white flex items-center gap-3">
+          <Settings className="w-7 h-7 text-gray-400" />
+          Sponsor Settings
+        </h1>
+        <p className="text-gray-400 mt-1">Manage your sponsor profile and preferences</p>
+      </div>
+
+      {/* Company Profile */}
+      <Card className="mb-6">
+        <div className="p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Building2 className="w-5 h-5 text-primary-blue" />
+            Company Profile
+          </h2>
+        </div>
+        <div className="p-4 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">Company Name</label>
+            <Input
+              type="text"
+              value={profile.name}
+              onChange={(e) => setProfile({ ...profile, name: e.target.value })}
+              placeholder="Your company name"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Mail className="w-4 h-4 text-gray-500" />
+                Contact Email
+              </div>
+            </label>
+            <Input
+              type="email"
+              value={profile.email}
+              onChange={(e) => setProfile({ ...profile, email: e.target.value })}
+              placeholder="sponsor@company.com"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Globe className="w-4 h-4 text-gray-500" />
+                Website
+              </div>
+            </label>
+            <Input
+              type="url"
+              value={profile.website}
+              onChange={(e) => setProfile({ ...profile, website: e.target.value })}
+              placeholder="https://company.com"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">Company Description</label>
+            <textarea
+              value={profile.description}
+              onChange={(e) => setProfile({ ...profile, description: e.target.value })}
+              placeholder="Tell leagues about your company..."
+              rows={3}
+              className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Upload className="w-4 h-4 text-gray-500" />
+                Company Logo
+              </div>
+            </label>
+            <div className="flex items-center gap-4">
+              <div className="w-20 h-20 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center">
+                <Building2 className="w-8 h-8 text-gray-500" />
+              </div>
+              <div>
+                <input
+                  type="file"
+                  accept="image/png,image/jpeg,image/svg+xml"
+                  className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
+                />
+                <p className="text-xs text-gray-500 mt-1">PNG, JPEG, or SVG. Max 2MB.</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="pt-4 border-t border-charcoal-outline flex items-center justify-between">
+            <Button
+              variant="primary"
+              onClick={handleSaveProfile}
+              disabled={saving}
+            >
+              {saving ? (
+                'Saving...'
+              ) : saved ? (
+                <>
+                  <Save className="w-4 h-4 mr-2" />
+                  Saved!
+                </>
+              ) : (
+                <>
+                  <Save className="w-4 h-4 mr-2" />
+                  Save Changes
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* Notification Preferences */}
+      <Card className="mb-6">
+        <div className="p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Bell className="w-5 h-5 text-warning-amber" />
+            Notifications
+          </h2>
+        </div>
+        <div className="p-4 space-y-4">
+          <Toggle
+            checked={notifications.emailNewSponsorships}
+            onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
+            label="Email when a sponsorship is approved"
+          />
+          <Toggle
+            checked={notifications.emailWeeklyReport}
+            onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
+            label="Weekly analytics report"
+          />
+          <Toggle
+            checked={notifications.emailRaceAlerts}
+            onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
+            label="Race day alerts for sponsored leagues"
+          />
+          <Toggle
+            checked={notifications.emailPaymentAlerts}
+            onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
+            label="Payment and invoice notifications"
+          />
+        </div>
+      </Card>
+
+      {/* Privacy & Visibility */}
+      <Card className="mb-6">
+        <div className="p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Eye className="w-5 h-5 text-performance-green" />
+            Privacy & Visibility
+          </h2>
+        </div>
+        <div className="p-4 space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Public Profile</p>
+              <p className="text-sm text-gray-500">Allow leagues to see your sponsor profile</p>
+            </div>
+            <Toggle checked={true} onChange={() => {}} label="" />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Show Sponsorship Stats</p>
+              <p className="text-sm text-gray-500">Display your total sponsorships and investment on profile</p>
+            </div>
+            <Toggle checked={false} onChange={() => {}} label="" />
+          </div>
+        </div>
+      </Card>
+
+      {/* Security */}
+      <Card className="mb-6">
+        <div className="p-4 border-b border-charcoal-outline">
+          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
+            <Shield className="w-5 h-5 text-primary-blue" />
+            Security
+          </h2>
+        </div>
+        <div className="p-4 space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Change Password</p>
+              <p className="text-sm text-gray-500">Update your account password</p>
+            </div>
+            <Button variant="secondary" className="text-sm">
+              Change
+            </Button>
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Two-Factor Authentication</p>
+              <p className="text-sm text-gray-500">Add an extra layer of security</p>
+            </div>
+            <Button variant="secondary" className="text-sm">
+              Enable
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* Danger Zone */}
+      <Card className="border-racing-red/30">
+        <div className="p-4 border-b border-racing-red/30">
+          <h2 className="text-lg font-semibold text-racing-red flex items-center gap-2">
+            <Trash2 className="w-5 h-5" />
+            Danger Zone
+          </h2>
+        </div>
+        <div className="p-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-300">Delete Sponsor Account</p>
+              <p className="text-sm text-gray-500">Permanently delete your account and all sponsorship data</p>
+            </div>
+            <Button 
+              variant="secondary" 
+              onClick={handleDeleteAccount}
+              className="text-sm text-racing-red border-racing-red/30 hover:bg-racing-red/10"
+            >
+              Delete Account
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* 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> Settings are demonstration-only and won't persist.
+          Full account management will be available when the system is fully implemented.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/website/app/sponsor/signup/page.tsx

@@ -0,0 +1,429 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import { Building2, Mail, Globe, Upload, Zap, Eye, TrendingUp, Users, ArrowRight } from 'lucide-react';
+
+export default function SponsorSignupPage() {
+  const router = useRouter();
+  const [mode, setMode] = useState<'landing' | 'signup' | 'login'>('landing');
+  const [formData, setFormData] = useState({
+    name: '',
+    contactEmail: '',
+    websiteUrl: '',
+    logoFile: null as File | null,
+    password: '',
+  });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleDemoLogin = async () => {
+    setSubmitting(true);
+    try {
+      // Demo: Set cookie to indicate sponsor mode
+      document.cookie = 'gridpilot_demo_mode=sponsor; path=/; max-age=86400';
+      document.cookie = 'gridpilot_sponsor_id=demo-sponsor-1; path=/; max-age=86400';
+      
+      await new Promise(resolve => setTimeout(resolve, 500));
+      router.push('/leagues');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    const newErrors: Record<string, string> = {};
+    
+    if (!formData.name.trim()) {
+      newErrors.name = 'Company name required';
+    }
+    
+    if (!formData.contactEmail.trim()) {
+      newErrors.contactEmail = 'Contact email required';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.contactEmail)) {
+      newErrors.contactEmail = 'Invalid email format';
+    }
+
+    if (mode === 'signup' && !formData.password.trim()) {
+      newErrors.password = 'Password required';
+    }
+    
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+    
+    setSubmitting(true);
+    
+    try {
+      // Alpha: In-memory only, set demo sponsor cookie
+      console.log('Sponsor signup:', formData);
+      
+      document.cookie = 'gridpilot_demo_mode=sponsor; path=/; max-age=86400';
+      document.cookie = `gridpilot_sponsor_name=${encodeURIComponent(formData.name)}; path=/; max-age=86400`;
+      
+      await new Promise(resolve => setTimeout(resolve, 800));
+      
+      router.push('/leagues');
+    } catch (err) {
+      console.error('Sponsor signup failed:', err);
+      alert('Registration failed. Try again.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Landing page for sponsors
+  if (mode === 'landing') {
+    return (
+      <div className="max-w-4xl mx-auto py-12">
+        {/* Hero */}
+        <div className="text-center mb-12">
+          <div className="flex justify-center mb-6">
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-blue/10">
+              <Building2 className="w-8 h-8 text-primary-blue" />
+            </div>
+          </div>
+          <h1 className="text-4xl font-bold text-white mb-4">Sponsor Sim Racing Leagues</h1>
+          <p className="text-lg text-gray-400 max-w-2xl mx-auto">
+            Connect your brand with passionate sim racing communities. Get exposure through liveries, league branding, and engaged audiences.
+          </p>
+        </div>
+
+        {/* Benefits */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+          <Card>
+            <div className="flex flex-col items-center text-center">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10 mb-4">
+                <Eye className="w-6 h-6 text-primary-blue" />
+              </div>
+              <h3 className="text-lg font-semibold text-white mb-2">Brand Exposure</h3>
+              <p className="text-sm text-gray-400">
+                Your logo on liveries, league pages, and race broadcasts. Reach thousands of dedicated sim racers.
+              </p>
+            </div>
+          </Card>
+
+          <Card>
+            <div className="flex flex-col items-center text-center">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-performance-green/10 mb-4">
+                <TrendingUp className="w-6 h-6 text-performance-green" />
+              </div>
+              <h3 className="text-lg font-semibold text-white mb-2">Analytics Dashboard</h3>
+              <p className="text-sm text-gray-400">
+                Track impressions, clicks, and engagement. See exactly how your sponsorship performs.
+              </p>
+            </div>
+          </Card>
+
+          <Card>
+            <div className="flex flex-col items-center text-center">
+              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-warning-amber/10 mb-4">
+                <Users className="w-6 h-6 text-warning-amber" />
+              </div>
+              <h3 className="text-lg font-semibold text-white mb-2">Engaged Audience</h3>
+              <p className="text-sm text-gray-400">
+                Connect with a passionate, tech-savvy community that values authentic partnerships.
+              </p>
+            </div>
+          </Card>
+        </div>
+
+        {/* CTA Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
+          <Button
+            variant="primary"
+            onClick={() => setMode('signup')}
+            className="px-8 py-3"
+          >
+            <Building2 className="w-5 h-5 mr-2" />
+            Create Sponsor Account
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => setMode('login')}
+            className="px-8 py-3"
+          >
+            Sign In
+            <ArrowRight className="w-5 h-5 ml-2" />
+          </Button>
+        </div>
+
+        {/* Demo Login */}
+        <div className="text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-iron-gray/50 border border-charcoal-outline">
+            <Zap className="w-4 h-4 text-warning-amber" />
+            <span className="text-sm text-gray-400">Try it now:</span>
+            <button
+              onClick={handleDemoLogin}
+              disabled={submitting}
+              className="text-sm font-medium text-primary-blue hover:text-primary-blue/80 transition-colors disabled:opacity-50"
+            >
+              {submitting ? 'Loading...' : 'Demo Sponsor Login'}
+            </button>
+          </div>
+        </div>
+
+        {/* Alpha Notice */}
+        <div className="mt-12 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
+          <p className="text-xs text-gray-400 text-center">
+            <strong className="text-warning-amber">Alpha Preview:</strong> Sponsorship features are demonstration-only.
+            In production, you'll have access to payment processing, detailed analytics, and automated livery placement.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Login form
+  if (mode === 'login') {
+    return (
+      <div className="max-w-md mx-auto py-12">
+        <div className="mb-8">
+          <button
+            onClick={() => setMode('landing')}
+            className="text-sm text-gray-400 hover:text-white mb-4"
+          >
+            ← Back
+          </button>
+          <div className="flex items-center gap-3 mb-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
+              <Building2 className="w-6 h-6 text-primary-blue" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-white">Sponsor Sign In</h1>
+              <p className="text-sm text-gray-400">Access your sponsor dashboard</p>
+            </div>
+          </div>
+        </div>
+
+        <Card>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                <div className="flex items-center gap-2">
+                  <Mail className="w-4 h-4 text-gray-500" />
+                  Email
+                </div>
+              </label>
+              <Input
+                type="email"
+                value={formData.contactEmail}
+                onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
+                placeholder="sponsor@company.com"
+                error={!!errors.contactEmail}
+                errorMessage={errors.contactEmail}
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Password
+              </label>
+              <Input
+                type="password"
+                value={formData.password}
+                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                placeholder="••••••••"
+                error={!!errors.password}
+                errorMessage={errors.password}
+              />
+            </div>
+
+            <Button
+              type="submit"
+              variant="primary"
+              disabled={submitting}
+              className="w-full"
+            >
+              {submitting ? 'Signing in...' : 'Sign In'}
+            </Button>
+          </form>
+
+          <div className="mt-6 pt-6 border-t border-charcoal-outline text-center">
+            <p className="text-sm text-gray-400">
+              Don't have an account?{' '}
+              <button
+                onClick={() => setMode('signup')}
+                className="text-primary-blue hover:text-primary-blue/80"
+              >
+                Create one
+              </button>
+            </p>
+          </div>
+
+          <div className="mt-4 text-center">
+            <button
+              onClick={handleDemoLogin}
+              disabled={submitting}
+              className="text-sm text-gray-500 hover:text-gray-400"
+            >
+              Or use demo login
+            </button>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  // Signup form
+  return (
+    <div className="max-w-2xl mx-auto py-12">
+      {/* Header */}
+      <div className="mb-8">
+        <button
+          onClick={() => setMode('landing')}
+          className="text-sm text-gray-400 hover:text-white mb-4"
+        >
+          ← Back
+        </button>
+        <div className="flex items-center gap-3 mb-4">
+          <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
+            <Building2 className="w-6 h-6 text-primary-blue" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-white">Create Sponsor Account</h1>
+            <p className="text-sm text-gray-400">Register your company to sponsor leagues</p>
+          </div>
+        </div>
+      </div>
+
+      <Card>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {/* Company Name */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              Company Name
+            </label>
+            <Input
+              type="text"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="Your company name"
+              error={!!errors.name}
+              errorMessage={errors.name}
+            />
+          </div>
+
+          {/* Contact Email */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Mail className="w-4 h-4 text-gray-500" />
+                Contact Email
+              </div>
+            </label>
+            <Input
+              type="email"
+              value={formData.contactEmail}
+              onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
+              placeholder="sponsor@company.com"
+              error={!!errors.contactEmail}
+              errorMessage={errors.contactEmail}
+            />
+          </div>
+
+          {/* Website URL */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Globe className="w-4 h-4 text-gray-500" />
+                Website URL (optional)
+              </div>
+            </label>
+            <Input
+              type="url"
+              value={formData.websiteUrl}
+              onChange={(e) => setFormData({ ...formData, websiteUrl: e.target.value })}
+              placeholder="https://company.com"
+            />
+          </div>
+
+          {/* Logo Upload */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              <div className="flex items-center gap-2">
+                <Upload className="w-4 h-4 text-gray-500" />
+                Company Logo (optional)
+              </div>
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="file"
+                accept="image/png,image/jpeg,image/svg+xml"
+                onChange={(e) => {
+                  const file = e.target.files?.[0] || null;
+                  setFormData({ ...formData, logoFile: file });
+                }}
+                className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
+              />
+            </div>
+            <p className="text-xs text-gray-500 mt-1">
+              PNG, JPEG, or SVG. Recommended: 500x500px transparent background.
+            </p>
+          </div>
+
+          {/* Password */}
+          <div>
+            <label className="block text-sm font-medium text-gray-300 mb-2">
+              Password
+            </label>
+            <Input
+              type="password"
+              value={formData.password}
+              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+              placeholder="Create a password"
+              error={!!errors.password}
+              errorMessage={errors.password}
+            />
+          </div>
+
+          {/* Alpha Notice */}
+          <div className="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> Sponsor registration is demonstration-only.
+              In production, you'll have access to full payment processing and analytics.
+            </p>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-4">
+            <Button
+              type="submit"
+              variant="primary"
+              disabled={submitting}
+              className="flex-1"
+            >
+              {submitting ? 'Creating Account...' : 'Create Account'}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => setMode('landing')}
+              disabled={submitting}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+
+        <div className="mt-6 pt-6 border-t border-charcoal-outline text-center">
+          <p className="text-sm text-gray-400">
+            Already have an account?{' '}
+            <button
+              onClick={() => setMode('login')}
+              className="text-primary-blue hover:text-primary-blue/80"
+            >
+              Sign in
+            </button>
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+}

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

@@ -3,9 +3,11 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useParams } from 'next/navigation';
 import Image from 'next/image';
+import Link from 'next/link';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
 import { getImageService } from '@/lib/di-container';
 import TeamRoster from '@/components/teams/TeamRoster';
 import TeamStandings from '@/components/teams/TeamStandings';
@@ -18,6 +20,7 @@ import {
 } from '@/lib/di-container';
 import { useEffectiveDriverId } from '@/lib/currentDriver';
 import type { Team, TeamMembership, TeamRole } from '@gridpilot/racing';
+import { Users, Trophy, TrendingUp, Star, Zap } from 'lucide-react';
 
 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
 
@@ -31,6 +34,7 @@ export default function TeamDetailPage() {
   const [loading, setLoading] = useState(true);
   const [isAdmin, setIsAdmin] = useState(false);
   const currentDriverId = useEffectiveDriverId();
+  const isSponsorMode = useSponsorMode();
 
   const loadTeamData = useCallback(async () => {
     setLoading(true);
@@ -152,6 +156,14 @@ export default function TeamDetailPage() {
 
   const visibleTabs = tabs.filter(tab => tab.visible);
 
+  // Build sponsor insights for team
+  const teamMetrics = [
+    MetricBuilders.members(memberships.length),
+    MetricBuilders.reach(memberships.length * 15),
+    MetricBuilders.races(team.leagues.length * 8),
+    MetricBuilders.engagement(82),
+  ];
+
   return (
     <div className="max-w-6xl mx-auto">
       {/* Breadcrumb */}
@@ -163,6 +175,20 @@ export default function TeamDetailPage() {
         ]}
       />
 
+      {/* Sponsor Insights Card - Consistent placement at top */}
+      {isSponsorMode && team && (
+        <SponsorInsightsCard
+          entityType="team"
+          entityId={team.id}
+          entityName={team.name}
+          tier="standard"
+          metrics={teamMetrics}
+          slots={SlotTemplates.team(true, true, 500, 250)}
+          trustScore={90}
+          monthlyActivity={85}
+        />
+      )}
+
       <Card className="mb-6">
         <div className="flex items-start justify-between">
           <div className="flex items-start gap-6">