import { AppFooter } from '@/components/app/AppFooter';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { BrandMark } from '@/ui/BrandMark';
import { Box } from '@/ui/Box';

export interface GlobalFooterViewData {}

export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
  return (
    <AppFooter>
      <Grid cols={{ base: 1, md: 4 }} gap={12}>
        <Stack colSpan={{ base: 1, md: 2 }} gap={6}>
          <Stack direction="row" align="center" gap={4}>
            <BrandMark />
            <Box display={{ base: 'none', sm: 'flex' }} alignItems="center" gap={2} borderLeft borderColor="var(--ui-color-border-default)" pl={4}>
              <Box w="4px" h="4px" rounded="full" bg="var(--ui-color-intent-primary)" animate="pulse" />
              <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.1em">
                INFRASTRUCTURE
              </Text>
            </Box>
          </Stack>
          <Stack maxWidth="sm">
            <Text variant="low" size="sm">
              The professional infrastructure for serious sim racing. 
              Precision telemetry, automated results, and elite league management.
            </Text>
          </Stack>
        </Stack>
        
        <Stack gap={4}>
          <Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">PLATFORM</Text>
          <Stack as="ul" direction="col" gap={2}>
            <Stack as="li">
              <Link href="/leagues" variant="secondary">
                Leagues
              </Link>
            </Stack>
            <Stack as="li">
              <Link href="/teams" variant="secondary">
                Teams
              </Link>
            </Stack>
            <Stack as="li">
              <Link href="/leaderboards" variant="secondary">
                Leaderboards
              </Link>
            </Stack>
          </Stack>
        </Stack>
        
        <Stack gap={4}>
          <Text size="xs" weight="bold" variant="high" uppercase letterSpacing="wider">SUPPORT</Text>
          <Stack as="ul" direction="col" gap={2}>
            <Stack as="li">
              <Link href="/docs" variant="secondary">
                Documentation
              </Link>
            </Stack>
            <Stack as="li">
              <Link href="/status" variant="secondary">
                System Status
              </Link>
            </Stack>
            <Stack as="li">
              <Link href="/contact" variant="secondary">
                Contact
              </Link>
            </Stack>
          </Stack>
        </Stack>
      </Grid>
    </AppFooter>
  );
}