import Link from "next/link";
import Logo from "@/components/ui/Logo";
import { Phone, Mail, MapPin } from "lucide-react";

interface Settings {
  phone?: string;
  email?: string;
  address?: string;
}

export default function Footer({ settings }: { settings: Settings }) {
  return (
    <footer className="bg-slate-900 text-slate-300 pt-12 pb-6">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-10">
          {/* Brand */}
          <div className="lg:col-span-1">
            <div className="mb-4">
              <Logo />
            </div>
            <p className="text-sm text-slate-400 mb-4 leading-relaxed">
              Bangladesh&apos;s most trusted medical tourism platform. Helping patients access affordable, quality treatment abroad.
            </p>
            <div className="space-y-2">
              {settings.phone && (
                <a href={`tel:${settings.phone}`} className="flex items-center gap-2 text-sm hover:text-white transition-colors">
                  <Phone className="w-3.5 h-3.5 text-green-500" />
                  {settings.phone}
                </a>
              )}
              {settings.email && (
                <a href={`mailto:${settings.email}`} className="flex items-center gap-2 text-sm hover:text-white transition-colors">
                  <Mail className="w-3.5 h-3.5 text-green-500" />
                  {settings.email}
                </a>
              )}
              {settings.address && (
                <p className="flex items-center gap-2 text-sm">
                  <MapPin className="w-3.5 h-3.5 text-green-500" />
                  {settings.address}
                </p>
              )}
            </div>
          </div>

          {/* Treatments */}
          <div>
            <h3 className="text-white font-semibold mb-4 text-sm">Treatments</h3>
            <ul className="space-y-2 text-sm">
              {["Kidney Transplant", "Liver Transplant", "Cardiac Surgery", "Cancer Care", "Orthopedics", "IVF & Fertility"].map((t) => (
                <li key={t}>
                  <Link href={`/treatments/${t.toLowerCase().replace(/ /g, "-")}`} className="hover:text-white transition-colors">
                    {t}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Destinations */}
          <div>
            <h3 className="text-white font-semibold mb-4 text-sm">Destinations</h3>
            <ul className="space-y-2 text-sm">
              {["India", "Thailand", "Singapore", "Turkey", "Germany", "Malaysia"].map((d) => (
                <li key={d}>
                  <Link href={`/hospitals?country=${d}`} className="hover:text-white transition-colors">
                    {d}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Company */}
          <div>
            <h3 className="text-white font-semibold mb-4 text-sm">Company</h3>
            <ul className="space-y-2 text-sm">
              {["About Us", "Patient Journey", "Success Stories", "Blog", "Privacy Policy", "Terms of Service"].map((l) => (
                <li key={l}>
                  <Link href={`/${l.toLowerCase().replace(/ /g, "-")}`} className="hover:text-white transition-colors">
                    {l}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="border-t border-slate-800 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
          <p className="text-xs text-slate-500">
            © {new Date().getFullYear()} MediTransplant. All rights reserved.
          </p>
          <div className="flex items-center gap-3 text-xs text-slate-500">
            <span className="flex items-center gap-1">
              <span className="w-2 h-2 bg-green-500 rounded-full" />
              ISO Certified Partner Hospitals
            </span>
            <span>•</span>
            <span>24/7 Patient Support</span>
          </div>
        </div>
      </div>
    </footer>
  );
}