import React from "react";
import { Box, Typography, Button, Card, Grid } from "@mui/material";
import ElectricCarIcon from "@mui/icons-material/ElectricCar";
import { keyframes } from "@emotion/react";

// Animation for the car icon
const pulse = keyframes`
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
`;

const NotFoundPage = () => {
	return (
		<Box
			sx={{
				display: "flex",
				justifyContent: "center",
				alignItems: "center",
				flexDirection: "column",
				height: "100vh",
				background:
					"linear-gradient(135deg,rgb(12, 14, 15),rgb(10, 10, 10))",
				padding: 2,
			}}
		>
			<Card
				sx={{
					backgroundColor: "#272727",
					padding: "40px",
					borderRadius: "20px",
					boxShadow: "0 8px 24px rgba(0, 0, 0, 0.7)",
					textAlign: "center",
					maxWidth: "500px",
					width: "100%",
					color: "#E0E0E0",
					animation: `${pulse} 1.5s infinite`,
				}}
			>
				<ElectricCarIcon
					sx={{
						fontSize: 100,
						color: "#52ACDF",
						marginBottom: 2,
					}}
				/>
				<Typography
					variant="h3"
					sx={{ fontWeight: 700, color: "#FFFFFF", marginBottom: 1 }}
				>
					404
				</Typography>
				<Typography
					variant="h5"
					sx={{ fontWeight: 500, color: "#FFFFFF", marginBottom: 3 }}
				>
					Oops! Page Not Found
				</Typography>
				<Typography
					variant="body2"
					sx={{ color: "#B0B0B0", marginBottom: 4 }}
				>
					The path you’re looking for seems to be off the grid. Maybe
					the charging station is offline? ⚡
				</Typography>

				<Grid container spacing={2} justifyContent="center">
					<Grid item>
						<Button
							variant="contained"
							sx={{
								backgroundColor: "#52ACDF",
								color: "#FFFFFF",
								padding: "12px 32px",
								"&:hover": {
									backgroundColor: "#52ACDF",
									opacity: 0.9,
								},
								fontWeight: 600,
							}}
							onClick={() => (window.location.href = "/")}
						>
							Back to Login
						</Button>
					</Grid>
					<Grid item>
						<Button
							variant="outlined"
							sx={{
								borderColor: "#52ACDF",
								color: "#52ACDF",
								padding: "12px 32px",
								"&:hover": {
									backgroundColor: "#52ACDF",
									color: "#FFFFFF",
								},
							}}
							onClick={() => window.history.back()}
						>
							Go Back
						</Button>
					</Grid>
				</Grid>
			</Card>
		</Box>
	);
};

export default NotFoundPage;
