import { CreditCard, MapPin, Calendar, Zap, ChevronLeft, ChevronRight, Smartphone, Heart } from 'lucide-react';
import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { useLocation } from 'react-router-dom';

const steps = [
  {
    id: 1,
    title: 'Choose Your City',
    subtitle: 'Select Your Destination',
    description: 'Browse our collection of amazing cities and pick the perfect destination for your next adventure. Each city offers unique experiences and attractions.',
    icon: MapPin
  },
  {
    id: 2,
    title: 'Select Your Pass',
    subtitle: 'Pick Your Perfect Plan',
    description: 'Choose from our flexible pass options that match your travel style and duration. From 1-day express to 7-day explorer passes.',
    icon: CreditCard
  },
  {
    id: 3,
    title: 'Plan Your Itinerary',
    subtitle: 'Create Your Schedule',
    description: 'Use our smart planning tools to create the perfect itinerary with skip-the-line access to your favorite attractions and experiences.',
    icon: Calendar
  },
  {
    id: 4,
    title: 'Download the App',
    subtitle: 'Get Mobile Access',
    description: 'Download our mobile app to have instant access to your digital pass, maps, and real-time updates wherever you go.',
    icon: Smartphone
  },
  {
    id: 5,
    title: 'Enjoy Your Adventure',
    subtitle: 'Explore & Discover',
    description: 'Show your digital pass and enjoy instant access to attractions, tours, and experiences. No more waiting in long ticket lines.',
    icon: Zap
  },
  {
    id: 6,
    title: 'Create Memories',
    subtitle: 'Share Your Journey',
    description: 'Capture amazing moments and share your experiences with friends. Rate attractions and help future travelers discover the best spots.',
    icon: Heart
  }
];

