import { Box, Button, Heading, Text, VStack, HStack, Icon, Divider } from '@chakra-ui/react';
import { Link as RouterLink, useNavigate } from 'react-router-dom';
import { GiSoccerBall } from 'react-icons/gi';
import { MdSportsSoccer } from 'react-icons/md';

const NotFoundPage: React.FC = () => {
  const navigate = useNavigate();
  return (
    <Box
      minH="70vh"
      display="flex"
      alignItems="center"
      justifyContent="center"
      bgGradient="linear(to-b, rgba(0,0,0,0.02), transparent)"
      px={6}
    >
      <Box
        w={{ base: '100%', sm: '560px' }}
        textAlign="center"
        bg="white"
        _dark={{ bg: 'gray.800' }}
        borderRadius="xl"
        borderWidth="1px"
        borderColor="border.subtle"
        boxShadow="md"
        p={{ base: 6, md: 10 }}
      >
        <VStack spacing={4}>
          <HStack spacing={3} color="brand.primary">
            <Icon as={GiSoccerBall} boxSize={8} />
            <Heading as="h1" size="2xl" letterSpacing="wide">
              404
            </Heading>
            <Icon as={MdSportsSoccer} boxSize={8} />
          </HStack>
          <Heading
            as="h2"
            size="lg"
            bgGradient="linear(to-r, brand.primary, brand.accent)"
            bgClip="text"
          >
            Stránka nenalezena
          </Heading>
          <Text color="gray.600" _dark={{ color: 'gray.300' }}>
            Míč je mimo hřiště – zkuste to znovu nebo vraťte se.
          </Text>
          <Divider />
          <HStack spacing={3} pt={2}>
            <Button onClick={() => navigate(-1)} colorScheme="blue">
              Zpět
            </Button>
            <Button as={RouterLink} to="/" variant="outline">
              Zpět na úvod
            </Button>
          </HStack>
        </VStack>
      </Box>
    </Box>
  );
};

export default NotFoundPage;
