import Link from "next/link";
import { Star, Shield, BadgeCheck } from "lucide-react";

const vendors = [
  { name: "Textile Masters Pakistan", country: "🇵🇰", rating: 4.9, products: 2340, verified: true, category: "Textiles & Apparel" },
  { name: "TechSource Shenzhen", country: "🇨🇳", rating: 4.8, products: 5600, verified: true, category: "Electronics" },
  { name: "Arabian Perfumes Co", country: "🇦🇪", rating: 4.9, products: 890, verified: true, category: "Beauty & Fragrance" },
  { name: "Istanbul Leather Works", country: "🇹🇷", rating: 4.7, products: 1200, verified: true, category: "Leather Goods" },
  { name: "Bangalore Spice Exports", country: "🇮🇳", rating: 4.8, products: 450, verified: true, category: "Food & Spices" },
  { name: "German Precision Tools", country: "🇩🇪", rating: 4.9, products: 3200, verified: true, category: "Industrial Tools" },
];

export function TopVendors() {
  return (
    <section className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="flex items-end justify-between mb-10">
          <div>
            <h2 className="text-3xl font-extrabold text-gray-900">Top Verified Vendors</h2>
            <p className="text-gray-500 mt-2">Trusted suppliers with proven track records</p>
          </div>
          <Link href="/vendors" className="hidden sm:block text-blue-600 font-semibold hover:text-blue-700">
            View All Vendors →
          </Link>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {vendors.map((vendor) => (
            <Link
              key={vendor.name}
              href={`/vendors/${vendor.name.toLowerCase().replace(/\s+/g, "-")}`}
              className="group rounded-2xl bg-white border border-gray-100 p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
            >
              <div className="flex items-start justify-between mb-4">
                <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center text-2xl font-bold text-blue-600">
                  {vendor.name.charAt(0)}
                </div>
                <div className="flex items-center gap-1">
                  {vendor.verified && (
                    <span className="flex items-center gap-1 rounded-full bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700">
                      <BadgeCheck className="h-3 w-3" />
                      Verified
                    </span>
                  )}
                </div>
              </div>

              <div className="flex items-center gap-1.5 mb-2">
                <span className="text-lg">{vendor.country}</span>
                <h3 className="font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
                  {vendor.name}
                </h3>
              </div>

              <p className="text-sm text-gray-500 mb-4">{vendor.category}</p>

              <div className="flex items-center justify-between pt-4 border-t border-gray-50">
                <div className="flex items-center gap-1">
                  <Star className="h-4 w-4 fill-amber-400 text-amber-400" />
                  <span className="font-semibold text-gray-900">{vendor.rating}</span>
                </div>
                <span className="text-sm text-gray-500">
                  {vendor.products.toLocaleString()} products
                </span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}