website refactor

apps/website/components/layout/AppFooter.tsx

@@ -1,44 +1,72 @@
 'use client';
 
-import { Surface } from '@/ui/Surface';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
 import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Link } from '@/ui/Link';
+import { AppShellBar } from './AppShellBar';
+import { Activity, Database, Server, Wifi } from 'lucide-react';
 
 export function AppFooter() {
-  return (
-    <Surface
-      as="footer"
-      variant="precision"
-      paddingY={6}
-      paddingX={6}
-      borderTop
-      backgroundColor="rgba(10, 10, 11, 0.92)"
-      className="backdrop-blur-xl"
-      style={{
-        boxShadow: '0 -1px 0 0 rgba(255, 255, 255, 0.05)',
-      }}
-    >
-      <Box display="flex" justifyContent="between" alignItems="center" width="full" gap={4}>
-        <Stack direction="row" align="center" gap={3}>
-          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
-            © {new Date().getFullYear()} GridPilot
-          </Text>
-          <Box w="px" h="3" bg="var(--ui-color-border-muted)" opacity={0.6} />
-          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
-            Session ready
-          </Text>
-        </Stack>
+  const currentYear = new Date().getFullYear();
 
-        <Box display={{ base: 'none', sm: 'flex' }}>
-          <Stack direction="row" align="center" gap={2}>
-            <Box w="1.5" h="1.5" rounded="full" bg="var(--ui-color-intent-success)" />
-            <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
-              System Normal
-            </Text>
-          </Stack>
+  return (
+    <AppShellBar position="bottom">
+      {/* Left: System Info */}
+      <Box display="flex" alignItems="center" gap={6}>
+        <Box display="flex" alignItems="center" gap={2}>
+          <Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
+          <Text size="xs" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
+            GRIDPILOT OS v2.0
+          </Text>
+        </Box>
+        <Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider hidden md:block">
+          © {currentYear}
+        </Text>
+      </Box>
+
+      {/* Center: Telemetry Status */}
+      <Box display="flex" alignItems="center" gap={6} className="hidden md:flex">
+        <StatusIndicator icon={Database} label="DB" status="good" />
+        <StatusIndicator icon={Server} label="API" status="good" />
+        <StatusIndicator icon={Wifi} label="WS" status="good" />
+        <Box className="h-3 w-px bg-outline-steel" />
+        <Box display="flex" alignItems="center" gap={2}>
+          <Activity size={12} className="text-text-low" />
+          <Text size="xs" className="text-text-med font-mono text-[10px]">12ms</Text>
         </Box>
       </Box>
-    </Surface>
+
+      {/* Right: Legal & Tools */}
+      <Box display="flex" alignItems="center" gap={2}>
+        <FooterLink href="/terms">Terms</FooterLink>
+        <FooterLink href="/privacy">Privacy</FooterLink>
+        <FooterLink href="/status">Status</FooterLink>
+      </Box>
+    </AppShellBar>
+  );
+}
+
+function StatusIndicator({ icon: Icon, label, status }: { icon: any, label: string, status: 'good' | 'warn' | 'bad' }) {
+  const color = status === 'good' ? 'text-success-green' : status === 'warn' ? 'text-warning-amber' : 'text-critical-red';
+  
+  return (
+    <Box display="flex" alignItems="center" gap={2} title={`${label}: ${status.toUpperCase()}`}>
+      <Icon size={10} className={color} />
+      <Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider">
+        {label}
+      </Text>
+    </Box>
+  );
+}
+
+function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
+  return (
+    <Link 
+      href={href} 
+      variant="ghost" 
+      className="px-2 py-1 rounded hover:bg-white/5 text-text-low hover:text-text-high font-mono text-[10px] uppercase tracking-wider transition-colors"
+    >
+      {children}
+    </Link>
   );
 }