const promotions = [
  {
    id: 1,
    title: "Welcome Bonus",
    description: "Get 100% up to 500 ETB on your first deposit",
    badge: "NEW",
    color: "from-primary/20 to-primary/5",
    icon: "🎁",
  },
  {
    id: 2,
    title: "Accumulator Boost",
    description: "Get up to 50% extra winnings on accumulators of 5+ selections",
    badge: "POPULAR",
    color: "from-yellow-500/20 to-yellow-500/5",
    icon: "⚡",
  },
  {
    id: 3,
    title: "Live Bet Cashback",
    description: "5% cashback on all losing live bets, credited every Monday",
    badge: "",
    color: "from-blue-500/20 to-blue-500/5",
    icon: "🔄",
  },
]

export default function PromotionsPage() {
  return (
    <div className="space-y-4">
      <div className="border-b border-border pb-2">
        <h1 className="text-sm font-black uppercase tracking-wide text-foreground">Promotions</h1>
      </div>
      <div className="grid gap-3">
        {promotions.map((promo) => (
          <div
            key={promo.id}
            className={`bg-gradient-to-r ${promo.color} border border-border rounded-lg p-4 flex items-center gap-4`}
          >
            <div className="text-4xl">{promo.icon}</div>
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-1">
                <h3 className="font-bold text-sm text-foreground">{promo.title}</h3>
                {promo.badge && (
                  <span className="bg-primary text-primary-foreground text-[10px] font-bold px-1.5 py-0.5 rounded">
                    {promo.badge}
                  </span>
                )}
              </div>
              <p className="text-[11px] text-muted-foreground">{promo.description}</p>
            </div>
            <button className="shrink-0 bg-primary text-primary-foreground text-[11px] font-bold px-4 py-2 rounded hover:opacity-90 transition-opacity uppercase">
              Claim
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}