import * as React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import IconButton from "@mui/material/IconButton";
import Link from "@mui/material/Link";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { FaFacebook, FaLinkedin, FaGithub, FaTwitter, FaEnvelope } from "react-icons/fa";

function Copyright() {
	return (
		<Typography sx={{ color: "text.secondary", mt: 1 }}>
			{"Copyright © "}
			<Link
				color="text.secondary"
				href="https://prism.uprock.com/"
			>
				UpRock
			</Link>
			&nbsp;
			{new Date().getFullYear()}
		</Typography>
	);
}

export default function Footer() {
	return (
		<Container
			sx={{
				display: "flex",
				flexDirection: "column",
				alignItems: "center",
				gap: { xs: 4, sm: 8 },
				py: { xs: 24, sm: 24 },
				px: { xs: 12, sm: 12 },
				textAlign: { sm: "center", md: "left" },
			}}
		>
			<Box
				sx={{
					display: "flex",
					justifyContent: "space-between",
					pt: { xs: 4, sm: 8 },
					width: "100%",
					borderColor: "divider",
				}}
			>
				<div>
					<Link
						color="text.secondary"
						href="https://uprock.com/privacy-policy"
					>
						Privacy Policy
					</Link>
					<Typography sx={{ display: "inline", mx: 0.5, opacity: 0.5 }}>
						&nbsp;•&nbsp;
					</Typography>
					<Link
						color="text.secondary"
						href="https://uprock.com/terms-of-use"
					>
						Terms of Service
					</Link>
					<Copyright />
				</div>
				<Stack
					direction="row"
					spacing={1}
					useFlexGap
					sx={{ justifyContent: "left", color: "text.secondary" }}
				>
					<IconButton
						color="inherit"
						size="small"
						href="mailto:prism@uprock.com?subject=Interested%20in%20UpRock%20Prism"
						aria-label="Contact Us"
						sx={{ alignSelf: "center" }}
					>
						<FaEnvelope />
					</IconButton>
					<IconButton
						color="inherit"
						size="small"
						href="https://facebook.com/uprockcom"
						aria-label="Facebook"
						sx={{ alignSelf: "center" }}
					>
						<FaFacebook />
					</IconButton>
					<IconButton
						color="inherit"
						size="small"
						href="https://x.com/uprockcom"
						aria-label="X"
						sx={{ alignSelf: "center" }}
					>
						<FaTwitter />
					</IconButton>
					<IconButton
						color="inherit"
						size="small"
						href="https://www.linkedin.com/company/uprock/"
						aria-label="LinkedIn"
						sx={{ alignSelf: "center" }}
					>
						<FaLinkedin />
					</IconButton>
					<IconButton
						color="inherit"
						size="small"
						href="https://github.com/uprockcom"
						aria-label="GitHub"
						sx={{ alignSelf: "center" }}
					>
						<FaGithub />
					</IconButton>
				</Stack>
			</Box>

			<Box
				sx={{
					display: "flex",
					flexDirection: "column",
					alignItems: "center",
					mt: 4,
				}}
			>
				<Typography
					variant="h2"
					sx={{ color: "text.secondary" }}
				>
					Made with ❤️ by&nbsp;
					<Link
						href="https://uprock.com"
						color="inherit"
						sx={{ mx: 0.5 }}
					>
						UpRock&nbsp;
					</Link>
					&&nbsp;
					<Link
						href="https://bluewavelabs.ca"
						color="inherit"
						sx={{ mx: 0.5 }}
					>
						Bluewave Labs
					</Link>
				</Typography>
				<Box
					sx={{
						display: "flex",
						alignItems: "center",
						mt: 2,
					}}
				>
					<Typography
						variant="h2"
						sx={{ color: "text.secondary", mr: 1 }}
					>
						Built on&nbsp;
					</Typography>
					<svg
						id="Layer_1"
						xmlns="http://www.w3.org/2000/svg"
						xmlnsXlink="http://www.w3.org/1999/xlink"
						x="0px"
						y="0px"
						viewBox="0 0 397.7 311.7"
						xmlSpace="preserve"
						width="15"
						height="15"
					>
						<style type="text/css">
							{`.st0{fill:url(#SVGID_1_);}
                .st1{fill:url(#SVGID_2_);}
                .st2{fill:url(#SVGID_3_);}`}
						</style>
						<linearGradient
							id="SVGID_1_"
							gradientUnits="userSpaceOnUse"
							x1="360.8791"
							y1="351.4553"
							x2="141.213"
							y2="-69.2936"
							gradientTransform="matrix(1 0 0 -1 0 314)"
						>
							<stop
								offset="0"
								style={{ stopColor: "rgb(0, 255, 163)" }}
							/>
							<stop
								offset="1"
								style={{ stopColor: "rgb(220, 31, 255)" }}
							/>
						</linearGradient>
						<path
							className="st0"
							d="M64.6,237.9c2.4-2.4,5.7-3.8,9.2-3.8h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,237.9z"
						/>
						<linearGradient
							id="SVGID_2_"
							gradientUnits="userSpaceOnUse"
							x1="264.8291"
							y1="401.6014"
							x2="45.163"
							y2="-19.1475"
							gradientTransform="matrix(1 0 0 -1 0 314)"
						>
							<stop
								offset="0"
								style={{ stopColor: "rgb(0, 255, 163)" }}
							/>
							<stop
								offset="1"
								style={{ stopColor: "rgb(220, 31, 255)" }}
							/>
						</linearGradient>
						<path
							className="st1"
							d="M64.6,3.8C67.1,1.4,70.4,0,73.8,0h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,3.8z"
						/>
						<linearGradient
							id="SVGID_3_"
							gradientUnits="userSpaceOnUse"
							x1="312.5484"
							y1="376.688"
							x2="92.8822"
							y2="-44.061"
							gradientTransform="matrix(1 0 0 -1 0 314)"
						>
							<stop
								offset="0"
								style={{ stopColor: "rgb(0, 255, 163)" }}
							/>
							<stop
								offset="1"
								style={{ stopColor: "rgb(220, 31, 255)" }}
							/>
						</linearGradient>
						<path
							className="st2"
							d="M333.1,120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8,0-8.7,7-4.6,11.1l62.7,62.7c2.4,2.4,5.7,3.8,9.2,3.8h317.4 c5.8,0,8.7-7,4.6-11.1L333.1,120.1z"
						/>
					</svg>
					<Typography
						variant="h2"
						sx={{ color: "text.secondary", ml: 1 }}
					>
						&nbsp;Solana
					</Typography>
				</Box>
			</Box>
		</Container>
	);
}