"use client" import { motion } from "framer-motion" import { Award, Gift, Star, TrendingUp, Gem } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Progress } from "@/components/ui/progress" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem, cardHover, cardHoverTarget } from "@/lib/animations" const tiers = [ { name: "Bronze", min: 0, color: "text-amber-700", bg: "bg-amber-100 dark:bg-amber-900/30" }, { name: "Silver", min: 1000, color: "text-slate-400", bg: "bg-slate-100 dark:bg-slate-800/30" }, { name: "Gold", min: 5000, color: "text-yellow-500", bg: "bg-yellow-100 dark:bg-yellow-900/30" }, { name: "Platinum", min: 15000, color: "text-blue-400", bg: "bg-blue-100 dark:bg-blue-900/30" }, ] const rewardsCatalog = [ { name: "$10 Off Coupon", points: 500, popular: false }, { name: "Free Shipping", points: 800, popular: true }, { name: "$25 Gift Card", points: 1500, popular: false }, { name: "Premium Tote Bag", points: 3000, popular: false }, { name: "Year VIP Access", points: 8000, popular: false }, ] const transactions = [ { action: "Purchase at TechStore", points: 250, date: "Jun 10, 2026", type: "earned" }, { action: "Redemption: $10 Off Coupon", points: -500, date: "Jun 8, 2026", type: "redeemed" }, { action: "Purchase at CoffeeShop", points: 85, date: "Jun 7, 2026", type: "earned" }, { action: "Bonus: Weekend Promotion", points: 200, date: "Jun 5, 2026", type: "earned" }, { action: "Purchase at BookStore", points: 120, date: "Jun 3, 2026", type: "earned" }, ] export default function RewardsLoyalty() { const points = 4850 const nextTier = tiers[2] return (

Rewards & Loyalty

Earn points and unlock exclusive perks.

Gold Member

Your Points Earn more to reach the next tier.

{points.toLocaleString()}

total points

+655 this month

Progress to {nextTier.name} {points.toLocaleString()} / {nextTier.min.toLocaleString()}

Tier Status {tiers.map((tier) => (

= tier.min ? tier.bg : "opacity-40"}`}> = tier.min ? tier.color : "text-muted-foreground"}`} /> = tier.min ? tier.color : ""}`}>{tier.name} {points >= tier.min && }

))}

Rewards Catalog Transaction History {rewardsCatalog.map((reward) => (

{reward.popular && Popular}

{reward.name}

{reward.points.toLocaleString()} pts

))} {transactions.map((tx) => (

{tx.action}

{tx.date}

{tx.type === "earned" ? "+" : ""}{tx.points.toLocaleString()} ))}

) } function CheckIcon(props: { className?: string }) { return ( ) }