fix e2e

apps/website/app/teams/TeamsInteractive.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import { Users, Search, Sparkles, Crown, Star, TrendingUp, Shield } from 'lucide-react';
+import TeamsTemplate from '@/templates/TeamsTemplate';
+import TeamHeroSection from '@/components/teams/TeamHeroSection';
+import TeamSearchBar from '@/components/teams/TeamSearchBar';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Heading from '@/components/ui/Heading';
+import CreateTeamForm from '@/components/teams/CreateTeamForm';
+import WhyJoinTeamSection from '@/components/teams/WhyJoinTeamSection';
+import SkillLevelSection from '@/components/teams/SkillLevelSection';
+import FeaturedRecruiting from '@/components/teams/FeaturedRecruiting';
+import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
+import { useAllTeams } from '@/hooks/useTeamService';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+
+const SKILL_LEVELS: SkillLevel[] = ['pro', 'advanced', 'intermediate', 'beginner'];
+
+export default function TeamsInteractive() {
+  const router = useRouter();
+  const { data: teams = [], isLoading: loading } = useAllTeams();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showCreateForm, setShowCreateForm] = useState(false);
+
+  // Derive groups by skill level from the loaded teams
+  const groupsBySkillLevel = useMemo(() => {
+    const byLevel: Record<string, typeof teams> = {
+      beginner: [],
+      intermediate: [],
+      advanced: [],
+      pro: [],
+    };
+    teams.forEach((team) => {
+      const level = team.performanceLevel || 'intermediate';
+      if (byLevel[level]) {
+        byLevel[level].push(team);
+      }
+    });
+    return byLevel;
+  }, [teams]);
+
+  // Select top teams by rating for the preview section
+  const topTeams = useMemo(() => {
+    const sortedByRating = [...teams].sort((a, b) => {
+      // Rating is not currently part of TeamSummaryViewModel in this build.
+      // Keep deterministic ordering by name until a rating field is exposed.
+      return a.name.localeCompare(b.name);
+    });
+    return sortedByRating.slice(0, 5);
+  }, [teams]);
+
+  const handleTeamClick = (teamId: string) => {
+    if (teamId.startsWith('demo-team-')) {
+      return;
+    }
+    router.push(`/teams/${teamId}`);
+  };
+
+  const handleCreateSuccess = (teamId: string) => {
+    setShowCreateForm(false);
+    router.push(`/teams/${teamId}`);
+  };
+
+  // Filter by search query
+  const filteredTeams = teams.filter((team) => {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return (
+      team.name.toLowerCase().includes(query) ||
+      (team.description ?? '').toLowerCase().includes(query) ||
+      (team.region ?? '').toLowerCase().includes(query) ||
+      (team.languages ?? []).some((lang) => lang.toLowerCase().includes(query))
+    );
+  });
+
+  // Group teams by skill level
+  const teamsByLevel = useMemo(() => {
+    return SKILL_LEVELS.reduce(
+      (acc, level) => {
+        const fromGroup = groupsBySkillLevel[level] ?? [];
+        acc[level] = filteredTeams.filter((team) =>
+          fromGroup.some((groupTeam) => groupTeam.id === team.id),
+        );
+        return acc;
+      },
+      {
+        beginner: [],
+        intermediate: [],
+        advanced: [],
+        pro: [],
+      } as Record<string, TeamSummaryViewModel[]>,
+    );
+  }, [groupsBySkillLevel, filteredTeams]);
+
+  const recruitingCount = teams.filter((t) => t.isRecruiting).length;
+
+  const handleSkillLevelClick = (level: SkillLevel) => {
+    const element = document.getElementById(`level-${level}`);
+    element?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  const handleBrowseTeams = () => {
+    const element = document.getElementById('teams-list');
+    element?.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  if (showCreateForm) {
+    return (
+      <div className="max-w-4xl mx-auto px-4">
+        <div className="mb-6">
+          <Button variant="secondary" onClick={() => setShowCreateForm(false)}>
+            ← Back to Teams
+          </Button>
+        </div>
+
+        <Card>
+          <h2 className="text-2xl font-bold text-white mb-6">Create New Team</h2>
+          <CreateTeamForm onCancel={() => setShowCreateForm(false)} onSuccess={handleCreateSuccess} />
+        </Card>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="flex flex-col items-center gap-4">
+            <div className="w-10 h-10 border-2 border-purple-400 border-t-transparent rounded-full animate-spin" />
+            <p className="text-gray-400">Loading teams...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pb-12">
+      {/* Hero Section */}
+      <TeamHeroSection
+        teams={teams}
+        teamsByLevel={teamsByLevel}
+        recruitingCount={recruitingCount}
+        onShowCreateForm={() => setShowCreateForm(true)}
+        onBrowseTeams={handleBrowseTeams}
+        onSkillLevelClick={handleSkillLevelClick}
+      />
+
+      {/* Search Bar */}
+      <TeamSearchBar searchQuery={searchQuery} onSearchChange={setSearchQuery} />
+
+      {/* Why Join Section */}
+      {!searchQuery && <WhyJoinTeamSection />}
+
+      {/* Team Leaderboard Preview */}
+      {!searchQuery && <TeamLeaderboardPreview topTeams={topTeams} onTeamClick={handleTeamClick} />}
+
+      {/* Featured Recruiting */}
+      {!searchQuery && <FeaturedRecruiting teams={teams} onTeamClick={handleTeamClick} />}
+
+      {/* Teams by Skill Level */}
+      {teams.length === 0 ? (
+        <Card className="text-center py-16">
+          <div className="max-w-md mx-auto">
+            <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-purple-500/10 border border-purple-500/20 mb-6">
+              <Users className="w-8 h-8 text-purple-400" />
+            </div>
+            <Heading level={2} className="text-2xl mb-3">
+              No teams yet
+            </Heading>
+            <p className="text-gray-400 mb-8">
+              Be the first to create a racing team. Gather drivers and compete together in endurance events.
+            </p>
+            <Button
+              variant="primary"
+              onClick={() => setShowCreateForm(true)}
+              className="flex items-center gap-2 mx-auto bg-purple-600 hover:bg-purple-500"
+            >
+              <Sparkles className="w-4 h-4" />
+              Create Your First Team
+            </Button>
+          </div>
+        </Card>
+      ) : filteredTeams.length === 0 ? (
+        <Card className="text-center py-12">
+          <div className="flex flex-col items-center gap-4">
+            <Search className="w-10 h-10 text-gray-600" />
+            <p className="text-gray-400">No teams found matching "{searchQuery}"</p>
+            <Button variant="secondary" onClick={() => setSearchQuery('')}>
+              Clear search
+            </Button>
+          </div>
+        </Card>
+      ) : (
+        <div>
+          {SKILL_LEVELS.map((level, index) => (
+            <div key={level} id={`level-${level}`} className="scroll-mt-8">
+              <SkillLevelSection
+                level={{
+                  id: level,
+                  label: level.charAt(0).toUpperCase() + level.slice(1),
+                  icon: level === 'pro' ? Crown : level === 'advanced' ? Star : level === 'intermediate' ? TrendingUp : Shield,
+                  color: level === 'pro' ? 'text-yellow-400' : level === 'advanced' ? 'text-purple-400' : level === 'intermediate' ? 'text-primary-blue' : 'text-green-400',
+                  bgColor: level === 'pro' ? 'bg-yellow-400/10' : level === 'advanced' ? 'bg-purple-400/10' : level === 'intermediate' ? 'bg-primary-blue/10' : 'bg-green-400/10',
+                  borderColor: level === 'pro' ? 'border-yellow-400/30' : level === 'advanced' ? 'border-purple-400/30' : level === 'intermediate' ? 'border-primary-blue/30' : 'border-green-400/30',
+                  description: level === 'pro' ? 'Elite competition, sponsored teams' : level === 'advanced' ? 'Competitive racing, high consistency' : level === 'intermediate' ? 'Growing skills, regular practice' : 'Learning the basics, friendly environment',
+                }}
+                teams={teamsByLevel[level] ?? []}
+                onTeamClick={handleTeamClick}
+                defaultExpanded={index === 0}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/website/app/teams/TeamsStatic.tsx

@@ -0,0 +1,58 @@
+import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+import TeamsTemplate from '@/templates/TeamsTemplate';
+
+// This is a server component that fetches data server-side
+// It will be used by the page.tsx when server-side rendering is needed
+
+interface TeamsStaticProps {
+  teams: TeamSummaryViewModel[];
+  isLoading?: boolean;
+}
+
+export default function TeamsStatic({ teams, isLoading = false }: TeamsStaticProps) {
+  // Calculate derived data that would normally be done in the template
+  const teamsBySkillLevel = teams.reduce(
+    (acc, team) => {
+      const level = team.performanceLevel || 'intermediate';
+      if (!acc[level]) {
+        acc[level] = [];
+      }
+      acc[level].push(team);
+      return acc;
+    },
+    {
+      beginner: [],
+      intermediate: [],
+      advanced: [],
+      pro: [],
+    } as Record<string, TeamSummaryViewModel[]>,
+  );
+
+  const topTeams = [...teams]
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .slice(0, 5);
+
+  const recruitingCount = teams.filter((t) => t.isRecruiting).length;
+
+  // For static rendering, we don't have interactive state
+  // So we pass empty values and handlers that won't be used
+  return (
+    <TeamsTemplate
+      teams={teams}
+      isLoading={isLoading}
+      searchQuery=""
+      showCreateForm={false}
+      teamsByLevel={teamsBySkillLevel}
+      topTeams={topTeams}
+      recruitingCount={recruitingCount}
+      filteredTeams={teams}
+      onSearchChange={() => {}}
+      onShowCreateForm={() => {}}
+      onHideCreateForm={() => {}}
+      onTeamClick={() => {}}
+      onCreateSuccess={() => {}}
+      onBrowseTeams={() => {}}
+      onSkillLevelClick={() => {}}
+    />
+  );
+}

apps/website/app/teams/[id]/TeamDetailInteractive.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import TeamDetailTemplate from '@/templates/TeamDetailTemplate';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
+import { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
+import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
+
+type Tab = 'overview' | 'roster' | 'standings' | 'admin';
+
+export default function TeamDetailInteractive() {
+    const params = useParams();
+    const teamId = params.id as string;
+    const { teamService } = useServices();
+    const router = useRouter();
+    const currentDriverId = useEffectiveDriverId();
+
+    const [team, setTeam] = useState<TeamDetailsViewModel | null>(null);
+    const [memberships, setMemberships] = useState<TeamMemberViewModel[]>([]);
+    const [activeTab, setActiveTab] = useState<Tab>('overview');
+    const [loading, setLoading] = useState(true);
+    const [isAdmin, setIsAdmin] = useState(false);
+
+    const loadTeamData = useCallback(async () => {
+        setLoading(true);
+        try {
+            const teamDetails = await teamService.getTeamDetails(teamId, currentDriverId);
+
+            if (!teamDetails) {
+                setTeam(null);
+                setMemberships([]);
+                setIsAdmin(false);
+                return;
+            }
+
+            const teamMembers = await teamService.getTeamMembers(teamId, currentDriverId, teamDetails.ownerId);
+
+            const adminStatus = teamDetails.isOwner ||
+                teamMembers.some((m) => m.driverId === currentDriverId && (m.role === 'manager' || m.role === 'owner'));
+
+            setTeam(teamDetails);
+            setMemberships(teamMembers);
+            setIsAdmin(adminStatus);
+        } finally {
+            setLoading(false);
+        }
+    }, [teamId, currentDriverId, teamService]);
+
+    useEffect(() => {
+        void loadTeamData();
+    }, [loadTeamData]);
+
+    const handleUpdate = () => {
+        loadTeamData();
+    };
+
+    const handleRemoveMember = async (driverId: string) => {
+        if (!confirm('Are you sure you want to remove this member?')) {
+            return;
+        }
+
+        try {
+            const performer = await teamService.getMembership(teamId, currentDriverId);
+            if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
+                throw new Error('Only owners or admins can remove members');
+            }
+
+            const membership = await teamService.getMembership(teamId, driverId);
+            if (!membership) {
+                throw new Error('Member not found');
+            }
+            if (membership.role === 'owner') {
+                throw new Error('Cannot remove the team owner');
+            }
+
+            await teamService.removeMembership(teamId, driverId);
+            handleUpdate();
+        } catch (error) {
+            alert(error instanceof Error ? error.message : 'Failed to remove member');
+        }
+    };
+
+    const handleChangeRole = async (driverId: string, newRole: 'owner' | 'admin' | 'member') => {
+        try {
+            const performer = await teamService.getMembership(teamId, currentDriverId);
+            if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
+                throw new Error('Only owners or admins can update roles');
+            }
+
+            const membership = await teamService.getMembership(teamId, driverId);
+            if (!membership) {
+                throw new Error('Member not found');
+            }
+            if (membership.role === 'owner') {
+                throw new Error('Cannot change the owner role');
+            }
+
+            // Convert 'admin' to 'manager' for the service
+            const serviceRole = newRole === 'admin' ? 'manager' : newRole;
+            await teamService.updateMembership(teamId, driverId, serviceRole);
+            handleUpdate();
+        } catch (error) {
+            alert(error instanceof Error ? error.message : 'Failed to change role');
+        }
+    };
+
+    const handleGoBack = () => {
+        window.history.back();
+    };
+
+    return (
+        <TeamDetailTemplate
+            team={team}
+            memberships={memberships}
+            activeTab={activeTab}
+            loading={loading}
+            isAdmin={isAdmin}
+            onTabChange={setActiveTab}
+            onUpdate={handleUpdate}
+            onRemoveMember={handleRemoveMember}
+            onChangeRole={handleChangeRole}
+            onGoBack={handleGoBack}
+        />
+    );
+}

apps/website/app/teams/[id]/TeamDetailStatic.tsx

@@ -0,0 +1,43 @@
+import TeamDetailTemplate from '@/templates/TeamDetailTemplate';
+import type { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
+import type { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
+
+// This is a server component that can be used for static rendering
+// It receives pre-fetched data and renders the template
+
+interface TeamDetailStaticProps {
+  team: TeamDetailsViewModel | null;
+  memberships: TeamMemberViewModel[];
+  currentDriverId: string;
+  isLoading?: boolean;
+}
+
+export default function TeamDetailStatic({ 
+  team, 
+  memberships, 
+  currentDriverId,
+  isLoading = false 
+}: TeamDetailStaticProps) {
+  // Determine admin status
+  const isAdmin = team ? (
+    team.isOwner ||
+    memberships.some((m) => m.driverId === currentDriverId && (m.role === 'manager' || m.role === 'owner'))
+  ) : false;
+
+  // For static rendering, we don't have interactive state
+  // So we pass empty values and handlers that won't be used
+  return (
+    <TeamDetailTemplate
+      team={team}
+      memberships={memberships}
+      activeTab="overview"
+      loading={isLoading}
+      isAdmin={isAdmin}
+      onTabChange={() => {}}
+      onUpdate={() => {}}
+      onRemoveMember={() => {}}
+      onChangeRole={() => {}}
+      onGoBack={() => {}}
+    />
+  );
+}

apps/website/app/teams/[id]/page.tsx

@@ -1,327 +1,3 @@
-'use client';
+import TeamDetailInteractive from './TeamDetailInteractive';
 
-import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import SponsorInsightsCard, { MetricBuilders, SlotTemplates, useSponsorMode } from '@/components/sponsors/SponsorInsightsCard';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Image from 'next/image';
-import { useParams } from 'next/navigation';
-import { useCallback, useEffect, useState, useMemo } from 'react';
-
-import JoinTeamButton from '@/components/teams/JoinTeamButton';
-import TeamAdmin from '@/components/teams/TeamAdmin';
-import TeamRoster from '@/components/teams/TeamRoster';
-import TeamStandings from '@/components/teams/TeamStandings';
-import StatItem from '@/components/teams/StatItem';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { TeamDetailsViewModel } from '@/lib/view-models/TeamDetailsViewModel';
-import { TeamMemberViewModel } from '@/lib/view-models/TeamMemberViewModel';
-import { getMediaUrl } from '@/lib/utilities/media';
-import PlaceholderImage from '@/components/ui/PlaceholderImage';
-
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-
-type Tab = 'overview' | 'roster' | 'standings' | 'admin';
-
-export default function TeamDetailPage() {
-    const params = useParams();
-    const teamId = params.id as string;
-    const { teamService, mediaService } = useServices();
-
-    const [team, setTeam] = useState<TeamDetailsViewModel | null>(null);
-    const [memberships, setMemberships] = useState<TeamMemberViewModel[]>([]);
-    const [activeTab, setActiveTab] = useState<Tab>('overview');
-    const [loading, setLoading] = useState(true);
-    const [isAdmin, setIsAdmin] = useState(false);
-    const currentDriverId = useEffectiveDriverId();
-    const isSponsorMode = useSponsorMode();
-
-  const loadTeamData = useCallback(async () => {
-    setLoading(true);
-    try {
-      const teamDetails = await teamService.getTeamDetails(teamId, currentDriverId);
-
-      if (!teamDetails) {
-        setTeam(null);
-        setMemberships([]);
-        setIsAdmin(false);
-        return;
-      }
-
-      const teamMembers = await teamService.getTeamMembers(teamId, currentDriverId, teamDetails.ownerId);
-
-      const adminStatus = teamDetails.isOwner ||
-        teamMembers.some((m) => m.driverId === currentDriverId && (m.role === 'manager' || m.role === 'owner'));
-
-      setTeam(teamDetails);
-      setMemberships(teamMembers);
-      setIsAdmin(adminStatus);
-    } finally {
-      setLoading(false);
-    }
-  }, [teamId, currentDriverId, teamService]);
-
-  useEffect(() => {
-    void loadTeamData();
-  }, [loadTeamData]);
-
-  const handleUpdate = () => {
-    loadTeamData();
-  };
-
-  const handleRemoveMember = async (driverId: string) => {
-    if (!confirm('Are you sure you want to remove this member?')) {
-      return;
-    }
-
-    try {
-      const performer = await teamService.getMembership(teamId, currentDriverId);
-      if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
-        throw new Error('Only owners or admins can remove members');
-      }
-
-      const membership = await teamService.getMembership(teamId, driverId);
-      if (!membership) {
-        throw new Error('Member not found');
-      }
-      if (membership.role === 'owner') {
-        throw new Error('Cannot remove the team owner');
-      }
-
-      await teamService.removeMembership(teamId, driverId);
-      handleUpdate();
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Failed to remove member');
-    }
-  };
-
-  const handleChangeRole = async (driverId: string, newRole: 'owner' | 'admin' | 'member') => {
-    try {
-      const performer = await teamService.getMembership(teamId, currentDriverId);
-      if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
-        throw new Error('Only owners or admins can update roles');
-      }
-
-      const membership = await teamService.getMembership(teamId, driverId);
-      if (!membership) {
-        throw new Error('Member not found');
-      }
-      if (membership.role === 'owner') {
-        throw new Error('Cannot change the owner role');
-      }
-
-      // Convert 'admin' to 'manager' for the service
-      const serviceRole = newRole === 'admin' ? 'manager' : newRole;
-      await teamService.updateMembership(teamId, driverId, serviceRole);
-      handleUpdate();
-    } catch (error) {
-      alert(error instanceof Error ? error.message : 'Failed to change role');
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="max-w-6xl mx-auto">
-        <div className="text-center text-gray-400">Loading team...</div>
-      </div>
-    );
-  }
-
-  if (!team) {
-    return (
-      <div className="max-w-6xl mx-auto">
-        <Card>
-          <div className="text-center py-12">
-            <h2 className="text-2xl font-bold text-white mb-2">Team Not Found</h2>
-            <p className="text-gray-400 mb-6">
-              The team you're looking for doesn't exist or has been disbanded.
-            </p>
-            <Button variant="primary" onClick={() => window.history.back()}>
-              Go Back
-            </Button>
-          </div>
-        </Card>
-      </div>
-    );
-  }
-
-  const tabs: { id: Tab; label: string; visible: boolean }[] = [
-    { id: 'overview', label: 'Overview', visible: true },
-    { id: 'roster', label: 'Roster', visible: true },
-    { id: 'standings', label: 'Standings', visible: true },
-    { id: 'admin', label: 'Admin', visible: isAdmin },
-  ];
-
-  const visibleTabs = tabs.filter(tab => tab.visible);
-
-  // Build sponsor insights for team using real membership and league data
-  const leagueCount = team.leagues?.length ?? 0;
-  const teamMetrics = [
-    MetricBuilders.members(memberships.length),
-    MetricBuilders.reach(memberships.length * 15),
-    MetricBuilders.races(leagueCount),
-    MetricBuilders.engagement(82),
-  ];
-
-  return (
-    <div className="max-w-6xl mx-auto">
-      {/* Breadcrumb */}
-      <Breadcrumbs
-        items={[
-          { label: 'Home', href: '/' },
-          { label: 'Teams', href: '/teams' },
-          { label: team.name }
-        ]}
-      />
-
-      {/* Sponsor Insights Card - Consistent placement at top */}
-      {isSponsorMode && team && (
-        <SponsorInsightsCard
-          entityType="team"
-          entityId={team.id}
-          entityName={team.name}
-          tier="standard"
-          metrics={teamMetrics}
-          slots={SlotTemplates.team(true, true, 500, 250)}
-          trustScore={90}
-          monthlyActivity={85}
-        />
-      )}
-
-      <Card className="mb-6">
-        <div className="flex items-start justify-between">
-          <div className="flex items-start gap-6">
-            <div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
-              <Image
-                src={getMediaUrl('team-logo', team.id)}
-                alt={team.name}
-                width={96}
-                height={96}
-                className="w-full h-full object-cover"
-              />
-            </div>
-            
-            <div>
-              <div className="flex items-center gap-3 mb-2">
-                <h1 className="text-3xl font-bold text-white">{team.name}</h1>
-                {team.tag && (
-                  <span className="px-2 py-0.5 rounded-full text-xs bg-charcoal-outline text-gray-300">
-                    [{team.tag}]
-                  </span>
-                )}
-              </div>
-
-              <p className="text-gray-300 mb-4 max-w-2xl">{team.description}</p>
-
-              <div className="flex items-center gap-4 text-sm text-gray-400">
-                <span>{memberships.length} {memberships.length === 1 ? 'member' : 'members'}</span>
-                {team.category && (
-                  <span className="flex items-center gap-1 text-purple-400">
-                    <span className="w-2 h-2 rounded-full bg-purple-400"></span>
-                    {team.category}
-                  </span>
-                )}
-                {team.createdAt && (
-                  <span>
-                    Founded {new Date(team.createdAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
-                  </span>
-                )}
-                {leagueCount > 0 && (
-                  <span>
-                    Active in {leagueCount} {leagueCount === 1 ? 'league' : 'leagues'}
-                  </span>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <JoinTeamButton teamId={teamId} onUpdate={handleUpdate} />
-        </div>
-      </Card>
-
-      <div className="mb-6">
-        <div className="flex items-center gap-2 border-b border-charcoal-outline">
-          {visibleTabs.map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={`
-                px-4 py-3 font-medium transition-all relative
-                ${activeTab === tab.id 
-                  ? 'text-primary-blue' 
-                  : 'text-gray-400 hover:text-white'
-                }
-              `}
-            >
-              {tab.label}
-              {activeTab === tab.id && (
-                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-blue" />
-              )}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        {activeTab === 'overview' && (
-          <div className="space-y-6">
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-              <Card className="lg:col-span-2">
-                <h3 className="text-xl font-semibold text-white mb-4">About</h3>
-                <p className="text-gray-300 leading-relaxed">{team.description}</p>
-              </Card>
-
-              <Card>
-                <h3 className="text-xl font-semibold text-white mb-4">Quick Stats</h3>
-                <div className="space-y-3">
-                  <StatItem label="Members" value={memberships.length.toString()} color="text-primary-blue" />
-                  {team.category && (
-                    <StatItem label="Category" value={team.category} color="text-purple-400" />
-                  )}
-                  {leagueCount > 0 && (
-                    <StatItem label="Leagues" value={leagueCount.toString()} color="text-green-400" />
-                  )}
-                  {team.createdAt && (
-                    <StatItem
-                      label="Founded"
-                      value={new Date(team.createdAt).toLocaleDateString('en-US', {
-                        month: 'short',
-                        year: 'numeric',
-                      })}
-                      color="text-gray-300"
-                    />
-                  )}
-                </div>
-              </Card>
-            </div>
-
-            <Card>
-              <h3 className="text-xl font-semibold text-white mb-4">Recent Activity</h3>
-              <div className="text-center py-8 text-gray-400">
-                No recent activity to display
-              </div>
-            </Card>
-          </div>
-        )}
-
-        {activeTab === 'roster' && (
-          <TeamRoster
-            teamId={teamId}
-            memberships={memberships}
-            isAdmin={isAdmin}
-            onRemoveMember={handleRemoveMember}
-            onChangeRole={handleChangeRole}
-          />
-        )}
-
-        {activeTab === 'standings' && (
-          <TeamStandings teamId={teamId} leagues={team.leagues} />
-        )}
-
-        {activeTab === 'admin' && isAdmin && (
-          <TeamAdmin team={team} onUpdate={handleUpdate} />
-        )}
-      </div>
-    </div>
-  );
-}
+export default TeamDetailInteractive;

apps/website/app/teams/leaderboard/TeamLeaderboardInteractive.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import TeamLeaderboardTemplate from '@/templates/TeamLeaderboardTemplate';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
+type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
+
+interface TeamLeaderboardInteractiveProps {
+  teams: TeamSummaryViewModel[];
+}
+
+export default function TeamLeaderboardInteractive({ teams }: TeamLeaderboardInteractiveProps) {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
+  const [sortBy, setSortBy] = useState<SortBy>('rating');
+
+  const handleTeamClick = (teamId: string) => {
+    if (teamId.startsWith('demo-team-')) {
+      return;
+    }
+    router.push(`/teams/${teamId}`);
+  };
+
+  const handleBackToTeams = () => {
+    router.push('/teams');
+  };
+
+  return (
+    <TeamLeaderboardTemplate
+      teams={teams}
+      searchQuery={searchQuery}
+      filterLevel={filterLevel}
+      sortBy={sortBy}
+      onSearchChange={setSearchQuery}
+      onFilterLevelChange={setFilterLevel}
+      onSortChange={setSortBy}
+      onTeamClick={handleTeamClick}
+      onBackToTeams={handleBackToTeams}
+    />
+  );
+}

apps/website/app/teams/leaderboard/TeamLeaderboardStatic.tsx

@@ -0,0 +1,27 @@
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
+import TeamLeaderboardInteractive from './TeamLeaderboardInteractive';
+import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
+
+// ============================================================================
+// SERVER COMPONENT - Fetches data and passes to Interactive wrapper
+// ============================================================================
+
+export default async function TeamLeaderboardStatic() {
+  // Create services for server-side data fetching
+  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
+  const teamService = serviceFactory.createTeamService();
+
+  // Fetch data server-side
+  let teams: TeamSummaryViewModel[] = [];
+
+  try {
+    teams = await teamService.getAllTeams();
+  } catch (error) {
+    console.error('Failed to load team leaderboard:', error);
+    teams = [];
+  }
+
+  // Pass data to Interactive wrapper which handles client-side interactions
+  return <TeamLeaderboardInteractive teams={teams} />;
+}

apps/website/app/teams/leaderboard/page.tsx

@@ -1,514 +1,9 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Image from 'next/image';
-import {
-  Users,
-  Trophy,
-  Search,
-  Crown,
-  Star,
-  TrendingUp,
-  Shield,
-  Target,
-  Award,
-  ArrowLeft,
-  Medal,
-  Percent,
-  Hash,
-  Globe,
-  Languages,
-} from 'lucide-react';
-import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
-import Heading from '@/components/ui/Heading';
-import TopThreePodium from '@/components/teams/TopThreePodium';
-import { useAllTeams } from '@/hooks/useTeamService';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-import { getMediaUrl } from '@/lib/utilities/media';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
-
-type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
-
-type TeamDisplayData = TeamSummaryViewModel;
-
-const getSafeRating = (team: TeamDisplayData): number => {
-  void team;
-  return 0;
-};
-
-const getSafeTotalWins = (team: TeamDisplayData): number => {
-  const raw = team.totalWins;
-  const value = typeof raw === 'number' ? raw : 0;
-  return Number.isFinite(value) ? value : 0;
-};
-
-const getSafeTotalRaces = (team: TeamDisplayData): number => {
-  const raw = team.totalRaces;
-  const value = typeof raw === 'number' ? raw : 0;
-  return Number.isFinite(value) ? value : 0;
-};
-
-// ============================================================================
-// SKILL LEVEL CONFIG
-// ============================================================================
-
-const SKILL_LEVELS: {
-  id: SkillLevel;
-  label: string;
-  icon: React.ElementType;
-  color: string;
-  bgColor: string;
-  borderColor: string;
-}[] = [
-  {
-    id: 'pro',
-    label: 'Pro',
-    icon: Crown,
-    color: 'text-yellow-400',
-    bgColor: 'bg-yellow-400/10',
-    borderColor: 'border-yellow-400/30',
-  },
-  {
-    id: 'advanced',
-    label: 'Advanced',
-    icon: Star,
-    color: 'text-purple-400',
-    bgColor: 'bg-purple-400/10',
-    borderColor: 'border-purple-400/30',
-  },
-  {
-    id: 'intermediate',
-    label: 'Intermediate',
-    icon: TrendingUp,
-    color: 'text-primary-blue',
-    bgColor: 'bg-primary-blue/10',
-    borderColor: 'border-primary-blue/30',
-  },
-  {
-    id: 'beginner',
-    label: 'Beginner',
-    icon: Shield,
-    color: 'text-green-400',
-    bgColor: 'bg-green-400/10',
-    borderColor: 'border-green-400/30',
-  },
-];
-
-// ============================================================================
-// SORT OPTIONS
-// ============================================================================
-
-const SORT_OPTIONS: { id: SortBy; label: string; icon: React.ElementType }[] = [
-  { id: 'rating', label: 'Rating', icon: Star },
-  { id: 'wins', label: 'Total Wins', icon: Trophy },
-  { id: 'winRate', label: 'Win Rate', icon: Percent },
-  { id: 'races', label: 'Races', icon: Hash },
-];
-
+import TeamLeaderboardStatic from './TeamLeaderboardStatic';
 
 // ============================================================================
 // MAIN PAGE COMPONENT
 // ============================================================================
 
 export default function TeamLeaderboardPage() {
-  const router = useRouter();
-  const { data: teams = [], isLoading: loading } = useAllTeams();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [sortBy, setSortBy] = useState<SortBy>('rating');
-  const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
-
-
-  const handleTeamClick = (teamId: string) => {
-    if (teamId.startsWith('demo-team-')) {
-      return;
-    }
-    router.push(`/teams/${teamId}`);
-  };
-
-  // Filter and sort teams
-  const filteredAndSortedTeams = teams
-    .filter((team) => {
-      // Search filter
-      if (searchQuery) {
-        const query = searchQuery.toLowerCase();
-        if (!team.name.toLowerCase().includes(query) && !(team.description ?? '').toLowerCase().includes(query)) {
-          return false;
-        }
-      }
-      // Level filter
-      if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
-        return false;
-      }
-      return true;
-    })
-    .sort((a, b) => {
-      switch (sortBy) {
-        case 'rating': {
-          const aRating = getSafeRating(a);
-          const bRating = getSafeRating(b);
-          return bRating - aRating;
-        }
-        case 'wins': {
-          const aWinsSort = getSafeTotalWins(a);
-          const bWinsSort = getSafeTotalWins(b);
-          return bWinsSort - aWinsSort;
-        }
-        case 'winRate': {
-          const aRaces = getSafeTotalRaces(a);
-          const bRaces = getSafeTotalRaces(b);
-          const aWins = getSafeTotalWins(a);
-          const bWins = getSafeTotalWins(b);
-          const aRate = aRaces > 0 ? aWins / aRaces : 0;
-          const bRate = bRaces > 0 ? bWins / bRaces : 0;
-          return bRate - aRate;
-        }
-        case 'races': {
-          const aRacesSort = getSafeTotalRaces(a);
-          const bRacesSort = getSafeTotalRaces(b);
-          return bRacesSort - aRacesSort;
-        }
-        default:
-          return 0;
-      }
-    });
-
-  const getMedalColor = (position: number) => {
-    switch (position) {
-      case 0:
-        return 'text-yellow-400';
-      case 1:
-        return 'text-gray-300';
-      case 2:
-        return 'text-amber-600';
-      default:
-        return 'text-gray-500';
-    }
-  };
-
-  const getMedalBg = (position: number) => {
-    switch (position) {
-      case 0:
-        return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
-      case 1:
-        return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
-      case 2:
-        return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
-      default:
-        return 'bg-iron-gray/50 border-charcoal-outline';
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-2 border-yellow-400 border-t-transparent rounded-full animate-spin" />
-            <p className="text-gray-400">Loading leaderboard...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      {/* Header */}
-      <div className="mb-8">
-        <Button
-          variant="secondary"
-          onClick={() => router.push('/teams')}
-          className="flex items-center gap-2 mb-6"
-        >
-          <ArrowLeft className="w-4 h-4" />
-          Back to Teams
-        </Button>
-
-        <div className="flex items-center gap-4 mb-2">
-          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
-            <Award className="w-7 h-7 text-yellow-400" />
-          </div>
-          <div>
-            <Heading level={1} className="text-3xl lg:text-4xl">
-              Team Leaderboard
-            </Heading>
-            <p className="text-gray-400">Rankings of all teams by performance metrics</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Filters and Search */}
-      <div className="mb-6 space-y-4">
-        {/* Search and Level Filter Row */}
-        <div className="flex flex-col lg:flex-row gap-4">
-          <div className="flex-1 relative max-w-md">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-            <Input
-              type="text"
-              placeholder="Search teams..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-11"
-            />
-          </div>
-
-          {/* Level Filter */}
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={() => setFilterLevel('all')}
-              className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-                filterLevel === 'all'
-                  ? 'bg-purple-600 text-white'
-                  : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
-              }`}
-            >
-              All Levels
-            </button>
-            {SKILL_LEVELS.map((level) => {
-              const LevelIcon = level.icon;
-              return (
-                <button
-                  key={level.id}
-                  type="button"
-                  onClick={() => setFilterLevel(level.id)}
-                  className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-all ${
-                    filterLevel === level.id
-                      ? `${level.bgColor} ${level.color} border ${level.borderColor}`
-                      : 'bg-iron-gray/50 text-gray-400 border border-charcoal-outline hover:text-white'
-                  }`}
-                >
-                  <LevelIcon className="w-4 h-4" />
-                  {level.label}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-
-        {/* Sort Options */}
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-gray-500">Sort by:</span>
-          <div className="flex items-center gap-1 p-1 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-            {SORT_OPTIONS.map((option) => (
-              <button
-                key={option.id}
-                type="button"
-                onClick={() => setSortBy(option.id)}
-                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                  sortBy === option.id
-                    ? 'bg-purple-600 text-white'
-                    : 'text-gray-400 hover:text-white hover:bg-iron-gray'
-                }`}
-              >
-                <option.icon className="w-3.5 h-3.5" />
-                {option.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Podium for Top 3 - only show when viewing by rating without filters */}
-      {sortBy === 'rating' && filterLevel === 'all' && !searchQuery && filteredAndSortedTeams.length >= 3 && (
-        <TopThreePodium teams={filteredAndSortedTeams} onClick={handleTeamClick} />
-      )}
-
-      {/* Stats Summary */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
-          <div className="flex items-center gap-2 mb-1">
-            <Users className="w-4 h-4 text-purple-400" />
-            <span className="text-xs text-gray-500">Total Teams</span>
-          </div>
-          <p className="text-2xl font-bold text-white">{filteredAndSortedTeams.length}</p>
-        </div>
-        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
-          <div className="flex items-center gap-2 mb-1">
-            <Crown className="w-4 h-4 text-yellow-400" />
-            <span className="text-xs text-gray-500">Pro Teams</span>
-          </div>
-          <p className="text-2xl font-bold text-white">
-            {filteredAndSortedTeams.filter((t) => t.performanceLevel === 'pro').length}
-          </p>
-        </div>
-        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
-          <div className="flex items-center gap-2 mb-1">
-            <Trophy className="w-4 h-4 text-performance-green" />
-            <span className="text-xs text-gray-500">Total Wins</span>
-          </div>
-          <p className="text-2xl font-bold text-white">
-            {filteredAndSortedTeams.reduce<number>(
-              (sum, t) => sum + getSafeTotalWins(t),
-              0,
-            )}
-          </p>
-        </div>
-        <div className="p-4 rounded-xl bg-iron-gray/30 border border-charcoal-outline">
-          <div className="flex items-center gap-2 mb-1">
-            <Target className="w-4 h-4 text-neon-aqua" />
-            <span className="text-xs text-gray-500">Total Races</span>
-          </div>
-          <p className="text-2xl font-bold text-white">
-            {filteredAndSortedTeams.reduce<number>(
-              (sum, t) => sum + getSafeTotalRaces(t),
-              0,
-            )}
-          </p>
-        </div>
-      </div>
-
-      {/* Leaderboard Table */}
-      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
-        {/* Table Header */}
-        <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
-          <div className="col-span-1 text-center">Rank</div>
-          <div className="col-span-4 lg:col-span-5">Team</div>
-          <div className="col-span-2 text-center hidden lg:block">Members</div>
-          <div className="col-span-2 lg:col-span-1 text-center">Rating</div>
-          <div className="col-span-2 lg:col-span-1 text-center">Wins</div>
-          <div className="col-span-2 text-center">Win Rate</div>
-        </div>
-
-        {/* Table Body */}
-        <div className="divide-y divide-charcoal-outline/50">
-          {filteredAndSortedTeams.map((team, index) => {
-            const levelConfig = SKILL_LEVELS.find((l) => l.id === team.performanceLevel);
-            const LevelIcon = levelConfig?.icon || Shield;
-            const totalRaces = getSafeTotalRaces(team);
-            const totalWins = getSafeTotalWins(team);
-            const winRate =
-              totalRaces > 0 ? ((totalWins / totalRaces) * 100).toFixed(1) : '0.0';
-
-            return (
-              <button
-                key={team.id}
-                type="button"
-                onClick={() => handleTeamClick(team.id)}
-                className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
-              >
-                {/* Position */}
-                <div className="col-span-1 flex items-center justify-center">
-                  <div
-                    className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(index)} ${getMedalColor(index)}`}
-                  >
-                    {index < 3 ? (
-                      <Medal className="w-4 h-4" />
-                    ) : (
-                      index + 1
-                    )}
-                  </div>
-                </div>
-
-                {/* Team Info */}
-                <div className="col-span-4 lg:col-span-5 flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-charcoal-outline border border-charcoal-outline overflow-hidden">
-                    <Image
-                      src={team.logoUrl || getMediaUrl('team-logo', team.id)}
-                      alt={team.name}
-                      width={40}
-                      height={40}
-                      className="w-full h-full object-cover"
-                    />
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <p className="text-white font-semibold truncate group-hover:text-purple-400 transition-colors">
-                      {team.name}
-                    </p>
-                    <div className="flex items-center gap-2 text-xs text-gray-500 flex-wrap">
-                      <span className={`${levelConfig?.color}`}>{levelConfig?.label}</span>
-                      {team.category && (
-                        <span className="flex items-center gap-1 text-purple-400">
-                          <span className="w-1.5 h-1.5 rounded-full bg-purple-400"></span>
-                          {team.category}
-                        </span>
-                      )}
-                      {team.region && (
-                        <span className="flex items-center gap-1 text-gray-400">
-                          <Globe className="w-3 h-3 text-neon-aqua" />
-                          {team.region}
-                        </span>
-                      )}
-                      {team.languages && team.languages.length > 0 && (
-                        <span className="flex items-center gap-1 text-gray-400">
-                          <Languages className="w-3 h-3 text-purple-400" />
-                          {team.languages.slice(0, 2).join(', ')}
-                          {team.languages.length > 2 && ` +${team.languages.length - 2}`}
-                        </span>
-                      )}
-                      {team.isRecruiting && (
-                        <span className="flex items-center gap-1 text-performance-green">
-                          <div className="w-1.5 h-1.5 rounded-full bg-performance-green animate-pulse" />
-                          Recruiting
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Members */}
-                <div className="col-span-2 items-center justify-center hidden lg:flex">
-                  <span className="flex items-center gap-1 text-gray-400">
-                    <Users className="w-4 h-4" />
-                    {team.memberCount}
-                  </span>
-                </div>
-
-                {/* Rating */}
-                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
-                  <span
-                    className={`font-mono font-semibold ${
-                      sortBy === 'rating' ? 'text-purple-400' : 'text-white'
-                    }`}
-                  >
-                    {getSafeRating(team).toLocaleString()}
-                  </span>
-                </div>
-
-                {/* Wins */}
-                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-purple-400' : 'text-white'}`}>
-                    {getSafeTotalWins(team)}
-                  </span>
-                </div>
-
-                {/* Win Rate */}
-                <div className="col-span-2 flex items-center justify-center">
-                  <span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-purple-400' : 'text-white'}`}>
-                    {winRate}%
-                  </span>
-                </div>
-              </button>
-            );
-          })}
-        </div>
-
-        {/* Empty State */}
-        {filteredAndSortedTeams.length === 0 && (
-          <div className="py-16 text-center">
-            <Trophy className="w-12 h-12 text-gray-600 mx-auto mb-4" />
-            <p className="text-gray-400 mb-2">No teams found</p>
-            <p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
-            <Button
-              variant="secondary"
-              onClick={() => {
-                setSearchQuery('');
-                setFilterLevel('all');
-              }}
-              className="mt-4"
-            >
-              Clear Filters
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
+  return <TeamLeaderboardStatic />;
 }

apps/website/app/teams/page.tsx

@@ -1,388 +1,3 @@
-'use client';
+import TeamsInteractive from './TeamsInteractive';
 
-import { useState, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
-import {
-  Users,
-  Trophy,
-  Search,
-  Plus,
-  Sparkles,
-  Crown,
-  Star,
-  TrendingUp,
-  Shield,
-  Zap,
-  UserPlus,
-  ChevronRight,
-  Timer,
-  Target,
-  Award,
-  Handshake,
-  MessageCircle,
-  Calendar,
-} from 'lucide-react';
-import TeamCard from '@/components/teams/TeamCard';
-import Button from '@/components/ui/Button';
-import Card from '@/components/ui/Card';
-import Input from '@/components/ui/Input';
-import Heading from '@/components/ui/Heading';
-import CreateTeamForm from '@/components/teams/CreateTeamForm';
-import WhyJoinTeamSection from '@/components/teams/WhyJoinTeamSection';
-import SkillLevelSection from '@/components/teams/SkillLevelSection';
-import FeaturedRecruiting from '@/components/teams/FeaturedRecruiting';
-import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
-import { useAllTeams } from '@/hooks/useTeamService';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
-
-// ============================================================================
-// TYPES
-// ============================================================================
-
-type TeamDisplayData = TeamSummaryViewModel;
-
-type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
-
-// ============================================================================
-// SKILL LEVEL CONFIG
-// ============================================================================
-
-const SKILL_LEVELS: {
-  id: SkillLevel;
-  label: string;
-  icon: React.ElementType;
-  color: string;
-  bgColor: string;
-  borderColor: string;
-  description: string;
-}[] = [
-  {
-    id: 'pro',
-    label: 'Pro',
-    icon: Crown,
-    color: 'text-yellow-400',
-    bgColor: 'bg-yellow-400/10',
-    borderColor: 'border-yellow-400/30',
-    description: 'Elite competition, sponsored teams',
-  },
-  {
-    id: 'advanced',
-    label: 'Advanced',
-    icon: Star,
-    color: 'text-purple-400',
-    bgColor: 'bg-purple-400/10',
-    borderColor: 'border-purple-400/30',
-    description: 'Competitive racing, high consistency',
-  },
-  {
-    id: 'intermediate',
-    label: 'Intermediate',
-    icon: TrendingUp,
-    color: 'text-primary-blue',
-    bgColor: 'bg-primary-blue/10',
-    borderColor: 'border-primary-blue/30',
-    description: 'Growing skills, regular practice',
-  },
-  {
-    id: 'beginner',
-    label: 'Beginner',
-    icon: Shield,
-    color: 'text-green-400',
-    bgColor: 'bg-green-400/10',
-    borderColor: 'border-green-400/30',
-    description: 'Learning the basics, friendly environment',
-  },
-];
-
-
-
-
-
-// ============================================================================
-// MAIN PAGE COMPONENT
-// ============================================================================
-
-export default function TeamsPage() {
-  const router = useRouter();
-  const { data: teams = [], isLoading: loading } = useAllTeams();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [showCreateForm, setShowCreateForm] = useState(false);
-
-  // Derive groups by skill level from the loaded teams
-  const groupsBySkillLevel = useMemo(() => {
-    const byLevel: Record<string, typeof teams> = {
-      beginner: [],
-      intermediate: [],
-      advanced: [],
-      pro: [],
-    };
-    teams.forEach((team) => {
-      const level = team.performanceLevel || 'intermediate';
-      if (byLevel[level]) {
-        byLevel[level].push(team);
-      }
-    });
-    return byLevel;
-  }, [teams]);
-
-  // Select top teams by rating for the preview section
-  const topTeams = useMemo(() => {
-    const sortedByRating = [...teams].sort((a, b) => {
-      // Rating is not currently part of TeamSummaryViewModel in this build.
-      // Keep deterministic ordering by name until a rating field is exposed.
-      return a.name.localeCompare(b.name);
-    });
-    return sortedByRating.slice(0, 5);
-  }, [teams]);
-
-  const handleTeamClick = (teamId: string) => {
-    if (teamId.startsWith('demo-team-')) {
-      return;
-    }
-    router.push(`/teams/${teamId}`);
-  };
-
-  const handleCreateSuccess = (teamId: string) => {
-    setShowCreateForm(false);
-    router.push(`/teams/${teamId}`);
-  };
-
-  // Filter by search query
-  const filteredTeams = teams.filter((team) => {
-    if (!searchQuery) return true;
-    const query = searchQuery.toLowerCase();
-    return (
-      team.name.toLowerCase().includes(query) ||
-      (team.description ?? '').toLowerCase().includes(query) ||
-      (team.region ?? '').toLowerCase().includes(query) ||
-      (team.languages ?? []).some((lang) => lang.toLowerCase().includes(query))
-    );
-  });
-
-  // Group teams by skill level
-  const teamsByLevel = useMemo(() => {
-    return SKILL_LEVELS.reduce(
-      (acc, level) => {
-        const fromGroup = groupsBySkillLevel[level.id] ?? [];
-        acc[level.id] = filteredTeams.filter((team) =>
-          fromGroup.some((groupTeam) => groupTeam.id === team.id),
-        );
-        return acc;
-      },
-      {
-        beginner: [],
-        intermediate: [],
-        advanced: [],
-        pro: [],
-      } as Record<string, TeamSummaryViewModel[]>,
-    );
-  }, [groupsBySkillLevel, filteredTeams]);
-
-  const recruitingCount = teams.filter((t) => t.isRecruiting).length;
-
-  if (showCreateForm) {
-    return (
-      <div className="max-w-4xl mx-auto px-4">
-        <div className="mb-6">
-          <Button variant="secondary" onClick={() => setShowCreateForm(false)}>
-            ← Back to Teams
-          </Button>
-        </div>
-
-        <Card>
-          <h2 className="text-2xl font-bold text-white mb-6">Create New Team</h2>
-          <CreateTeamForm onCancel={() => setShowCreateForm(false)} onSuccess={handleCreateSuccess} />
-        </Card>
-      </div>
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto px-4">
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="flex flex-col items-center gap-4">
-            <div className="w-10 h-10 border-2 border-purple-400 border-t-transparent rounded-full animate-spin" />
-            <p className="text-gray-400">Loading teams...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-7xl mx-auto px-4 pb-12">
-      {/* Hero Section - Different from Leagues */}
-      <div className="relative mb-10 overflow-hidden">
-        {/* Main Hero Card */}
-        <div className="relative py-12 px-8 rounded-2xl bg-gradient-to-br from-purple-900/30 via-iron-gray/80 to-deep-graphite border border-purple-500/20">
-          {/* Background decorations */}
-          <div className="absolute top-0 right-0 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl" />
-          <div className="absolute bottom-0 left-1/4 w-64 h-64 bg-neon-aqua/5 rounded-full blur-3xl" />
-          <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-yellow-400/5 rounded-full blur-2xl" />
-
-          <div className="relative z-10">
-            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8">
-              <div className="max-w-xl">
-                {/* Badge */}
-                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-xs font-medium mb-4">
-                  <Users className="w-3.5 h-3.5" />
-                  Team Racing
-                </div>
-
-                <Heading level={1} className="text-4xl lg:text-5xl mb-4">
-                  Find Your
-                  <span className="text-purple-400"> Crew</span>
-                </Heading>
-
-                <p className="text-gray-400 text-lg leading-relaxed mb-6">
-                  Solo racing is great. Team racing is unforgettable. Join a team that matches your skill level and ambitions.
-                </p>
-
-                {/* Quick Stats */}
-                <div className="flex flex-wrap gap-4 mb-6">
-                  <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-                    <Users className="w-4 h-4 text-purple-400" />
-                    <span className="text-white font-semibold">{teams.length}</span>
-                    <span className="text-gray-500 text-sm">Teams</span>
-                  </div>
-                  <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-iron-gray/50 border border-charcoal-outline">
-                    <UserPlus className="w-4 h-4 text-performance-green" />
-                    <span className="text-white font-semibold">{recruitingCount}</span>
-                    <span className="text-gray-500 text-sm">Recruiting</span>
-                  </div>
-                </div>
-
-                {/* CTA Buttons */}
-                <div className="flex flex-wrap gap-3">
-                  <Button
-                    variant="primary"
-                    onClick={() => setShowCreateForm(true)}
-                    className="flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-500"
-                  >
-                    <Plus className="w-4 h-4" />
-                    Create Team
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    onClick={() => {
-                      const element = document.getElementById('teams-list');
-                      element?.scrollIntoView({ behavior: 'smooth' });
-                    }}
-                    className="flex items-center gap-2"
-                  >
-                    <Search className="w-4 h-4" />
-                    Browse Teams
-                  </Button>
-                </div>
-              </div>
-
-              {/* Skill Level Quick Nav */}
-              <div className="lg:w-72">
-                <p className="text-xs text-gray-500 uppercase tracking-wider mb-3">Find Your Level</p>
-                <div className="space-y-2">
-                  {SKILL_LEVELS.map((level) => {
-                    const LevelIcon = level.icon;
-                    const count = teamsByLevel[level.id]?.length || 0;
-
-                    return (
-                      <button
-                        key={level.id}
-                        type="button"
-                        onClick={() => {
-                          const element = document.getElementById(`level-${level.id}`);
-                          element?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                        }}
-                        className={`w-full flex items-center justify-between p-3 rounded-lg ${level.bgColor} border ${level.borderColor} hover:scale-[1.02] transition-all duration-200`}
-                      >
-                        <div className="flex items-center gap-2">
-                          <LevelIcon className={`w-4 h-4 ${level.color}`} />
-                          <span className="text-white font-medium">{level.label}</span>
-                        </div>
-                        <span className="text-gray-400 text-sm">{count} teams</span>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Search and Filter Bar - Same style as Leagues */}
-      <div id="teams-list" className="mb-6 scroll-mt-8">
-        <div className="flex flex-col lg:flex-row gap-4">
-          {/* Search */}
-          <div className="flex-1 relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
-            <Input
-              type="text"
-              placeholder="Search teams by name, description, region, or language..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-11"
-            />
-          </div>
-        </div>
-      </div>
-
-      {/* Why Join Section */}
-      {!searchQuery && <WhyJoinTeamSection />}
-
-      {/* Team Leaderboard Preview */}
-      {!searchQuery && <TeamLeaderboardPreview topTeams={topTeams} onTeamClick={handleTeamClick} />}
-
-      {/* Featured Recruiting */}
-      {!searchQuery && <FeaturedRecruiting teams={teams} onTeamClick={handleTeamClick} />}
-
-      {/* Teams by Skill Level */}
-      {teams.length === 0 ? (
-        <Card className="text-center py-16">
-          <div className="max-w-md mx-auto">
-            <div className="flex h-16 w-16 mx-auto items-center justify-center rounded-2xl bg-purple-500/10 border border-purple-500/20 mb-6">
-              <Users className="w-8 h-8 text-purple-400" />
-            </div>
-            <Heading level={2} className="text-2xl mb-3">
-              No teams yet
-            </Heading>
-            <p className="text-gray-400 mb-8">
-              Be the first to create a racing team. Gather drivers and compete together in endurance events.
-            </p>
-            <Button
-              variant="primary"
-              onClick={() => setShowCreateForm(true)}
-              className="flex items-center gap-2 mx-auto bg-purple-600 hover:bg-purple-500"
-            >
-              <Sparkles className="w-4 h-4" />
-              Create Your First Team
-            </Button>
-          </div>
-        </Card>
-      ) : filteredTeams.length === 0 ? (
-        <Card className="text-center py-12">
-          <div className="flex flex-col items-center gap-4">
-            <Search className="w-10 h-10 text-gray-600" />
-            <p className="text-gray-400">No teams found matching "{searchQuery}"</p>
-            <Button variant="secondary" onClick={() => setSearchQuery('')}>
-              Clear search
-            </Button>
-          </div>
-        </Card>
-      ) : (
-        <div>
-          {SKILL_LEVELS.map((level, index) => (
-            <div key={level.id} id={`level-${level.id}`} className="scroll-mt-8">
-              <SkillLevelSection
-                level={level}
-                teams={teamsByLevel[level.id] ?? []}
-                onTeamClick={handleTeamClick}
-                defaultExpanded={index === 0}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+export default TeamsInteractive;