import Image from "next/image";
import Link from "next/link";
import { Mail, MapPin, MessageCircle } from "lucide-react";
import type { Dictionary, Locale } from "@/content/types";
import { siteConfig } from "@/lib/site-config";
import { FacebookIcon, InstagramIcon, LinkedinIcon } from "@/components/ui/SocialIcons";

export function Footer({ dict, locale }: { dict: Dictionary; locale: Locale }) {
  const year = new Date().getFullYear();

  const navItems = [
    { href: `/${locale}#about`, label: dict.nav.about },
    { href: `/${locale}#destinations`, label: dict.nav.destinations },
    { href: `/${locale}/offers`, label: dict.nav.offers },
    { href: `/${locale}/gallery`, label: dict.nav.gallery },
    { href: `/${locale}#contact`, label: dict.nav.contact },
  ];

  return (
    <footer id="contact" className="bg-charcoal-950 text-white/80">
      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid gap-12 md:grid-cols-3">
          <div className="flex flex-col gap-4">
            <Image
              src="/logo/full-logo-white.png"
              alt="Visit Chinguitti — Experience Mauritania"
              width={2000}
              height={467}
              className="h-auto w-full max-w-[320px] sm:max-w-[420px]"
            />
            <p className="max-w-xs text-sm leading-relaxed text-white/60">{dict.footer.tagline}</p>
          </div>

          <div className="flex flex-col gap-3">
            <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-gold-300">
              {dict.contact.eyebrow}
            </h3>
            <nav className="flex flex-col gap-2">
              {navItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="text-sm text-white/70 transition-colors hover:text-white"
                >
                  {item.label}
                </Link>
              ))}
            </nav>
          </div>

          <div className="flex flex-col gap-3">
            <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-gold-300">
              {dict.contact.title}
            </h3>
            <div className="flex flex-col gap-2 text-sm text-white/70">
              <span className="flex items-center gap-2">
                <MapPin size={16} className="text-gold-400" /> {dict.contact.address}
              </span>
              <a href={`mailto:${siteConfig.email}`} className="flex items-center gap-2 hover:text-white">
                <Mail size={16} className="text-gold-400" /> {siteConfig.email}
              </a>
              <a
                href={`https://wa.me/${siteConfig.whatsapp.replace(/[^0-9]/g, "")}`}
                className="flex items-center gap-2 hover:text-white"
              >
                <MessageCircle size={16} className="text-gold-400" /> {siteConfig.whatsapp}
              </a>
            </div>
            <div className="mt-2 flex items-center gap-4">
              <a href={siteConfig.social.instagram} aria-label="Instagram" className="hover:text-gold-300">
                <InstagramIcon width={20} height={20} />
              </a>
              <a href={siteConfig.social.facebook} aria-label="Facebook" className="hover:text-gold-300">
                <FacebookIcon width={20} height={20} />
              </a>
              <a href={siteConfig.social.linkedin} aria-label="LinkedIn" className="hover:text-gold-300">
                <LinkedinIcon width={20} height={20} />
              </a>
            </div>
          </div>
        </div>

        <div className="mt-12 border-t border-white/10 pt-6 text-center text-xs text-white/40">
          © {year} {siteConfig.name}. {dict.footer.rights}
        </div>
      </div>
    </footer>
  );
}