const vendors = [
  { id: '1', name: 'The Grand Atrium', category: 'Venue', district: 'Colombo 7', price: '₨ 350K', rating: 4.9, reviews: 127, image: '🏛️', tag: 'Premium' },
  { id: '2', name: 'Lens & Light Studio', category: 'Photography', district: 'Colombo 3', price: '₨ 150K', rating: 4.8, reviews: 94, image: '📸', tag: 'Top Rated' },
  { id: '3', name: 'Bloom & Petal', category: 'Florist', district: 'Colombo 5', price: '₨ 80K', rating: 4.9, reviews: 68, image: '💐', tag: 'Popular' },
  { id: '4', name: 'Silver Spoon Catering', category: 'Catering', district: 'Colombo 4', price: '₨ 250K', rating: 4.7, reviews: 112, image: '🍽️', tag: 'Best Value' },
]

export default function FeaturedVendors() {
  return (
    <section className="py-20 bg-ivory-50">
      <div className="wedding-section">
        <div className="text-center mb-12">
          <p className="text-gold-400 font-heading text-sm tracking-[0.2em] uppercase mb-3">Curated for you</p>
          <h2 className="font-heading text-3xl md:text-4xl font-semibold text-charcoal-700">Featured vendors</h2>
          <div className="wedding-divider mt-6" />
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {vendors.map((v) => (
            <a key={v.id} href={"/vendor/" + v.id} className="wedding-card-hover overflow-hidden group">
              <div className="h-48 bg-gradient-to-br from-ivory-200 to-rose-100 flex items-center justify-center text-6xl">{v.image}</div>
              <div className="p-5">
                <div className="flex items-center justify-between mb-2">
                  <span className="wedding-badge bg-gold-50 text-gold-500">{v.tag}</span>
                  <span className="wedding-badge bg-ivory-100 text-charcoal-400">{v.category}</span>
                </div>
                <h3 className="font-heading text-lg font-semibold text-charcoal-700 mb-1">{v.name}</h3>
                <p className="text-sm text-charcoal-400 mb-3">{v.district}</p>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-1">
                    <span className="text-gold-400">★</span>
                    <span className="text-sm font-medium text-charcoal-600">{v.rating}</span>
                    <span className="text-xs text-charcoal-300">({v.reviews})</span>
                  </div>
                  <span className="text-sm font-semibold text-charcoal-700">{v.price}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  )
}