wip

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