// components/Footer.tsx
import Link from "next/link";
import { FaFacebook, FaLinkedin, FaTwitter, FaYoutube } from "react-icons/fa";

export default function Footer() {
	return (
		<footer className="bg-[#16424b] text-white pt-12 pb-4 px-6 mt-12 z-0">
			<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-8">
				{/* Useful Links */}
				<div className="min-w-[200px] mb-8 md:mb-0 flex-1">
					<h3 className="font-bold underline text-lg mb-3">Useful links</h3>
					<ul className="space-y-2">
						<li>
							<Link
								href="https://www.gov.uk/guidance/extreme-weather-and-natural-hazards"
								className="hover:underline"
								target="_blank"
								rel="noopener noreferrer"
							>
								Gov.UK guidance
							</Link>
						</li>
						<li>
							<Link href="https://www.dysoninstitute.ac.uk/about-us/governance/privacy-notices/" className="hover:underline">
								Privacy policy
							</Link>
						</li>
						<li>
							<Link href="https://privacy.dyson.com/en/globalcookiepolicy.aspx" className="hover:underline">
								Cookies policy
							</Link>
						</li>
					</ul>
				</div>
				{/* Donate Section */}
				<div className="min-w-[220px] mb-8 md:mb-0 flex-1">
					<h3 className="font-bold underline text-lg mb-3">Donate</h3>
					<p className="mb-4">
						We are a nonprofit entirely funded by your donations, every penny helps provide life saving information.
					</p>
					<Link
						href="#"
						className="bg-gray-200 hover:bg-blue-600 hover:text-white text-black font-bold rounded-full px-8 py-2 shadow transition-colors duration-200 inline-block text-center"
					>
						Donate Now
					</Link>
				</div>
			</div>
			{/* Bottom bar */}
			<div className="max-w-6xl mx-auto mt-8 pt-6 flex flex-col md:flex-row items-center justify-between border-t border-gray-200/30">
				{/* Bottom left: Copyright */}
				<span className="text-sm flex items-center">
					<span className="mr-2">&#169;</span> TremorTracker 2025
				</span>
				{/* Bottom right: Social icons */}
				<div className="flex flex-col items-end">
					<span className="text-sm mb-2">Follow us on</span>
					<div className="flex space-x-3">
						{/* Replace src with your icon URLs, or use next/image if preferred */}
						<a href="#" target="_blank" rel="noopener noreferrer">
							<img src="instagram.png" alt="instagram" className="h-7 w-7 rounded-full shadow" />
						</a>
						<a href="#" target="_blank" rel="noopener noreferrer">
							<img src="linkedin.png" alt="linkedin" className="h-7 w-7 rounded-full shadow" />
						</a>
						<a href="#" target="_blank" rel="noopener noreferrer">
							<img src="x_logo.jpg" alt="X" className="h-7 w-7 rounded-full shadow" />
						</a>
					</div>
				</div>
			</div>
		</footer>
	);
}