import { AppFooter } from '@/ui/AppFooter';
import { Box } from '@/ui/primitives/Box';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import Image from 'next/image';
import Link from 'next/link';

export interface GlobalFooterViewData {}

export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
  return (
    <AppFooter>
      <Box maxWidth="7xl" mx="auto" display="grid" responsiveGridCols={{ base: 1, md: 4 }} gap={12}>
        <Box colSpan={{ base: 1, md: 2 }}>
          <Box mb={6} opacity={0.8}>
            <Image
              src="/images/logos/wordmark-rectangle-dark.svg"
              alt="GridPilot"
              width={140}
              height={26}
            />
          </Box>
          <Box maxWidth="sm" mb={6}>
            <Text color="text-gray-500">
              The professional infrastructure for serious sim racing. 
              Precision telemetry, automated results, and elite league management.
            </Text>
          </Box>
          <Box display="flex" alignItems="center" gap={4}>
            <Text size="xs" color="text-gray-600" font="mono" letterSpacing="widest">
              © 2026 GRIDPILOT
            </Text>
          </Box>
        </Box>
        
        <Box>
          <Box mb={4}>
            <Text weight="bold" color="text-gray-300" letterSpacing="wider">PLATFORM</Text>
          </Box>
          <Stack as="ul" direction="col" gap={2}>
            <Box as="li">
              <Box as={Link} href="/leagues" color="text-gray-500" hoverTextColor="primary-accent" transition>
                Leagues
              </Box>
            </Box>
            <Box as="li">
              <Box as={Link} href="/teams" color="text-gray-500" hoverTextColor="primary-accent" transition>
                Teams
              </Box>
            </Box>
            <Box as="li">
              <Box as={Link} href="/leaderboards" color="text-gray-500" hoverTextColor="primary-accent" transition>
                Leaderboards
              </Box>
            </Box>
          </Stack>
        </Box>
        
        <Box>
          <Box mb={4}>
            <Text weight="bold" color="text-gray-300" letterSpacing="wider">SUPPORT</Text>
          </Box>
          <Stack as="ul" direction="col" gap={2}>
            <Box as="li">
              <Box as={Link} href="/docs" color="text-gray-500" hoverTextColor="primary-accent" transition>
                Documentation
              </Box>
            </Box>
            <Box as="li">
              <Box as={Link} href="/status" color="text-gray-500" hoverTextColor="primary-accent" transition>
                System Status
              </Box>
            </Box>
            <Box as="li">
              <Box as={Link} href="/contact" color="text-gray-500" hoverTextColor="primary-accent" transition>
                Contact
              </Box>
            </Box>
          </Stack>
        </Box>
      </Box>
    </AppFooter>
  );
}