import { Link } from "wouter";
import { Mail, Phone, MapPin, MessageCircle, Instagram, Linkedin, Facebook, Cookie } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";

const LOGO_URL = "/images/kHSmOkFIzSbmDqbQ.png";

export default function Footer() {
  const currentYear = new Date().getFullYear();
  const { t, lang } = useLanguage();

  return (
    <footer className="bg-navy-light text-white">
      <div className="container py-12 lg:py-16">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
          {/* Brand */}
          <div className="lg:col-span-1">
            <img src={LOGO_URL} alt="Alzar FZE" className="h-12 w-auto mb-4" />
            <p className="text-white/50 text-sm leading-relaxed mb-4">
              {t("footer.desc")}
            </p>
            {/* Social Media Links */}
            <div className="flex items-center gap-3 mt-4">
              <a
                href="https://www.linkedin.com/company/alzar-fze/about/"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-lg bg-white/10 hover:bg-teal flex items-center justify-center transition-colors"
                aria-label="LinkedIn"
              >
                <Linkedin className="w-4 h-4" />
              </a>
              <a
                href="https://www.instagram.com/alzar.fze/"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-lg bg-white/10 hover:bg-teal flex items-center justify-center transition-colors"
                aria-label="Instagram"
              >
                <Instagram className="w-4 h-4" />
              </a>
              <a
                href="https://www.facebook.com/p/Alzar-FZE-100084325740456/"
                target="_blank"
                rel="noopener noreferrer"
                className="w-9 h-9 rounded-lg bg-white/10 hover:bg-teal flex items-center justify-center transition-colors"
                aria-label="Facebook"
              >
                <Facebook className="w-4 h-4" />
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-heading font-semibold text-white mb-4">{t("footer.quickLinks")}</h4>
            <ul className="space-y-2.5">
              {[
                { label: t("nav.home"), href: "/" },
                { label: t("nav.about"), href: "/about" },
                { label: t("nav.partners"), href: "/partners" },
                { label: t("nav.contact"), href: "/contact" },
              ].map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className="text-sm text-white/50 hover:text-teal transition-colors">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Industries */}
          <div>
            <h4 className="font-heading font-semibold text-white mb-4">{t("footer.industries")}</h4>
            <ul className="space-y-2.5">
              {[
                { label: t("nav.ceramics"), href: "/industries/ceramics" },
                { label: t("nav.glass"), href: "/industries/glass" },
                { label: t("nav.cement"), href: "/industries/cement" },
                { label: t("nav.machinery"), href: "/industries/machinery" },
              ].map((item) => (
                <li key={item.href}>
                  <Link href={item.href} className="text-sm text-white/50 hover:text-teal transition-colors">
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-heading font-semibold text-white mb-4">{t("footer.contactInfo")}</h4>
            <ul className="space-y-3">
              <li>
                <a href="mailto:info@alzarfze.com" className="flex items-start gap-3 text-sm text-white/50 hover:text-teal transition-colors">
                  <Mail className="w-4 h-4 mt-0.5 shrink-0" />
                  <span dir="ltr">info@alzarfze.com</span>
                </a>
              </li>
              <li>
                <a href="tel:+97148814928" className="flex items-start gap-3 text-sm text-white/50 hover:text-teal transition-colors">
                  <Phone className="w-4 h-4 mt-0.5 shrink-0" />
                  <span dir="ltr">+971 4 881 4928-9</span>
                </a>
              </li>
              <li>
                <a href="https://wa.me/971553288217" target="_blank" rel="noopener noreferrer" className="flex items-start gap-3 text-sm text-white/50 hover:text-teal transition-colors">
                  <MessageCircle className="w-4 h-4 mt-0.5 shrink-0" />
                  {lang === "ar" ? "واتساب" : "WhatsApp"}: <span dir="ltr">+971 55 328 8217</span>
                </a>
              </li>
              <li>
                <div className="flex items-start gap-3 text-sm text-white/50">
                  <MapPin className="w-4 h-4 mt-0.5 shrink-0" />
                  <span>{lang === "ar" ? "LOB #21، الدوار السادس، ميناء جبل علي، المنطقة الحرة لجبل علي، دبي، الإمارات" : "LOB #21, 6th Roundabout, Mina Jebel Ali, Jebel Ali Free Zone, Dubai, UAE"}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="border-t border-white/10">
        <div className="container py-5 flex flex-col sm:flex-row justify-between items-center gap-3">
          <p className="text-xs text-white/40">
            &copy; {currentYear} Alzar FZE. {t("footer.rights")}
          </p>
          <div className="flex items-center gap-4 flex-wrap">
            <Link
              href="/privacy-policy"
              className="text-xs text-white/30 hover:text-teal transition-colors"
            >
              {lang === "ar" ? "سياسة الخصوصية" : "Privacy Policy"}
            </Link>
            <Link
              href="/terms"
              className="text-xs text-white/30 hover:text-teal transition-colors"
            >
              {lang === "ar" ? "شروط الاستخدام" : "Terms of Service"}
            </Link>
            <Link
              href="/cookie-policy"
              className="text-xs text-white/30 hover:text-teal transition-colors"
            >
              {lang === "ar" ? "سياسة ملفات تعريف الارتباط" : "Cookie Policy"}
            </Link>
            <button
              type="button"
              onClick={() => window.dispatchEvent(new CustomEvent("open-cookie-settings"))}
              className="text-xs text-white/30 hover:text-teal transition-colors flex items-center gap-1"
            >
              <Cookie className="w-3 h-3" />
              {lang === "ar" ? "إعدادات ملفات تعريف الارتباط" : "Cookie Settings"}
            </button>
          </div>
        </div>
      </div>
    </footer>
  );
}
