'use client';

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

export default function NotFound() {
  return (
    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" bg="bg-deep-graphite" color="text-white" px={6}>
      <Box maxWidth="md" textAlign="center">
        <Stack gap={4}>
          <Heading level={1} fontSize="3xl" weight="semibold">Page not found</Heading>
          <Text size="sm" color="text-gray-400" block>
            The page you requested doesn&apos;t exist (or isn&apos;t available in this mode).
          </Text>
          <Box pt={2}>
            <Link
              href="/"
              variant="primary"
              size="sm"
              weight="medium"
              rounded="md"
              px={4}
              py={2}
            >
              Drive home
            </Link>
          </Box>
        </Stack>
      </Box>
    </Box>
  );
}