"use client";

import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Users,
  Bell,
  Calendar,
  CheckCircle2,
  ArrowRight,
  ArrowLeft,
  RotateCcw,
  Clock,
  Smartphone,
  Zap,
  Hash,
} from "lucide-react";
import type { Lang } from "@/lib/config";

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

const translations = {
  en: {
    title: "Smart Waitlist Management",
    subtitle:
      "Never lose a customer to a full calendar. Automated notifications when slots open.",
    step: "Step",
    of: "of",
    next: "Next",
    previous: "Previous",
    restart: "Try Again",
    steps: [
      {
        title: "Calendar Full",
        description:
          "When your schedule is fully booked, customers can join a waitlist instead of leaving.",
        highlights: [
          "No lost customers",
          "Priority queuing",
          "Service-specific",
        ],
      },
      {
        title: "Join Waitlist",
        description:
          "One-tap waitlist signup via WhatsApp. Customers see their position in queue.",
        highlights: ["Easy signup", "Queue position", "Time preference"],
      },
      {
        title: "Slot Opens Up",
        description:
          "When a cancellation occurs, the system automatically notifies waitlisted customers.",
        highlights: ["Instant alerts", "WhatsApp notification", "Fair queuing"],
      },
      {
        title: "Quick Booking",
        description:
          "First to respond gets the slot. Automatic confirmation and calendar sync.",
        highlights: ["First-come basis", "Auto-confirm", "Deposit collected"],
      },
    ],
    mockup: {
      calendarTitle: "December 2024",
      fullyBooked: "Fully Booked",
      noAvailable: "No slots available",
      joinWaitlist: "Join Waitlist",
      waitlistTitle: "Join Waitlist",
      yourPosition: "Your Position",
      inQueue: "in queue",
      estimatedWait: "Est. wait",
      hours: "hours",
      preferredTime: "Preferred Time",
      morning: "Morning",
      afternoon: "Afternoon",
      evening: "Evening",
      anytime: "Anytime",
      joined: "Added to waitlist!",
      notifyTitle: "Slot Available!",
      notifyMessage:
        "A slot just opened for tomorrow at 10:30 AM. Claim it now!",
      claimSlot: "Claim This Slot",
      expires: "Expires in 15 min",
      confirmedTitle: "Slot Claimed!",
      confirmedDesc: "Your appointment is confirmed",
      appointmentTime: "Tomorrow, 10:30 AM",
      depositPaid: "Deposit Paid",
      calendarAdded: "Added to Calendar",
      people: "people waiting",
    },
  },
  ar: {
    title: "إدارة قوائم الانتظار الذكية",
    subtitle:
      "لا تفقد أي عميل بسبب امتلاء التقويم. إشعارات تلقائية عند توفر المواعيد.",
    step: "الخطوة",
    of: "من",
    next: "التالي",
    previous: "السابق",
    restart: "إعادة المحاولة",
    steps: [
      {
        title: "التقويم ممتلئ",
        description:
          "عندما يكون جدولك محجوزاً بالكامل، يمكن للعملاء الانضمام لقائمة الانتظار بدلاً من المغادرة.",
        highlights: ["لا فقدان للعملاء", "أولوية الطابور", "حسب الخدمة"],
      },
      {
        title: "الانضمام للقائمة",
        description:
          "تسجيل بنقرة واحدة عبر واتساب. يرى العملاء موقعهم في الطابور.",
        highlights: ["تسجيل سهل", "موقع الطابور", "تفضيل الوقت"],
      },
      {
        title: "توفر موعد",
        description:
          "عند حدوث إلغاء، يقوم النظام تلقائياً بإشعار العملاء في قائمة الانتظار.",
        highlights: ["تنبيهات فورية", "إشعار واتساب", "طابور عادل"],
      },
      {
        title: "حجز سريع",
        description:
          "أول من يستجيب يحصل على الموعد. تأكيد تلقائي ومزامنة التقويم.",
        highlights: ["الأول يحصل", "تأكيد تلقائي", "تحصيل الإيداع"],
      },
    ],
    mockup: {
      calendarTitle: "ديسمبر 2024",
      fullyBooked: "محجوز بالكامل",
      noAvailable: "لا توجد مواعيد متاحة",
      joinWaitlist: "انضم لقائمة الانتظار",
      waitlistTitle: "الانضمام للقائمة",
      yourPosition: "موقعك",
      inQueue: "في الطابور",
      estimatedWait: "وقت الانتظار",
      hours: "ساعات",
      preferredTime: "الوقت المفضل",
      morning: "صباحاً",
      afternoon: "ظهراً",
      evening: "مساءً",
      anytime: "أي وقت",
      joined: "تمت الإضافة للقائمة!",
      notifyTitle: "موعد متاح!",
      notifyMessage: "توفر موعد غداً الساعة 10:30 صباحاً. احجزه الآن!",
      claimSlot: "احجز هذا الموعد",
      expires: "ينتهي خلال 15 دقيقة",
      confirmedTitle: "تم الحجز!",
      confirmedDesc: "موعدك مؤكد",
      appointmentTime: "غداً، 10:30 صباحاً",
      depositPaid: "تم دفع الإيداع",
      calendarAdded: "تمت الإضافة للتقويم",
      people: "شخص في الانتظار",
    },
  },
};

