import { Link } from '@/ui/Link';
import { Box } from '@/ui/primitives/Box';
import { Text } from '@/ui/Text';

const discordUrl = process.env.NEXT_PUBLIC_DISCORD_URL || 'https://discord.gg/gridpilot';
const xUrl = process.env.NEXT_PUBLIC_X_URL || '#';

export function Footer() {
  return (
    <Box as="footer" position="relative" bg="graphite-black" borderTop borderColor="border-gray/50">
      <Box position="absolute" top="0" left="0" right="0" h="px" bg="linear-gradient(to right, transparent, #198CFF, transparent)" opacity={0.3} />
      
      <Box maxWidth="7xl" mx="auto" px={{ base: 6, lg: 8 }} py={{ base: 12, md: 16 }}>
        {/* Racing stripe accent */}
        <Box
          display="flex"
          gap={2}
          mb={8}
          justifyContent="center"
        >
          <Box w="12" h="1" bg="white" opacity={0.1} />
          <Box w="12" h="1" bg="primary-accent" />
          <Box w="12" h="1" bg="white" opacity={0.1} />
        </Box>

        {/* Personal message */}
        <Box
          textAlign="center"
          mb={12}
        >
          <Text size="sm" color="text-gray-300" block mb={2} weight="bold" className="tracking-wide">
            🏁 Built by a sim racer, for sim racers
          </Text>
          <Text size="xs" color="text-gray-500" weight="normal" maxWidth="2xl" mx="auto" block leading="relaxed">
            Just a fellow racer tired of spreadsheets and chaos. GridPilot is my passion project to make league racing actually fun again.
          </Text>
        </Box>

        {/* Community links */}
        <Box
          display="flex"
          justifyContent="center"
          gap={8}
          mb={12}
        >
          <Link
            href={discordUrl}
            variant="ghost"
            size="sm"
            className="text-gray-400 hover:text-primary-accent transition-colors font-bold uppercase tracking-widest"
          >
            💬 Discord
          </Link>
          <Link
            href={xUrl}
            variant="ghost"
            size="sm"
            className="text-gray-400 hover:text-primary-accent transition-colors font-bold uppercase tracking-widest"
          >
            𝕏 Twitter
          </Link>
        </Box>

        {/* Development status */}
        <Box
          textAlign="center"
          pt={8}
          borderTop
          borderColor="border-gray/30"
        >
          <Text size="xs" color="text-gray-600" block mb={1} font="mono" uppercase letterSpacing="widest">
            ⚡ Early development • Feedback welcome
          </Text>
          <Text size="xs" color="text-gray-700" block font="mono">
            &copy; {new Date().getFullYear()} GridPilot
          </Text>
        </Box>
      </Box>
    </Box>
  );
}