import React from "react";
import { Box, Button, Paper, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { useI18n } from "../i18n/I18nProvider";

export default function NotFoundPage() {
  const navigate = useNavigate();
  const { t } = useI18n();

  return (
    <Paper
      sx={{
        p: { xs: 4, md: 6 },
        borderRadius: 4,
        border: "none",
        boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)",
      }}
    >
      <Box sx={{ display: "grid", gap: 1.5, maxWidth: 560 }}>
        <Typography sx={{ fontWeight: 900, fontSize: { xs: 48, md: 64 }, lineHeight: 1, letterSpacing: "-0.02em", color: "primary.main" }}>
          404
        </Typography>
        <Typography variant="h4" sx={{ fontWeight: 800 }}>
          {t("notFoundTitle")}
        </Typography>
        <Typography sx={{ color: "text.secondary" }}>
          {t("notFoundBody")}
        </Typography>
        <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap", mt: 1 }}>
          <Button variant="contained" onClick={() => navigate("/jobs")}>
            {t("goHome")}
          </Button>
          <Button variant="outlined" onClick={() => navigate(-1)}>
            {t("goBack")}
          </Button>
        </Box>
      </Box>
    </Paper>
  );
}
