import { Link } from "react-router-dom";
import { Phone, Mail, MapPin, Facebook, Instagram, Twitter } from "lucide-react";
import logo from "@/assets/logo.png";

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-gray-300 mt-16">
      <div className="max-w-7xl mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Brand */}
          <div>
            <div className="flex items-center gap-3 mb-4">
              <img src={logo} alt="صلاح مول" className="w-12 h-12 rounded-xl" />
              <div>
                <div className="text-2xl font-black text-orange-400">صلاح مول</div>
                <div className="text-xs text-gray-500">متجرك المفضل</div>
              </div>
            </div>
            <p className="text-sm text-gray-400 leading-relaxed mb-4">
              كل ما يحتاجه منزلك وأكثر. تسوق من تشكيلة واسعة من المنتجات بأسعار تنافسية وجودة عالية.
            </p>
            <div className="flex gap-3">
              <a href="#" className="w-9 h-9 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center transition-colors">
                <Facebook size={16} />
              </a>
              <a href="#" className="w-9 h-9 bg-pink-600 hover:bg-pink-700 rounded-lg flex items-center justify-center transition-colors">
                <Instagram size={16} />
              </a>
              <a href="#" className="w-9 h-9 bg-sky-500 hover:bg-sky-600 rounded-lg flex items-center justify-center transition-colors">
                <Twitter size={16} />
              </a>
            </div>
          </div>

          {/* Quick links */}
          <div>
            <h3 className="text-white font-bold text-lg mb-4">روابط سريعة</h3>
            <ul className="space-y-2.5">
              {[
                { label: "الصفحة الرئيسية", href: "/" },
                { label: "جميع المنتجات", href: "/products" },
                { label: "العروض والخصومات", href: "/products?filter=offers" },
                { label: "المنتجات الجديدة", href: "/products?filter=new" },
                { label: "المفضلة", href: "/wishlist" },
              ].map((link) => (
                <li key={link.href}>
                  <Link
                    to={link.href}
                    className="text-sm text-gray-400 hover:text-orange-400 transition-colors flex items-center gap-2"
                  >
                    <span className="text-orange-500">›</span>
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Categories */}
          <div>
            <h3 className="text-white font-bold text-lg mb-4">التصنيفات</h3>
            <ul className="space-y-2.5">
              {[
                { label: "🍳 مطبخ وطعام", id: "kitchen" },
                { label: "🛋️ ديكور المنزل", id: "home" },
                { label: "💄 جمال وعناية", id: "beauty" },
                { label: "✏️ مكتب وقرطاسية", id: "office" },
                { label: "🧹 نظافة ومنظفات", id: "cleaning" },
              ].map((cat) => (
                <li key={cat.id}>
                  <Link
                    to={`/products?category=${cat.id}`}
                    className="text-sm text-gray-400 hover:text-orange-400 transition-colors"
                  >
                    {cat.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="text-white font-bold text-lg mb-4">تواصل معنا</h3>
            <ul className="space-y-3">
              <li className="flex items-start gap-3">
                <MapPin size={16} className="text-orange-400 mt-0.5 shrink-0" />
                <span className="text-sm text-gray-400">صنعاء، اليمن</span>
              </li>
              <li className="flex items-center gap-3">
                <Phone size={16} className="text-orange-400 shrink-0" />
                <a href="tel:+967777017092" className="text-sm text-gray-400 hover:text-orange-400 transition-colors" dir="ltr">
                  +967 777 017 092
                </a>
              </li>
              <li className="flex items-center gap-3">
                <Mail size={16} className="text-orange-400 shrink-0" />
                <a href="mailto:salahah014@gmail.com" className="text-sm text-gray-400 hover:text-orange-400 transition-colors">
                  salahah014@gmail.com
                </a>
              </li>
            </ul>

            <div className="mt-6 bg-gray-800 rounded-xl p-4">
              <p className="text-xs text-gray-400 mb-3">اشترك في نشرتنا البريدية</p>
              <div className="flex gap-2">
                <input
                  type="email"
                  placeholder="بريدك الإلكتروني"
                  className="flex-1 bg-gray-700 text-white text-xs px-3 py-2 rounded-lg outline-none focus:ring-2 ring-orange-500 placeholder:text-gray-500"
                />
                <button className="bg-orange-500 hover:bg-orange-600 text-white text-xs px-3 py-2 rounded-lg transition-colors font-semibold">
                  اشترك
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="border-t border-gray-800 py-4">
        <div className="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-2 text-sm text-gray-500">
          <p>© 2025 صلاح مول - جميع الحقوق محفوظة</p>
          <p>صُنع بـ ❤️ في اليمن</p>
        </div>
      </div>
    </footer>
  );
}
