wip

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>