export function HowItWorks() {
  const [activeStep, setActiveStep] = useState(0); // Start with first step active

  const location = useLocation()

  const nextStep = () => {
    setActiveStep((prev) => (prev + 1) % steps.length);
  };

  const prevStep = () => {
    setActiveStep((prev) => (prev - 1 + steps.length) % steps.length);
  };

  const goToStep = (index: number) => {
    setActiveStep(index);
  };

  const currentStep = steps[activeStep];

  return (
    <section className="py-20 bg-gradient-to-br from-green-50/30 to-blue-50/30">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-6">
            <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
            <span className="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              Simple Process
            </span>
          </div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4">
            <span className="font-light">How Your</span>{' '}
            {!location.pathname.includes("landing") &&
            <span className="font-normal">Melbourne </span>
            }
            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic pr-2">City Card</span>{' '}
            <span className="font-light">Works.</span>
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            One purchase. One card. Unlimited experiences.
          </p>
        </div>

        {/* Main Content */}
        <div className="max-w-6xl mx-auto">
          {/* Desktop Layout */}
          <div className="hidden lg:grid lg:grid-cols-12 gap-8">
            
            {/* Left Panel - Section Header */}
            <div className="lg:col-span-5">
              <div className="sticky top-8">


                {/* Current Step Details */}
                <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm h-[400px] flex flex-col">
                  <div className="flex items-center gap-4 mb-4">
                    <div className="w-10 h-10 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center">
                      <span className="text-white font-bold">{currentStep.id}</span>
                    </div>
                    <span className="font-medium text-gray-500">
                      Step {currentStep.id} of {steps.length}
                    </span>
                  </div>

                  <AnimatePresence mode="wait">
                    <motion.div
                      key={activeStep}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: -10 }}
                      transition={{ duration: 0.3 }}
                    >
                      <div className="w-16 h-16 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl flex items-center justify-center mb-4 relative overflow-hidden">
                        {currentStep.id === 1 && (
                          // Choose Your City - Multiple city selection animation (larger version)
                          <div className="relative scale-125">
                            {/* World map background */}
                            <div className="w-8 h-6 bg-primary/10 rounded border border-primary/20 relative overflow-hidden">
                              {/* Animated cities appearing sequentially */}
                              {[0, 1, 2].map((cityIndex) => (
                                <motion.div
                                  key={cityIndex}
                                  className="absolute w-1.5 h-1.5 rounded-full bg-primary"
                                  style={{
                                    left: `${20 + cityIndex * 25}%`,
                                    top: `${30 + (cityIndex % 2) * 30}%`,
                                  }}
                                  animate={{
                                    scale: [0, 1.5, 1],
                                    opacity: [0, 1, 0.7],
                                  }}
                                  transition={{
                                    duration: 1.5,
                                    repeat: Infinity,
                                    delay: cityIndex * 0.5,
                                    ease: "easeOut"
                                  }}
                                />
                              ))}
                              
                              {/* Selection wave effect */}
                              <motion.div
                                className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/20 to-transparent"
                                animate={{
                                  x: ['-100%', '100%'],
                                }}
                                transition={{
                                  duration: 2.5,
                                  repeat: Infinity,
                                  ease: "linear"
                                }}
                              />
                            </div>
                            
                            {/* Active selection indicator */}
                            <motion.div
                              className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-2 h-0.5 bg-primary rounded-full"
                              animate={{
                                scaleX: [0.5, 1, 0.5],
                                opacity: [0.6, 1, 0.6],
                              }}
                              transition={{
                                duration: 2,
                                repeat: Infinity,
                                ease: "easeInOut"
                              }}
                            />
                          </div>
                        )}
                        
                        {currentStep.id === 2 && (
                          // Select Pass - Card selection animation (larger version)
                          <div className="relative scale-150">
                            <motion.div
                              className="w-5 h-3 rounded-sm bg-primary"
                              animate={{
                                rotateY: [0, 180, 360],
                              }}
                              transition={{
                                duration: 3,
                                repeat: Infinity,
                                ease: "easeInOut"
                              }}
                            />
                            <motion.div
                              className="absolute top-0.5 left-0.5 w-1 h-0.5 rounded-full bg-primary/60"
                              animate={{
                                opacity: [1, 0.3, 1],
                              }}
                              transition={{
                                duration: 3,
                                repeat: Infinity,
                                ease: "easeInOut"
                              }}
                            />
                          </div>
                        )}
                        
                        {currentStep.id === 3 && (
                          // Plan Journey - Calendar animation (larger version)
                          <div className="relative scale-150">
                            <motion.div
                              className="w-5 h-4 rounded border border-primary bg-primary/20"
                            />
                            <div className="absolute top-0 left-1 right-1 grid grid-cols-3 gap-0.5 mt-1">
                              {[0, 1, 2].map((dot, idx) => (
                                <motion.div
                                  key={dot}
                                  className="w-0.5 h-0.5 rounded-full bg-primary"
                                  animate={{
                                    scale: [1, 1.5, 1],
                                    opacity: [0.5, 1, 0.5],
                                  }}
                                  transition={{
                                    duration: 1.5,
                                    repeat: Infinity,
                                    delay: idx * 0.3,
                                    ease: "easeInOut"
                                  }}
                                />
                              ))}
                            </div>
                          </div>
                        )}
                        
                        {currentStep.id === 4 && (
                          // Download App - Complete app download experience
                          <div className="relative scale-125">
                            {/* App Store Interface */}
                            <div className="w-8 h-6 rounded border-2 border-primary/20 bg-primary/5 relative overflow-hidden">
                              {/* App Store Header */}
                              <div className="absolute top-0 left-0 right-0 h-1 bg-primary/10" />
                              
                              {/* App Listing */}
                              <div className="absolute top-1 left-1 right-1 bottom-1 flex gap-1">
                                <div className="w-2 h-2 rounded-sm border border-primary/30 bg-primary/10" />
                                <div className="flex-1">
                                  <div className="h-0.5 bg-primary/30 rounded mb-0.5" />
                                  <div className="h-0.5 bg-primary/20 rounded w-2/3" />
                                </div>
                              </div>
                              
                              {/* Download Button */}
                              <motion.div
                                className="absolute bottom-1 right-1 w-2 h-1.5 border border-primary rounded-sm bg-primary/10"
                                animate={{
                                  backgroundColor: ['rgba(99,102,241,0.1)', 'rgba(99,102,241,0.3)', 'rgba(99,102,241,0.1)'],
                                  borderColor: ['rgba(99,102,241,0.3)', 'rgba(99,102,241,0.8)', 'rgba(99,102,241,0.3)'],
                                }}
                                transition={{
                                  duration: 2,
                                  repeat: Infinity,
                                  ease: "easeInOut"
                                }}
                              >
                                <div className="absolute inset-0.5 bg-primary/20 rounded-sm" />
                              </motion.div>
                            </div>
                            
                            {/* Download Progress Indicator */}
                            <motion.div
                              className="absolute -bottom-3 left-0 right-0 h-1 bg-gray-200 rounded-full overflow-hidden"
                              animate={{
                                opacity: [0, 1, 1, 0],
                              }}
                              transition={{
                                duration: 4,
                                repeat: Infinity,
                                times: [0, 0.3, 0.8, 1],
                                ease: "easeInOut"
                              }}
                            >
                              <motion.div
                                className="h-full bg-primary rounded-full"
                                animate={{
                                  scaleX: [0, 0.3, 0.6, 1],
                                }}
                                transition={{
                                  duration: 4,
                                  repeat: Infinity,
                                  ease: "easeOut"
                                }}
                                style={{ transformOrigin: 'left' }}
                              />
                            </motion.div>
                            
                            {/* Phone with Installing App */}
                            <div className="absolute -right-6 -top-1 w-3 h-5 rounded-sm border border-primary/30 bg-white relative overflow-hidden">
                              {/* Phone Screen */}
                              <div className="absolute inset-0.5 bg-primary/5 rounded-sm">
                                {/* App Icon Installing */}
                                <motion.div
                                  className="absolute top-1 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-sm border border-primary/50 bg-primary/20"
                                  animate={{
                                    scale: [0, 1.2, 1],
                                    opacity: [0, 1, 0.8],
                                    rotate: [0, 360, 0],
                                  }}
                                  transition={{
                                    duration: 3,
                                    repeat: Infinity,
                                    delay: 1,
                                    ease: "easeOut"
                                  }}
                                />
                                
                                {/* Installation Progress Circle */}
                                <motion.div
                                  className="absolute top-0.5 left-1/2 transform -translate-x-1/2 w-1.5 h-1.5 border border-primary/30 rounded-full"
                                  animate={{
                                    opacity: [1, 0],
                                    scale: [1, 1.5],
                                  }}
                                  transition={{
                                    duration: 3,
                                    repeat: Infinity,
                                    delay: 1,
                                    ease: "easeOut"
                                  }}
                                />
                              </div>
                              
                              {/* Phone Home Button */}
                              <div className="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0.5 h-0.5 rounded-full bg-primary/30" />
                            </div>
                            
                            {/* Download Success Animation */}
                            <motion.div
                              className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-1 border border-primary rounded-full"
                              animate={{
                                scale: [0, 3, 0],
                                opacity: [0, 0.6, 0],
                                borderColor: ['rgba(99,102,241,0.3)', 'rgba(34,197,94,0.8)', 'rgba(99,102,241,0.3)'],
                              }}
                              transition={{
                                duration: 2,
                                repeat: Infinity,
                                delay: 3,
                                ease: "easeOut"
                              }}
                            />
                            
                            {/* Download Arrow */}
                            <motion.div
                              className="absolute -top-2 left-1/2 transform -translate-x-1/2 text-primary"
                              animate={{
                                y: [-1, 1, -1],
                                opacity: [0.4, 1, 0.4],
                              }}
                              transition={{
                                duration: 1.5,
                                repeat: Infinity,
                                ease: "easeInOut"
                              }}
                            >
                              <svg width="4" height="4" viewBox="0 0 12 12" fill="currentColor">
                                <path d="M6 1v8m-2-2l2 2 2-2" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                              </svg>
                            </motion.div>
                            
                            {/* Success Particles */}
                            {[...Array(4)].map((_, idx) => (
                              <motion.div
                                key={idx}
                                className="absolute w-0.5 h-0.5 bg-primary rounded-full"
                                animate={{
                                  x: [0, Math.cos(idx * 90 * Math.PI / 180) * 6],
                                  y: [0, Math.sin(idx * 90 * Math.PI / 180) * 6],
                                  opacity: [0, 0.8, 0],
                                  scale: [0, 1, 0],
                                }}
                                transition={{
                                  duration: 1.5,
                                  repeat: Infinity,
                                  delay: 3.5 + idx * 0.1,
                                  repeatDelay: 2,
                                  ease: "easeOut"
                                }}
                                style={{
                                  left: '50%',
                                  top: '50%',
                                  transform: 'translate(-50%, -50%)'
                                }}
                              />
                            ))}
                          </div>
                        )}
                        
                        {currentStep.id === 5 && (
                          // Explore & Enjoy - Floating heart (larger version)
                          <div className="relative scale-150">
                            <motion.div
                              animate={{
                                y: [-2, 2, -2],
                                scale: [1, 1.1, 1],
                              }}
                              transition={{
                                duration: 2.5,
                                repeat: Infinity,
                                ease: "easeInOut"
                              }}
                            >
                              <div className="w-4 h-4 text-primary">
                                <svg viewBox="0 0 24 24" fill="currentColor" className="w-full h-full">
                                  <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                </svg>
                              </div>
                            </motion.div>
                            {[...Array(3)].map((_, idx) => (
                              <motion.div
                                key={idx}
                                className="absolute w-1 h-1 bg-primary/60 rounded-full"
                                animate={{
                                  x: [0, Math.cos(idx * 120 * Math.PI / 180) * 12],
                                  y: [0, Math.sin(idx * 120 * Math.PI / 180) * 12],
                                  opacity: [0.8, 0],
                                  scale: [0.5, 1.5],
                                }}
                                transition={{
                                  duration: 2,
                                  repeat: Infinity,
                                  delay: idx * 0.5,
                                  ease: "easeOut"
                                }}
                                style={{
                                  left: '50%',
                                  top: '50%',
                                  transform: 'translate(-50%, -50%)'
                                }}
                              />
                            ))}
                          </div>
                        )}
                        
                        {currentStep.id === 6 && (
                          // Download App - App download animation (larger version)
                          <div className="relative scale-125">
                            {/* Phone outline */}
                            <div className="w-4 h-6 rounded-sm border-2 border-primary bg-white relative overflow-hidden">
                              {/* Screen */}
                              <div className="absolute inset-0.5 bg-primary/5 rounded-sm">
                                {/* App icon appearing */}
                                <motion.div
                                  className="absolute top-1 left-1/2 transform -translate-x-1/2 w-1.5 h-1.5 rounded-sm bg-primary"
                                  animate={{
                                    scale: [0, 1.2, 1],
                                    rotate: [0, 10, 0],
                                  }}
                                  transition={{
                                    duration: 1.5,
                                    repeat: Infinity,
                                    repeatDelay: 1,
                                    ease: "backOut"
                                  }}
                                />
                                
                                {/* Download progress bar */}
                                <div className="absolute bottom-1 left-0.5 right-0.5 h-0.5 bg-gray-200 rounded-full overflow-hidden">
                                  <motion.div
                                    className="h-full bg-primary rounded-full"
                                    animate={{
                                      scaleX: [0, 1, 0],
                                    }}
                                    transition={{
                                      duration: 2.5,
                                      repeat: Infinity,
                                      ease: "easeInOut"
                                    }}
                                    style={{ transformOrigin: 'left' }}
                                  />
                                </div>
                              </div>
                              
                              {/* Home button */}
                              <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 rounded-full bg-primary/30" />
                            </div>
                            
                            {/* Download arrow animation */}
                            <motion.div
                              className="absolute -top-1 left-1/2 transform -translate-x-1/2 text-primary"
                              animate={{
                                y: [-2, 2, -2],
                                opacity: [0.6, 1, 0.6],
                              }}
                              transition={{
                                duration: 1.5,
                                repeat: Infinity,
                                ease: "easeInOut"
                              }}
                            >
                              <svg width="6" height="6" viewBox="0 0 12 12" fill="currentColor">
                                <path d="M6 0v8m-3-3l3 3 3-3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                              </svg>
                            </motion.div>
                            
                            {/* Success particles */}
                            {[...Array(3)].map((_, idx) => (
                              <motion.div
                                key={idx}
                                className="absolute w-0.5 h-0.5 bg-primary rounded-full"
                                animate={{
                                  x: [0, Math.cos(idx * 120 * Math.PI / 180) * 8],
                                  y: [0, Math.sin(idx * 120 * Math.PI / 180) * 8],
                                  opacity: [0, 0.8, 0],
                                  scale: [0, 1.5, 0],
                                }}
                                transition={{
                                  duration: 1.5,
                                  repeat: Infinity,
                                  delay: 2 + idx * 0.2,
                                  repeatDelay: 1.5,
                                  ease: "easeOut"
                                }}
                                style={{
                                  left: '50%',
                                  top: '50%',
                                  transform: 'translate(-50%, -50%)'
                                }}
                              />
                            ))}
                          </div>
                        )}
                      </div>

                      <h4 className="text-2xl text-gray-900 mb-2">
                        <span className="font-normal">{currentStep.title.split(' ').slice(0, -1).join(' ')}</span>{' '}
                        <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                          {currentStep.title.split(' ').slice(-1)[0]}
                        </span>
                      </h4>
                      <p className="text-primary font-medium mb-3">
                        {currentStep.subtitle}
                      </p>
                      <p className="text-gray-600 leading-relaxed">
                        {currentStep.description}
                      </p>
                    </motion.div>
                  </AnimatePresence>

                  {/* Navigation */}
                  <div className="flex items-center justify-between mt-auto pt-4 border-t border-gray-100">
                    <button
                      onClick={prevStep}
                      className="flex items-center justify-center w-10 h-10 rounded-xl bg-gray-50 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-all duration-200"
                    >
                      <ChevronLeft className="w-5 h-5" />
                    </button>

                    <div className="flex gap-1.5">
                      {steps.map((_, index) => (
                        <button
                          key={index}
                          onClick={() => goToStep(index)}
                          className={`h-1.5 rounded-full transition-all duration-200 ${
                            index === activeStep ? 'bg-primary w-6' : 'bg-gray-200 w-1.5 hover:bg-gray-300'
                          }`}
                        />
                      ))}
                    </div>
                    
                    <button
                      onClick={nextStep}
                      className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg hover:shadow-primary/25 transition-all duration-200"
                    >
                      <ChevronRight className="w-5 h-5" />
                    </button>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Panel - Connected Flow Diagram */}
            <div className="lg:col-span-7">
              {/* Extra Large Detailed Animation Frame */}
              <div className="w-[480px] h-[400px] rounded-3xl flex items-start justify-center relative overflow-hidden bg-white border border-gray-200 p-4">
                    
                    <AnimatePresence mode="wait">
                      {activeStep === 0 && (
                        <motion.div
                          key="step1"
                          initial={{ opacity: 0, scale: 0.8 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 1.2 }}
                          transition={{ duration: 0.5, ease: "easeOut" }}
                          className="relative w-full h-full flex items-start justify-center"
                        >
                          {/* Step 1: City Selection Website Interface */}
                          <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
                            
                            {/* Website Header */}
                            <div className="absolute top-0 left-0 right-0 h-16 bg-white border-b border-gray-100 flex items-center justify-between px-6">
                              <div className="flex items-center gap-3">
                                <div className="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                                  <div className="w-4 h-4 rounded-full bg-white"></div>
                                </div>
                                <span className="font-bold text-gray-900">CityCards</span>
                              </div>
                              
                              <div className="flex items-center gap-6">
                                <span className="text-sm text-gray-600">Cities</span>
                                <span className="text-sm text-gray-600">Passes</span>
                                <span className="text-sm text-gray-600">About</span>
                                <button className="px-4 py-2 bg-gradient-to-r from-primary to-secondary text-white text-sm rounded-lg">
                                  Sign In
                                </button>
                              </div>
                            </div>

                            {/* Main Content Area */}
                            <div className="absolute top-16 left-0 right-0 bottom-0 p-6">
                              
                              {/* Hero Section */}
                              <div className="mb-6">
                                <h1 className="text-2xl font-bold text-gray-900 mb-2">
                                  <span className="font-light">Choose Your</span>{' '}
                                  <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Adventure</span>
                                </h1>
                                <p className="text-gray-600 text-sm">Explore amazing cities with our curated travel passes</p>
                              </div>

                              {/* Search Bar */}
                              <motion.div
                                className="mb-6 relative"
                                animate={{
                                  scale: [1, 1.02, 1],
                                }}
                                transition={{
                                  duration: 3,
                                  repeat: Infinity,
                                  ease: "easeInOut"
                                }}
                              >
                                <div className="relative">
                                  <input 
                                    className="w-full h-12 px-4 pl-12 bg-gray-50 border border-gray-200 rounded-xl text-sm"
                                    placeholder="Search cities..."
                                    readOnly
                                  />
                                  <div className="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                                      <circle cx="11" cy="11" r="8"/>
                                      <path d="m21 21-4.35-4.35"/>
                                    </svg>
                                  </div>
                                </div>
                              </motion.div>

                              {/* City Grid */}
                              <div className="grid grid-cols-2 gap-4">
                                {[
                                  { name: 'Sydney', attractions: '200+ Attractions', image: 'https://images.unsplash.com/photo-1624138784614-87fd1b6528f8?w=200&h=150&fit=crop', popular: true },
                                  { name: 'Melbourne', attractions: '150+ Attractions', image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=200&h=150&fit=crop', popular: false },
                                  { name: 'Brisbane', attractions: '120+ Attractions', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=150&fit=crop', popular: false },
                                  { name: 'Perth', attractions: '90+ Attractions', image: 'https://images.unsplash.com/photo-1544735716-392fe2489ffa?w=200&h=150&fit=crop', popular: false }
                                ].map((city, idx) => (
                                  <motion.div
                                    key={idx}
                                    className="relative bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm cursor-pointer"
                                    animate={{
                                      scale: city.popular ? [1, 1.05, 1] : [0.98, 1, 0.98],
                                      borderColor: city.popular ? 
                                        ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] : 
                                        ['rgb(229, 231, 235)'],
                                    }}
                                    transition={{
                                      duration: 2.5,
                                      repeat: Infinity,
                                      delay: idx * 0.4,
                                      ease: "easeInOut"
                                    }}
                                  >
                                    {city.popular && (
                                      <motion.div
                                        className="absolute -top-1 -right-1 w-6 h-6 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center"
                                        animate={{
                                          scale: [1, 1.2, 1],
                                        }}
                                        transition={{
                                          duration: 2,
                                          repeat: Infinity,
                                          ease: "easeInOut"
                                        }}
                                      >
                                        <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                        </svg>
                                      </motion.div>
                                    )}
                                    
                                    <div className="h-24 relative overflow-hidden">
                                      <ImageWithFallback
                                        src={city.image}
                                        alt={city.name}
                                        className="w-full h-full object-cover"
                                      />
                                      <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
                                    </div>
                                    
                                    <div className="p-3">
                                      <h3 className="font-semibold text-gray-900 text-sm mb-1">{city.name}</h3>
                                      <p className="text-xs text-gray-600">{city.attractions}</p>
                                      
                                      <motion.button
                                        className="w-full mt-3 py-2 bg-gradient-to-r from-primary to-secondary text-white text-xs rounded-lg"
                                        animate={{
                                          backgroundColor: city.popular ? 
                                            ['rgb(99, 102, 241)', 'rgb(129, 140, 248)', 'rgb(99, 102, 241)'] : 
                                            ['rgb(99, 102, 241)'],
                                        }}
                                        transition={{
                                          duration: 2,
                                          repeat: Infinity,
                                          delay: idx * 0.4 + 1,
                                          ease: "easeInOut"
                                        }}
                                      >
                                        Explore City
                                      </motion.button>
                                    </div>
                                  </motion.div>
                                ))}
                              </div>

                              {/* Filter Tabs */}
                              <div className="absolute bottom-4 left-6 right-6 flex justify-center gap-2">
                                {['All Cities', 'Popular', 'New'].map((filter, idx) => (
                                  <motion.button
                                    key={filter}
                                    className="px-4 py-2 text-xs rounded-full border border-gray-200 bg-white"
                                    animate={{
                                      borderColor: idx === 1 ? 
                                        ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] : 
                                        ['rgb(229, 231, 235)'],
                                      backgroundColor: idx === 1 ? 
                                        ['rgb(255, 255, 255)', 'rgb(99, 102, 241)', 'rgb(255, 255, 255)'] : 
                                        ['rgb(255, 255, 255)'],
                                      color: idx === 1 ? 
                                        ['rgb(75, 85, 99)', 'rgb(255, 255, 255)', 'rgb(75, 85, 99)'] : 
                                        ['rgb(75, 85, 99)'],
                                    }}
                                    transition={{
                                      duration: 3,
                                      repeat: Infinity,
                                      delay: idx * 0.5 + 2,
                                      ease: "easeInOut"
                                    }}
                                  >
                                    {filter}
                                  </motion.button>
                                ))}
                              </div>
                            </div>
                          </div>
                        </motion.div>
                      )}

                      {activeStep === 1 && (
                        <motion.div
                          key="step2"
                          initial={{ opacity: 0, scale: 0.8 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 1.2 }}
                          transition={{ duration: 0.5, ease: "easeOut" }}
                          className="relative w-full h-full flex items-start justify-center"
                        >
                          {/* Step 2: Pass Selection & Pricing Interface */}
                          <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
                            
                            {/* Website Header */}
                            <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
                              <div className="flex items-center gap-2">
                                <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                                  <div className="w-3 h-3 rounded-full bg-white"></div>
                                </div>
                                <span className="font-bold text-gray-900 text-sm">CityCards</span>
                              </div>
                              <div className="flex items-center gap-4">
                                <span className="text-xs text-gray-600">← Back</span>
                                <div className="text-xs text-gray-600">Sydney</div>
                              </div>
                            </div>

                            {/* Main Content */}
                            <div className="absolute top-12 left-0 right-0 bottom-0 p-4">
                              
                              {/* Header */}
                              <div className="mb-4">
                                <h2 className="text-lg font-bold text-gray-900 mb-1">
                                  <span className="font-normal">Choose Your</span>{' '}
                                  <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Pass</span>
                                </h2>
                                <p className="text-xs text-gray-600">Select the perfect pass for your Sydney adventure</p>
                              </div>

                              {/* Pass Cards */}
                              <div className="grid grid-cols-3 gap-3 mb-4">
                                {[
                                  { 
                                    name: '1-Day Pass', 
                                    price: '$49', 
                                    originalPrice: '$65',
                                    savings: 'Save $16',
                                    features: ['15+ Attractions', 'Skip Lines', 'Mobile Pass'], 
                                    popular: false,
                                    color: 'from-blue-500 to-blue-600'
                                  },
                                  { 
                                    name: '3-Day Pass', 
                                    price: '$99', 
                                    originalPrice: '$150',
                                    savings: 'Save $51',
                                    features: ['30+ Attractions', 'Skip Lines', 'Mobile Pass', 'Free Transit', 'Bonus Tours'], 
                                    popular: true,
                                    color: 'from-primary to-secondary'
                                  },
                                  { 
                                    name: '7-Day Pass', 
                                    price: '$149', 
                                    originalPrice: '$220',
                                    savings: 'Save $71',
                                    features: ['50+ Attractions', 'Skip Lines', 'Mobile Pass', 'Free Transit', 'All Tours', 'VIP Access'], 
                                    popular: false,
                                    color: 'from-purple-500 to-purple-600'
                                  }
                                ].map((pass, idx) => (
                                  <motion.div
                                    key={idx}
                                    className="relative bg-white rounded-xl border-2 overflow-hidden shadow-sm"
                                    animate={{
                                      borderColor: pass.popular ? 
                                        ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'] : 
                                        ['rgb(229, 231, 235)'],
                                      scale: pass.popular ? [1, 1.03, 1] : [0.98, 1, 0.98],
                                      boxShadow: pass.popular ? 
                                        ['0 1px 3px rgba(0,0,0,0.1)', '0 10px 25px rgba(99,102,241,0.2)', '0 1px 3px rgba(0,0,0,0.1)'] :
                                        ['0 1px 3px rgba(0,0,0,0.1)'],
                                    }}
                                    transition={{
                                      duration: 2.5,
                                      repeat: Infinity,
                                      delay: idx * 0.3,
                                      ease: "easeInOut"
                                    }}
                                  >
                                    {pass.popular && (
                                      <motion.div
                                        className="absolute -top-1 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-primary to-secondary text-white px-2 py-1 rounded-full text-xs font-medium"
                                        animate={{
                                          y: [-2, 0, -2],
                                        }}
                                        transition={{
                                          duration: 2,
                                          repeat: Infinity,
                                          ease: "easeInOut"
                                        }}
                                      >
                                        Most Popular
                                      </motion.div>
                                    )}

                                    {/* Card Header */}
                                    <div className={`p-3 bg-gradient-to-r ${pass.color} text-white text-center`}>
                                      <h3 className="font-bold text-sm">{pass.name}</h3>
                                      <div className="mt-1">
                                        <span className="text-lg font-bold">{pass.price}</span>
                                        <div className="text-xs opacity-80">
                                          <span className="line-through">{pass.originalPrice}</span>
                                          <span className="ml-1">{pass.savings}</span>
                                        </div>
                                      </div>
                                    </div>

                                    {/* Features */}
                                    <div className="p-3 space-y-2">
                                      {pass.features.slice(0, 4).map((feature, featureIdx) => (
                                        <motion.div
                                          key={featureIdx}
                                          className="flex items-center gap-2 text-xs"
                                          animate={{
                                            opacity: [0.7, 1, 0.7],
                                          }}
                                          transition={{
                                            duration: 2,
                                            repeat: Infinity,
                                            delay: idx * 0.3 + featureIdx * 0.2,
                                            ease: "easeInOut"
                                          }}
                                        >
                                          <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
                                          <span className="text-gray-700">{feature}</span>
                                        </motion.div>
                                      ))}
                                      {pass.features.length > 4 && (
                                        <div className="text-xs text-gray-500">
                                          +{pass.features.length - 4} more...
                                        </div>
                                      )}
                                    </div>

                                    {/* Select Button */}
                                    <div className="p-3 pt-0">
                                      <motion.button
                                        className={`w-full py-2 rounded-lg text-xs font-medium bg-gradient-to-r ${pass.color} text-white`}
                                        animate={{
                                          opacity: pass.popular ? [1, 0.8, 1] : [0.9, 1, 0.9],
                                          scale: pass.popular ? [1, 1.02, 1] : [1],
                                        }}
                                        transition={{
                                          duration: 2,
                                          repeat: Infinity,
                                          delay: idx * 0.3 + 1,
                                          ease: "easeInOut"
                                        }}
                                      >
                                        Select Pass
                                      </motion.button>
                                    </div>
                                  </motion.div>
                                ))}
                              </div>

                              {/* Trust Indicators */}
                              <div className="bg-gray-50 rounded-lg p-3 mb-3">
                                <div className="flex items-center justify-between text-xs">
                                  <div className="flex items-center gap-2">
                                    <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
                                      <svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                                      </svg>
                                    </div>
                                    <span className="text-gray-700">Free cancellation within 24h</span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <span className="text-yellow-500">★★★★★</span>
                                    <span className="text-gray-600">4.8 (2.1k reviews)</span>
                                  </div>
                                </div>
                              </div>

                              {/* Comparison Toggle */}
                              <motion.div
                                className="text-center"
                                animate={{
                                  opacity: [0.7, 1, 0.7],
                                }}
                                transition={{
                                  duration: 3,
                                  repeat: Infinity,
                                  ease: "easeInOut"
                                }}
                              >
                                <button className="text-xs text-primary hover:text-secondary transition-colors">
                                  View detailed comparison →
                                </button>
                              </motion.div>
                            </div>
                          </div>
                        </motion.div>
                      )}

                      {activeStep === 2 && (
                        <motion.div
                          key="step3"
                          initial={{ opacity: 0, scale: 0.8 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 1.2 }}
                          transition={{ duration: 0.5, ease: "easeOut" }}
                          className="relative w-full h-full flex items-start justify-center"
                        >
                          {/* Step 3: Journey Planning & Calendar Interface */}
                          <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
                            
                            {/* Website Header */}
                            <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
                              <div className="flex items-center gap-2">
                                <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                                  <div className="w-3 h-3 rounded-full bg-white"></div>
                                </div>
                                <span className="font-bold text-gray-900 text-sm">CityCards</span>
                              </div>
                              <div className="flex items-center gap-4">
                                <span className="text-xs text-gray-600">← Back</span>
                                <div className="text-xs text-gray-600">3-Day Pass Selected</div>
                              </div>
                            </div>

                            {/* Main Content */}
                            <div className="absolute top-12 left-0 right-0 bottom-0 p-4">
                              
                              {/* Header */}
                              <div className="mb-4">
                                <h2 className="text-lg font-bold text-gray-900 mb-1">
                                  <span className="font-normal">Plan Your</span>{' '}
                                  <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Journey</span>
                                </h2>
                                <p className="text-xs text-gray-600">Choose your travel dates and create your itinerary</p>
                              </div>

                              {/* Two Column Layout */}
                              <div className="grid grid-cols-5 gap-4 h-full">
                                
                                {/* Calendar Section */}
                                <div className="col-span-3">
                                  {/* Month Navigation */}
                                  <div className="flex items-center justify-between mb-4">
                                    <motion.button
                                      className="w-8 h-8 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-gray-50"
                                      animate={{
                                        borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
                                      }}
                                      transition={{
                                        duration: 2,
                                        repeat: Infinity,
                                        ease: "easeInOut"
                                      }}
                                    >
                                      <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7"/>
                                      </svg>
                                    </motion.button>
                                    
                                    <h3 className="font-semibold text-gray-900">December 2024</h3>
                                    
                                    <motion.button
                                      className="w-8 h-8 rounded-lg border border-gray-200 flex items-center justify-center hover:bg-gray-50"
                                      animate={{
                                        borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
                                      }}
                                      transition={{
                                        duration: 2,
                                        repeat: Infinity,
                                        delay: 0.5,
                                        ease: "easeInOut"
                                      }}
                                    >
                                      <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"/>
                                      </svg>
                                    </motion.button>
                                  </div>

                                  {/* Calendar Grid */}
                                  <div className="space-y-1">
                                    {/* Weekday Headers */}
                                    <div className="grid grid-cols-7 gap-1 mb-2">
                                      {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
                                        <div key={day} className="text-center text-xs font-medium text-gray-500 py-1">
                                          {day}
                                        </div>
                                      ))}
                                    </div>
                                    
                                    {/* Calendar Days */}
                                    <div className="grid grid-cols-7 gap-1">
                                      {[
                                        null, null, null, null, null, 1, 2,
                                        3, 4, 5, 6, 7, 8, 9,
                                        10, 11, 12, 13, 14, 15, 16,
                                        17, 18, 19, 20, 21, 22, 23,
                                        24, 25, 26, 27, 28, 29, 30,
                                        31
                                      ].map((date, idx) => {
                                        const isSelected = date === 15 || date === 16 || date === 17;
                                        const isToday = date === 12;
                                        const isAvailable = date && date > 11;
                                        
                                        return (
                                          <motion.div
                                            key={idx}
                                            className={`
                                              aspect-square flex items-center justify-center text-xs rounded-lg cursor-pointer
                                              ${!date ? 'invisible' : ''}
                                              ${isSelected ? 'bg-gradient-to-r from-primary to-secondary text-white' : ''}
                                              ${isToday && !isSelected ? 'bg-blue-100 text-blue-600 font-medium' : ''}
                                              ${isAvailable && !isSelected && !isToday ? 'hover:bg-gray-100 text-gray-700' : ''}
                                              ${!isAvailable && date ? 'text-gray-300 cursor-not-allowed' : ''}
                                            `}
                                            animate={{
                                              scale: isSelected ? [1, 1.1, 1] : [1],
                                              boxShadow: isSelected ? 
                                                ['0 0 0 rgba(99,102,241,0)', '0 0 20px rgba(99,102,241,0.3)', '0 0 0 rgba(99,102,241,0)'] :
                                                ['0 0 0 rgba(99,102,241,0)'],
                                            }}
                                            transition={{
                                              duration: 2,
                                              repeat: Infinity,
                                              delay: idx * 0.03,
                                              ease: "easeInOut"
                                            }}
                                          >
                                            {date}
                                          </motion.div>
                                        );
                                      })}
                                    </div>
                                  </div>
                                </div>

                                {/* Itinerary Section */}
                                <div className="col-span-2 border-l border-gray-100 pl-4">
                                  <div className="mb-4">
                                    <h4 className="font-semibold text-gray-900 text-sm mb-2">Your Itinerary</h4>
                                    <p className="text-xs text-gray-500">3 days selected</p>
                                  </div>

                                  {/* Itinerary Items */}
                                  <div className="space-y-3">
                                    {[
                                      { 
                                        day: 'Day 1', 
                                        date: 'Dec 15', 
                                        attractions: ['Opera House', 'Harbour Bridge', 'Circular Quay'],
                                        color: 'bg-blue-100 text-blue-600'
                                      },
                                      { 
                                        day: 'Day 2', 
                                        date: 'Dec 16', 
                                        attractions: ['Bondi Beach', 'Art Gallery', 'Darling Harbour'],
                                        color: 'bg-green-100 text-green-600'
                                      },
                                      { 
                                        day: 'Day 3', 
                                        date: 'Dec 17', 
                                        attractions: ['Blue Mountains', 'Wildlife Park', 'Scenic Railway'],
                                        color: 'bg-purple-100 text-purple-600'
                                      }
                                    ].map((day, dayIdx) => (
                                      <motion.div
                                        key={dayIdx}
                                        className="bg-white border border-gray-200 rounded-lg p-3"
                                        animate={{
                                          borderColor: ['rgb(229, 231, 235)', 'rgb(99, 102, 241)', 'rgb(229, 231, 235)'],
                                          boxShadow: ['0 1px 3px rgba(0,0,0,0.1)', '0 4px 12px rgba(99,102,241,0.15)', '0 1px 3px rgba(0,0,0,0.1)'],
                                        }}
                                        transition={{
                                          duration: 3,
                                          repeat: Infinity,
                                          delay: dayIdx * 0.5 + 1,
                                          ease: "easeInOut"
                                        }}
                                      >
                                        <div className="flex items-center justify-between mb-2">
                                          <div className={`px-2 py-1 rounded-full text-xs font-medium ${day.color}`}>
                                            {day.day}
                                          </div>
                                          <span className="text-xs text-gray-500">{day.date}</span>
                                        </div>
                                        
                                        <div className="space-y-1">
                                          {day.attractions.map((attraction, attractionIdx) => (
                                            <motion.div
                                              key={attractionIdx}
                                              className="flex items-center gap-2 text-xs"
                                              animate={{
                                                opacity: [0.7, 1, 0.7],
                                              }}
                                              transition={{
                                                duration: 2,
                                                repeat: Infinity,
                                                delay: dayIdx * 0.5 + attractionIdx * 0.3 + 2,
                                                ease: "easeInOut"
                                              }}
                                            >
                                              <div className="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
                                              <span className="text-gray-600">{attraction}</span>
                                            </motion.div>
                                          ))}
                                        </div>
                                      </motion.div>
                                    ))}
                                  </div>

                                  {/* Add Activity Button */}
                                  <motion.button
                                    className="w-full mt-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-xs text-gray-500 hover:border-primary hover:text-primary transition-colors"
                                    animate={{
                                      borderColor: ['rgb(209, 213, 219)', 'rgb(99, 102, 241)', 'rgb(209, 213, 219)'],
                                    }}
                                    transition={{
                                      duration: 3,
                                      repeat: Infinity,
                                      delay: 4,
                                      ease: "easeInOut"
                                    }}
                                  >
                                    + Add activity
                                  </motion.button>
                                </div>
                              </div>

                              {/* Continue Button */}
                              <motion.div
                                className="absolute bottom-4 right-4"
                                animate={{
                                  scale: [1, 1.02, 1],
                                }}
                                transition={{
                                  duration: 2,
                                  repeat: Infinity,
                                  delay: 5,
                                  ease: "easeInOut"
                                }}
                              >
                                <button className="px-6 py-2 bg-gradient-to-r from-primary to-secondary text-white text-sm rounded-lg font-medium">
                                  Continue to Payment
                                </button>
                              </motion.div>
                            </div>
                          </div>
                        </motion.div>
                      )}

                      {activeStep === 3 && (
                        <motion.div
                          key="step4"
                          initial={{ opacity: 0, scale: 0.8 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 1.2 }}
                          transition={{ duration: 0.5, ease: "easeOut" }}
                          className="relative w-full h-full flex items-start justify-center"
                        >
                          {/* Step 4: Digital Pass Activation & QR Code */}
                          <div className="relative w-full h-full bg-white rounded-2xl overflow-hidden">
                            
                            {/* Website Header */}
                            <div className="absolute top-0 left-0 right-0 h-12 bg-white border-b border-gray-100 flex items-center justify-between px-6">
                              <div className="flex items-center gap-2">
                                <div className="w-6 h-6 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                                  <div className="w-3 h-3 rounded-full bg-white"></div>
                                </div>
                                <span className="font-bold text-gray-900 text-sm">CityCards</span>
                              </div>
                              <div className="flex items-center gap-4">
                                <span className="text-xs text-green-600">✓ Payment Complete</span>
                              </div>
                            </div>

                            {/* Main Content */}
                            <div className="absolute top-12 left-0 right-0 bottom-0 p-6">
                              
                              {/* Success Header */}
                              <div className="text-center mb-6">
                                <motion.div
                                  className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"
                                  animate={{
                                    scale: [1, 1.1, 1],
                                  }}
                                  transition={{
                                    duration: 2,
                                    repeat: Infinity,
                                    ease: "easeInOut"
                                  }}
                                >
                                  <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/>
                                  </svg>
                                </motion.div>
                                
                                <h2 className="text-xl font-bold text-gray-900 mb-2">
                                  <span className="font-normal">Your Pass is</span>{' '}
                                  <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Ready!</span>
                                </h2>
                                <p className="text-sm text-gray-600">Access your digital pass instantly</p>
                              </div>

                              {/* Two Column Layout */}
                              <div className="grid grid-cols-2 gap-6">
                                
                                {/* Left: Digital Pass Card */}
                                <motion.div
                                  className="bg-gradient-to-br from-primary to-secondary rounded-2xl p-6 text-white relative overflow-hidden"
                                  animate={{
                                    boxShadow: [
                                      '0 10px 25px rgba(99,102,241,0.2)', 
                                      '0 20px 40px rgba(99,102,241,0.4)', 
                                      '0 10px 25px rgba(99,102,241,0.2)'
                                    ],
                                  }}
                                  transition={{
                                    duration: 3,
                                    repeat: Infinity,
                                    ease: "easeInOut"
                                  }}
                                >
                                  {/* Background Pattern */}
                                  <div className="absolute inset-0 opacity-10">
                                    <div className="absolute top-4 right-4 w-20 h-20 border border-white rounded-full"></div>
                                    <div className="absolute bottom-4 left-4 w-16 h-16 border border-white rounded-full"></div>
                                  </div>
                                  
                                  {/* Pass Header */}
                                  <div className="relative z-10">
                                    <div className="flex items-center justify-between mb-4">
                                      <div>
                                        <h3 className="font-bold text-lg">Sydney 3-Day Pass</h3>
                                        <p className="text-sm opacity-90">CityCards Premium</p>
                                      </div>
                                      <div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                                        <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                                          <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"/>
                                          <path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd"/>
                                        </svg>
                                      </div>
                                    </div>

                                    {/* Pass Details */}
                                    <div className="space-y-2 mb-6">
                                      <div className="flex justify-between text-sm">
                                        <span className="opacity-80">Valid From:</span>
                                        <span>Dec 15, 2024</span>
                                      </div>
                                      <div className="flex justify-between text-sm">
                                        <span className="opacity-80">Valid Until:</span>
                                        <span>Dec 17, 2024</span>
                                      </div>
                                      <div className="flex justify-between text-sm">
                                        <span className="opacity-80">Attractions:</span>
                                        <span>30+ included</span>
                                      </div>
                                    </div>

                                    {/* Pass Number */}
                                    <div className="text-center">
                                      <p className="text-xs opacity-80 mb-1">Pass ID</p>
                                      <p className="font-mono text-sm">SYD-2024-12-001234</p>
                                    </div>
                                  </div>
                                </motion.div>

                                {/* Right: QR Code & Instructions */}
                                <div className="space-y-4">
                                  
                                  {/* QR Code */}
                                  <div className="bg-white border-2 border-gray-200 rounded-xl p-6 text-center">
                                    <motion.div
                                      className="w-32 h-32 mx-auto mb-4 relative"
                                      animate={{
                                        scale: [1, 1.05, 1],
                                      }}
                                      transition={{
                                        duration: 3,
                                        repeat: Infinity,
                                        ease: "easeInOut"
                                      }}
                                    >
                                      {/* QR Code Grid */}
                                      <div className="grid grid-cols-12 gap-px bg-gray-900 p-2 rounded-lg">
                                        {[...Array(144)].map((_, idx) => {
                                          const patterns = [
                                            // Corner patterns (top-left, top-right, bottom-left)
                                            ...[0,1,2,3,4,5,6, 12,13,14,15,16,17,18, 24,25,26,27,28,29,30, 36,37,38,39,40,41,42, 48,49,50,51,52,53,54, 60,61,62,63,64,65,66, 72,73,74,75,76,77,78],
                                            ...[5,6,7,8,9,10,11, 17,18,19,20,21,22,23, 29,30,31,32,33,34,35, 41,42,43,44,45,46,47, 53,54,55,56,57,58,59, 65,66,67,68,69,70,71, 77,78,79,80,81,82,83],
                                            ...[66,67,68,69,70,71,72, 78,79,80,81,82,83,84, 90,91,92,93,94,95,96, 102,103,104,105,106,107,108, 114,115,116,117,118,119,120, 126,127,128,129,130,131,132, 138,139,140,141,142,143,144],
                                            // Data pattern
                                            ...[8,9,15,16,21,22,27,28,33,34,39,40,45,46,51,52,57,58,63,64,69,70,75,76,81,82,87,88,93,94,99,100,105,106,111,112,117,118,123,124,129,130,135,136,141,142]
                                          ];
                                          const isActive = patterns.includes(idx) || Math.random() > 0.6;
                                          
                                          return (
                                            <motion.div
                                              key={idx}
                                              className={`aspect-square ${isActive ? 'bg-gray-900' : 'bg-white'}`}
                                              animate={{
                                                opacity: isActive ? [1, 0.8, 1] : [1],
                                              }}
                                              transition={{
                                                duration: 2,
                                                repeat: Infinity,
                                                delay: idx * 0.01,
                                                ease: "easeInOut"
                                              }}
                                            />
                                          );
                                        })}
                                      </div>
                                      
                                      {/* Corner Detection Squares */}
                                      <div className="absolute top-2 left-2 w-6 h-6 border-2 border-gray-900 bg-white">
                                        <div className="absolute inset-1 bg-gray-900"></div>
                                      </div>
                                      <div className="absolute top-2 right-2 w-6 h-6 border-2 border-gray-900 bg-white">
                                        <div className="absolute inset-1 bg-gray-900"></div>
                                      </div>
                                      <div className="absolute bottom-2 left-2 w-6 h-6 border-2 border-gray-900 bg-white">
                                        <div className="absolute inset-1 bg-gray-900"></div>
                                      </div>
                                    </motion.div>
                                    
                                    <p className="text-sm font-medium text-gray-900 mb-1">Scan to Access</p>
                                    <p className="text-xs text-gray-600">Show this QR code at each attraction</p>
                                  </div>

                                  {/* Usage Instructions */}
                                  <div className="space-y-3">
                                    {[
                                      { icon: '📱', text: 'Add to Apple/Google Wallet', status: 'ready' },
                                      { icon: '📧', text: 'Email sent to john@example.com', status: 'sent' },
                                      { icon: '📲', text: 'Download mobile app for offline access', status: 'optional' }
                                    ].map((instruction, idx) => (
                                      <motion.div
                                        key={idx}
                                        className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"
                                        animate={{
                                          backgroundColor: instruction.status === 'ready' ? 
                                            ['rgb(249, 250, 251)', 'rgb(240, 253, 244)', 'rgb(249, 250, 251)'] :
                                            ['rgb(249, 250, 251)'],
                                        }}
                                        transition={{
                                          duration: 2.5,
                                          repeat: Infinity,
                                          delay: idx * 0.5,
                                          ease: "easeInOut"
                                        }}
                                      >
                                        <span className="text-lg">{instruction.icon}</span>
                                        <span className="text-sm text-gray-700 flex-1">{instruction.text}</span>
                                        {instruction.status === 'ready' && (
                                          <motion.div
                                            className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center"
                                            animate={{
                                              scale: [1, 1.1, 1],
                                            }}
                                            transition={{
                                              duration: 2,
                                              repeat: Infinity,
                                              delay: 1,
                                              ease: "easeInOut"
                                            }}
                                          >
                                            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                                            </svg>
                                          </motion.div>
                                        )}
                                        {instruction.status === 'sent' && (
                                          <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
                                            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                                              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
                                              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
                                            </svg>
                                          </div>
                                        )}
                                      </motion.div>
                                    ))}
                                  </div>
                                </div>
                              </div>

                              {/* Action Buttons */}
                              <div className="flex gap-3 justify-center mt-6">
                                <motion.button
                                  className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
                                  animate={{
                                    borderColor: ['rgb(209, 213, 219)', 'rgb(99, 102, 241)', 'rgb(209, 213, 219)'],
                                  }}
                                  transition={{
                                    duration: 3,
                                    repeat: Infinity,
                                    delay: 2,
                                    ease: "easeInOut"
                                  }}
                                >
                                  View Itinerary
                                </motion.button>
                                
                                <motion.button
                                  className="px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg"
                                  animate={{
                                    boxShadow: [
                                      '0 4px 6px rgba(99,102,241,0.1)', 
                                      '0 10px 25px rgba(99,102,241,0.3)', 
                                      '0 4px 6px rgba(99,102,241,0.1)'
                                    ],
                                  }}
                                  transition={{
                                    duration: 2.5,
                                    repeat: Infinity,
                                    delay: 3,
                                    ease: "easeInOut"
                                  }}
                                >
                                  Start Exploring
                                </motion.button>
                              </div>
                            </div>
                          </div>
                        </motion.div>
                      )}

                      {activeStep === 4 && (
                        <motion.div
                          key="step5"
                          initial={{ opacity: 0, scale: 0.8 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 1.2 }}
                          transition={{ duration: 0.5, ease: "easeOut" }}
                          className="relative w-full h-full flex items-start justify-center"
                        >
                          {/* Step 5: Live Mobile App Experience */}
                          <div className="relative w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center rounded-2xl overflow-hidden">
                            
                            {/* Phone Frame */}
                            <motion.div
                              className="w-64 h-full max-h-96 bg-black rounded-3xl p-2 relative"
                              animate={{
                                boxShadow: [
                                  '0 10px 40px rgba(0,0,0,0.3)', 
                                  '0 20px 60px rgba(0,0,0,0.5)', 
                                  '0 10px 40px rgba(0,0,0,0.3)'
                                ],
                              }}
                              transition={{
                                duration: 3,
                                repeat: Infinity,
                                ease: "easeInOut"
                              }}
                            >
                              {/* Phone Screen */}
                              <div className="w-full h-full bg-white rounded-3xl relative overflow-hidden">
                                
                                {/* Status Bar */}
                                <div className="absolute top-0 left-0 right-0 h-8 bg-white flex items-center justify-between px-6 text-xs">
                                  <span className="font-medium">9:41 AM</span>
                                  <div className="flex items-center gap-1">
                                    <div className="w-4 h-2 border border-gray-400 rounded-sm">
                                      <div className="w-1 h-full bg-green-500 rounded-sm"></div>
                                    </div>
                                    <div className="w-3 h-3 border border-gray-400 rounded-full">
                                      <div className="w-2 h-2 bg-blue-500 rounded-full m-0.5"></div>
                                    </div>
                                    <div className="w-4 h-2 border border-gray-400 rounded-sm bg-green-500"></div>
                                  </div>
                                </div>

                                {/* App Header */}
                                <div className="absolute top-8 left-0 right-0 h-12 bg-gradient-to-r from-primary to-secondary flex items-center justify-between px-4">
                                  <div className="flex items-center gap-2">
                                    <div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center">
                                      <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                      </svg>
                                    </div>
                                    <span className="text-white font-medium text-sm">Opera House</span>
                                  </div>
                                  <motion.div
                                    className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center"
                                    animate={{
                                      backgroundColor: ['rgba(255,255,255,0.2)', 'rgba(34,197,94,0.8)', 'rgba(255,255,255,0.2)'],
                                    }}
                                    transition={{
                                      duration: 2,
                                      repeat: Infinity,
                                      ease: "easeInOut"
                                    }}
                                  >
                                    <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                                    </svg>
                                  </motion.div>
                                </div>

                                {/* Main Content */}
                                <div className="absolute top-20 left-0 right-0 bottom-0 bg-white">
                                  
                                  {/* Attraction Image */}
                                  <div className="h-32 relative overflow-hidden">
                                    <ImageWithFallback
                                      src="https://images.unsplash.com/photo-1624138784614-87fd1b6528f8?w=300&h=200&fit=crop"
                                      alt="Sydney Opera House"
                                      className="w-full h-full object-cover"
                                    />
                                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                    
                                    {/* Check-in Status */}
                                    <motion.div
                                      className="absolute top-3 right-3 bg-green-500 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1"
                                      animate={{
                                        scale: [1, 1.1, 1],
                                      }}
                                      transition={{
                                        duration: 2,
                                        repeat: Infinity,
                                        ease: "easeInOut"
                                      }}
                                    >
                                      <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                                      </svg>
                                      Checked In
                                    </motion.div>
                                  </div>

                                  {/* Attraction Info */}
                                  <div className="p-4">
                                    <div className="flex items-center justify-between mb-3">
                                      <div>
                                        <h3 className="font-bold text-gray-900">Sydney Opera House</h3>
                                        <p className="text-xs text-gray-600">Iconic performing arts venue</p>
                                      </div>
                                      <div className="text-right">
                                        <div className="text-sm font-medium text-green-600">Free Entry</div>
                                        <div className="text-xs text-gray-500">with CityPass</div>
                                      </div>
                                    </div>

                                    {/* Quick Actions */}
                                    <div className="grid grid-cols-3 gap-2 mb-4">
                                      {[
                                        { icon: '🎫', label: 'Show Pass', active: true },
                                        { icon: '📍', label: 'Directions', active: false },
                                        { icon: '📱', label: 'Audio Guide', active: false }
                                      ].map((action, idx) => (
                                        <motion.button
                                          key={idx}
                                          className={`p-2 rounded-lg text-xs font-medium flex flex-col items-center gap-1 ${
                                            action.active ? 'bg-primary text-white' : 'bg-gray-100 text-gray-600'
                                          }`}
                                          animate={{
                                            backgroundColor: action.active ? 
                                              ['rgb(99, 102, 241)', 'rgb(129, 140, 248)', 'rgb(99, 102, 241)'] :
                                              ['rgb(243, 244, 246)'],
                                          }}
                                          transition={{
                                            duration: 2.5,
                                            repeat: Infinity,
                                            delay: idx * 0.3,
                                            ease: "easeInOut"
                                          }}
                                        >
                                          <span className="text-sm">{action.icon}</span>
                                          <span>{action.label}</span>
                                        </motion.button>
                                      ))}
                                    </div>

                                    {/* Progress Stats */}
                                    <div className="bg-gray-50 rounded-lg p-3">
                                      <div className="flex items-center justify-between mb-2">
                                        <span className="text-xs font-medium text-gray-900">Today's Progress</span>
                                        <span className="text-xs text-gray-600">3 of 8 attractions</span>
                                      </div>
                                      
                                      <div className="w-full bg-gray-200 rounded-full h-2 mb-2">
                                        <motion.div
                                          className="bg-gradient-to-r from-primary to-secondary h-2 rounded-full"
                                          animate={{
                                            width: ['0%', '37.5%', '35%', '37.5%'],
                                          }}
                                          transition={{
                                            duration: 3,
                                            repeat: Infinity,
                                            ease: "easeInOut"
                                          }}
                                        />
                                      </div>
                                      
                                      <div className="flex justify-between text-xs text-gray-600">
                                        <span>✓ Opera House</span>
                                        <span>Next: Harbour Bridge</span>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                                {/* Bottom Tab Bar */}
                                <div className="absolute bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-100 flex items-center justify-around">
                                  {[
                                    { icon: '🗺️', label: 'Map', active: true },
                                    { icon: '🎫', label: 'Pass', active: false },
                                    { icon: '📅', label: 'Plan', active: false },
                                    { icon: '👤', label: 'Profile', active: false }
                                  ].map((tab, idx) => (
                                    <motion.div
                                      key={idx}
                                      className={`flex flex-col items-center justify-center flex-1 ${
                                        tab.active ? 'text-primary' : 'text-gray-400'
                                      }`}
                                      animate={{
                                        color: tab.active ? 
                                          ['rgb(99, 102, 241)', 'rgb(79, 70, 229)', 'rgb(99, 102, 241)'] :
                                          ['rgb(156, 163, 175)'],
                                      }}
                                      transition={{
                                        duration: 2,
                                        repeat: Infinity,
                                        delay: idx * 0.2,
                                        ease: "easeInOut"
                                      }}
                                    >
                                      <span className="text-lg mb-1">{tab.icon}</span>
                                      <span className="text-xs">{tab.label}</span>
                                    </motion.div>
                                  ))}
                                </div>

                                {/* Home Indicator */}
                                <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gray-300 rounded-full"></div>
                              </div>
                            </motion.div>

                            {/* Floating Notifications */}
                            <motion.div
                              className="absolute top-4 right-4 bg-white rounded-lg shadow-lg p-3 border-l-4 border-green-500"
                              animate={{
                                x: [100, 0, 0, 100],
                                opacity: [0, 1, 1, 0],
                              }}
                              transition={{
                                duration: 4,
                                repeat: Infinity,
                                times: [0, 0.2, 0.8, 1],
                                ease: "easeInOut"
                              }}
                            >
                              <div className="flex items-center gap-2">
                                <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                  <svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                                  </svg>
                                </div>
                                <div>
                                  <div className="font-medium text-sm text-gray-900">Check-in successful!</div>
                                  <div className="text-xs text-gray-600">Enjoy the Opera House</div>
                                </div>
                              </div>
                            </motion.div>
                          </div>
                        </motion.div>
                      )}

                      {activeStep === 5 && (
                        <motion.div
                          key="step6"
                          initial={{ opacity: 0, scale: 0.8 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 1.2 }}
                          transition={{ duration: 0.5, ease: "easeOut" }}
                          className="relative w-full h-full flex items-start justify-center"
                        >
                          {/* Step 6: App Store Download Experience */}
                          <div className="relative w-full h-full bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl overflow-hidden">
                            
                            {/* Two Column Layout */}
                            <div className="grid grid-cols-2 gap-8 h-full p-6">
                              
                              {/* Left: App Store Interface */}
                              <div className="flex flex-col justify-center">
                                
                                {/* App Store Header */}
                                <motion.div
                                  className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden mb-6"
                                  animate={{
                                    boxShadow: [
                                      '0 4px 6px rgba(0,0,0,0.1)', 
                                      '0 20px 40px rgba(0,0,0,0.15)', 
                                      '0 4px 6px rgba(0,0,0,0.1)'
                                    ],
                                  }}
                                  transition={{
                                    duration: 3,
                                    repeat: Infinity,
                                    ease: "easeInOut"
                                  }}
                                >
                                  {/* Store Header */}
                                  <div className="bg-gray-50 px-4 py-3 border-b border-gray-100 flex items-center gap-3">
                                    <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                                      <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                        <path fillRule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd"/>
                                      </svg>
                                    </div>
                                    <span className="font-bold text-gray-900">App Store</span>
                                  </div>

                                  {/* App Listing */}
                                  <div className="p-6">
                                    <div className="flex gap-4 mb-4">
                                      {/* App Icon */}
                                      <motion.div
                                        className="w-20 h-20 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center flex-shrink-0"
                                        animate={{
                                          scale: [1, 1.05, 1],
                                        }}
                                        transition={{
                                          duration: 2.5,
                                          repeat: Infinity,
                                          ease: "easeInOut"
                                        }}
                                      >
                                        <div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center">
                                          <div className="w-6 h-6 rounded-full bg-white"></div>
                                        </div>
                                      </motion.div>

                                      {/* App Info */}
                                      <div className="flex-1">
                                        <h3 className="font-bold text-lg text-gray-900 mb-1">CityCards</h3>
                                        <p className="text-gray-600 text-sm mb-2">Travel & Navigation</p>
                                        <div className="flex items-center gap-2 mb-3">
                                          <div className="flex text-yellow-400">
                                            {'★★★★★'.split('').map((star, idx) => (
                                              <span key={idx}>{star}</span>
                                            ))}
                                          </div>
                                          <span className="text-sm text-gray-600">4.8</span>
                                          <span className="text-sm text-gray-500">(2.1K)</span>
                                        </div>
                                        
                                        {/* Download Button */}
                                        <motion.button
                                          className="w-full py-3 bg-blue-500 text-white rounded-lg font-medium text-sm"
                                          animate={{
                                            backgroundColor: ['rgb(59, 130, 246)', 'rgb(37, 99, 235)', 'rgb(59, 130, 246)'],
                                          }}
                                          transition={{
                                            duration: 2,
                                            repeat: Infinity,
                                            ease: "easeInOut"
                                          }}
                                        >
                                          GET
                                        </motion.button>
                                      </div>
                                    </div>

                                    {/* App Screenshots Preview */}
                                    <div className="flex gap-2 overflow-hidden">
                                      {[0, 1, 2].map((screenshot, idx) => (
                                        <motion.div
                                          key={idx}
                                          className="w-16 h-28 bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg flex-shrink-0 border border-gray-200"
                                          animate={{
                                            scale: idx === 1 ? [1, 1.05, 1] : [1],
                                          }}
                                          transition={{
                                            duration: 3,
                                            repeat: Infinity,
                                            delay: idx * 0.3,
                                            ease: "easeInOut"
                                          }}
                                        >
                                          {/* Mini screenshot content */}
                                          <div className="p-1">
                                            <div className="w-full h-4 bg-gradient-to-r from-primary to-secondary rounded-sm mb-1"></div>
                                            <div className="space-y-1">
                                              <div className="h-1 bg-gray-300 rounded w-3/4"></div>
                                              <div className="h-1 bg-gray-300 rounded w-1/2"></div>
                                              <div className="h-1 bg-gray-300 rounded w-2/3"></div>
                                            </div>
                                          </div>
                                        </motion.div>
                                      ))}
                                    </div>
                                  </div>
                                </motion.div>

                                {/* Download Progress */}
                                <motion.div
                                  className="bg-white rounded-xl p-4 shadow-sm border border-gray-200"
                                  animate={{
                                    opacity: [0, 1, 1, 0],
                                  }}
                                  transition={{
                                    duration: 4,
                                    repeat: Infinity,
                                    times: [0, 0.2, 0.8, 1],
                                    ease: "easeInOut"
                                  }}
                                >
                                  <div className="flex items-center gap-3 mb-3">
                                    <motion.div
                                      className="w-8 h-8 border-2 border-blue-500 rounded-full flex items-center justify-center"
                                      animate={{
                                        rotate: [0, 360],
                                      }}
                                      transition={{
                                        duration: 2,
                                        repeat: Infinity,
                                        ease: "linear"
                                      }}
                                    >
                                      <div className="w-3 h-3 border-l-2 border-blue-500 rounded-full"></div>
                                    </motion.div>
                                    <div>
                                      <p className="font-medium text-gray-900 text-sm">Downloading CityCards...</p>
                                      <p className="text-xs text-gray-600">47.2 MB of 52.1 MB</p>
                                    </div>
                                  </div>
                                  
                                  <div className="w-full bg-gray-200 rounded-full h-2">
                                    <motion.div
                                      className="bg-blue-500 h-2 rounded-full"
                                      animate={{
                                        width: ['0%', '90%', '100%'],
                                      }}
                                      transition={{
                                        duration: 4,
                                        repeat: Infinity,
                                        ease: "easeInOut"
                                      }}
                                    />
                                  </div>
                                </motion.div>
                              </div>

                              {/* Right: Phone with App Installation */}
                              <div className="flex items-center justify-center">
                                <motion.div
                                  className="w-56 h-full max-h-96 bg-gray-900 rounded-3xl p-2 relative"
                                  animate={{
                                    boxShadow: [
                                      '0 10px 40px rgba(0,0,0,0.3)', 
                                      '0 30px 60px rgba(99,102,241,0.4)', 
                                      '0 10px 40px rgba(0,0,0,0.3)'
                                    ],
                                  }}
                                  transition={{
                                    duration: 4,
                                    repeat: Infinity,
                                    ease: "easeInOut"
                                  }}
                                >
                                  {/* Phone Screen */}
                                  <div className="w-full h-full bg-black rounded-3xl relative overflow-hidden">
                                    
                                    {/* Wallpaper */}
                                    <div className="absolute inset-0 bg-gradient-to-br from-purple-600 via-blue-600 to-teal-500"></div>
                                    
                                    {/* Status Bar */}
                                    <div className="absolute top-4 left-4 right-4 flex items-center justify-between text-white text-xs">
                                      <span className="font-medium">9:41 AM</span>
                                      <div className="flex items-center gap-1">
                                        <div className="w-4 h-2 border border-white rounded-sm">
                                          <div className="w-3 h-full bg-white rounded-sm"></div>
                                        </div>
                                        <div className="w-4 h-2 bg-white rounded-sm"></div>
                                      </div>
                                    </div>

                                    {/* App Grid */}
                                    <div className="absolute top-16 left-4 right-4 bottom-20">
                                      <div className="grid grid-cols-4 gap-4">
                                        {[
                                          { name: 'Phone', color: 'bg-green-500', installing: false },
                                          { name: 'Messages', color: 'bg-green-400', installing: false },
                                          { name: 'Camera', color: 'bg-gray-600', installing: false },
                                          { name: 'Photos', color: 'bg-yellow-500', installing: false },
                                          { name: 'Maps', color: 'bg-blue-500', installing: false },
                                          { name: 'Weather', color: 'bg-blue-400', installing: false },
                                          { name: 'CityCards', color: 'bg-gradient-to-br from-primary to-secondary', installing: true },
                                          { name: 'Settings', color: 'bg-gray-500', installing: false }
                                        ].map((app, idx) => (
                                          <motion.div
                                            key={idx}
                                            className={`aspect-square rounded-2xl flex items-center justify-center relative ${app.color}`}
                                            animate={{
                                              scale: app.installing ? [1, 1.1, 1] : [1],
                                            }}
                                            transition={{
                                              duration: 2.5,
                                              repeat: Infinity,
                                              delay: idx * 0.1,
                                              ease: "easeInOut"
                                            }}
                                          >
                                            {app.installing ? (
                                              <>
                                                {/* Installation Progress Circle */}
                                                <motion.div
                                                  className="absolute inset-0 rounded-2xl border-4 border-white/30"
                                                  style={{
                                                    background: `conic-gradient(white 0deg, white 270deg, transparent 270deg)`
                                                  }}
                                                  animate={{
                                                    background: [
                                                      'conic-gradient(white 0deg, white 0deg, transparent 0deg)',
                                                      'conic-gradient(white 0deg, white 180deg, transparent 180deg)',
                                                      'conic-gradient(white 0deg, white 360deg, transparent 360deg)'
                                                    ]
                                                  }}
                                                  transition={{
                                                    duration: 3,
                                                    repeat: Infinity,
                                                    ease: "easeInOut"
                                                  }}
                                                />
                                                <div className="w-6 h-6 rounded-lg bg-white/20 flex items-center justify-center">
                                                  <div className="w-3 h-3 rounded-full bg-white"></div>
                                                </div>
                                              </>
                                            ) : (
                                              <div className="w-6 h-6 rounded-lg bg-white/20"></div>
                                            )}
                                          </motion.div>
                                        ))}
                                      </div>
                                    </div>

                                    {/* Dock */}
                                    <div className="absolute bottom-8 left-4 right-4 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-around px-2">
                                      {[0, 1, 2, 3].map((dockApp) => (
                                        <div key={dockApp} className="w-10 h-10 bg-white/30 rounded-xl"></div>
                                      ))}
                                    </div>

                                    {/* Home Indicator */}
                                    <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white/60 rounded-full"></div>
                                  </div>
                                </motion.div>
                              </div>
                            </div>

                            {/* Success Notification */}
                            <motion.div
                              className="absolute top-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg flex items-center gap-3"
                              animate={{
                                y: [-50, 0, 0, -50],
                                opacity: [0, 1, 1, 0],
                              }}
                              transition={{
                                duration: 5,
                                repeat: Infinity,
                                times: [0, 0.2, 0.8, 1],
                                ease: "easeInOut"
                              }}
                            >
                              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                              </svg>
                              <span className="font-medium">CityCards installed successfully!</span>
                            </motion.div>

                            {/* Bottom Text */}
                            <div className="absolute bottom-6 left-0 right-0 text-center">
                              <motion.p
                                className="text-gray-600 text-sm"
                                animate={{
                                  opacity: [0.7, 1, 0.7],
                                }}
                                transition={{
                                  duration: 3,
                                  repeat: Infinity,
                                  ease: "easeInOut"
                                }}
                              >
                                <span className="font-medium">Ready to explore!</span> Open the app to start your adventure
                              </motion.p>
                            </div>
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
              </div>
            </div>
          </div>

          {/* Mobile Layout */}
          <div className="lg:hidden">
            {/* Current Step Display */}
            <div className="bg-white rounded-3xl p-6 shadow-sm border border-gray-100 mb-8">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-8 h-8 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center">
                  <span className="text-white text-sm font-bold">{currentStep.id}</span>
                </div>
                <span className="text-sm font-medium text-gray-500">
                  Step {currentStep.id} of {steps.length}
                </span>
              </div>

              <AnimatePresence mode="wait">
                <motion.div
                  key={activeStep}
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: -20 }}
                  transition={{ duration: 0.3 }}
                >
                  <div className="w-12 h-12 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-xl flex items-center justify-center mb-4">
                    <currentStep.icon className="w-6 h-6 text-primary" />
                  </div>

                  <h3 className="text-xl text-gray-900 mb-2">
                    <span className="font-normal">{currentStep.title.split(' ').slice(0, -1).join(' ')}</span>{' '}
                    <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                      {currentStep.title.split(' ').slice(-1)[0]}
                    </span>
                  </h3>
                  <p className="text-primary font-medium text-sm mb-3">
                    {currentStep.subtitle}
                  </p>
                  <p className="text-gray-600 leading-relaxed text-sm">
                    {currentStep.description}
                  </p>
                </motion.div>
              </AnimatePresence>

              {/* Mobile Navigation */}
              <div className="flex items-center justify-between mt-6">
                <button
                  onClick={prevStep}
                  className="flex items-center justify-center w-10 h-10 rounded-xl bg-gray-50 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-all duration-200"
                >
                  <ChevronLeft className="w-5 h-5" />
                </button>

                <div className="flex gap-1.5">
                  {steps.map((_, index) => (
                    <button
                      key={index}
                      onClick={() => goToStep(index)}
                      className={`h-1.5 rounded-full transition-all duration-200 ${
                        index === activeStep ? 'bg-primary w-6' : 'bg-gray-200 w-1.5 hover:bg-gray-300'
                      }`}
                    />
                  ))}
                </div>
                
                <button
                  onClick={nextStep}
                  className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg hover:shadow-primary/25 transition-all duration-200"
                >
                  <ChevronRight className="w-5 h-5" />
                </button>
              </div>
            </div>

            {/* Mobile Flowchart */}
            <div className="bg-gradient-to-br from-green-50/60 to-blue-50/40 rounded-3xl p-6">
              <h4 className="text-lg font-medium text-gray-900 mb-4">Process Flow</h4>
              
              <div className="space-y-3">
                {steps.map((step, index) => {
                  const isActive = index === activeStep;
                  const isCompleted = index < activeStep;
                  
                  return (
                    <div key={step.id} className="flex items-center gap-4">
                      {/* Connection line */}
                      {index > 0 && (
                        <div className="absolute left-6 -mt-3 w-0.5 h-3 bg-gradient-to-b from-primary/40 to-transparent"></div>
                      )}
                      
                      <motion.button
                        onClick={() => goToStep(index)}
                        className={`
                          flex-1 flex items-center gap-3 p-3 rounded-2xl border-2 text-left transition-all duration-200
                          ${isActive 
                            ? 'bg-gradient-to-r from-primary to-secondary text-white border-transparent shadow-md' 
                            : isCompleted
                            ? 'bg-white border-primary/30 text-gray-700'
                            : 'bg-white border-gray-200 text-gray-700 hover:border-primary/30'
                          }
                        `}
                        whileTap={{ scale: 0.98 }}
                      >
                        <div className={`
                          w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0
                          ${isActive 
                            ? 'bg-white/20 text-white' 
                            : isCompleted
                            ? 'bg-primary text-white'
                            : 'bg-gray-100 text-gray-500'
                          }
                        `}>
                          {step.id}
                        </div>
                        
                        <div className="flex-1 min-w-0">
                          <div className={`
                            text-sm font-medium leading-tight
                            ${isActive ? 'text-white' : 'text-gray-900'}
                          `}>
                            {step.title}
                          </div>
                        </div>

                        {isActive && (
                          <motion.div
                            className="w-2 h-2 bg-white rounded-full"
                            animate={{ scale: [1, 1.2, 1] }}
                            transition={{ duration: 2, repeat: Infinity }}
                          />
                        )}
                      </motion.button>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {/* Bottom CTA */}
        <div className="text-center mt-16">
          <div className="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-3xl p-8 max-w-2xl mx-auto border border-gray-100">
            <h3 className="text-2xl text-gray-900 mb-3">
              <span className="font-normal">Ready to</span>{' '}
              <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Start</span>{' '}
              <span className="font-light">Your</span>{' '}
              <span className="font-bold italic">Adventure</span>?
            </h3>
            <p className="text-gray-600 mb-6">
              Join thousands of travelers who have discovered the easiest way to explore cities
            </p>
            <motion.button 
              className="bg-gradient-to-r from-primary to-secondary text-white py-4 px-12 rounded-lg text-lg hover:shadow-lg hover:shadow-primary/25 transition-all duration-200"
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              Get Your City Card
            </motion.button>
          </div>
        </div>
      </div>
    </section>
  );
}