"use client";

import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  ShoppingCart,
  Clock,
  User,
  CreditCard,
  CheckCircle2,
  ArrowRight,
  ArrowLeft,
  RotateCcw,
  Sparkles,
  Calendar,
  MapPin,
} from "lucide-react";
import type { Lang } from "@/lib/config";

interface CheckoutFlowDemoProps {
  lang: Lang;
  autoPlay?: boolean;
  autoPlayInterval?: number;
}

const translations = {
  en: {
    title: "Seamless Checkout Experience",
    subtitle: "From service selection to confirmed booking in under 60 seconds",
    step: "Step",
    of: "of",
    next: "Next",
    previous: "Previous",
    restart: "Start Over",
    steps: [
      {
        title: "Select Service",
        description:
          "Customers browse and select their desired service from your catalog. AI recommends based on history.",
        highlights: [
          "Smart recommendations",
          "Category filters",
          "Price transparency",
        ],
      },
      {
        title: "Choose Time Slot",
        description:
          "Real-time availability shows open slots. Customers pick their preferred date and time.",
        highlights: ["Live availability", "Staff preference", "Duration info"],
      },
      {
        title: "Enter Details",
        description:
          "Quick form capture with smart autofill. Returning customers get instant recognition.",
        highlights: ["Auto-fill", "Notes field", "Guest info"],
      },
      {
        title: "Payment",
        description:
          "Secure checkout with multiple payment options. Deposits or full payment supported.",
        highlights: ["Apple Pay", "Cards", "Pay later"],
      },
      {
        title: "Booking Confirmed",
        description:
          "Instant confirmation via WhatsApp with calendar invite. Automated reminders follow.",
        highlights: ["WhatsApp receipt", "Calendar sync", "Reminders"],
      },
    ],
    mockup: {
      selectService: "Select a Service",
      popular: "Popular",
      services: [
        {
          name: "Botox Treatment",
          price: "SAR 1,200",
          duration: "45 min",
          popular: true,
        },
        {
          name: "Facial Rejuvenation",
          price: "SAR 800",
          duration: "60 min",
          popular: false,
        },
        {
          name: "Laser Hair Removal",
          price: "SAR 500",
          duration: "30 min",
          popular: true,
        },
      ],
      selectTime: "Select Date & Time",
      today: "Today",
      tomorrow: "Tomorrow",
      available: "Available",
      timeSlots: ["9:00 AM", "10:30 AM", "2:00 PM", "4:30 PM"],
      yourDetails: "Your Details",
      fullName: "Full Name",
      phone: "Phone Number",
      email: "Email",
      notes: "Special notes (optional)",
      continue: "Continue",
      paymentTitle: "Complete Payment",
      total: "Total",
      payNow: "Pay Now",
      confirmedTitle: "Booking Confirmed!",
      confirmedDesc: "Check your WhatsApp for details",
      bookingRef: "Booking Ref",
      viewDetails: "View Details",
    },
  },
  ar: {
    title: "تجربة دفع سلسة",
    subtitle: "من اختيار الخدمة إلى تأكيد الحجز في أقل من 60 ثانية",
    step: "الخطوة",
    of: "من",
    next: "التالي",
    previous: "السابق",
    restart: "إعادة البدء",
    steps: [
      {
        title: "اختيار الخدمة",
        description:
          "يتصفح العملاء ويختارون الخدمة المطلوبة من قائمتك. الذكاء الاصطناعي يقترح بناءً على السجل.",
        highlights: ["توصيات ذكية", "فلاتر الفئات", "شفافية الأسعار"],
      },
      {
        title: "اختيار الوقت",
        description:
          "يظهر التوفر الفوري المواعيد المتاحة. يختار العملاء التاريخ والوقت المفضل.",
        highlights: ["توفر مباشر", "تفضيل الموظف", "معلومات المدة"],
      },
      {
        title: "إدخال البيانات",
        description:
          "نموذج سريع مع الإكمال التلقائي الذكي. العملاء العائدون يحصلون على تعرف فوري.",
        highlights: ["إكمال تلقائي", "حقل ملاحظات", "بيانات الضيف"],
      },
      {
        title: "الدفع",
        description: "دفع آمن مع خيارات متعددة. يدعم الودائع أو الدفع الكامل.",
        highlights: ["آبل باي", "البطاقات", "ادفع لاحقاً"],
      },
      {
        title: "تأكيد الحجز",
        description:
          "تأكيد فوري عبر واتساب مع دعوة تقويم. تتبع التذكيرات الآلية.",
        highlights: ["إيصال واتساب", "مزامنة التقويم", "تذكيرات"],
      },
    ],
    mockup: {
      selectService: "اختر خدمة",
      popular: "شائع",
      services: [
        {
          name: "علاج البوتوكس",
          price: "1,200 ريال",
          duration: "45 دقيقة",
          popular: true,
        },
        {
          name: "تجديد الوجه",
          price: "800 ريال",
          duration: "60 دقيقة",
          popular: false,
        },
        {
          name: "إزالة الشعر بالليزر",
          price: "500 ريال",
          duration: "30 دقيقة",
          popular: true,
        },
      ],
      selectTime: "اختر التاريخ والوقت",
      today: "اليوم",
      tomorrow: "غداً",
      available: "متاح",
      timeSlots: ["9:00 ص", "10:30 ص", "2:00 م", "4:30 م"],
      yourDetails: "بياناتك",
      fullName: "الاسم الكامل",
      phone: "رقم الهاتف",
      email: "البريد الإلكتروني",
      notes: "ملاحظات خاصة (اختياري)",
      continue: "متابعة",
      paymentTitle: "إتمام الدفع",
      total: "المجموع",
      payNow: "ادفع الآن",
      confirmedTitle: "تم تأكيد الحجز!",
      confirmedDesc: "تحقق من واتساب للتفاصيل",
      bookingRef: "رقم الحجز",
      viewDetails: "عرض التفاصيل",
    },
  },
};

