"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { fadeIn, stagger, staggerItem, cardHover, cardHoverTarget, buttonTap } from "@/lib/animations" import { GradientMesh } from "@/components/backgrounds/gradient-mesh" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Search, ShoppingCart, Sparkles, Shield, Swords, Wand2, Gem, Flame, Star, Zap, ArrowRight, Coins } from "lucide-react" const categories = ["All", "Skins", "Weapons", "Characters", "Emotes", "Bundles"] const items = [ { title: "Crimson Fury Skin", type: "Skins", price: 1200, rarity: "Epic", color: "from-red-500 to-orange-500", image: "CF", popular: true }, { title: "Shadow Blade", type: "Weapons", price: 800, rarity: "Rare", color: "from-purple-500 to-indigo-500", image: "SB" }, { title: "Valkyrie Character", type: "Characters", price: 2500, rarity: "Legendary", color: "from-amber-500 to-yellow-500", image: "VC", popular: true }, { title: "Dragon Emote", type: "Emotes", price: 400, rarity: "Common", color: "from-green-500 to-teal-500", image: "DE" }, { title: "Neon Night Bundle", type: "Bundles", price: 3500, rarity: "Legendary", color: "from-pink-500 to-rose-500", image: "NN", popular: true }, { title: "Frost Axe", type: "Weapons", price: 600, rarity: "Rare", color: "from-cyan-500 to-blue-500", image: "FA" }, { title: "Phoenix Emote", type: "Emotes", price: 500, rarity: "Epic", color: "from-red-600 to-orange-600", image: "PE" }, { title: "Cyberpunk Skin", type: "Skins", price: 1800, rarity: "Epic", color: "from-blue-500 to-violet-500", image: "CS" }, { title: "Titan Character", type: "Characters", price: 1500, rarity: "Epic", color: "from-gray-600 to-gray-800", image: "TC" }, { title: "Starter Pack", type: "Bundles", price: 500, rarity: "Common", color: "from-emerald-500 to-cyan-500", image: "SP" }, { title: "Electric Aura", type: "Skins", price: 2200, rarity: "Legendary", color: "from-yellow-400 to-orange-400", image: "EA", popular: true }, { title: "Ninja Emote", type: "Emotes", price: 300, rarity: "Common", color: "from-slate-500 to-gray-500", image: "NE" }, ] const rarityColors: Record = { Common: "bg-muted text-muted-foreground", Rare: "bg-blue-500/10 text-blue-500", Epic: "bg-purple-500/10 text-purple-500", Legendary: "bg-amber-500/10 text-amber-500", } export default function InGameStore() { const [category, setCategory] = useState("All") const [search, setSearch] = useState("") const [balance] = useState(4500) const filtered = items.filter((item) => { const matchCategory = category === "All" || item.type === category const matchSearch = item.title.toLowerCase().includes(search.toLowerCase()) return matchCategory && matchSearch }) return (

Item Shop

Daily rotation of cosmetic items.

{balance.toLocaleString()}

setSearch(e.target.value)} className="pl-10" />

{categories.map((cat) => ( ))}

{filtered.map((item) => (

{item.image} {item.popular && Hot}

{item.title} {item.rarity}

{item.price.toLocaleString()}

))}

{filtered.length === 0 && ( No items match your filters. )}

) }

In Game Store

Item Shop

Item Shop