website refactor

apps/website/app/leagues/[id]/roster/page.tsx

@@ -3,6 +3,9 @@ import { notFound } from 'next/navigation';
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { RosterTable } from '@/components/leagues/RosterTable';
+
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 
 interface Props {
   params: Promise<{ id: string }>;
@@ -17,7 +20,13 @@ export default async function LeagueRosterPage({ params }: Props) {
   }
 
   const data = result.unwrap();
-  const members = data.memberships.members || [];
+  const members = (data.memberships.members || []).map(m => ({
+    driverId: m.driverId,
+    driverName: m.driver.name,
+    role: m.role,
+    joinedAt: m.joinedAt,
+    joinedAtLabel: DateDisplay.formatShort(m.joinedAt)
+  }));
 
   return (
     <Stack gap={8}>
@@ -26,42 +35,7 @@ export default async function LeagueRosterPage({ params }: Props) {
         <Text size="sm" color="text-zinc-500">All drivers currently registered in this league.</Text>
       </Box>
 
-      <Box border borderColor="zinc-800" bg="zinc-900/30" overflow="hidden">
+      <RosterTable members={members} />
-        <table className="w-full text-left border-collapse">
-          <thead>
-            <tr className="border-b border-zinc-800 bg-zinc-900/50">
-              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Driver</th>
-              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Role</th>
-              <th className="px-6 py-4 text-xs font-bold uppercase tracking-widest text-zinc-500">Joined</th>
-            </tr>
-          </thead>
-          <tbody>
-            {members.map((member) => (
-              <tr key={member.driverId} className="border-b border-zinc-800/50 hover:bg-zinc-800/30 transition-colors">
-                <td className="px-6 py-4">
-                  <Box display="flex" alignItems="center" gap={3}>
-                    <Box w="8" h="8" bg="zinc-800" rounded="full" />
-                    <Text weight="bold" color="text-white">{member.driver.name}</Text>
-                  </Box>
-                </td>
-                <td className="px-6 py-4">
-                  <Text size="xs" color="text-zinc-400" uppercase weight="bold">{member.role}</Text>
-                </td>
-                <td className="px-6 py-4">
-                  <Text size="sm" color="text-zinc-500">{new Date(member.joinedAt).toLocaleDateString()}</Text>
-                </td>
-              </tr>
-            ))}
-            {members.length === 0 && (
-              <tr>
-                <td colSpan={3} className="px-6 py-12 text-center">
-                  <Text color="text-zinc-600" italic>No members found in this league.</Text>
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </Box>
     </Stack>
   );
 }

apps/website/app/leagues/[id]/standings/page.tsx

@@ -30,14 +30,10 @@ export default async function Page({ params }: Props) {
         currentDriverId: null,
         isAdmin: false,
       }}
-      onRemoveMember={() => {}}
-      onUpdateRole={() => {}}
     />;
   }
 
   return <LeagueStandingsTemplate
     viewData={result.unwrap()}
-    onRemoveMember={() => {}}
-    onUpdateRole={() => {}}
   />;
 }