/**
 * CheckoutFlowDemo Component
 *
 * Interactive demonstration of the complete booking checkout flow.
 * Mobile-first design with progress indicator.
 *
 * @example
 * <CheckoutFlowDemo lang="en" autoPlay={false} />
 */
export function CheckoutFlowDemo({
  lang,
  autoPlay = false,
  autoPlayInterval = 5000,
}: CheckoutFlowDemoProps) {
  const [currentStep, setCurrentStep] = useState(0);
  const [selectedService, setSelectedService] = useState<number | null>(null);
  const [selectedTime, setSelectedTime] = useState<string | null>(null);
  const [isAnimating, setIsAnimating] = useState(false);
  const isRTL = lang === "ar";
  const t = translations[lang];

  // Auto-play effect
  useEffect(() => {
    if (!autoPlay) return;
    const timer = setInterval(() => {
      setCurrentStep((prev) => (prev + 1) % 5);
    }, autoPlayInterval);
    return () => clearInterval(timer);
  }, [autoPlay, autoPlayInterval]);

  const goToStep = (step: number) => {
    if (isAnimating) return;
    setIsAnimating(true);
    setCurrentStep(step);
    setTimeout(() => setIsAnimating(false), 500);
  };

  const goNext = () => {
    if (currentStep < 4) {
      // Auto-select for demo purposes
      if (currentStep === 0 && selectedService === null) setSelectedService(0);
      if (currentStep === 1 && selectedTime === null)
        setSelectedTime(t.mockup.timeSlots[1]);
      goToStep(currentStep + 1);
    }
  };

  const goPrevious = () => {
    if (currentStep > 0) goToStep(currentStep - 1);
  };

  const restart = () => {
    setSelectedService(null);
    setSelectedTime(null);
    goToStep(0);
  };

  const stepIcons = [
    <ShoppingCart key="cart" className="w-5 h-5" />,
    <Clock key="clock" className="w-5 h-5" />,
    <User key="user" className="w-5 h-5" />,
    <CreditCard key="card" className="w-5 h-5" />,
    <CheckCircle2 key="check" className="w-5 h-5" />,
  ];

  // Progress bar percentage
  const progressPercent = ((currentStep + 1) / 5) * 100;

  const renderMockup = () => {
    const mockups = [
      // Step 1: Service Selection
      <div
        key="services"
        className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <div className="p-4 bg-gradient-to-r from-brand-green to-teal-500 text-white">
          <h4 className="font-semibold">{t.mockup.selectService}</h4>
        </div>
        <div className="p-4 space-y-3">
          {t.mockup.services.map((service, idx) => (
            <motion.button
              key={idx}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 * idx }}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              onClick={() => setSelectedService(idx)}
              className={`
                w-full p-4 rounded-xl border-2 transition-all text-left
                ${
                  selectedService === idx
                    ? "border-brand-green bg-brand-green/5"
                    : "border-gray-200 dark:border-slate-600 hover:border-brand-green/50"
                }
              `}
            >
              <div className="flex items-start justify-between">
                <div>
                  <div className="flex items-center gap-2">
                    <span className="font-semibold text-gray-900 dark:text-white">
                      {service.name}
                    </span>
                    {service.popular && (
                      <span className="px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-700 rounded-full flex items-center gap-1">
                        <Sparkles className="w-3 h-3" />
                        {t.mockup.popular}
                      </span>
                    )}
                  </div>
                  <div className="flex items-center gap-3 mt-1 text-sm text-gray-500 dark:text-gray-400">
                    <span className="flex items-center gap-1">
                      <Clock className="w-3 h-3" />
                      {service.duration}
                    </span>
                  </div>
                </div>
                <span className="font-bold text-brand-green">
                  {service.price}
                </span>
              </div>
              {selectedService === idx && (
                <motion.div
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  className="absolute top-2 right-2 w-6 h-6 bg-brand-green rounded-full flex items-center justify-center"
                >
                  <CheckCircle2 className="w-4 h-4 text-white" />
                </motion.div>
              )}
            </motion.button>
          ))}
        </div>
      </div>,

      // Step 2: Time Selection
      <div
        key="time"
        className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <div className="p-4 bg-gradient-to-r from-brand-green to-teal-500 text-white">
          <h4 className="font-semibold">{t.mockup.selectTime}</h4>
        </div>
        <div className="p-4">
          {/* Date tabs */}
          <div className="flex gap-2 mb-4">
            <button className="flex-1 py-2 px-4 bg-brand-green text-white rounded-lg font-medium">
              {t.mockup.today}
            </button>
            <button className="flex-1 py-2 px-4 bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">
              {t.mockup.tomorrow}
            </button>
          </div>
          {/* Time slots */}
          <div className="grid grid-cols-2 gap-2">
            {t.mockup.timeSlots.map((time, idx) => (
              <motion.button
                key={idx}
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.1 * idx }}
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={() => setSelectedTime(time)}
                className={`
                  p-3 rounded-lg border-2 transition-all
                  ${
                    selectedTime === time
                      ? "border-brand-green bg-brand-green/10 text-brand-green"
                      : "border-gray-200 dark:border-slate-600 text-gray-700 dark:text-gray-300 hover:border-brand-green/50"
                  }
                `}
              >
                <span className="font-semibold">{time}</span>
                <span className="block text-xs text-gray-500 dark:text-gray-400 mt-1">
                  {t.mockup.available}
                </span>
              </motion.button>
            ))}
          </div>
        </div>
      </div>,

      // Step 3: Customer Details
      <div
        key="details"
        className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <div className="p-4 bg-gradient-to-r from-brand-green to-teal-500 text-white">
          <h4 className="font-semibold">{t.mockup.yourDetails}</h4>
        </div>
        <div className="p-4 space-y-4">
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
          >
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              {t.mockup.fullName}
            </label>
            <input
              type="text"
              defaultValue="Sarah Ahmed"
              className="w-full px-4 py-3 border border-gray-200 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-700 text-gray-900 dark:text-white"
              readOnly
            />
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
          >
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              {t.mockup.phone}
            </label>
            <input
              type="tel"
              defaultValue="+966 50 123 4567"
              className="w-full px-4 py-3 border border-gray-200 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-700 text-gray-900 dark:text-white"
              readOnly
            />
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
          >
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              {t.mockup.email}
            </label>
            <input
              type="email"
              defaultValue="sarah@email.com"
              className="w-full px-4 py-3 border border-gray-200 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-700 text-gray-900 dark:text-white"
              readOnly
            />
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
          >
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              {t.mockup.notes}
            </label>
            <textarea
              rows={2}
              className="w-full px-4 py-3 border border-gray-200 dark:border-slate-600 rounded-lg bg-gray-50 dark:bg-slate-700 text-gray-900 dark:text-white resize-none"
              placeholder="..."
              readOnly
            />
          </motion.div>
        </div>
      </div>,

      // Step 4: Payment
      <div
        key="payment"
        className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <div className="p-4 bg-gradient-to-r from-brand-green to-teal-500 text-white">
          <h4 className="font-semibold">{t.mockup.paymentTitle}</h4>
        </div>
        <div className="p-4">
          {/* Order summary */}
          <div className="p-4 bg-gray-50 dark:bg-slate-700 rounded-xl mb-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-gray-600 dark:text-gray-400">
                {t.mockup.services[selectedService ?? 0].name}
              </span>
              <span className="font-medium text-gray-900 dark:text-white">
                {t.mockup.services[selectedService ?? 0].price}
              </span>
            </div>
            <div className="flex items-center justify-between pt-2 border-t border-gray-200 dark:border-slate-600">
              <span className="font-bold text-gray-900 dark:text-white">
                {t.mockup.total}
              </span>
              <span className="font-bold text-brand-green text-lg">
                {t.mockup.services[selectedService ?? 0].price}
              </span>
            </div>
          </div>
          {/* Payment methods */}
          <div className="space-y-2">
            <motion.button
              initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.1 }}
              className="w-full flex items-center gap-3 p-3 bg-black text-white rounded-xl"
            >
              <div className="w-8 h-8 bg-white rounded flex items-center justify-center">
                <span className="text-black font-bold"></span>
              </div>
              <span className="font-medium">Apple Pay</span>
              <CheckCircle2
                className={`w-5 h-5 text-brand-green ${isRTL ? "mr-auto" : "ml-auto"}`}
              />
            </motion.button>
            <motion.button
              initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.2 }}
              className="w-full flex items-center gap-3 p-3 border border-gray-200 dark:border-slate-600 rounded-xl"
            >
              <div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center">
                <CreditCard className="w-4 h-4 text-white" />
              </div>
              <span className="font-medium text-gray-800 dark:text-white">
                Card
              </span>
            </motion.button>
          </div>
          <motion.button
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="w-full mt-4 py-3 bg-brand-green hover:bg-brand-greenHover text-white font-semibold rounded-xl transition-colors"
          >
            {t.mockup.payNow}
          </motion.button>
        </div>
      </div>,

      // Step 5: Confirmation
      <div
        key="confirmed"
        className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ type: "spring", stiffness: 200 }}
          className="p-6 text-center"
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ delay: 0.2, type: "spring", stiffness: 300 }}
            className="w-20 h-20 bg-brand-green rounded-full flex items-center justify-center mx-auto mb-4"
          >
            <CheckCircle2 className="w-10 h-10 text-white" />
          </motion.div>
          <h4 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
            {t.mockup.confirmedTitle}
          </h4>
          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
            {t.mockup.confirmedDesc}
          </p>
          <div className="p-4 bg-gray-50 dark:bg-slate-700 rounded-xl text-left space-y-3">
            <div className="flex items-center gap-3">
              <ShoppingCart className="w-5 h-5 text-brand-green" />
              <span className="text-sm text-gray-800 dark:text-gray-200">
                {t.mockup.services[selectedService ?? 0].name}
              </span>
            </div>
            <div className="flex items-center gap-3">
              <Calendar className="w-5 h-5 text-brand-green" />
              <span className="text-sm text-gray-800 dark:text-gray-200">
                {t.mockup.today}, {selectedTime ?? t.mockup.timeSlots[1]}
              </span>
            </div>
            <div className="flex items-center gap-3">
              <MapPin className="w-5 h-5 text-brand-green" />
              <span className="text-sm text-gray-800 dark:text-gray-200">
                Elite Medical Center
              </span>
            </div>
            <div className="pt-3 border-t border-gray-200 dark:border-slate-600">
              <span className="text-xs text-gray-500 dark:text-gray-400">
                {t.mockup.bookingRef}
              </span>
              <span className="block font-mono font-bold text-brand-green">
                MWD-2024-1234
              </span>
            </div>
          </div>
          <button className="w-full mt-4 py-3 border-2 border-brand-green text-brand-green font-semibold rounded-xl hover:bg-brand-green/5 transition-colors">
            {t.mockup.viewDetails}
          </button>
        </motion.div>
      </div>,
    ];

    return mockups[currentStep];
  };

  return (
    <div
      dir={isRTL ? "rtl" : "ltr"}
      className="w-full bg-white dark:bg-slate-900 rounded-2xl border border-stone-200 dark:border-slate-700 overflow-hidden shadow-premium-lg"
    >
      {/* Header with Progress */}
      <div className="relative">
        <div className="p-6 lg:p-8 bg-gradient-to-r from-brand-green/5 to-teal-500/5 dark:from-brand-green/10 dark:to-teal-500/10">
          <h3 className="text-2xl lg:text-3xl font-bold text-stone-900 dark:text-white mb-2">
            {t.title}
          </h3>
          <p className="text-stone-600 dark:text-stone-400">{t.subtitle}</p>
        </div>
        {/* Progress bar */}
        <div className="h-1 bg-stone-200 dark:bg-slate-700">
          <motion.div
            className="h-full bg-brand-green"
            initial={{ width: 0 }}
            animate={{ width: `${progressPercent}%` }}
            transition={{ duration: 0.3 }}
          />
        </div>
      </div>

      {/* Step indicators */}
      <div className="px-6 lg:px-8 py-4 border-b border-stone-200 dark:border-slate-700 bg-stone-50 dark:bg-slate-800/50 overflow-x-auto">
        <div className="flex items-center justify-between min-w-max gap-2">
          {t.steps.map((step, index) => {
            const isCompleted = index < currentStep;
            const isCurrent = index === currentStep;

            return (
              <React.Fragment key={index}>
                <button
                  onClick={() => goToStep(index)}
                  className={`
                    flex items-center gap-2 px-3 py-2 rounded-lg transition-all
                    ${
                      isCurrent
                        ? "bg-brand-green text-white"
                        : isCompleted
                          ? "bg-brand-green/20 text-brand-green"
                          : "bg-stone-200 dark:bg-slate-700 text-stone-500 dark:text-stone-400"
                    }
                  `}
                >
                  {isCompleted ? (
                    <CheckCircle2 className="w-5 h-5" />
                  ) : (
                    stepIcons[index]
                  )}
                  <span className="text-sm font-medium hidden md:inline">
                    {step.title}
                  </span>
                </button>
                {index < t.steps.length - 1 && (
                  <div
                    className={`w-8 h-0.5 ${
                      isCompleted
                        ? "bg-brand-green"
                        : "bg-stone-300 dark:bg-slate-600"
                    }`}
                  />
                )}
              </React.Fragment>
            );
          })}
        </div>
      </div>

      {/* Content */}
      <div className="p-6 lg:p-8">
        <div className="grid lg:grid-cols-2 gap-8 items-start">
          {/* Step Info */}
          <div className={`space-y-6 ${isRTL ? "lg:order-2" : "lg:order-1"}`}>
            <AnimatePresence mode="wait">
              <motion.div
                key={currentStep}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -20 }}
                transition={{ duration: 0.3 }}
              >
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-green/10 text-brand-green text-sm font-medium mb-4">
                  {t.step} {currentStep + 1} {t.of} {t.steps.length}
                </div>
                <h4 className="text-xl lg:text-2xl font-bold text-stone-900 dark:text-white mb-3">
                  {t.steps[currentStep].title}
                </h4>
                <p className="text-stone-600 dark:text-stone-400 leading-relaxed mb-6">
                  {t.steps[currentStep].description}
                </p>
                <div className="flex flex-wrap gap-2">
                  {t.steps[currentStep].highlights.map((highlight, idx) => (
                    <motion.span
                      key={idx}
                      initial={{ opacity: 0, scale: 0.8 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ delay: 0.1 * idx }}
                      className="px-3 py-1 text-sm font-medium bg-stone-100 dark:bg-slate-800 text-stone-700 dark:text-stone-300 rounded-full"
                    >
                      {highlight}
                    </motion.span>
                  ))}
                </div>
              </motion.div>
            </AnimatePresence>
          </div>

          {/* Mockup */}
          <div className={`${isRTL ? "lg:order-1" : "lg:order-2"}`}>
            <AnimatePresence mode="wait">
              <motion.div
                key={currentStep}
                initial={{ opacity: 0, x: isRTL ? -20 : 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: isRTL ? 20 : -20 }}
                transition={{ duration: 0.3 }}
              >
                {renderMockup()}
              </motion.div>
            </AnimatePresence>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <div className="px-6 lg:px-8 py-4 border-t border-stone-200 dark:border-slate-700 bg-stone-50 dark:bg-slate-800/50 flex items-center justify-between">
        <button
          onClick={goPrevious}
          disabled={currentStep === 0}
          className={`
            flex items-center gap-2 px-4 py-2 rounded-lg transition-all
            ${
              currentStep === 0
                ? "opacity-50 cursor-not-allowed"
                : "hover:bg-stone-200 dark:hover:bg-slate-700"
            }
            text-stone-700 dark:text-stone-300
          `}
        >
          {isRTL ? (
            <ArrowRight className="w-5 h-5" />
          ) : (
            <ArrowLeft className="w-5 h-5" />
          )}
          <span className="font-medium">{t.previous}</span>
        </button>

        {currentStep === 4 ? (
          <button
            onClick={restart}
            className="flex items-center gap-2 px-6 py-2 rounded-lg bg-brand-green hover:bg-brand-greenHover text-white font-medium transition-all"
          >
            <RotateCcw className="w-5 h-5" />
            <span>{t.restart}</span>
          </button>
        ) : (
          <button
            onClick={goNext}
            className="flex items-center gap-2 px-6 py-2 rounded-lg bg-brand-green hover:bg-brand-greenHover text-white font-medium transition-all"
          >
            <span>{t.next}</span>
            {isRTL ? (
              <ArrowLeft className="w-5 h-5" />
            ) : (
              <ArrowRight className="w-5 h-5" />
            )}
          </button>
        )}
      </div>
    </div>
  );
}

export default CheckoutFlowDemo;