"use client";

import React, { useState } from "react";
import { useApp } from "@/context/AppContext";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
import { AIAssistant } from "@/components/AIAssistant";
import { mockCoupons, OrderItem } from "@/data/mockData";
import { Check, CreditCard, ShoppingBag, Truck, MapPin, ClipboardCheck, ArrowRight, ShieldCheck } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function CheckoutPage() {
  const { cart, formatPrice, getCartSubtotal, getCartTotal, shippingEstimate, discountPercent, clearCart, siteConfig } = useApp();
  const [step, setStep] = useState(1); // Steps: 1 (Shipping), 2 (Payment), 3 (Review), 4 (Confirmation)

  // Step 1 State: Shipping Details
  const [shippingForm, setShippingForm] = useState({
    fullName: "",
    phone: "",
    addressLine: "",
    city: "Lahore",
    postalCode: "",
    country: "Pakistan"
  });

  // Step 2 State: Payment choice
  const [paymentMethod, setPaymentMethod] = useState("COD"); // "COD", "Easypaisa", "JazzCash", "Bank Transfer", "Stripe"

  // Set default payment method based on enabled ones
  React.useEffect(() => {
    if (siteConfig) {
      if (siteConfig.paymentMethods.cod) setPaymentMethod("COD");
      else if (siteConfig.paymentMethods.easypaisa) setPaymentMethod("Easypaisa");
      else if (siteConfig.paymentMethods.jazzcash) setPaymentMethod("JazzCash");
      else if (siteConfig.paymentMethods.bankTransfer) setPaymentMethod("Bank Transfer");
      else if (siteConfig.paymentMethods.stripe) setPaymentMethod("Stripe");
    }
  }, [siteConfig]);

  // Generated Order Summary (Step 4 details)
  const [generatedOrder, setGeneratedOrder] = useState<{
    orderId: string;
    trackingNumber: string;
    courier: string;
    items: OrderItem[];
    total: number;
    shipping: typeof shippingForm;
  } | null>(null);

  const majorCities = ["Lahore", "Karachi", "Islamabad", "Rawalpindi", "Faisalabad", "Multan", "Peshawar", "Quetta", "Sialkot"];

  const handleShippingSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (shippingForm.fullName && shippingForm.phone && shippingForm.addressLine) {
      setStep(2);
    }
  };

  const handlePlaceOrder = () => {
    // Generate mock order numbers
    const orderId = `SB-${Math.floor(100000 + Math.random() * 900000)}`;
    
    const activeCouriers: string[] = [];
    if (siteConfig.deliveryIntegrations.tcs) activeCouriers.push("TCS");
    if (siteConfig.deliveryIntegrations.leopards) activeCouriers.push("Leopards Courier");
    if (siteConfig.deliveryIntegrations.postex) activeCouriers.push("PostEx");
    if (activeCouriers.length === 0) activeCouriers.push("TCS"); // fallback

    const selectedCourier = activeCouriers[Math.floor(Math.random() * activeCouriers.length)];
    const trackingNumber = `${selectedCourier.slice(0, 3).toUpperCase()}-${Math.floor(10000000 + Math.random() * 90000000)}-PK`;

    const summary = {
      orderId,
      trackingNumber,
      courier: selectedCourier,
      items: [...cart],
      total: getCartTotal(),
      shipping: { ...shippingForm }
    };

    // Store order in local storage for order tracking
    const existingOrders = JSON.parse(localStorage.getItem("starboy_orders") || "[]");
    localStorage.setItem("starboy_orders", JSON.stringify([summary, ...existingOrders]));

    // Update loyalty points
    const savedUser = localStorage.getItem("starboy_user");
    if (savedUser) {
      const userObj = JSON.parse(savedUser);
      userObj.points += Math.floor(getCartTotal() * 0.05); // 5% points reward
      localStorage.setItem("starboy_user", JSON.stringify(userObj));
    }

    setGeneratedOrder(summary);
    clearCart();
    setStep(4);
  };

  return (
    <div className="flex min-h-screen flex-col bg-[#F8F7F2]">
      <Navbar />

      <main className="flex-1 py-12 px-6 md:px-12 mx-auto max-w-5xl w-full">
        {/* Progress Bar Indicator */}
        <div className="mb-12 flex justify-between items-center max-w-xl mx-auto border border-[#1A1A1A]/10 bg-white p-4 text-[10px] uppercase font-bold tracking-widest text-neutral-400">
          <div className={`flex items-center gap-1.5 ${step >= 1 ? "text-[#D4AF37]" : ""}`}>
            <MapPin className="w-3.5 h-3.5" /> Shipping
          </div>
          <div className="h-[1px] bg-neutral-200 w-10"></div>
          <div className={`flex items-center gap-1.5 ${step >= 2 ? "text-[#D4AF37]" : ""}`}>
            <CreditCard className="w-3.5 h-3.5" /> Payment
          </div>
          <div className="h-[1px] bg-neutral-200 w-10"></div>
          <div className={`flex items-center gap-1.5 ${step >= 3 ? "text-[#D4AF37]" : ""}`}>
            <ClipboardCheck className="w-3.5 h-3.5" /> Review
          </div>
          <div className="h-[1px] bg-neutral-200 w-10"></div>
          <div className={`flex items-center gap-1.5 ${step >= 4 ? "text-green-700 font-extrabold" : ""}`}>
            <Check className="w-3.5 h-3.5" /> Success
          </div>
        </div>

        {/* Checkout Split Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
          
          {/* Left Side: Step Wizards */}
          <div className="lg:col-span-7 bg-white border border-[#1A1A1A]/10 p-6 md:p-8 space-y-6">
            
            {/* STEP 1: Shipping Form */}
            {step === 1 && (
              <form onSubmit={handleShippingSubmit} className="space-y-6">
                <h2 className="font-serif text-lg font-bold uppercase tracking-widest text-black border-b pb-3">
                  SHIPPING ADDRESS DETAILS
                </h2>

                <div className="space-y-4">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div className="space-y-1.5">
                      <label className="text-[9px] font-bold uppercase tracking-wider text-neutral-400">Full Name</label>
                      <input
                        type="text"
                        required
                        value={shippingForm.fullName}
                        onChange={(e) => setShippingForm({ ...shippingForm, fullName: e.target.value })}
                        placeholder="e.g. Zain Ahmed"
                        className="w-full bg-[#F8F7F2] border border-[#1A1A1A]/10 text-xs px-4 py-2.5 outline-none focus:border-[#D4AF37]"
                      />
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-[9px] font-bold uppercase tracking-wider text-neutral-400">Phone Number (COD confirmation)</label>
                      <input
                        type="tel"
                        required
                        value={shippingForm.phone}
                        onChange={(e) => setShippingForm({ ...shippingForm, phone: e.target.value })}
                        placeholder="e.g. +923001234567"
                        className="w-full bg-[#F8F7F2] border border-[#1A1A1A]/10 text-xs px-4 py-2.5 outline-none focus:border-[#D4AF37]"
                      />
                    </div>
                  </div>

                  <div className="space-y-1.5">
                    <label className="text-[9px] font-bold uppercase tracking-wider text-neutral-400">Street Address</label>
                    <input
                      type="text"
                      required
                      value={shippingForm.addressLine}
                      onChange={(e) => setShippingForm({ ...shippingForm, addressLine: e.target.value })}
                      placeholder="House/Plot/Apartment No, Street Name, Area"
                      className="w-full bg-[#F8F7F2] border border-[#1A1A1A]/10 text-xs px-4 py-2.5 outline-none focus:border-[#D4AF37]"
                    />
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div className="space-y-1.5">
                      <label className="text-[9px] font-bold uppercase tracking-wider text-neutral-400">City</label>
                      <select
                        value={shippingForm.city}
                        onChange={(e) => setShippingForm({ ...shippingForm, city: e.target.value })}
                        className="w-full bg-[#F8F7F2] border border-[#1A1A1A]/10 text-xs px-4 py-2.5 outline-none focus:border-[#D4AF37] cursor-pointer"
                      >
                        {majorCities.map((ct) => (
                          <option key={ct} value={ct}>{ct}</option>
                        ))}
                      </select>
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-[9px] font-bold uppercase tracking-wider text-neutral-400">Postal Code (Optional)</label>
                      <input
                        type="text"
                        value={shippingForm.postalCode}
                        onChange={(e) => setShippingForm({ ...shippingForm, postalCode: e.target.value })}
                        placeholder="e.g. 54000"
                        className="w-full bg-[#F8F7F2] border border-[#1A1A1A]/10 text-xs px-4 py-2.5 outline-none focus:border-[#D4AF37]"
                      />
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-[9px] font-bold uppercase tracking-wider text-neutral-400">Country</label>
                      <input
                        type="text"
                        disabled
                        value={shippingForm.country}
                        className="w-full bg-neutral-100 border border-[#1A1A1A]/10 text-xs px-4 py-2.5 cursor-not-allowed text-neutral-500 uppercase font-semibold"
                      />
                    </div>
                  </div>
                </div>

                <button
                  type="submit"
                  className="w-full bg-[#0A0A0A] hover:bg-[#D4AF37] text-white hover:text-black font-semibold text-xs tracking-widest py-3 flex items-center justify-center gap-2 border border-black hover:border-[#D4AF37] transition-all uppercase"
                >
                  CONTINUE TO PAYMENT <ArrowRight className="w-4 h-4" />
                </button>
              </form>
            )}

            {/* STEP 2: Payment Selector */}
            {step === 2 && (
              <div className="space-y-6">
                <h2 className="font-serif text-lg font-bold uppercase tracking-widest text-black border-b pb-3">
                  PAYMENT GATEWAY METHOD
                </h2>

                <div className="space-y-4">
                  {/* COD */}
                  {siteConfig.paymentMethods.cod && (
                    <label className={`flex items-center justify-between border p-4 cursor-pointer transition-all ${
                      paymentMethod === "COD" ? "border-black bg-[#F8F7F2]/50" : "border-[#1A1A1A]/10 hover:border-[#D4AF37]"
                    }`}>
                      <div className="flex items-center gap-3">
                        <input
                          type="radio"
                          name="payment"
                          checked={paymentMethod === "COD"}
                          onChange={() => setPaymentMethod("COD")}
                          className="accent-black h-4 w-4"
                        />
                        <div className="text-left">
                          <span className="text-xs font-bold uppercase tracking-wider block">Cash On Delivery (COD)</span>
                          <span className="text-[10px] text-neutral-400 font-sans block">{siteConfig.paymentConfig?.cod?.instructions || "Pay with cash upon package receipt"}</span>
                        </div>
                      </div>
                      <span className="text-[10px] font-bold tracking-widest bg-black text-white px-2 py-0.5">LOCAL</span>
                    </label>
                  )}

                  {/* Mobile wallet: Easypaisa */}
                  {siteConfig.paymentMethods.easypaisa && (
                    <label className={`flex items-center justify-between border p-4 cursor-pointer transition-all ${
                      paymentMethod === "Easypaisa" ? "border-black bg-[#F8F7F2]/50" : "border-[#1A1A1A]/10 hover:border-[#D4AF37]"
                    }`}>
                      <div className="flex items-center gap-3">
                        <input
                          type="radio"
                          name="payment"
                          checked={paymentMethod === "Easypaisa"}
                          onChange={() => setPaymentMethod("Easypaisa")}
                          className="accent-black h-4 w-4"
                        />
                        <div className="text-left">
                          <span className="text-xs font-bold uppercase tracking-wider block">Easypaisa Mobile Wallet</span>
                          <span className="text-[10px] text-neutral-500 font-bold font-sans block">
                            Send Rs. to Mobile: {siteConfig.paymentConfig?.easypaisa?.receiverPhone || siteConfig.contactPhone}
                          </span>
                          <span className="text-[9px] text-neutral-400 font-sans block">
                            Store ID: {siteConfig.paymentConfig?.easypaisa?.storeId || "Default"} | Hash Key Active
                          </span>
                        </div>
                      </div>
                      <span className="text-[10px] font-bold tracking-widest bg-black text-white px-2 py-0.5">MOBILE</span>
                    </label>
                  )}

                  {/* Mobile wallet: JazzCash */}
                  {siteConfig.paymentMethods.jazzcash && (
                    <label className={`flex items-center justify-between border p-4 cursor-pointer transition-all ${
                      paymentMethod === "JazzCash" ? "border-black bg-[#F8F7F2]/50" : "border-[#1A1A1A]/10 hover:border-[#D4AF37]"
                    }`}>
                      <div className="flex items-center gap-3">
                        <input
                          type="radio"
                          name="payment"
                          checked={paymentMethod === "JazzCash"}
                          onChange={() => setPaymentMethod("JazzCash")}
                          className="accent-black h-4 w-4"
                        />
                        <div className="text-left">
                          <span className="text-xs font-bold uppercase tracking-wider block">JazzCash Wallet</span>
                          <span className="text-[10px] text-neutral-500 font-bold font-sans block">
                            JazzCash Merchant ID: {siteConfig.paymentConfig?.jazzcash?.merchantId || "Default"}
                          </span>
                          <span className="text-[9px] text-neutral-400 font-sans block">
                            Security signature key auto-computed
                          </span>
                        </div>
                      </div>
                      <span className="text-[10px] font-bold tracking-widest bg-black text-white px-2 py-0.5">MOBILE</span>
                    </label>
                  )}

                  {/* Bank Transfer */}
                  {siteConfig.paymentMethods.bankTransfer && (
                    <label className={`flex items-center justify-between border p-4 cursor-pointer transition-all ${
                      paymentMethod === "Bank Transfer" ? "border-black bg-[#F8F7F2]/50" : "border-[#1A1A1A]/10 hover:border-[#D4AF37]"
                    }`}>
                      <div className="flex items-center gap-3">
                        <input
                          type="radio"
                          name="payment"
                          checked={paymentMethod === "Bank Transfer"}
                          onChange={() => setPaymentMethod("Bank Transfer")}
                          className="accent-black h-4 w-4"
                        />
                        <div className="text-left">
                          <span className="text-xs font-bold uppercase tracking-wider block">Direct Bank Transfer</span>
                          <span className="text-[10px] text-neutral-600 font-sans block">
                            {siteConfig.paymentConfig?.bankTransfer?.bankName || "Meezan Bank Ltd"}
                          </span>
                          <span className="text-[9px] text-neutral-500 font-sans block">
                            Title: {siteConfig.paymentConfig?.bankTransfer?.accountTitle || "STARBOY PAKISTAN"}
                          </span>
                          <span className="text-[9px] text-neutral-400 font-sans block font-mono">
                            A/C: {siteConfig.paymentConfig?.bankTransfer?.accountNumber || "N/A"} | IBAN: {siteConfig.paymentConfig?.bankTransfer?.iban || "N/A"}
                          </span>
                        </div>
                      </div>
                      <span className="text-[10px] font-bold tracking-widest bg-black text-white px-2 py-0.5">BANK</span>
                    </label>
                  )}

                  {/* Stripe Card */}
                  {siteConfig.paymentMethods.stripe && (
                    <label className={`flex items-center justify-between border p-4 cursor-pointer transition-all ${
                      paymentMethod === "Stripe" ? "border-black bg-[#F8F7F2]/50" : "border-[#1A1A1A]/10 hover:border-[#D4AF37]"
                    }`}>
                      <div className="flex items-center gap-3">
                        <input
                          type="radio"
                          name="payment"
                          checked={paymentMethod === "Stripe"}
                          onChange={() => setPaymentMethod("Stripe")}
                          className="accent-black h-4 w-4"
                        />
                        <div className="text-left">
                          <span className="text-xs font-bold uppercase tracking-wider block">Visa / Mastercard / Stripe</span>
                          <span className="text-[10px] text-neutral-400 font-sans block">
                            Secure Checkout (Publishable Key: {siteConfig.paymentConfig?.stripe?.publishableKey ? (siteConfig.paymentConfig.stripe.publishableKey.substring(0, 12) + "...") : "Default Key"})
                          </span>
                        </div>
                      </div>
                      <span className="text-[10px] font-bold tracking-widest bg-[#D4AF37] text-black px-2 py-0.5">GLOBAL</span>
                    </label>
                  )}
                </div>

                <div className="flex gap-4">
                  <button
                    onClick={() => setStep(1)}
                    className="flex-1 bg-transparent hover:bg-neutral-50 text-neutral-600 font-semibold text-xs tracking-widest py-3 border border-[#1A1A1A]/20 transition-all uppercase"
                  >
                    ← Back
                  </button>
                  <button
                    onClick={() => setStep(3)}
                    className="flex-[2] bg-[#0A0A0A] hover:bg-[#D4AF37] text-white hover:text-black font-semibold text-xs tracking-widest py-3 flex items-center justify-center gap-2 border border-black hover:border-[#D4AF37] transition-all uppercase"
                  >
                    CONTINUE TO REVIEW <ArrowRight className="w-4 h-4" />
                  </button>
                </div>
              </div>
            )}

            {/* STEP 3: Order Review */}
            {step === 3 && (
              <div className="space-y-6">
                <h2 className="font-serif text-lg font-bold uppercase tracking-widest text-black border-b pb-3">
                  CONFIRM DETAILS REVIEW
                </h2>

                <div className="space-y-6 text-xs">
                  {/* Address Summary */}
                  <div className="border border-[#1A1A1A]/10 p-4 bg-[#F8F7F2]/40 space-y-2">
                    <span className="text-[9px] font-bold text-neutral-400 uppercase tracking-wider block">Shipping Destination</span>
                    <p className="font-bold text-black">{shippingForm.fullName}</p>
                    <p className="font-sans font-light text-neutral-600">{shippingForm.addressLine}, {shippingForm.city}, Pakistan</p>
                    <p className="font-sans font-light text-neutral-600">Tel: {shippingForm.phone}</p>
                  </div>

                  {/* Payment Summary */}
                  <div className="border border-[#1A1A1A]/10 p-4 bg-[#F8F7F2]/40 flex justify-between items-center">
                    <div>
                      <span className="text-[9px] font-bold text-neutral-400 uppercase tracking-wider block">Selected Payment Method</span>
                      <p className="font-bold text-black uppercase tracking-wider">{paymentMethod}</p>
                    </div>
                    {paymentMethod === "Bank Transfer" && (
                      <div className="text-right text-[10px] text-neutral-500 font-sans max-w-xs leading-relaxed">
                        <p>Bank Al-Falah Ltd. | Account: 0219-3012948</p>
                        <p>Branch: DHA Phase 6 Lahore. (Verify receipt)</p>
                      </div>
                    )}
                  </div>

                  {/* Terms */}
                  <div className="flex items-start gap-2 text-[10px] text-neutral-500 font-sans leading-relaxed pt-2">
                    <ShieldCheck className="w-5 h-5 text-[#D4AF37] flex-shrink-0" />
                    <p>By clicking "PLACE ORDER", you agree to our 7-day swap exchange policy. Cash on Delivery packages must be verified via our confirmation SMS/Call prior to warehouse dispatch.</p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <button
                    onClick={() => setStep(2)}
                    className="flex-1 bg-transparent hover:bg-neutral-50 text-neutral-600 font-semibold text-xs tracking-widest py-3 border border-[#1A1A1A]/20 transition-all uppercase"
                  >
                    ← Back
                  </button>
                  <button
                    onClick={handlePlaceOrder}
                    className="flex-[2] bg-green-700 hover:bg-[#D4AF37] text-white hover:text-black font-semibold text-xs tracking-widest py-3 flex items-center justify-center gap-2 border border-green-700 hover:border-[#D4AF37] transition-all uppercase"
                  >
                    PLACE ORDER & CONFIRM
                  </button>
                </div>
              </div>
            )}

            {/* STEP 4: Success confirmation page */}
            {step === 4 && generatedOrder && (
              <div className="space-y-6 text-center py-6">
                <div className="h-16 w-16 bg-green-100 rounded-full flex items-center justify-center mx-auto text-green-700 mb-4 animate-bounce">
                  <Check className="w-8 h-8" />
                </div>
                
                <div className="space-y-2">
                  <span className="text-[9px] font-bold text-green-700 uppercase tracking-widest block">ORDER PLACED SUCCESSFULLY</span>
                  <h2 className="font-serif text-2xl font-bold uppercase tracking-widest text-[#0a0a0a]">
                    THANK YOU FOR SHOPPING WITH STARBOY
                  </h2>
                  <p className="text-xs text-neutral-500 font-sans max-w-md mx-auto">
                    Your order invoice <strong className="text-black">{generatedOrder.orderId}</strong> has been generated and queued for warehouse dispatch.
                  </p>
                </div>

                <div className="border border-dashed border-[#1A1A1A]/20 p-6 bg-[#F8F7F2]/40 rounded text-left text-xs max-w-md mx-auto space-y-3 font-sans">
                  <div className="flex justify-between border-b pb-2">
                    <span className="text-[10px] uppercase font-bold text-neutral-400">Tracking Number:</span>
                    <span className="font-bold text-black uppercase tracking-wider">{generatedOrder.trackingNumber}</span>
                  </div>
                  <div className="flex justify-between border-b pb-2">
                    <span className="text-[10px] uppercase font-bold text-neutral-400">Courier Service:</span>
                    <span className="font-bold text-black uppercase">{generatedOrder.courier}</span>
                  </div>
                  <div className="flex justify-between border-b pb-2">
                    <span className="text-[10px] uppercase font-bold text-neutral-400">Order Status:</span>
                    <span className="font-bold text-yellow-700 uppercase">Pending Verification</span>
                  </div>
                  <div className="flex justify-between pt-1">
                    <span className="text-[10px] uppercase font-bold text-neutral-400">Delivery Target:</span>
                    <span className="font-bold text-black font-sans">{generatedOrder.shipping.city} (2-4 business days)</span>
                  </div>
                </div>

                <div className="pt-4 flex flex-col sm:flex-row gap-3 justify-center">
                  <Link
                    href="/account?tab=orders"
                    className="bg-[#0A0A0A] hover:bg-[#D4AF37] text-white hover:text-black font-semibold text-xs tracking-widest px-8 py-3 transition-colors uppercase border border-black hover:border-[#D4AF37]"
                  >
                    Track Order Status
                  </Link>
                  <Link
                    href="/shop"
                    className="bg-transparent hover:bg-neutral-100 text-neutral-600 font-semibold text-xs tracking-widest px-8 py-3 transition-colors uppercase border border-[#1A1A1A]/20"
                  >
                    Back To Shop
                  </Link>
                </div>
              </div>
            )}

          </div>

          {/* Right Side: Quick Cart Summary Invoice Panel (Sticky, hidden in confirmation step 4) */}
          {step < 4 && (
            <div className="lg:col-span-5 border border-[#1A1A1A]/10 bg-white p-6 space-y-6 sticky top-28">
              <h3 className="text-[10px] font-bold uppercase tracking-widest border-b border-[#1A1A1A]/10 pb-3 text-[#0a0a0a]">
                ORDER SUMMARY
              </h3>

              {/* Items List */}
              <div className="space-y-4 max-h-60 overflow-y-auto pr-2">
                {cart.map((item) => (
                  <div key={`${item.id}-${item.size}-${item.color}`} className="flex justify-between gap-4 text-xs">
                    <div className="flex gap-2">
                      <div className="relative h-12 w-10 border border-[#1A1A1A]/5">
                        <Image src={item.image} alt={item.name} fill className="object-cover" />
                      </div>
                      <div className="my-auto space-y-0.5">
                        <p className="font-serif font-bold text-[11px] text-black uppercase max-w-[150px] truncate">{item.name}</p>
                        <p className="text-[8px] text-neutral-400 uppercase tracking-widest">{item.size} / {item.color} x{item.quantity}</p>
                      </div>
                    </div>
                    <span className="font-sans font-semibold my-auto">{formatPrice(item.price * item.quantity)}</span>
                  </div>
                ))}
              </div>

              {/* Billing */}
              <div className="border-t border-[#1A1A1A]/10 pt-4 text-xs space-y-3 font-sans">
                <div className="flex justify-between items-center text-neutral-500">
                  <span>Subtotal</span>
                  <span>{formatPrice(getCartSubtotal())}</span>
                </div>
                <div className="flex justify-between items-center text-neutral-500">
                  <span>Shipping (Courier)</span>
                  <span>{formatPrice(shippingEstimate)}</span>
                </div>
                {discountPercent > 0 && (
                  <div className="flex justify-between items-center text-green-700 font-semibold">
                    <span>Discount</span>
                    <span>-{formatPrice(getCartSubtotal() * (discountPercent / 100))}</span>
                  </div>
                )}
                <div className="border-t border-[#1A1A1A]/10 pt-3 flex justify-between items-center text-sm font-bold uppercase text-black">
                  <span>Total Due</span>
                  <span className="text-[#D4AF37] text-base">{formatPrice(getCartTotal())}</span>
                </div>
              </div>
            </div>
          )}

        </div>
      </main>

      <Footer />
      <FloatingWhatsApp />
      <AIAssistant />
    </div>
  );
}