'use client';

import Image from 'next/image';
import {
  Facebook,
  Twitter,
  Instagram,
  Linkedin,
  Youtube,
  Phone,
  Mail,
  MapPin,
} from 'lucide-react';
import Link from 'next/link';

// TikTok SVG component (since Lucide doesn't support it)
const TikTokIcon = ({ className = 'w-5 h-5' }) => (
  <svg
    className={className}
    fill="currentColor"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <path d="M12.1 2c.2 1.7 1.6 3 3.3 3.1.2 0 .4 0 .6-.1v2.3c-1.6-.1-3.2-.7-4.5-1.7v7.8c0 2.1-1.8 3.8-3.9 3.6C5.6 17 4 15.2 4 13.2c0-2 1.5-3.6 3.4-3.8.4 0 .7 0 1 .1v2.3c-.2 0-.5 0-.7.1-1 .3-1.5 1.4-1.1 2.4.3.9 1.2 1.4 2.1 1.2.8-.1 1.4-.8 1.4-1.6V2h2z" />
  </svg>
);

export default function Footer() {
  return (
    <footer className="bg-[#1F2A37] text-white py-12 px-6 md:px-16">
      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
        {/* Logo & Description */}
        <div>
          <div className="flex items-center space-x-2 mb-4">
            <Image
              src="/images/logo.png"
              alt="Med Bridge Afrik Logo"
              width={30}
              height={30}
              className="rounded-md"
            />
            <h2 className="text-xl font-semibold">Med Bridge Afrik</h2>
          </div>
          <p className="text-sm text-gray-300">
            Connecting Africa to quality healthcare through innovative virtual
            consultations and digital health solutions.
          </p>
          <div className="flex space-x-4 mt-4 text-gray-300">
            <Link target="_blank" href="https://web.facebook.com/profile.php?id=61577641052637">
              <Facebook className="w-5 h-5 hover:text-white" />
            </Link>
            <Link target="_blank" href="https://x.com/medbridgeafrik">
              <Twitter className="w-5 h-5 hover:text-white" />
            </Link>
            <Link target="_blank" href="https://www.instagram.com/medbridgeafrik_234">
              <Instagram className="w-5 h-5 hover:text-white" />
            </Link>
            <Link target="_blank" href="https://www.linkedin.com/company/med-bridge-afrik">
              <Linkedin className="w-5 h-5 hover:text-white" />
            </Link>
            <Link target="_blank" href="https://www.tiktok.com/@medbridgeafrik">
              <TikTokIcon className="w-5 h-5 hover:text-white" />
            </Link>
            <Link target="_blank" href="https://www.youtube.com/@MedbridgeAfrik">
              <Youtube className="w-5 h-5 hover:text-white" />
            </Link>
          </div>
        </div>

        {/* Quick Links */}
        <div>
          <h3 className="font-semibold mb-4">Quick Links</h3>
          <ul className="space-y-2 text-sm text-gray-300">
            <li><Link href="/services">Services</Link></li>
            <li><Link href="/about">About Us</Link></li>
            <li><Link href="/contact">Contact</Link></li>
          </ul>
        </div>

        {/* For Users */}
        <div>
          <h3 className="font-semibold mb-4">For Users</h3>
          <ul className="space-y-2 text-sm text-gray-300">
            <li><Link href="/login">Patient Portal</Link></li>
            <li><Link href="/login">Doctor Portal</Link></li>
            <li><Link href="/login">Book Appointment</Link></li>
            <li><Link href="/login">Emergency Care</Link></li>
          </ul>
        </div>

        {/* Contact Info */}
        <div>
          <h3 className="font-semibold mb-4">Contact Info</h3>
          <ul className="space-y-3 text-sm text-gray-300">
            <li className="flex items-start">
              <Phone className="w-4 h-4 mt-1 mr-2" />
              +234 915 772 9328
            </li>
            <li className="flex items-start">
              <Mail className="w-4 h-4 mt-1 mr-2" />
              contact@medbridgeafrik.com
            </li>
            <li className="flex items-start">
              <MapPin className="w-4 h-4 mt-1 mr-2" />
              Lagos <br /> Nigeria, West Africa
            </li>
          </ul>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="mt-12 border-t border-gray-700 pt-6 text-sm flex flex-col md:flex-row justify-between items-center text-gray-400">
        <p>© 2024 Med Bridge Afrik. All rights reserved.</p>
        <div className="flex flex-wrap justify-center md:justify-end gap-4 mt-4 md:mt-0">
          <Link target="_blank" href="/privacy">Privacy Policy</Link>
          <Link target="_blank" href="/terms">Terms of Service</Link>
          {/* <Link target="_blank" href="/termsdoctors">Terms of Service Doctors</Link>
          <Link target="_blank" href="/termslabpharmacy">Terms of Service Labs & Pharmacy</Link> */}
        </div>
      </div>
    </footer>
  );
}
