import React from "react";
import { Box, Button, Container, Grid, Typography } from "@mui/material";
import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
import SearchIcon from "@mui/icons-material/Search";

const LandingPage = () => {
	const navigate = useNavigate(); // Initialize useNavigate

	const handleLoginClick = () => {
		navigate("/login"); // Redirect to the login page
	};

	return (
		<Box
			sx={{
				background: `radial-gradient(circle at top left, rgba(125,121,87,0.992) 10%, rgba(67,92,106,0.8) 40%, rgba(55,47,65,1) 70%), 
                     radial-gradient(circle at center, rgba(109, 102, 102, 0.7) 0%, rgba(67,92,106,0.6) 50%, rgba(55,47,65,0.9) 70%), 
                     radial-gradient(circle at top right, rgba(61,42,87,1) 30%, rgba(55,47,65,1) 60%, rgba(40,40,40,0.8) 70%)`,
				color: "white",
				minHeight: "100vh",
				fontFamily: "Inter",
			}}
		>
			{/* Navbar */}
			<Box
				component="nav"
				sx={{
					display: "flex",
					justifyContent: "space-between",
					alignItems: "center",
					py: 2,
					px: 3,
					maxWidth: "1200px",
					mx: "auto",
					fontFamily: "Inter",
				}}
			>
				<img
					src="/evLogo.png"
					alt="DigiEv Logo"
					style={{ height: "40px" }}
				/>
				<Box
					sx={{
						display: "flex",
						alignItems: "center",
						gap: 2,
					}}
				>
					<SearchIcon
						sx={{
							fontSize: "24px",
							cursor: "pointer",
							color: "#364056",
						}}
					/>
					<Button
						type="button" // Changed to "button" to avoid form submission
						onClick={handleLoginClick} // Trigger navigation on click
						sx={{
							backgroundColor: "#52ACDF",
							color: "white",
							borderRadius: "8px",
							width: "117px",
							fontFamily: "Inter",
							textTransform: "none",
							"&:hover": { backgroundColor: "#439BC1" },
						}}
					>
						Login
					</Button>
				</Box>
			</Box>

			{/* Hero Section */}
			<Container
				sx={{
					py: 8,
					justifyContent: "space-between",
					fontFamily: "Inter",
				}}
			>
				<Grid
					container
					spacing={4}
					alignItems="center"
					justifyContent="center"
				>
					{/* Text Section */}
					<Grid
						item
						xs={12}
						md={6}
						sx={{
							height: { xs: "auto", md: "400px" },
							display: "flex",
							flexDirection: "column",
							justifyContent: "center",
						}}
					>
						<Typography
							sx={{
								fontFamily: "Inter",
								fontWeight: 600,
								fontSize: "40px",
								lineHeight: "120%",
								letterSpacing: "0px",
								marginBottom: "16px",
							}}
						>
							Empower Your Business With{" "}
							<Box component="span" sx={{ color: "#52ACDF" }}>
								Digital Evolution
							</Box>
							.
						</Typography>
						<Typography
							variant="body1"
							sx={{
								fontFamily: "Inter",
								color: "#CACACA",
								marginBottom: "24px",
								fontWeight: 400,
								fontSize: "20px",
								lineHeight: "120%",
							}}
						>
							DigiEv is your one-stop destination for transforming
							challenges into opportunities through innovative
							technology, seamless integration, and expert
							solutions.
						</Typography>
						<Button
							type="submit"
							sx={{
								backgroundColor: "#52ACDF",
								color: "white",
								borderRadius: "8px",
								width: "117px",
								textTransform: "none",
								fontFamily: "Inter",
								"&:hover": { backgroundColor: "#439BC1" },
							}}
						>
							Get in Touch
						</Button>
					</Grid>

					{/* Image Section */}
					<Grid
						item
						xs={12}
						md={6}
						sx={{
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
						}}
					>
						<img
							src="/home.png"
							alt="Dashboard"
							style={{
								maxHeight: "100%",
								maxWidth: "100%",
								objectFit: "contain",
								borderRadius: "8px",
							}}
						/>
					</Grid>
				</Grid>
			</Container>
			<Container maxWidth="lg">
				{" "}
				<Grid container spacing={4} textAlign="center">
					{" "}
					<Grid item xs={12} md={4}>
						{" "}
						<Typography
							variant="h3"
							fontWeight="bold"
							color="#1e88e5"
						>
							{" "}
							50+{" "}
						</Typography>{" "}
						<Typography variant="body2" color="gray">
							{" "}
							Successful Digital Transformations{" "}
						</Typography>{" "}
					</Grid>{" "}
					<Grid item xs={12} md={4}>
						{" "}
						<Typography
							variant="h3"
							fontWeight="bold"
							color="#1e88e5"
						>
							{" "}
							100%{" "}
						</Typography>{" "}
						<Typography variant="body2" color="gray">
							{" "}
							Client Satisfaction{" "}
						</Typography>{" "}
					</Grid>{" "}
					<Grid item xs={12} md={4}>
						{" "}
						<Typography
							variant="h3"
							fontWeight="bold"
							color="#1e88e5"
						>
							{" "}
							20+{" "}
						</Typography>{" "}
						<Typography variant="body2" color="gray">
							{" "}
							Global Partnerships{" "}
						</Typography>{" "}
					</Grid>{" "}
				</Grid>{" "}
			</Container>
		</Box>
	);
};

export default LandingPage;
