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

export default function Footer() {
  return (
    <footer className="bg-[#16424b] text-white pt-12 pb-4 px-6 mt-12">
      <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>
  );
}