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

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

  return (
    <Paper
      sx={{
        p: "var(--app-card-padding)",
        borderRadius: 1,
        minWidth: 0,
      }}
    >
      <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>
        <PageHeader level="h2" title={t("notFoundTitle")} description={t("notFoundBody")} />
        <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>
  );
}