---
interface PlatformLink {
  emoji: string;
  name: string;
  rating: string;
  href?: string;
}

const platforms: PlatformLink[] = [
  {
    emoji: "🗺️",
    name: "Яндекс Карты",
    rating: "4.9",
    href: "#"
  },
  {
    emoji: "🔍",
    name: "Google",
    rating: "5.0",
    href: "#"
  },
  {
    emoji: "📍",
    name: "2ГИС",
    rating: "4.8",
    href: "#"
  }
];
---

<div class="mt-16 text-center">
  <p class="text-[var(--color-gray-600)] text-sm mb-6">Читайте отзывы на внешних площадках</p>
  <div class="flex flex-wrap justify-center gap-4">
    {platforms.map((platform) => (
      <a
        href={platform.href || "#"}
        class="flex items-center gap-2 px-6 py-3 bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-xl text-[var(--color-gray-400)] hover:border-[var(--color-gold)]/30 hover:text-[var(--color-white)] transition-all"
      >
        <span class="text-xl">{platform.emoji}</span>
        <span class="font-medium">{platform.name}</span>
        <span class="px-2 py-0.5 bg-[var(--color-gold)]/20 rounded text-[var(--color-gold)] text-xs font-bold">{platform.rating}</span>
      </a>
    ))}
  </div>
</div>
