wip

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 */}