\n {/* Step 1: Shipping Information */}\n {step === 1 && (\n

Shipping Information

\n \n

\n \n Full Name *\n \n setShippingInfo({...shippingInfo, name: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\n />\n

\n \n

\n \n Email *\n \n setShippingInfo({...shippingInfo, email: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\n />\n

\n \n

\n \n Address *\n \n setShippingInfo({...shippingInfo, address: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\n />\n

\n \n

\n \n City *\n \n setShippingInfo({...shippingInfo, city: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\n />\n

\n \n

\n \n ZIP Code *\n \n setShippingInfo({...shippingInfo, zipCode: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500\"\n />\n

\n \n \n

\n )}\n\n {/* Step 2: Payment Method */}\n {step === 2 && (\n \n )}\n\n {/* Step 3: Order Review */}\n {step === 3 && (\n

\n {/* Order Items */}\n

Order Summary

\n \n

\n {cartItems.map((item) => (\n

\n \n

{item.product.name}

{item.size} • {item.color} • Qty: {item.quantity}

\n {formatPrice(item.product.price * item.quantity)}\n

\n ))}\n

\n\n {/* Order Total */}\n

\n Subtotal\n {formatPrice(subtotal)}\n

\n Tax\n {formatPrice(tax)}\n

\n Shipping\n {shipping === 0 ? 'Free' : formatPrice(shipping)}\n

\n Total\n {formatPrice(total)}\n

\n\n \n {isProcessing ? 'Processing Order...' : `Place Order • ${formatPrice(total)}`}\n \n

\n )}\n

Your cart is empty

Checkout

Shipping Information

Payment Method

Order Summary