apps/website/components/leagues/LeagueSchedulePanel.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { Heading } from '@/ui/Heading';
+import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
-import { Stack } from '@/ui/Stack';
+import { useRouter } from 'next/navigation';
-import { Text } from '@/ui/Text';
+import { routes } from '@/lib/routing/RouteConfig';
-import { Clock, MapPin } from 'lucide-react';
 
 interface RaceEvent {
   id: string;
@@ -20,79 +19,21 @@ interface LeagueSchedulePanelProps {
 }
 
 export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
+  const router = useRouter();
+
+  const races = events.map(event => ({
+    id: event.id,
+    track: event.trackName,
+    car: 'TBA', // Not provided in event
+    leagueName: null,
+    time: event.time,
+    status: (event.status === 'completed' ? 'completed' : 'scheduled') as any
+  }));
+
   return (
-    <Stack as="section">
+    <RaceScheduleTable 
-      <Stack gap={4}>
+      races={races} 
-        {events.map((event) => (
+      onRaceClick={(id) => router.push(routes.race.detail(id))}
-          <Stack 
+    />
-            as="article"
-            key={event.id}
-            display="flex"
-            alignItems="center"
-            gap={6}
-            p={4}
-            border
-            borderColor="zinc-800"
-            bg="zinc-900/50"
-            hoverBorderColor="zinc-700"
-            transition
-          >
-            <Stack display="flex" flexDirection="col" alignItems="center" justifyContent="center" w="16" h="16" borderRight borderColor="zinc-800" pr={6}>
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase>
-                {new Date(event.date).toLocaleDateString('en-US', { month: 'short' })}
-              </Text>
-              <Text size="2xl" weight="bold" color="text-white">
-                {new Date(event.date).toLocaleDateString('en-US', { day: 'numeric' })}
-              </Text>
-            </Stack>
-
-            <Stack flexGrow={1}>
-              <Heading level={3} fontSize="lg" weight="bold" color="text-white">{event.title}</Heading>
-              <Stack direction="row" gap={4} mt={1}>
-                <Stack display="flex" alignItems="center" gap={1.5}>
-                  <Stack color="text-zinc-600"><MapPin size={14} /></Stack>
-                  <Text size="sm" color="text-zinc-400">{event.trackName}</Text>
-                </Stack>
-                <Stack display="flex" alignItems="center" gap={1.5}>
-                  <Stack color="text-zinc-600"><Clock size={14} /></Stack>
-                  <Text size="sm" color="text-zinc-400">{event.time}</Text>
-                </Stack>
-                {event.strengthOfField && (
-                  <Stack display="flex" alignItems="center" gap={1.5}>
-                    <Text size="xs" weight="bold" color="text-zinc-500" uppercase>SOF</Text>
-                    <Text size="sm" color="text-zinc-300" font="mono">{event.strengthOfField}</Text>
-                  </Stack>
-                )}
-              </Stack>
-            </Stack>
-
-            <Stack display="flex" alignItems="center" gap={3}>
-              {event.status === 'live' && (
-                <Stack display="flex" alignItems="center" gap={1.5} px={2} py={1} bg="red-500/10" border borderColor="red-500/20">
-                  <Stack w="1.5" h="1.5" rounded="full" bg="bg-red-500" animate="pulse" />
-                  <Text size="xs" weight="bold" color="text-red-500" uppercase letterSpacing="0.05em">
-                    Live
-                  </Text>
-                </Stack>
-              )}
-              {event.status === 'upcoming' && (
-                <Stack px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
-                  <Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">
-                    Upcoming
-                  </Text>
-                </Stack>
-              )}
-              {event.status === 'completed' && (
-                <Stack px={2} py={1} bg="zinc-800" border borderColor="zinc-700">
-                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="0.05em">
-                    Results
-                  </Text>
-                </Stack>
-              )}
-            </Stack>
-          </Stack>
-        ))}
-      </Stack>
-    </Stack>
   );
 }

apps/website/components/leagues/LeagueStandingsTable.tsx

