import Link from "next/link";
import {BiLogoFacebook} from "react-icons/bi";
import {BsInstagram, BsTwitter} from "react-icons/bs";

export default function Footer() {
	return (
		<>
			<section className="w-full py-10 px-8 md:px-28 bg-mti-gray-seasalt flex flex-col md:flex-row md:justify-between gap-8">
				<div className="flex flex-col gap-4">
					<span className="font-bold text-xl">Navigation</span>
					<div className="flex flex-col gap-2">
						<Link href="/about">Why us</Link>
						<Link href="/about">Capabilities</Link>
						<Link href="/about">Expertise</Link>
						<Link href="/about">History</Link>
						<Link href="/about">Contact</Link>
					</div>
				</div>
				<div className="flex flex-col gap-4">
					<span className="font-bold text-xl">Services</span>
					<div className="flex flex-col gap-2">
						<Link href="#benefits">EnCoach benefits</Link>
						<Link href="#testimonials">Student testimonials</Link>
					</div>
				</div>
				<div className="flex flex-col gap-4">
					<span className="font-bold text-xl">About</span>
					<div className="flex flex-col gap-2">
						<Link href="/terms">Terms and Conditions</Link>
						<Link href="/privacy-policy">Privacy Policy</Link>
						<Link href="/about">About</Link>
					</div>
				</div>
				<div className="flex flex-col gap-4">
					<span className="font-bold text-xl">Get in Touch</span>
					<div className="flex flex-col gap-4">
						<span className="max-w-[280px]">
							Stay connected with us and know the latest updates about our services through various social media
						</span>
						<div className="flex gap-6 items-center">
							<Link
								href="https://facebook.com"
								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
								<BiLogoFacebook className="w-6 h-6" />
							</Link>
							<Link
								href="https://twitter.com"
								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
								<BsTwitter className="w-5 h-5" />
							</Link>
							<Link
								href="https://instagram.com"
								className="bg-mti-purple-ultralight rounded-full w-10 h-10 flex items-center justify-center hover:bg-mti-purple-dark text-mti-purple-light hover:text-white transition ease-in-out duration-300">
								<BsInstagram className="w-5 h-5" />
							</Link>
						</div>
					</div>
				</div>
			</section>

			<footer className="w-full py-10 bg-mti-rose-light text-white flex items-center justify-center">© EnCoach 2023 all rights reserved</footer>
		</>
	);
}
