import React from 'react';
import { Box } from './primitives/Box';
import { Container } from './Container';
import { Text } from './Text';
import { Link } from './Link';

export const Footer = () => {
  return (
    <Box as="footer" bg="var(--ui-color-bg-surface)" borderTop paddingY={12}>
      <Container size="xl">
        <Box display="grid" gridCols={{ base: 1, md: 4 }} gap={12}>
          <Box>
            <Text weight="bold" variant="high" marginBottom={4}>GridPilot</Text>
            <Text size="sm" variant="low">
              The ultimate companion for sim racers. Track your performance, manage your team, and compete in leagues.
            </Text>
          </Box>
          
          <Box>
            <Text weight="bold" variant="high" marginBottom={4}>Platform</Text>
            <Box display="flex" flexDirection="col" gap={2}>
              <Link href="/leagues" variant="secondary">Leagues</Link>
              <Link href="/teams" variant="secondary">Teams</Link>
              <Link href="/leaderboards" variant="secondary">Leaderboards</Link>
            </Box>
          </Box>
          
          <Box>
            <Text weight="bold" variant="high" marginBottom={4}>Support</Text>
            <Box display="flex" flexDirection="col" gap={2}>
              <Link href="/docs" variant="secondary">Documentation</Link>
              <Link href="/status" variant="secondary">System Status</Link>
              <Link href="/contact" variant="secondary">Contact Us</Link>
            </Box>
          </Box>
          
          <Box>
            <Text weight="bold" variant="high" marginBottom={4}>Legal</Text>
            <Box display="flex" flexDirection="col" gap={2}>
              <Link href="/privacy" variant="secondary">Privacy Policy</Link>
              <Link href="/terms" variant="secondary">Terms of Service</Link>
            </Box>
          </Box>
        </Box>
        
        <Box borderTop marginTop={12} paddingTop={8} textAlign="center">
          <Text size="xs" variant="low">
            © {new Date().getFullYear()} GridPilot. All rights reserved.
          </Text>
        </Box>
      </Container>
    </Box>
  );
};