@@ -1,12 +1,15 @@
 'use client';
 
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
+import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';
-import { Text } from '@/ui/Text';
+import { LeaderboardList } from '@/ui/LeaderboardList';
-import { Stack } from '@/ui/Stack';
+import { RankingRow } from '@/components/leaderboards/RankingRow';
+import { useRouter } from 'next/navigation';
+import { routes } from '@/lib/routing/RouteConfig';
 
 interface StandingEntry {
   position: number;
   driverName: string;
+  driverId?: string; // Added to support navigation
   teamName?: string;
   points: number;
   wins: number;
@@ -21,62 +24,27 @@ interface LeagueStandingsTableProps {
 }
 
 export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
+  const router = useRouter();
+
   return (
-    <Stack as="section" overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
+    <LeaderboardTableShell>
-      <Table className="border-none rounded-none">
+      <LeaderboardList>
-        <TableHead>
+        {standings.map((entry) => (
-          <TableRow className="bg-zinc-900/80 border-zinc-800">
+          <RankingRow
-            <TableHeader className="w-12 px-4 py-3">
+            key={entry.driverId || entry.driverName}
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Pos</Text>
+            id={entry.driverId || ''}
-            </TableHeader>
+            rank={entry.position}
-            <TableHeader className="px-4 py-3">
+            name={entry.driverName}
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Driver</Text>
+            avatarUrl="" // Not provided in StandingEntry
-            </TableHeader>
+            nationality="INT"
-            <TableHeader className="hidden md:table-cell px-4 py-3">
+            skillLevel="pro"
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
+            racesCompleted={entry.races}
-            </TableHeader>
+            rating={0}
-            <TableHeader className="text-center px-4 py-3">
+            wins={entry.wins}
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Races</Text>
+            onClick={entry.driverId ? () => router.push(routes.driver.detail(entry.driverId!)) : undefined}
-            </TableHeader>
+          />
-            <TableHeader className="text-center px-4 py-3">
+        ))}
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Avg</Text>
+      </LeaderboardList>
-            </TableHeader>
+    </LeaderboardTableShell>
-            <TableHeader className="text-right px-4 py-3">
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
-            </TableHeader>
-            <TableHeader className="text-right px-4 py-3">
-              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
-            </TableHeader>
-          </TableRow>
-        </TableHead>
-        <TableBody className="divide-zinc-800">
-          {standings.map((entry) => (
-            <TableRow key={entry.driverName} className="border-zinc-800 hover:bg-zinc-800/50">
-              <TableCell className="px-4 py-3">
-                <Text size="sm" color="text-zinc-400" font="mono">{entry.position}</Text>
-              </TableCell>
-              <TableCell className="px-4 py-3">
-                <Text size="sm" weight="medium" color="text-zinc-200">{entry.driverName}</Text>
-              </TableCell>
-              <TableCell className="hidden md:table-cell px-4 py-3">
-                <Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
-              </TableCell>
-              <TableCell className="text-center px-4 py-3">
-                <Text size="sm" color="text-zinc-400">{entry.races}</Text>
-              </TableCell>
-              <TableCell className="text-center px-4 py-3">
-                <Text size="sm" color="text-zinc-400">{entry.avgFinish?.toFixed(1) || '—'}</Text>
-              </TableCell>
-              <TableCell className="text-right px-4 py-3">
-                <Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
-              </TableCell>
-              <TableCell className="text-right px-4 py-3">
-                <Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Stack>
   );
 }

apps/website/components/leagues/RosterTable.tsx

@@ -1,84 +1,26 @@
-import { Stack } from '@/ui/Stack';
+import { TeamMembersTable } from '@/components/teams/TeamMembersTable';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
-import { Text } from '@/ui/Text';
 import { ReactNode } from 'react';
 
+interface Member {
+  driverId: string;
+  driverName: string;
+  role: string;
+  joinedAt: string;
+  joinedAtLabel: string;
+}
+
 interface RosterTableProps {
-  children: ReactNode;
+  members: Member[];
-  columns?: string[];
+  isAdmin?: boolean;
+  onRemoveMember?: (driverId: string) => void;
 }
 
-export function RosterTable({ children, columns = ['Driver', 'Role', 'Joined', 'Rating', 'Rank'] }: RosterTableProps) {
+export function RosterTable({ members, isAdmin, onRemoveMember }: RosterTableProps) {
   return (
-    <Stack border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
+    <TeamMembersTable 
-      <Table>
+      members={members} 
-        <TableHead className="bg-base-graphite/50">
+      isAdmin={isAdmin} 
-          <TableRow>
+      onRemoveMember={onRemoveMember} 
-            {columns.map((col) => (
+    />
-              <TableHeader key={col} className="py-3 border-b border-border-steel-grey">
-                <Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-widest" block>
-                  {col}
-                </Text>
-              </TableHeader>
-            ))}
-            <TableHeader className="py-3 border-b border-border-steel-grey">
-              {null}
-            </TableHeader>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {children}
-        </TableBody>
-      </Table>
-    </Stack>
-  );
-}
-
-interface RosterTableRowProps {
-  driver: ReactNode;
-  role: ReactNode;
-  joined: string;
-  rating: ReactNode;
-  rank: ReactNode;
-  actions?: ReactNode;
-  onClick?: () => void;
-}
-
-export function RosterTableRow({
-  driver,
-  role,
-  joined,
-  rating,
-  rank,
-  actions,
-  onClick,
-}: RosterTableRowProps) {
-  return (
-    <TableRow 
-      onClick={onClick} 
-      clickable={!!onClick}
-      className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
-    >
-      <TableCell className="py-4">
-        {driver}
-      </TableCell>
-      <TableCell className="py-4">
-        {role}
-      </TableCell>
-      <TableCell className="py-4">
-        <Text size="sm" color="text-gray-400" font="mono">{joined}</Text>
-      </TableCell>
-      <TableCell className="py-4">
-        {rating}
-      </TableCell>
-      <TableCell className="py-4">
-        {rank}
-      </TableCell>
-      <TableCell className="py-4 text-right">
-        <Stack direction="row" align="center" justify="end" gap={2}>
-          {actions}
-        </Stack>
-      </TableCell>
-    </TableRow>
   );
 }

apps/website/components/races/PointsTable.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@/ui/Box';
 import { Card } from '@/ui/Card';
 import { Heading } from '@/ui/Heading';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
 
 interface PointsTableProps {
@@ -16,10 +16,8 @@ export function PointsTable({ title = 'Points Distribution', points }: PointsTab
       <Box overflow="auto">
         <Table>
           <TableHead>
-            <TableRow>
+            <TableHeaderCell>Position</TableHeaderCell>
-              <TableHeader>Position</TableHeader>
+            <TableHeaderCell textAlign="right">Points</TableHeaderCell>
-              <TableHeader className="text-right">Points</TableHeader>
-            </TableRow>
           </TableHead>
           <TableBody>
             {points.map(({ position, points: pts }) => (
@@ -50,7 +48,7 @@ export function PointsTable({ title = 'Points Distribution', points }: PointsTab
                     </Text>
                   </Box>
                 </TableCell>
-                <TableCell className="text-right">
+                <TableCell textAlign="right">
                   <Text color="text-white" weight="semibold" className="tabular-nums">{pts}</Text>
                   <Text color="text-gray-500" ml={1}>pts</Text>
                 </TableCell>

apps/website/components/races/RaceScheduleTable.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Text } from '@/ui/Text';
-import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell } from '@/ui/Table';
 import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
 import { Stack } from '@/ui/Stack';
 
@@ -24,12 +24,10 @@ export function RaceScheduleTable({ races, onRaceClick }: RaceScheduleTableProps
   return (
     <Table>
       <TableHead>
-        <TableRow>
+        <TableHeaderCell>Time</TableHeaderCell>
-          <TableHeader>Time</TableHeader>
+        <TableHeaderCell>Session Details</TableHeaderCell>
-          <TableHeader>Session Details</TableHeader>
+        <TableHeaderCell>League</TableHeaderCell>
-          <TableHeader>League</TableHeader>
+        <TableHeaderCell textAlign="right">Status</TableHeaderCell>
-          <TableHeader textAlign="right">Status</TableHeader>
-        </TableRow>
       </TableHead>
       <TableBody>
         {races.map((race) => (

apps/website/lib/display-objects/DateDisplay.ts

@@ -35,4 +35,15 @@ export class DateDisplay {
     const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
     return `${months[d.getUTCMonth()]} ${d.getUTCDate()}`;
   }
+
+  /**
+   * Formats a date as "Jan 18, 15:00" using UTC.
+   */
+  static formatDateTime(date: string | Date): string {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const hours = d.getUTCHours().toString().padStart(2, '0');
+    const minutes = d.getUTCMinutes().toString().padStart(2, '0');
+    return `${months[d.getUTCMonth()]} ${d.getUTCDate()}, ${hours}:${minutes}`;
+  }
 }

apps/website/templates/LeagueScheduleTemplate.tsx

@@ -5,6 +5,8 @@ import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueSched
 import { Box } from '@/ui/Box';
 import { Text } from '@/ui/Text';
 
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
+
 interface LeagueScheduleTemplateProps {
   viewData: LeagueScheduleViewData;
 }
@@ -15,8 +17,8 @@ export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps
     title: race.name || `Race ${race.id.substring(0, 4)}`,
     trackName: race.track || 'TBA',
     date: race.scheduledAt,
-    time: new Date(race.scheduledAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+    time: DateDisplay.formatDateTime(race.scheduledAt),
-    status: (race.status as 'upcoming' | 'live' | 'completed') || 'upcoming',
+    status: (race.status === 'completed' ? 'completed' : 'upcoming') as any,
     strengthOfField: race.strengthOfField
   }));
 

apps/website/templates/LeagueStandingsTemplate.tsx

@@ -7,8 +7,6 @@ import { Text } from '@/ui/Text';
 
 interface LeagueStandingsTemplateProps {
   viewData: LeagueStandingsViewData;
-  onRemoveMember: (driverId: string) => void;
-  onUpdateRole: (driverId: string, newRole: string) => void;
   loading?: boolean;
 }
 
@@ -31,6 +29,7 @@ export function LeagueStandingsTemplate({
     return {
       position: entry.position,
       driverName: driver?.name || 'Unknown Driver',
+      driverId: entry.driverId,
       points: entry.totalPoints,
       wins: 0, // Placeholder
       podiums: 0, // Placeholder

apps/website/templates/RulebookTemplate.tsx

@@ -1,86 +1,199 @@
 'use client';
 
-import { LeagueRulesPanel } from '@/components/leagues/LeagueRulesPanel';
+import { RulebookTabs, type RulebookSection } from '@/components/leagues/RulebookTabs';
+import { PointsTable } from '@/components/races/PointsTable';
 import type { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
 import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Grid } from '@/ui/Grid';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
+import { AlertTriangle, Book, Clock, Info, Scale, Shield, type LucideIcon } from 'lucide-react';
+import { useState } from 'react';
 
 interface RulebookTemplateProps {
   viewData: RulebookViewData;
 }
 
-export function RulebookTemplate({ viewData }: RulebookTemplateProps) {
+export function RulebookTemplate({
-  const rules = [
+  viewData,
-    {
+}: RulebookTemplateProps) {
-      id: 'points',
+  const [activeSection, setActiveSection] = useState<RulebookSection>('scoring');
-      title: 'Points System',
-      content: `Points are awarded to the top ${viewData.positionPoints.length} finishers. 1st place receives ${viewData.positionPoints[0]?.points || 0} points.`
-    },
-    {
-      id: 'drops',
-      title: 'Drop Policy',
-      content: viewData.hasActiveDropPolicy ? viewData.dropPolicySummary : 'No drop races are active for this season.'
-    },
-    {
-      id: 'platform',
-      title: 'Platform & Sessions',
-      content: `Racing on ${viewData.gameName}. Sessions scored: ${viewData.sessionTypes}.`
-    }
-  ];
 
-  if (viewData.hasBonusPoints) {
+  if (!viewData) {
-    rules.push({
+    return (
-      id: 'bonus',
+      <Surface variant="dark" border rounded="lg" padding={12} center>
-      title: 'Bonus Points',
+        <Stack align="center" gap={3}>
-      content: viewData.bonusPoints.join('. ')
+          <Icon icon={AlertTriangle} size={8} color="text-warning-amber" />
-    });
+          <Text color="text-gray-400">Unable to load rulebook</Text>
+        </Stack>
+      </Surface>
+    );
   }
 
   return (
-    <Box display="flex" flexDirection="col" gap={8}>
+    <Stack gap={6}>
-      <Box as="header" display="flex" flexDirection="col" gap={2}>
+      {/* Navigation Tabs */}
-        <Box display="flex" alignItems="center" justifyContent="between">
+      <RulebookTabs activeSection={activeSection} onSectionChange={setActiveSection} />
-          <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Rulebook</Text>
-          <Box px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
-            <Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="widest">
-              {viewData.scoringPresetName || 'Custom Rules'}
-            </Text>
-          </Box>
-        </Box>
-        <Text size="sm" color="text-zinc-500">Official rules and regulations for this championship.</Text>
-      </Box>
 
-      <LeagueRulesPanel rules={rules} />
+      {/* Content Sections */}
+      {activeSection === 'scoring' && (
+        <Stack gap={6}>
+          {/* Quick Stats */}
+          <Grid cols={1} mdCols={2} lgCols={4} gap={4}>
+            <StatItem icon={Info} label="Platform" value={viewData.gameName} color="text-primary-blue" />
+            <StatItem icon={Book} label="Championships" value={viewData.championshipsCount} color="text-neon-aqua" />
+            <StatItem icon={Clock} label="Sessions" value={viewData.sessionTypes} color="text-performance-green" />
+            <StatItem icon={Shield} label="Drop Policy" value={viewData.hasActiveDropPolicy ? 'Active' : 'None'} color="text-warning-amber" />
+          </Grid>
 
-      <Box as="section" mt={8}>
+          {/* Weekend Structure */}
-        <Text as="h3" size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" mb={4} block>Points Classification</Text>
+          <Surface variant="dark" border rounded="lg" padding={6}>
-        <Box overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
+            <Stack gap={4}>
-          <Box as="table" w="full" textAlign="left">
+              <Stack direction="row" align="center" gap={2}>
-            <Box as="thead">
+                <Icon icon={Clock} size={5} color="text-primary-blue" />
-              <Box as="tr" borderBottom borderColor="zinc-800" bg="zinc-900/80">
+                <Heading level={5} color="text-primary-blue">WEEKEND STRUCTURE</Heading>
-                <Box as="th" px={4} py={2}>
+              </Stack>
-                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="wider">Position</Text>
+              <Grid cols={2} mdCols={4} gap={4}>
-                </Box>
+                <TimingItem label="PRACTICE" value="20 min" />
-                <Box as="th" px={4} py={2} textAlign="right">
+                <TimingItem label="QUALIFYING" value="30 min" />
-                  <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="wider">Points</Text>
+                <TimingItem label="SPRINT" value="—" />
-                </Box>
+                <TimingItem label="MAIN RACE" value="40 min" />
-              </Box>
+              </Grid>
-            </Box>
+            </Stack>
-            <Box as="tbody">
+          </Surface>
-              {viewData.positionPoints.map((point) => (
+
-                <Box as="tr" key={point.position} hoverBg="zinc-800/50" transition>
+          {/* Points Table */}
-                  <Box as="td" px={4} py={2}>
+          <PointsTable points={viewData.positionPoints} />
-                    <Text size="sm" color="text-zinc-400" font="mono">{point.position}</Text>
+
-                  </Box>
+          {/* Bonus Points */}
-                  <Box as="td" px={4} py={2} textAlign="right">
+          {viewData.hasBonusPoints && (
-                    <Text size="sm" weight="bold" color="text-white">{point.points}</Text>
+            <Surface variant="dark" border rounded="lg" padding={6}>
-                  </Box>
+              <Stack gap={4}>
-                </Box>
+                <Heading level={5} color="text-performance-green">BONUS POINTS</Heading>
-              ))}
+                <Stack gap={2}>
-            </Box>
+                  {viewData.bonusPoints.map((bonus, idx) => (
-          </Box>
+                    <Box key={idx} p={3} rounded="md" bg="bg-performance-green/5" border borderColor="border-performance-green/10">
+                      <Stack direction="row" align="center" gap={3}>
+                        <Box center w={6} h={6} rounded="full" bg="bg-performance-green/20">
+                          <Text color="text-performance-green" weight="bold" size="xs">+</Text>
+                        </Box>
+                        <Text size="sm" color="text-gray-300">{bonus}</Text>
+                      </Stack>
+                    </Box>
+                  ))}
+                </Stack>
+              </Stack>
+            </Surface>
+          )}
+        </Stack>
+      )}
+
+      {activeSection === 'conduct' && (
+        <Surface variant="dark" border rounded="lg" padding={6}>
+          <Stack gap={6}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Shield} size={5} color="text-performance-green" />
+              <Heading level={5} color="text-performance-green">DRIVER CONDUCT</Heading>
+            </Stack>
+            <Stack gap={4}>
+              <ConductItem number={1} title="Respect" text="All drivers must treat each other with respect. Abusive language, harassment, or unsportsmanlike behavior will not be tolerated." />
+              <ConductItem number={2} title="Clean Racing" text="Intentional wrecking, blocking, or dangerous driving is prohibited. Leave space for other drivers and race cleanly." />
+              <ConductItem number={3} title="Track Limits" text="Drivers must stay within track limits. Gaining a lasting advantage by exceeding track limits may result in penalties." />
+              <ConductItem number={4} title="Blue Flags" text="Lapped cars must yield to faster traffic within a reasonable time. Failure to do so may result in penalties." />
+            </Stack>
+          </Stack>
+        </Surface>
+      )}
+
+      {activeSection === 'protests' && (
+        <Surface variant="dark" border rounded="lg" padding={6}>
+          <Stack gap={6}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={Scale} size={5} color="text-warning-amber" />
+              <Heading level={5} color="text-warning-amber">PROTEST PROCESS</Heading>
+            </Stack>
+            <Stack gap={4}>
+              <ConductItem number={1} title="Filing a Protest" text="Protests can be filed within 48 hours of the race conclusion. Include the lap number, drivers involved, and a clear description of the incident." />
+              <ConductItem number={2} title="Evidence" text="Video evidence is highly recommended but not required. Stewards will review available replay data." />
+              <ConductItem number={3} title="Review Process" text="League stewards will review protests and make decisions within 72 hours. Decisions are final unless new evidence is presented." />
+            </Stack>
+          </Stack>
+        </Surface>
+      )}
+
+      {activeSection === 'penalties' && (
+        <Surface variant="dark" border rounded="lg" padding={6}>
+          <Stack gap={6}>
+            <Stack direction="row" align="center" gap={2}>
+              <Icon icon={AlertTriangle} size={5} color="text-error-red" />
+              <Heading level={5} color="text-error-red">PENALTY GUIDELINES</Heading>
+            </Stack>
+            <Table>
+              <TableHead>
+                <TableHeaderCell>Infraction</TableHeaderCell>
+                <TableHeaderCell>Typical Penalty</TableHeaderCell>
+              </TableHead>
+              <TableBody>
+                <PenaltyRow infraction="Causing avoidable contact" penalty="5-10 second time penalty" />
+                <PenaltyRow infraction="Unsafe rejoin" penalty="5 second time penalty" />
+                <PenaltyRow infraction="Blocking" penalty="Warning or 3 second penalty" />
+                <PenaltyRow infraction="Intentional wrecking" penalty="Disqualification" isSevere />
+              </TableBody>
+            </Table>
+          </Stack>
+        </Surface>
+      )}
+    </Stack>
+  );
+}
+
+function StatItem({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string | number, color: string }) {
+  return (
+    <Surface variant="dark" border rounded="lg" padding={4}>
+      <Stack direction="row" align="center" gap={3}>
+        <Box center w={10} h={10} rounded="lg" bg="bg-white/5">
+          <Icon icon={icon} size={5} color={color} />
         </Box>
-      </Box>
+        <Box>
+          <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest" display="block" mb={0.5}>{label.toUpperCase()}</Text>
+          <Text weight="bold" color="text-white">{value}</Text>
+        </Box>
+      </Stack>
+    </Surface>
+  );
+}
+
+function TimingItem({ label, value }: { label: string, value: string }) {
+  return (
+    <Box p={3} rounded="md" bg="bg-white/5" border borderColor="border-white/10">
+      <Text size="xs" color="text-gray-500" weight="bold" letterSpacing="widest" display="block" mb={1}>{label}</Text>
+      <Text weight="bold" color="text-white">{value}</Text>
     </Box>
   );
 }
+
+function ConductItem({ number, title, text }: { number: number, title: string, text: string }) {
+  return (
+    <Box py={4} borderBottom borderColor="border-charcoal-outline">
+      <Text weight="bold" color="text-white" display="block" mb={1}>{number}. {title}</Text>
+      <Text size="sm" color="text-gray-400" lineHeight="relaxed">{text}</Text>
+    </Box>
+  );
+}
+
+function PenaltyRow({ infraction, penalty, isSevere }: { infraction: string, penalty: string, isSevere?: boolean }) {
+  return (
+    <TableRow>
+      <TableCell>
+        <Text size="sm" color="text-gray-300">{infraction}</Text>
+      </TableCell>
+      <TableCell>
+        <Text size="sm" weight="bold" color={isSevere ? 'text-error-red' : 'text-warning-amber'}>{penalty}</Text>
+      </TableCell>
+    </TableRow>
+  );
+}