import { Box, Typography, Button, Stack, Paper } from '@mui/material'
import { Link as RouterLink, useNavigate } from 'react-router-dom'

export function NotFoundPage() {
  const navigate = useNavigate()

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        minHeight: '100dvh',
        bgcolor: 'background.default',
        alignItems: 'center',
        justifyContent: 'center',
        py: 4,
        px: 2,
      }}
    >
      <Paper
        elevation={0}
        sx={{
          p: { xs: 4, md: 6 },
          borderRadius: 4,
          bgcolor: 'background.paper',
          border: '1px solid',
          borderColor: 'divider',
          maxWidth: 480,
          width: '100%',
        }}
      >
        <Stack spacing={3} sx={{ alignItems: 'center', textAlign: 'center' }}>
          <Typography
            variant="h1"
            sx={{
              fontSize: { xs: 72, md: 96 },
              fontWeight: 700,
              lineHeight: 1,
              color: 'primary.main',
              opacity: 0.15,
              letterSpacing: '-4px',
            }}
          >
            404
          </Typography>
          <Typography variant="h5" component="h1" sx={{ fontWeight: 700, mt: -1 }}>
            Страница не найдена
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 360 }}>
            Извините, но запрашиваемая страница не существует или была удалена.
          </Typography>
          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ mt: 1, width: '100%' }}>
            <Button variant="contained" size="large" onClick={() => navigate('/')} sx={{ flexGrow: 1, px: 4 }}>
              На главную
            </Button>
            <Button variant="outlined" size="large" component={RouterLink} to="/" sx={{ flexGrow: 1, px: 4 }}>
              Каталог
            </Button>
          </Stack>
        </Stack>
      </Paper>
    </Box>
  )
}
