'use client';

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

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="bg-deep-graphite">
      <Box position="absolute" top="0" left="0" right="0" h="px" bg="linear-gradient(to right, transparent, var(--primary-blue), transparent)" />
      
      <Box maxWidth="4xl" mx="auto" px={{ base: 'calc(1.5rem+var(--sal))', lg: 8 }} py={{ base: 2, md: 8, lg: 12 }} pb={{ base: 'calc(0.5rem+var(--sab))', md: 'calc(1.5rem+var(--sab))' }}>
        {/* Racing stripe accent */}
        <Box
          display="flex"
          gap={1}
          mb={{ base: 2, md: 4, lg: 6 }}
          justifyContent="center"
        >
          <Box w={{ base: "12", md: "20", lg: "28" }} h={{ base: "0.5", md: "0.5", lg: "1" }} bg="bg-white" rounded="full" />
          <Box w={{ base: "12", md: "20", lg: "28" }} h={{ base: "0.5", md: "0.5", lg: "1" }} bg="bg-primary-blue" rounded="full" />
          <Box w={{ base: "12", md: "20", lg: "28" }} h={{ base: "0.5", md: "0.5", lg: "1" }} bg="bg-white" rounded="full" />
        </Box>

        {/* Personal message */}
        <Box
          textAlign="center"
          mb={{ base: 3, md: 6, lg: 8 }}
        >
          <Box mb={2} display="flex" justifyContent="center">
            <Image
              src="/images/logos/icon-square-dark.svg"
              alt="GridPilot"
              width={40}
              height={40}
              fullHeight
              style={{ width: 'auto' }}
            />
          </Box>
          <Text size={{ base: 'xs', lg: 'sm' }} color="text-gray-300" block mb={{ base: 1, md: 2 }}>
            🏁 Built by a sim racer, for sim racers
          </Text>
          <Text size={{ base: 'xs', md: 'xs' }} color="text-gray-400" weight="light" maxWidth="2xl" mx="auto" block>
            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={{ base: 4, md: 6, lg: 8 }}
          mb={{ base: 3, md: 6, lg: 8 }}
        >
          <Link
            href={discordUrl}
            variant="ghost"
            size="xs"
            hoverTextColor="text-neon-aqua"
            transition
            px={3}
            py={2}
            minHeight="44px"
            minWidth="44px"
          >
            💬 Join Discord
          </Link>
          <Link
            href={xUrl}
            variant="ghost"
            size="xs"
            color="text-gray-300"
            hoverTextColor="text-neon-aqua"
            transition
            px={3}
            py={2}
            minHeight="44px"
            minWidth="44px"
          >
            𝕏 Follow on X
          </Link>
        </Box>

        {/* Development status */}
        <Box
          textAlign="center"
          pt={{ base: 2, md: 4, lg: 6 }}
          borderTop
          borderColor="border-charcoal-outline"
        >
          <Text size={{ base: 'xs', lg: 'sm' }} color="text-gray-500" block mb={{ base: 1, md: 2 }}>
            ⚡ Early development • Feedback welcome
          </Text>
          <Text size={{ base: 'xs', md: 'xs' }} color="text-gray-600" block>
            Questions? Find me on Discord
          </Text>
        </Box>
      </Box>
    </Box>
  );
}