website refactor

apps/website/templates/LeagueRulebookTemplate.tsx

@@ -1,19 +1,18 @@
 'use client';
 
 import React from 'react';
-import { Card } from '@/ui/Card';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Heading } from '@/ui/Heading';
-import { Badge } from '@/ui/Badge';
 import { Grid } from '@/ui/Grid';
-import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
 import { PointsTable } from '@/ui/PointsTable';
 import { RulebookTabs, type RulebookSection } from '@/ui/RulebookTabs';
 import type { LeagueRulebookViewData } from '@/lib/view-data/LeagueRulebookViewData';
 import { Surface } from '@/ui/Surface';
-import { Clock } from 'lucide-react';
+import { Book, Shield, Scale, AlertTriangle, Info, Clock, type LucideIcon } from 'lucide-react';
+import { Icon } from '@/ui/Icon';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
 
 interface LeagueRulebookTemplateProps {
   viewData: LeagueRulebookViewData;
@@ -30,21 +29,20 @@ export function LeagueRulebookTemplate({
 }: LeagueRulebookTemplateProps) {
   if (loading) {
     return (
-      <Card>
-        <Stack align="center" py={12}>
-          <Text color="text-gray-400">Loading rulebook...</Text>
-        </Stack>
-      </Card>
+      <Surface variant="dark" border rounded="lg" padding={12} center>
+        <Text color="text-gray-400">Loading rulebook...</Text>
+      </Surface>
     );
   }
 
   if (!viewData || !viewData.scoringConfig) {
     return (
-      <Card>
-        <Stack align="center" py={12}>
+      <Surface variant="dark" border rounded="lg" padding={12} center>
+        <Stack align="center" gap={3}>
+          <Icon icon={AlertTriangle} size={8} color="text-warning-amber" />
           <Text color="text-gray-400">Unable to load rulebook</Text>
         </Stack>
-      </Card>
+      </Surface>
     );
   }
 
@@ -54,17 +52,6 @@ export function LeagueRulebookTemplate({
 
   return (
     <Stack gap={6}>
-      {/* Header */}
-      <Stack direction="row" align="center" justify="between">
-        <Box>
-          <Heading level={1}>Rulebook</Heading>
-          <Text size="sm" color="text-gray-400" block mt={1}>Official rules and regulations</Text>
-        </Box>
-        <Badge variant="primary">
-          {scoringConfig.scoringPresetName || 'Custom Rules'}
-        </Badge>
-      </Stack>
-
       {/* Navigation Tabs */}
       <RulebookTabs activeSection={activeSection} onSectionChange={onSectionChange} />
 
@@ -72,177 +59,158 @@ export function LeagueRulebookTemplate({
       {activeSection === 'scoring' && (
         <Stack gap={6}>
           {/* Quick Stats */}
-          <Grid cols={4} gap={4}>
-            <StatItem label="Platform" value={scoringConfig.gameName} />
-            <StatItem label="Championships" value={scoringConfig.championships.length} />
-            <StatItem label="Sessions Scored" value={primaryChampionship?.sessionTypes.join(', ') || 'Main'} />
-            <StatItem label="Drop Policy" value={scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'} />
+          <Grid cols={1} mdCols={2} lgCols={4} gap={4}>
+            <StatItem icon={Info} label="Platform" value={scoringConfig.gameName} color="text-primary-blue" />
+            <StatItem icon={Book} label="Championships" value={scoringConfig.championships.length} color="text-neon-aqua" />
+            <StatItem icon={Clock} label="Sessions" value={primaryChampionship?.sessionTypes.join(', ') || 'Main'} color="text-performance-green" />
+            <StatItem icon={Shield} label="Drop Policy" value={scoringConfig.dropPolicySummary.includes('All') ? 'None' : 'Active'} color="text-warning-amber" />
           </Grid>
 
           {/* Weekend Structure */}
-          <Card>
+          <Surface variant="dark" border rounded="lg" padding={6}>
             <Stack gap={4}>
               <Stack direction="row" align="center" gap={2}>
-                <Clock size={20} color="#3b82f6" />
-                <Heading level={2}>Weekend Structure & Timings</Heading>
+                <Icon icon={Clock} size={5} color="text-primary-blue" />
+                <Heading level={5} color="text-primary-blue">WEEKEND STRUCTURE</Heading>
               </Stack>
-              <Grid cols={4} gap={4}>
-                <Surface variant="muted" rounded="lg" border padding={3}>
-                  <Text size="xs" color="text-gray-500" block mb={1}>PRACTICE</Text>
-                  <Text weight="medium" color="text-white">20 min</Text>
-                </Surface>
-                <Surface variant="muted" rounded="lg" border padding={3}>
-                  <Text size="xs" color="text-gray-500" block mb={1}>QUALIFYING</Text>
-                  <Text weight="medium" color="text-white">30 min</Text>
-                </Surface>
-                <Surface variant="muted" rounded="lg" border padding={3}>
-                  <Text size="xs" color="text-gray-500" block mb={1}>SPRINT</Text>
-                  <Text weight="medium" color="text-white">—</Text>
-                </Surface>
-                <Surface variant="muted" rounded="lg" border padding={3}>
-                  <Text size="xs" color="text-gray-500" block mb={1}>MAIN RACE</Text>
-                  <Text weight="medium" color="text-white">40 min</Text>
-                </Surface>
+              <Grid cols={2} mdCols={4} gap={4}>
+                <TimingItem label="PRACTICE" value="20 min" />
+                <TimingItem label="QUALIFYING" value="30 min" />
+                <TimingItem label="SPRINT" value="—" />
+                <TimingItem label="MAIN RACE" value="40 min" />
               </Grid>
             </Stack>
-          </Card>
+          </Surface>
 
           {/* Points Table */}
           <PointsTable points={positionPoints} />
 
           {/* Bonus Points */}
           {primaryChampionship?.bonusSummary && primaryChampionship.bonusSummary.length > 0 && (
-            <Card>
+            <Surface variant="dark" border rounded="lg" padding={6}>
               <Stack gap={4}>
-                <Heading level={2}>Bonus Points</Heading>
+                <Heading level={5} color="text-performance-green">BONUS POINTS</Heading>
                 <Stack gap={2}>
                   {primaryChampionship.bonusSummary.map((bonus, idx) => (
-                    <Surface
-                      key={idx}
-                      variant="muted"
-                      rounded="lg"
-                      border
-                      padding={3}
-                    >
-                      <Stack direction="row" align="center" gap={4}>
-                        <Surface variant="muted" rounded="full" padding={1} w="2rem" h="2rem" bg="bg-green-500/10" borderColor="border-green-500/20" display="flex" alignItems="center" justifyContent="center">
-                          <Text color="text-performance-green" weight="bold">+</Text>
-                        </Surface>
+                    <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>
-                    </Surface>
+                    </Box>
                   ))}
                 </Stack>
               </Stack>
-            </Card>
-          )}
-
-          {/* Drop Policy */}
-          {!scoringConfig.dropPolicySummary.includes('All results count') && (
-            <Card>
-              <Stack gap={4}>
-                <Heading level={2}>Drop Policy</Heading>
-                <Text size="sm" color="text-gray-300">{scoringConfig.dropPolicySummary}</Text>
-                <Box mt={3}>
-                  <Text size="xs" color="text-gray-500" block>
-                    Drop rules are applied automatically when calculating championship standings.
-                  </Text>
-                </Box>
-              </Stack>
-            </Card>
+            </Surface>
           )}
         </Stack>
       )}
 
       {activeSection === 'conduct' && (
-        <Card>
-          <Stack gap={4}>
-            <Heading level={2}>Driver Conduct</Heading>
+        <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." />
-              <ConductItem number={5} title="Communication" text="Drivers are expected to communicate respectfully in voice and text chat during sessions." />
             </Stack>
           </Stack>
-        </Card>
+        </Surface>
       )}
 
       {activeSection === 'protests' && (
-        <Card>
-          <Stack gap={4}>
-            <Heading level={2}>Protest Process</Heading>
+        <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." />
-              <ConductItem number={4} title="Outcomes" text="Protests may result in no action, warnings, time penalties, position penalties, or points deductions depending on severity." />
             </Stack>
           </Stack>
-        </Card>
+        </Surface>
       )}
 
       {activeSection === 'penalties' && (
-        <Card>
-          <Stack gap={4}>
-            <Heading level={2}>Penalty Guidelines</Heading>
-            <Stack gap={4}>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableHeader>Infraction</TableHeader>
-                    <TableHeader>Typical Penalty</TableHeader>
-                  </TableRow>
-                </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="Repeated track limit violations" penalty="5 second penalty" />
-                  <PenaltyRow infraction="Intentional wrecking" penalty="Disqualification" color="#f87171" />
-                  <PenaltyRow infraction="Unsportsmanlike conduct" penalty="Points deduction or ban" color="#f87171" />
-                </TableBody>
-              </Table>
-              <Box mt={4}>
-                <Text size="xs" color="text-gray-500" block>
-                  Penalties are applied at steward discretion based on incident severity and driver history.
-                </Text>
-              </Box>
+        <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>
+                <TableRow>
+                  <TableHeader>Infraction</TableHeader>
+                  <TableHeader>Typical Penalty</TableHeader>
+                </TableRow>
+              </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>
-        </Card>
+        </Surface>
       )}
     </Stack>
   );
 }
 
-function StatItem({ label, value }: { label: string, value: string | number }) {
+function StatItem({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string | number, color: string }) {
   return (
-    <Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800" borderColor="border-neutral-800">
-      <Text size="xs" color="text-gray-500" block mb={1}>{label.toUpperCase()}</Text>
-      <Text weight="semibold" color="text-white" size="lg">{value}</Text>
+    <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>
+          <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>
-      <Text weight="medium" color="text-white" block mb={2}>{number}. {title}</Text>
-      <Text size="sm" color="text-gray-300">{text}</Text>
+    <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, color }: { infraction: string, penalty: string, color?: string }) {
+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" color={color === '#f87171' ? 'text-error-red' : 'text-warning-amber'}>{penalty}</Text>
+        <Text size="sm" weight="bold" color={isSevere ? 'text-error-red' : 'text-warning-amber'}>{penalty}</Text>
       </TableCell>
     </TableRow>
   );