"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { fadeIn, stagger, staggerItem, buttonTap, buttonTapTarget } from "@/lib/animations" import { DotPattern } from "@/components/backgrounds/dot-pattern" 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 { Input } from "@/components/ui/input" import { ShoppingCart, Trash2, Percent, ArrowRight, Gamepad2, Shield, CreditCard, ChevronRight, Minus, Plus, CheckCircle } from "lucide-react" interface CartItem { title: string price: number image: string color: string quantity: number } const initialItems: CartItem[] = [ { title: "Shadow Strike", price: 39.99, image: "SS", color: "from-red-500 to-orange-500", quantity: 1 }, { title: "Dragon Quest VII", price: 24.99, image: "DQ", color: "from-blue-500 to-purple-500", quantity: 1 }, { title: "Crystal Saga Online", price: 19.99, image: "CS", color: "from-indigo-500 to-violet-500", quantity: 1 }, ] export default function GameCart() { const [items, setItems] = useState(initialItems) const [promoCode, setPromoCode] = useState("") const [promoApplied, setPromoApplied] = useState(false) const [checkoutStep, setCheckoutStep] = useState<"cart" | "payment" | "done">("cart") const removeItem = (title: string) => setItems((prev) => prev.filter((i) => i.title !== title)) const updateQuantity = (title: string, delta: number) => { setItems((prev) => prev.map((i) => i.title === title ? { ...i, quantity: Math.max(1, i.quantity + delta) } : i)) } const subtotal = items.reduce((sum, i) => sum + i.price * i.quantity, 0) const discount = promoApplied ? subtotal * 0.1 : 0 const tax = (subtotal - discount) * 0.08 const total = subtotal - discount + tax return (

{checkoutStep === "cart" && (

Shopping Cart

{items.length} item{items.length !== 1 ? "s" : ""} in your cart

{items.length > 0 ? (

{items.map((item) => (

{item.image}

{item.title}

${item.price.toFixed(2)}

{item.quantity}

))}

Order Summary

Subtotal ${subtotal.toFixed(2)}

{promoApplied && (

Discount (10%) -${discount.toFixed(2)}

)}

Tax (8%) ${tax.toFixed(2)}

setPromoCode(e.target.value)} className="text-sm" disabled={promoApplied} />

Total ${total.toFixed(2)}

Secure checkout

) : (

Your cart is empty

Add some games to get started.

)} )} {checkoutStep === "payment" && ( Payment Total: ${total.toFixed(2)}

Card Number

Expiry

CVC

)} {checkoutStep === "done" && (

Purchase Complete!

Your games are now available in your library.

)}

) }

Game Cart

Shopping Cart

Shopping Cart