import {
	Box,
	Button,
	Card,
	CardContent,
	Container,
	Grid,
	Typography,
} from "@mui/material";
import { useNavigate } from "react-router-dom";
import SearchIcon from "@mui/icons-material/Search";
import EvStationIcon from "@mui/icons-material/EvStation";
import BatteryChargingFullIcon from "@mui/icons-material/BatteryChargingFull";
import LocationOnIcon from "@mui/icons-material/LocationOn";
const features = [
	{
		icon: <EvStationIcon fontSize="large" />,
		title: "Seamless Charging Experience",
		description:
			"Find and book EV charging stations effortlessly with DigiEv's smart platform.",
	},
	{
		icon: <BatteryChargingFullIcon fontSize="large" />,
		title: "Real-Time Availability",
		description:
			"Check live station availability and optimize your route for an efficient charge.",
	},
	{
		icon: <LocationOnIcon fontSize="large" />,
		title: "Widespread Network",
		description:
			"Access a vast network of EV stations across multiple locations with ease.",
	},
	{
		icon: <SearchIcon fontSize="large" />,
		title: "Smart Search Functionality",
		description:
			"Find EV stations nearby with advanced filters for location, availability, and pricing.",
	},
];

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

	const handleLoginClick = () => {
		navigate("/login");
	};

	return (
		<Box
			sx={{
				background: {
					lg: " #111111",
					sm: " #111111",
					md: " #111111",
					xs: " #000000",
				},
				color: "white",
				fontFamily: "Gilory",
				display: "flex",
				flexDirection: "column",
			}}
		>
			{/* Navbar */}
			<Box
				component="nav"
				sx={{
					position: "fixed",
					top: 0,
					left: 0,
					right: 0,
					zIndex: 1100,
					display: "flex",
					justifyContent: "space-between",
					alignItems: "center",
					py: 2,
					px: { xs: 2, sm: 3, md: 6 },
					// background:
					// 	"linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)",
					background: "#141615",
					boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
					fontFamily: "Gilory",
				}}
			>
				<img
					src="/evLogo.png"
					alt="DigiEv Logo"
					style={{
						height: "40px",
						width: "auto",
					}}
				/>
				<Box
					sx={{
						display: "flex",
						alignItems: "center",
						gap: { xs: 1, sm: 2 },
					}}
				>
					<SearchIcon
						sx={{
							fontSize: { xs: "20px", sm: "24px" },
							cursor: "pointer",
							color: "#364056",
						}}
					/>
					<Button
						type="button"
						onClick={handleLoginClick}
						sx={{
							backgroundColor: "#52ACDF",
							color: "#FFFFFF",
							borderRadius: "6px",
							width: { xs: "90px", sm: "117px" },
							fontFamily: "Gilory",
							textTransform: "none",
							"&:hover": { backgroundColor: "#439BC1" },
							fontWeight: 500,
							fontSize: { xs: "14px", sm: "16px" },
						}}
					>
						Login
					</Button>
				</Box>
			</Box>

			{/* Hero Section */}
			<Box
				sx={{
					py: 8,
					justifyContent: "space-between",
					fontFamily: "Gilory",
					backgroundImage: {
						lg: 'url("/bgev.svg")',
						sm: 'url("/bgev.svg")',
					},
					position: "relative",
					backgroundSize: "cover", // Ensures the SVG scales to cover the hero section
					backgroundRepeat: "no-repeat",
					backgroundPosition: "center",
					width: "100vw",
					maxWidth: "100%",
				}}
			>
				<Container
					sx={{
						py: { xs: 4, sm: 6, md: 8 },
						justifyContent: "space-between",
						fontFamily: "Gilory",
						width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
					}}
				>
					<Grid
						container
						spacing={4}
						alignItems="center"
						justifyContent="center"
					>
						{/* Text Section */}
						<Grid
							item
							xs={12}
							sm={6}
							md={6}
							sx={{
								display: "flex",
								flexDirection: "column",
								justifyContent: "center",
								textAlign: {
									xs: "center",
									sm: "left",
									md: "left",
								},
								px: { xs: 2, sm: 4, md: 6 },
							}}
						>
							<Typography
								sx={{
									fontFamily: "Gilory",
									fontWeight: 600,
									fontSize: {
										xs: "28px",
										sm: "32px",
										md: "36px",
									},
									lineHeight: "120%",
									marginBottom: "16px",
								}}
							>
								Empower Your Business With{" "}
								<Box component="span" sx={{ color: "#52ACDF" }}>
									Digital Evolution
								</Box>
								.
							</Typography>
							<Typography
								variant="body1"
								sx={{
									fontFamily: "Gilory",
									color: "#CACACA",
									marginBottom: "24px",
									fontWeight: 400,
									fontSize: {
										xs: "16px",
										sm: "18px",
										md: "20px",
									},
									lineHeight: "140%",
								}}
							>
								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",
									borderRadius: "6px",
									color: "#FFFFFF",
									width: { xs: "120px", md: "140px" },
									height: "48px",
									textTransform: "none",
									fontFamily: "Gilory",
									"&:hover": { backgroundColor: "#439BC1" },
									fontSize: { xs: "14px", md: "16px" },
									fontWeight: 500,
									display: {
										xs: "none",
										sm: "block",
										md: "block",
										lg: "block",
									},
								}}
							>
								Get in Touch
							</Button>
						</Grid>

						{/* Image Section */}
						<Grid
							item
							xs={12}
							sm={6}
							md={6}
							sx={{
								display: "flex",
								justifyContent: "center",
								alignItems: "center",
								px: { xs: 2, sm: 4, md: 6 },
							}}
						>
							<img
								src="/hero.png"
								alt="Dashboard"
								style={{
									maxHeight: "100%",
									maxWidth: "100%",
									objectFit: "contain",
									borderRadius: "8px",
								}}
							/>
						</Grid>
					</Grid>
				</Container>

				{/* Statistics Section */}
				<Container
					maxWidth="lg"
					sx={{
						position: "relative",
						width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
						background: {
							lg: "#22496033",
							xs: "none",
							sm: "#22496033",
							md: "#22496033",
						},
						borderRadius: "12px",
						py: { xs: 2, md: 4 },
						px: { xs: 2, md: 3 },
						mt: { xs: 8, md: 15 },
					}}
				>
					<Grid
						container
						spacing={2}
						textAlign="center"
						sx={{
							display: { xs: "grid" },

							gridTemplateColumns: {
								xs: "repeat(2, 1fr)", // Two items per row on mobile
								sm: "repeat(4, 1fr)",
								md: "repeat(4, 1fr)",
								lg: "repeat(4, 1fr)",
							},
							gap: { xs: 2, sm: 5, md: 5 },
							flexDirection: {
								xs: "column", // Stacked cards in xs
								sm: "row", // Row layout for sm and above
								md: "row",
								lg: "row",
							},
						}}
					>
						{/* Grid 1 */}
						<Grid
							item
							xs={12}
							sm={6}
							md={3}
							sx={{
								background: { xs: "#22496033", sm: "none" },
								padding: { xs: 2, sm: 0 },
								borderRadius: { xs: "8px" },
								mb: { xs: 2, sm: 0 },
							}}
						>
							<Typography
								variant="h3"
								color="#52ACDF"
								fontWeight={600}
								fontSize={{
									xs: "40px",
									sm: "60px",
									md: "80px",
								}}
								lineHeight={{
									xs: "48px",
									sm: "80px",
									md: "100px",
								}}
								fontFamily={"Gilory"}
							>
								50+
							</Typography>
							<Typography
								variant="body2"
								color="#FFFFFF"
								fontFamily={"Gilory"}
								fontWeight={400}
								fontSize={{
									xs: "12px",
									sm: "14px",
									md: "16px",
								}}
								lineHeight={"22px"}
							>
								Successful Digital Transformations
							</Typography>
						</Grid>

						{/* Grid 2 */}
						<Grid
							item
							xs={12}
							sm={6}
							md={3}
							sx={{
								background: { xs: "#22496033", sm: "none" },
								padding: { xs: 2, sm: 0 },
								borderRadius: { xs: "8px" },
								mb: { xs: 2, sm: 0 },
							}}
						>
							<Typography
								variant="h3"
								color="#52ACDF"
								fontWeight={600}
								fontSize={{
									xs: "40px",
									sm: "60px",
									md: "80px",
								}}
								lineHeight={{
									xs: "48px",
									sm: "80px",
									md: "100px",
								}}
								fontFamily={"Gilory"}
							>
								100%
							</Typography>
							<Typography
								variant="body2"
								color="#FFFFFF"
								fontFamily={"Gilory"}
								fontWeight={400}
								fontSize={{
									xs: "12px",
									sm: "14px",
									md: "16px",
								}}
								lineHeight={"22px"}
							>
								Client Satisfaction
							</Typography>
						</Grid>

						{/* Grid 3 */}
						<Grid
							item
							xs={12}
							sm={6}
							md={3}
							sx={{
								background: { xs: "#22496033", sm: "none" },
								padding: { xs: 2, sm: 0 },
								borderRadius: { xs: "8px" },
								mb: { xs: 2, sm: 0 },
							}}
						>
							<Typography
								variant="h3"
								color="#52ACDF"
								fontWeight={600}
								fontSize={{
									xs: "40px",
									sm: "60px",
									md: "80px",
								}}
								lineHeight={{
									xs: "48px",
									sm: "80px",
									md: "100px",
								}}
								fontFamily={"Gilory"}
							>
								20+
							</Typography>
							<Typography
								variant="body2"
								color="#FFFFFF"
								fontFamily={"Gilory"}
								fontWeight={400}
								fontSize={{
									xs: "12px",
									sm: "14px",
									md: "16px",
								}}
								lineHeight={"22px"}
							>
								Global Partnerships
							</Typography>
						</Grid>

						{/* Grid 4 */}
						<Grid
							item
							xs={12}
							sm={6}
							md={3}
							sx={{
								background: { xs: "#22496033", sm: "none" },
								padding: { xs: 2, sm: 0 },
								borderRadius: { xs: "8px" },
								mb: { xs: 2, sm: 0 },
							}}
						>
							<Typography
								variant="h3"
								color="#52ACDF"
								fontWeight={600}
								fontSize={{
									xs: "40px",
									sm: "60px",
									md: "80px",
								}}
								lineHeight={{
									xs: "48px",
									sm: "80px",
									md: "100px",
								}}
								fontFamily={"Gilory"}
							>
								10+
							</Typography>
							<Typography
								variant="body2"
								color="#FFFFFF"
								fontFamily={"Gilory"}
								fontWeight={400}
								fontSize={{
									xs: "12px",
									sm: "14px",
									md: "16px",
								}}
								lineHeight={"22px"}
							>
								Years of Innovation
							</Typography>
						</Grid>
					</Grid>
				</Container>
			</Box>

			<Container
				maxWidth="lg"
				sx={{
					textAlign: "center",
					width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
					borderRadius: "12px",
					background: "#22496033",
					py: { xs: 3, md: 4 },
					px: { xs: 2, md: 3 },
					mt: { xs: 6, md: 10 },
				}}
			>
				{/* Welcome Message */}
				<Typography
					variant="h4"
					fontWeight={600}
					fontFamily={"Gilory"}
					fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
					lineHeight={"100%"}
					color="#FFFFFF"
					mt={3}
				>
					Welcome to <span style={{ color: "#52ACDF" }}>DigiEv</span>{" "}
					- Your EV Charging Partner
				</Typography>

				<Typography
					variant="h6"
					mt={1}
					fontWeight={600}
					fontSize={{ xs: "16px", sm: "18px", md: "20px" }}
				>
					Simplifying Electric Vehicle Charging
				</Typography>

				{/* Description */}
				<Typography
					variant="body1"
					mt={2}
					maxWidth="600px"
					mx="auto"
					fontFamily={"Gilory"}
					fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
					fontWeight={400}
					lineHeight={"140%"}
					color="#D9D8D8"
				>
					DigiEv helps EV owners locate, book, and manage their
					charging needs efficiently. With our intuitive platform, you
					can ensure a smooth and hassle-free charging experience.
				</Typography>

				{/* Image Section */}
				<Box mt={5}>
					<img
						src="/tablet-img.png"
						alt="DigiEv Dashboard"
						style={{
							width: "80%",
							maxWidth: "800px",
							borderRadius: "10px",
						}}
					/>
				</Box>

				{/* Features Section */}
				<Grid
					container
					spacing={4}
					justifyContent="center"
					alignItems="center"
					mt={2}
				>
					{features.map((feature, index) => (
						<Grid
							item
							xs={12}
							sm={6}
							md={3}
							key={index}
							sx={{
								textAlign: "center",
								mt: { xs: 0, sm: 0 },
							}}
						>
							<Card
								sx={{
									borderRadius: "18px",
									boxShadow: "0px 4px 30px 0px #0000001A",
									background: {
										lg: "#2A3C47",
										md: "#2A3C47",
										sm: "#2A3C47",
										xs: "none",
									},
									width: { xs: "100%", md: "220px" },
									height: { xs: "auto", md: "200px" },
									display: "flex",
									flexDirection: "column",
									alignItems: "center",
									justifyContent: "center",
									textAlign: "center",
								}}
							>
								<CardContent
									sx={{
										display: "flex",
										flexDirection: "column",
										alignItems: "center",
										justifyContent: "center",
										height: "100%",
										textAlign: "center",
									}}
								>
									<Box
										sx={{
											display: "flex",
											justifyContent: "center",
											alignItems: "center",
											mt: 1,
											mb: 2,
											color: "#D9D8D8",
										}}
									>
										{feature.icon}
									</Box>
									<Typography
										variant="h6"
										sx={{
											color: "#52ACDF",
											fontFamily: "Gilory",
											fontWeight: 600,
											fontSize: {
												xs: "16px",
												md: "18px",
											},
											lineHeight: "160%",
										}}
									>
										{feature.title}
									</Typography>
									<Typography
										variant="body2"
										sx={{
											color: "#D9D8D8",
											fontFamily: "Gilory",
											fontWeight: 400,
											fontSize: {
												xs: "12px",
												md: "14px",
											},
											lineHeight: "140%",
											mt: 1,
										}}
									>
										{feature.description}
									</Typography>
								</CardContent>
							</Card>
						</Grid>
					))}
				</Grid>
			</Container>
			<Typography
				variant="h4"
				fontWeight={700}
				fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
				sx={{
					textAlign: "center",
					width: "100%",

					borderRadius: "16px",

					mt: { xs: 6, md: 10 },
					fontFamily: "Gilory",
				}}
			>
				Key Features
			</Typography>
			<Container
				maxWidth="lg"
				sx={{
					textAlign: "center",
					width: { lg: "100%", md: "90%", sm: "90%" },
					background: {
						xs: "none",
						lg: "#22496033",
						sm: "#22496033",
						md: "#22496033",
					},
					borderRadius: "16px",
					py: { xs: 2, md: 5 },
					px: { xs: 2, md: 3 },
					mt: { xs: 6, md: 5 },
					fontFamily: "Gilory",
				}}
			>
				<Box
					sx={{
						display: "flex",
						flexDirection: { xs: "column", md: "row" },
						justifyContent: "center",
						alignItems: "center",
						position: "relative",
						gap: { xs: 2, md: 4 },
					}}
				>
					<img
						src="/iMockup - iPhone.png"
						alt="iMockup - iPhone"
						style={{
							width: "50%",
							maxWidth: "500px",
							borderRadius: "10px",
						}}
					/>
					<Box
						sx={{
							position: "absolute",
							width: "100%",
							height: "100%",
							pointerEvents: "none",
							display: {
								xs: "none",
								sm: "block",
								md: "block",
								lg: "block",
							},
						}}
					>
						{/* Top Left */}
						<Box
							sx={{
								position: "absolute",
								top: {
									sm: "5%",
									md: "6%",
									lg: "5%",
								},
								left: {
									sm: "2%",
									md: "2%",
									lg: "5%",
								},
								transform: {
									md: "translate(-10%, -10%)",
									lg: "translate(-5%, -5%)",
								},
								maxWidth: {
									sm: "140px",
									md: "200px",
									lg: "200px",
								},
								display: {
									xs: "none",
									sm: "block",
									md: "block",
									lg: "block",
								},
								textAlign: "left",
							}}
						>
							<img
								src="/vector-arrows.png"
								alt="Arrow"
								style={{
									position: "absolute",
									width: "60px",
									height: "50px",
									top: "100%",
									left: "160%",
									transform:
										"translate(-50%, -50%) rotate(-20deg)",
								}}
							/>
							<Typography
								variant="h6"
								fontWeight={400}
								color="#FFFFFF"
								fontSize={{
									sm: "13px",
									md: "18px",
									lg: "20px",
								}}
								lineHeight="30px"
							>
								Seamless Navigation
							</Typography>
							<Typography
								variant="body2"
								color="#D9D8D8"
								fontSize={{
									sm: "10px",
									md: "14px",
									lg: "14px",
								}}
							>
								Effortlessly locate and access EV charging
								stations with our intuitive map integration.
							</Typography>
						</Box>

						{/* Top Right */}
						<Box
							sx={{
								position: "absolute",
								top: {
									sm: "1%",
									md: "6%",
									lg: "5%",
								},
								right: {
									sm: "1%",
									md: "3%",
									lg: "5%",
								},
								transform: {
									md: "translate(10%, -10%)",
									lg: "translate(5%, -5%)",
								},
								maxWidth: {
									sm: "180px",
									md: "200px",
									lg: "200px",
								},
								textAlign: "right",
								display: {
									xs: "none",
									sm: "block",
									md: "block",
									lg: "block",
								},
							}}
						>
							<img
								src="/arrow-top-right.png"
								alt="Arrow"
								style={{
									position: "absolute",
									width: "100px",
									height: "90px",
									top: "135%",
									right: "90%",
									transform:
										"translate(50%, -50%) rotate(9deg)",
								}}
							/>
							<Typography
								variant="h6"
								fontWeight={400}
								color="#FFFFFF"
								fontSize={{
									sm: "13px",
									md: "18px",
									lg: "20px",
								}}
								lineHeight="30px"
							>
								Live Availability
							</Typography>
							<Typography
								variant="body2"
								color="#D9D8D8"
								fontSize={{
									sm: "10px",
									md: "14px",
									lg: "14px",
								}}
							>
								View real-time charger availability to plan your
								trips efficiently.
							</Typography>
						</Box>

						{/* Bottom Left */}
						<Box
							sx={{
								position: "absolute",
								bottom: {
									sm: "2%",
									md: "6%",
									lg: "5%",
								},
								left: {
									sm: "2%",
									md: "3%",
									lg: "5%",
								},
								transform: {
									md: "translate(-18%, 10%)",
									lg: "translate(-5%, 5%)",
								},
								maxWidth: {
									sm: "120px",
									md: "200px",
									lg: "200px",
								},
								display: {
									xs: "none",
									sm: "block",
									md: "block",
									lg: "block",
								},
								textAlign: "left",
							}}
						>
							<img
								src="/left-bottom-arrow.png"
								alt="Arrow"
								style={{
									position: "absolute",
									width: "53px",
									height: "60px",
									bottom: "80%",
									left: "125%",
									transform:
										"translate(-50%, 50%) rotate(25deg)",
								}}
							/>
							<Typography
								variant="h6"
								fontWeight={400}
								color="#FFFFFF"
								fontSize={{
									sm: "13px",
									md: "18px",
									lg: "20px",
								}}
							>
								Smart Recommendations
							</Typography>
							<Typography
								variant="body2"
								color="#D9D8D8"
								fontSize={{
									sm: "10px",
									md: "14px",
									lg: "14px",
								}}
							>
								Get personalized station suggestions based on
								your location and usage patterns.
							</Typography>
						</Box>

						{/* Bottom Right */}
						<Box
							sx={{
								position: "absolute",
								bottom: {
									sm: "5%",
									md: "6%",
									lg: "5%",
								},
								right: {
									sm: "2%",
									md: "3%",
									lg: "5%",
								},
								transform: {
									md: "translate(10%, 10%)",
									lg: "translate(5%, 5%)",
								},
								maxWidth: {
									sm: "180px",
									md: "200px",
									lg: "200px",
								},
								textAlign: "right",
								display: {
									xs: "none",
									sm: "block",
									md: "block",
									lg: "block",
								},
							}}
						>
							<img
								src="/vector-arrows.png"
								alt="Arrow"
								style={{
									position: "absolute",
									width: "60px",
									height: "50px",
									bottom: "100%",
									right: "140%",
									transform:
										"translate(50%, 50%) rotate(-200deg)",
								}}
							/>
							<Typography
								variant="h6"
								fontWeight={400}
								color="#FFFFFF"
								fontSize={{
									sm: "13px",
									md: "18px",
									lg: "20px",
								}}
								lineHeight="30px"
							>
								Secure Payments
							</Typography>
							<Typography
								variant="body2"
								color="#D9D8D8"
								fontSize={{
									sm: "10px",
									md: "14px",
									lg: "14px",
								}}
							>
								Make hassle-free transactions with our secure
								payment gateway.
							</Typography>
						</Box>
					</Box>
					<Box
						sx={{
							display: { xs: "grid", sm: "none" },
							gridTemplateColumns: "1fr", // Column-wise layout
							gap: 2,
							mt: 4,
							width: "100%",
						}}
					>
						{/* Card 1 */}
						<Box
							sx={{
								background: "#151D21",
								boxShadow: "0px 0px 16px 0px #00000014",
								width: "358px",
								height: "100px",
								padding: "20px",
								borderRadius: "4px",
							}}
						>
							<Typography
								variant="h6"
								fontWeight={500}
								fontSize="20px"
								color="#52ACDF"
								lineHeight={"100%"}
								mt={2}
								textAlign={"left"}
							>
								Seamless Navigation
							</Typography>
							<Typography
								variant="body2"
								fontSize="14px"
								fontWeight={400}
								color="#D9D8D8"
								mt={2}
								textAlign={"left"}
							>
								Effortlessly locate and access EV charging
								stations with our intuitive map integration.
							</Typography>
						</Box>

						{/* Card 2 */}
						<Box
							sx={{
								background: "#151D21",
								boxShadow: "0px 0px 16px 0px #00000014",
								width: "358px",
								height: "100px",
								padding: "20px",
								borderRadius: "4px",
							}}
						>
							<Typography
								variant="h6"
								fontWeight={500}
								fontSize="20px"
								color="#52ACDF"
								lineHeight={"100%"}
								mt={2}
								textAlign={"left"}
							>
								Live Availability
							</Typography>
							<Typography
								variant="body2"
								fontSize="14px"
								fontWeight={400}
								color="#D9D8D8"
								mt={2}
								textAlign={"left"}
							>
								View real-time charger availability to plan your
								trips efficiently.
							</Typography>
						</Box>

						{/* Card 3 */}
						<Box
							sx={{
								background: "#151D21",
								boxShadow: "0px 0px 16px 0px #00000014",
								width: "358px",
								height: "100px",
								padding: "20px",
								borderRadius: "4px",
							}}
						>
							<Typography
								variant="h6"
								fontWeight={500}
								fontSize="20px"
								color="#52ACDF"
								lineHeight={"100%"}
								mt={2}
								textAlign={"left"}
							>
								Smart Recommendations
							</Typography>
							<Typography
								variant="body2"
								fontSize="14px"
								fontWeight={400}
								color="#D9D8D8"
								mt={2}
								textAlign={"left"}
							>
								Get personalized station suggestions based on
								your location and usage patterns.
							</Typography>
						</Box>

						{/* Card 4 */}
						<Box
							sx={{
								background: "#151D21",
								boxShadow: "0px 0px 16px 0px #00000014",
								width: "358px",
								height: "100px",
								padding: "20px",
								borderRadius: "4px",
							}}
						>
							<Typography
								variant="h6"
								fontWeight={500}
								fontSize="20px"
								color="#52ACDF"
								lineHeight={"100%"}
								mt={2}
								textAlign={"left"}
							>
								Secure Payments
							</Typography>
							<Typography
								variant="body2"
								fontSize="14px"
								fontWeight={400}
								color="#D9D8D8"
								mt={2}
								textAlign={"left"}
							>
								Make hassle-free transactions with our secure
								payment gateway.
							</Typography>
						</Box>
					</Box>
				</Box>
			</Container>

			{/* Footer */}
			<Container
				maxWidth="lg"
				sx={{
					textAlign: "center",
					width: { lg: "100%", md: "90%", sm: "90%" },
					background: {
						lg: `linear-gradient(0deg, rgba(34, 73, 96, 0.2), rgba(34, 73, 96, 0.2)),
                      linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%)`,
						xs: "none",
						sm: `linear-gradient(0deg, rgba(34, 73, 96, 0.2), rgba(34, 73, 96, 0.2)),
                      linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%)`,
						md: `linear-gradient(0deg, rgba(34, 73, 96, 0.2), rgba(34, 73, 96, 0.2)),
                      linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%)`,
					},
					py: { xs: 3, sm: 4, md: 5 },
					px: { xs: 2, sm: 3, md: 4 },
					mt: { xs: 6, sm: 8, md: 10 },
					// height: { xs: "auto", lg: "261px", sm: "208px" },
					fontFamily: "Gilory",
					borderRadius: "12px",
				}}
			>
				<Box
					sx={{
						textAlign: "center",
						py: 2,
						px: 2,
						mt: 0,
					}}
				>
					<Box
						sx={{
							display: { lg: "flex", sm: "block", md: "flex" },
							flexDirection: {
								xs: "column",
								sm: "row",
								lg: "row",
							},
							alignItems: "center",
							justifyContent: "space-between",
							gap: { xs: 2, sm: 3 },
							position: "relative",
							mt: { md: 0 },
						}}
					>
						{/* Image Container to Ensure Images Stay Fixed */}
						<Box
							sx={{
								position: "relative",
								display: {
									lg: "inline-block",
									md: "inline-block",
									sm: "none",
								},
								width: { sm: "80px", md: "50x" },
								height: { sm: "80px", md: "50x" },
								mt: { md: 0 },
								zIndex: 1,
							}}
						>
							<img
								src="/developer.png"
								alt="developer"
								style={{
									width: "100%",
									height: "100%",
									position: "absolute",
								}}
							/>
						</Box>

						{/* Text */}
						<Typography
							fontFamily={"Gilory"}
							fontWeight={500}
							fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
							lineHeight={"130%"}
							color="#FFFFFF"
							sx={{
								mt: { xs: 2, sm: 0 },
								zIndex: 3,
							}}
						>
							Get your application developed by our certified
							experts today!
						</Typography>

						{/* Button */}
						<Button
							sx={{
								backgroundColor: "#52ACDF",
								color: "white",
								borderRadius: "8px",
								width: {
									xs: "121px",
									sm: "140px",
									lg: "182px",
									md: "200px",
								},
								height: {
									xs: "42px",
									sm: "34px",
									lg: "54px",
									md: "44px",
								},
								fontFamily: "Gilory",
								textTransform: "none",
								fontWeight: 500,
								fontSize: {
									xs: "14px",
									sm: "16px",
									md: "18px",
								},
								lineHeight: "100%",
								padding: { xs: "10px", sm: "16px" },
								"&:hover": { backgroundColor: "#439BC1" },
								mt: { xs: 2, sm: 2 },
							}}
						>
							Schedule a Call
						</Button>
					</Box>
				</Box>
			</Container>

			<Container
				maxWidth="lg"
				sx={{
					textAlign: "center",
					width: { lg: "100%", xs: "90%" },
					background: {
						lg: "#22496033",
						md: "none",
						xs: "#151D21",
						sm: "none",
					},
					py: { xs: 3, sm: 4, md: 5 },
					px: { xs: 2, sm: 3, md: 4 },
					mt: { xs: 6, sm: 8, md: 10 },
					mb: { xs: 6, sm: 8, md: 10 },
					fontFamily: "Gilory",
					height: "auto",
					borderRadius: { xs: "8px", lg: "12px" },
				}}
			>
				<Box
					sx={{
						textAlign: "center",
						py: 4,
						px: 3,
						mt: 2,
						fontFamily: "Gilory",
					}}
				>
					<Typography
						variant="h5"
						fontWeight={600}
						fontFamily={"Gilory"}
						fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
						lineHeight={"120%"}
					>
						Your{" "}
						<span style={{ color: "#52ACDF" }}>
							Perfect Experience
						</span>
						, Just a Tap Away!
					</Typography>

					<Typography
						variant="body2"
						sx={{
							my: { xs: 2, sm: 3 },
							fontFamily: "Gilory",
							fontWeight: 400,
							fontSize: { xs: "14px", sm: "18px", md: "20px" },
							color: "#FFFFFF",
						}}
					>
						Discover the smartest way to charge your electric
						vehicle. DigiEV's cutting-edge platform empowers you
						with effortless access to EV charging stations,
						real-time availability updates, and powerful tools to
						plan your journey. Make every drive electric, efficient,
						and extraordinary.
					</Typography>

					<Box
						sx={{
							display: "flex",
							flexDirection: { xs: "column", sm: "row" },
							justifyContent: "center",
							gap: { xs: 2, sm: 4 },
							mt: { xs: 2, sm: 3 },
						}}
					>
						<img
							src="/google_play.png"
							alt="Google Play"
							style={{
								width: { xs: "100px", sm: "120px" },
							}}
						/>

						<img
							src="/apple_store.png"
							alt="App Store"
							sx={{
								width: { xs: "100px", sm: "120px" }, // Responsive width values
							}}
						/>
					</Box>
				</Box>
			</Container>
		</Box>
	);
};

export default LandingPage;
