wip

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