/**
 * WaitlistDemo Component
 *
 * Interactive demonstration of the waitlist management feature.
 * Shows the flow from full calendar to successful booking via waitlist.
 *
 * @example
 * <WaitlistDemo lang="en" autoPlay={true} />
 */
export function WaitlistDemo({
  lang,
  autoPlay = false,
  autoPlayInterval = 5000,
}: WaitlistDemoProps) {
  const [currentStep, setCurrentStep] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);
  const [queuePosition, setQueuePosition] = useState(3);
  const isRTL = lang === "ar";
  const t = translations[lang];

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

  // Simulate queue position decreasing
  useEffect(() => {
    if (currentStep === 1) {
      const timer = setInterval(() => {
        setQueuePosition((prev) => Math.max(1, prev - 1));
      }, 2000);
      return () => clearInterval(timer);
    }
    setQueuePosition(3);
  }, [currentStep]);

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

  const goNext = () => {
    if (currentStep < 3) goToStep(currentStep + 1);
  };

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

  const restart = () => {
    goToStep(0);
    setQueuePosition(3);
  };

  const stepIcons = [
    <Calendar key="calendar" className="w-5 h-5" />,
    <Users key="users" className="w-5 h-5" />,
    <Bell key="bell" className="w-5 h-5" />,
    <CheckCircle2 key="check" className="w-5 h-5" />,
  ];

  const renderMockup = () => {
    const mockups = [
      // Step 1: Full Calendar
      <div
        key="calendar"
        className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <div className="p-4 bg-red-500 text-white">
          <div className="flex items-center justify-between">
            <h4 className="font-semibold">{t.mockup.calendarTitle}</h4>
            <span className="px-2 py-1 bg-white/20 rounded text-xs font-medium">
              {t.mockup.fullyBooked}
            </span>
          </div>
        </div>
        <div className="p-4">
          {/* Calendar grid mockup */}
          <div className="grid grid-cols-7 gap-1 mb-4">
            {["S", "M", "T", "W", "T", "F", "S"].map((day, i) => (
              <div
                key={i}
                className="text-center text-xs font-medium text-gray-500 py-1"
              >
                {day}
              </div>
            ))}
            {Array.from({ length: 35 }, (_, i) => {
              const day = i - 6;
              const isBooked = day > 0 && day <= 31;
              return (
                <motion.div
                  key={i}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 0.02 * i }}
                  className={`
                    text-center py-2 text-sm rounded
                    ${
                      day <= 0 || day > 31
                        ? "text-gray-300 dark:text-gray-600"
                        : isBooked
                          ? "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400"
                          : "text-gray-700 dark:text-gray-300"
                    }
                  `}
                >
                  {day > 0 && day <= 31 ? day : ""}
                </motion.div>
              );
            })}
          </div>
          {/* No slots message */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            className="p-4 bg-gray-50 dark:bg-slate-700 rounded-xl text-center"
          >
            <Clock className="w-8 h-8 text-gray-400 mx-auto mb-2" />
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
              {t.mockup.noAvailable}
            </p>
            <button className="w-full py-3 bg-brand-green hover:bg-brand-greenHover text-white font-semibold rounded-xl transition-colors flex items-center justify-center gap-2">
              <Users className="w-4 h-4" />
              {t.mockup.joinWaitlist}
            </button>
          </motion.div>
        </div>
      </div>,

      // Step 2: Join Waitlist
      <div
        key="waitlist"
        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.waitlistTitle}</h4>
        </div>
        <div className="p-4">
          {/* Queue Position */}
          <motion.div
            initial={{ scale: 0.8, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            className="text-center mb-6"
          >
            <div className="w-24 h-24 rounded-full bg-brand-green/10 flex items-center justify-center mx-auto mb-3">
              <motion.div
                key={queuePosition}
                initial={{ scale: 0.5, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                className="text-4xl font-bold text-brand-green"
              >
                #{queuePosition}
              </motion.div>
            </div>
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {t.mockup.yourPosition}{" "}
              <span className="font-semibold">{t.mockup.inQueue}</span>
            </p>
            <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
              {t.mockup.estimatedWait}: ~{queuePosition * 2} {t.mockup.hours}
            </p>
          </motion.div>

          {/* Time Preference */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {t.mockup.preferredTime}
            </label>
            <div className="grid grid-cols-4 gap-2">
              {[
                t.mockup.morning,
                t.mockup.afternoon,
                t.mockup.evening,
                t.mockup.anytime,
              ].map((time, idx) => (
                <motion.button
                  key={idx}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 * idx }}
                  className={`
                    p-2 rounded-lg text-xs font-medium transition-all
                    ${
                      idx === 3
                        ? "bg-brand-green text-white"
                        : "bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-600"
                    }
                  `}
                >
                  {time}
                </motion.button>
              ))}
            </div>
          </div>

          {/* Waiting indicator */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.5 }}
            className="p-4 bg-green-50 dark:bg-green-900/20 rounded-xl"
          >
            <div className="flex items-center gap-3">
              <motion.div
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ repeat: Infinity, duration: 2 }}
                className="w-10 h-10 bg-brand-green rounded-full flex items-center justify-center"
              >
                <CheckCircle2 className="w-5 h-5 text-white" />
              </motion.div>
              <div>
                <p className="font-semibold text-green-800 dark:text-green-200">
                  {t.mockup.joined}
                </p>
                <p className="text-xs text-green-600 dark:text-green-400">
                  4 {t.mockup.people}
                </p>
              </div>
            </div>
          </motion.div>
        </div>
      </div>,

      // Step 3: Notification
      <div
        key="notify"
        className="bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden"
      >
        <div className="p-4 bg-green-600 text-white">
          <div className="flex items-center gap-2">
            <Smartphone className="w-5 h-5" />
            <span className="text-sm">WhatsApp</span>
          </div>
        </div>
        <div className="p-4 bg-gray-100 dark:bg-slate-700">
          <motion.div
            initial={{ opacity: 0, y: 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            transition={{ type: "spring", stiffness: 300, damping: 25 }}
            className="bg-white dark:bg-slate-800 rounded-xl p-4 shadow-lg"
          >
            {/* Notification header */}
            <div className="flex items-start gap-3 mb-4">
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ delay: 0.3, type: "spring" }}
                className="w-12 h-12 bg-brand-green rounded-full flex items-center justify-center flex-shrink-0"
              >
                <Zap className="w-6 h-6 text-white" />
              </motion.div>
              <div>
                <h5 className="font-bold text-gray-900 dark:text-white">
                  {t.mockup.notifyTitle}
                </h5>
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  {t.mockup.notifyMessage}
                </p>
              </div>
            </div>
            {/* CTA Button */}
            <motion.button
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.5 }}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="w-full py-3 bg-brand-green hover:bg-brand-greenHover text-white font-semibold rounded-xl transition-colors"
            >
              {t.mockup.claimSlot}
            </motion.button>
            {/* Timer */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.7 }}
              className="flex items-center justify-center gap-2 mt-3 text-sm text-orange-600 dark:text-orange-400"
            >
              <motion.div
                animate={{ scale: [1, 1.1, 1] }}
                transition={{ repeat: Infinity, duration: 1 }}
              >
                <Clock className="w-4 h-4" />
              </motion.div>
              {t.mockup.expires}
            </motion.div>
          </motion.div>
        </div>
      </div>,

      // Step 4: Confirmed
      <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, rotate: -180 }}
            animate={{ scale: 1, rotate: 0 }}
            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-6">
            {t.mockup.confirmedDesc}
          </p>
          {/* Details */}
          <div className="space-y-3 text-left">
            <motion.div
              initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.3 }}
              className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-slate-700 rounded-lg"
            >
              <Calendar className="w-5 h-5 text-brand-green" />
              <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
                {t.mockup.appointmentTime}
              </span>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.4 }}
              className="flex items-center gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg"
            >
              <CheckCircle2 className="w-5 h-5 text-brand-green" />
              <span className="text-sm font-medium text-green-800 dark:text-green-200">
                {t.mockup.depositPaid}
              </span>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.5 }}
              className="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg"
            >
              <Calendar className="w-5 h-5 text-blue-600 dark:text-blue-400" />
              <span className="text-sm font-medium text-blue-800 dark:text-blue-200">
                {t.mockup.calendarAdded}
              </span>
            </motion.div>
          </div>
          {/* Badge */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.6 }}
            className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-brand-green/10 text-brand-green rounded-full text-sm font-medium"
          >
            <Hash className="w-4 h-4" />
            <span>MWD-2024-5678</span>
          </motion.div>
        </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 */}
      <div className="p-6 lg:p-8 border-b border-stone-200 dark:border-slate-700 bg-gradient-to-r from-amber-500/5 to-orange-500/5 dark:from-amber-500/10 dark:to-orange-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>

      {/* 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">
          {t.steps.map((step, index) => {
            const isCompleted = index < currentStep;
            const isCurrent = index === currentStep;

            return (
              <React.Fragment key={index}>
                <button
                  onClick={() => goToStep(index)}
                  className={`
                    flex flex-col items-center gap-2 px-3 py-2 rounded-xl transition-all duration-300
                    ${
                      isCurrent
                        ? "bg-amber-500/10 dark:bg-amber-500/20"
                        : "hover:bg-stone-100 dark:hover:bg-slate-700"
                    }
                  `}
                >
                  <div
                    className={`
                      w-10 h-10 rounded-full flex items-center justify-center transition-all duration-300
                      ${
                        isCurrent
                          ? "bg-amber-500 text-white shadow-lg"
                          : 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]
                    )}
                  </div>
                  <span
                    className={`
                      text-xs font-medium text-center max-w-[70px] leading-tight
                      ${
                        isCurrent
                          ? "text-amber-600 dark:text-amber-400"
                          : "text-stone-600 dark:text-stone-400"
                      }
                    `}
                  >
                    {step.title}
                  </span>
                </button>
                {index < t.steps.length - 1 && (
                  <div
                    className={`
                      flex-1 h-0.5 mx-2 transition-colors duration-300
                      ${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-amber-500/10 text-amber-600 dark:text-amber-400 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 === 3 ? (
          <button
            onClick={restart}
            className="flex items-center gap-2 px-6 py-2 rounded-lg bg-amber-500 hover:bg-amber-600 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-amber-500 hover:bg-amber-600 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 WaitlistDemo;