wip

apps/website/components/profile/UserPill.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
-import { LogOut, Settings, Star } from 'lucide-react';
+import { LogOut, Settings, Star, Paintbrush, Building2, BarChart3, Megaphone, CreditCard, Handshake } from 'lucide-react';
 import { useAuth } from '@/lib/auth/AuthContext';
 import {
   getDriverStats,
@@ -16,10 +16,26 @@ import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
 import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
 import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
 
+// Hook to detect sponsor mode
+function useSponsorMode(): boolean {
+  const [isSponsor, setIsSponsor] = useState(false);
+  useEffect(() => {
+    const cookie = document.cookie
+      .split('; ')
+      .find(row => row.startsWith('gridpilot_demo_mode='));
+    if (cookie) {
+      const value = cookie.split('=')[1];
+      setIsSponsor(value === 'sponsor');
+    }
+  }, []);
+  return isSponsor;
+}
+
 export default function UserPill() {
   const { session, login } = useAuth();
   const [driver, setDriver] = useState<DriverDTO | null>(null);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const isSponsorMode = useSponsorMode();
 
   const user = session?.user as
     | {
@@ -103,6 +119,79 @@ export default function UserPill() {
     };
   }, [session, driver, primaryDriverId]);
 
+  // Sponsor mode UI - check BEFORE session check so sponsors without auth still see sponsor UI
+  if (isSponsorMode) {
+    return (
+      <div className="relative inline-flex items-center">
+        <button
+          onClick={() => setIsMenuOpen((open) => !open)}
+          className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-performance-green/10 border border-performance-green/30 hover:bg-performance-green/20 transition-colors"
+        >
+          <div className="w-8 h-8 rounded-full bg-performance-green/20 flex items-center justify-center">
+            <Building2 className="w-4 h-4 text-performance-green" />
+          </div>
+          <span className="text-sm font-semibold text-performance-green">Sponsor</span>
+        </button>
+
+        {isMenuOpen && (
+          <div className="absolute right-0 top-full mt-2 w-56 rounded-lg bg-deep-graphite border border-charcoal-outline shadow-lg z-50">
+            <div className="p-3 border-b border-charcoal-outline">
+              <p className="text-xs text-gray-500 uppercase tracking-wide">Demo Sponsor Account</p>
+              <p className="text-sm font-semibold text-white mt-1">Acme Racing Co.</p>
+            </div>
+            <div className="py-1 text-sm text-gray-200">
+              <Link
+                href="/sponsor"
+                className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                <BarChart3 className="h-4 w-4 text-performance-green" />
+                <span>Dashboard</span>
+              </Link>
+              <Link
+                href="/sponsor/campaigns"
+                className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                <Megaphone className="h-4 w-4 text-primary-blue" />
+                <span>My Sponsorships</span>
+              </Link>
+              <Link
+                href="/sponsor/billing"
+                className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                <CreditCard className="h-4 w-4 text-warning-amber" />
+                <span>Billing</span>
+              </Link>
+              <Link
+                href="/sponsor/settings"
+                className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                <Settings className="h-4 w-4" />
+                <span>Settings</span>
+              </Link>
+            </div>
+            <div className="border-t border-charcoal-outline">
+              <button
+                type="button"
+                onClick={() => {
+                  document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+                  window.location.reload();
+                }}
+                className="flex w-full items-center justify-between px-3 py-2 text-sm text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+              >
+                <span>Exit Sponsor Mode</span>
+                <LogOut className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
   if (!session) {
     return (
       <div className="flex items-center gap-2">
@@ -153,6 +242,22 @@ export default function UserPill() {
             >
               Manage leagues
             </Link>
+            <Link
+              href="/profile/liveries"
+              className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              <Paintbrush className="h-4 w-4" />
+              <span>Liveries</span>
+            </Link>
+            <Link
+              href="/profile/sponsorship-requests"
+              className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              <Handshake className="h-4 w-4 text-performance-green" />
+              <span>Sponsorship Requests</span>
+            </Link>
             <Link
               href="/profile/settings"
               className="flex items-center gap-2 px-3 py-2 hover:bg-charcoal-outline/80 transition-colors"