import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  ArrowLeft, 
  ArrowRight, 
  MapPin, 
  Sparkles, 
  CheckCircle,
  X,
  Clock,
  Calendar,
  Users,
  Star,
  Search,
  Navigation,
  Heart,
  Sun,
  ChevronDown,
  ChevronUp
} from 'lucide-react';
import { Button } from '../components/ui/button';
import { Card, CardContent } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Progress } from '../components/ui/progress';
import { Calendar as CalendarComponent } from '../components/ui/calendar';
import { Input } from '../components/ui/input';
import { Popover, PopoverContent, PopoverTrigger } from '../components/ui/popover';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';


interface User {
  email: string;
  name: string;
}

interface CreateMagicItineraryPageProps {
  onBackClick: () => void;
  onHomeClick: () => void;
  onMelbourneClick: () => void;
  onPassesClick: () => void;
  onCheckoutClick: () => void;
  onSignInClick: () => void;
  onSignOutClick: () => void;
  onAttractionsClick: () => void;
  onBlogsClick: () => void;
  onHowItWorksClick: () => void;
  onFAQClick: () => void;
  onPrivacyPolicyClick: () => void;
  onAboutUsClick: () => void;
  onProfileClick: () => void;
  onCityCardsClick: () => void;
  onMagicItineraryClick: () => void;
  onPostCardsClick: () => void;
  onOffersClick: () => void;
  onContactUsClick?: () => void;
  onEsimsClick?: () => void;
  onHotelDiscountsClick?: () => void;
  currentPage: string;
  user: User | null;
}

interface ItineraryData {
  destination: string;
  locationSearch: string;
  startDate: Date | undefined;
  endDate: Date | undefined;
  energy: string;
  withKids: boolean;
  museums: boolean;
  scenicSpots: boolean;
  culturalSites: boolean;
  wildlife: boolean;
  dietaryPreferences: string[];
  nightlife: boolean;
  shopping: boolean;
}

const destinations = [
  { 
    id: 'melbourne', 
    name: 'Melbourne', 
    country: 'Australia', 
    image: 'https://images.unsplash.com/photo-1595434971780-79d5c20c5090?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBza3lsaW5lJTIwYXVzdHJhbGlhfGVufDF8fHx8MTc1ODk2MzkxOHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
  },
  { 
    id: 'sydney', 
    name: 'Sydney', 
    country: 'Australia', 
    image: 'https://images.unsplash.com/photo-1595563382617-fe6fa4fd0394?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwYXVzdHJhbGlhfGVufDF8fHx8MTc1ODk2MzkyMXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
  },
  { 
    id: 'brisbane', 
    name: 'Brisbane', 
    country: 'Australia', 
    image: 'https://images.unsplash.com/photo-1729904987421-12490733e013?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxicmlzYmFuZSUyMGNpdHklMjByaXZlciUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTg5NjM5Mjd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
  }
];

const energyOptions = [
  { 
    id: 'adventurous', 
    name: 'Adventurous',
    description: 'High energy activities and exploration',
    image: 'https://images.unsplash.com/photo-1587502537147-2ba64a62e3d3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhZHZlbnR1cmUlMjBvdXRkb29yJTIwaGlraW5nfGVufDF8fHx8MTc1ODk2NDQ2N3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
  },
  { 
    id: 'relaxed', 
    name: 'Relaxed',
    description: 'Peaceful and laid-back experiences',
    image: 'https://images.unsplash.com/photo-1716893933701-73d59789bba7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHxyZWxheGVkJTIwc3BhJTIwcGVhY2VmdWx8ZW58MXx8fHwxNzU4OTY0NDcxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
  }
];

const questionImages = {
  museums: 'https://images.unsplash.com/photo-1747918157024-a1e1c77336fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtdXNldW0lMjBhcnQlMjBnYWxsZXJ5fGVufDF8fHx8MTc1ODkwOTYwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
  scenicSpots: 'https://images.unsplash.com/photo-1583994153242-578c3566477e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzY2VuaWMlMjB2aWV3cG9pbnQlMjBwaG90byUyMHNwb3RzfGVufDF8fHx8MTc1ODk2NDQ3OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
  culturalSites: 'https://images.unsplash.com/photo-1713711188046-c716c9de586a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjdWx0dXJhbCUyMGxhbmRtYXJrcyUyMGhpc3RvcmljYWwlMjBzaXRlc3xlbnwxfHx8fDE3NTg5NjQ0MjJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
  wildlife: 'https://images.unsplash.com/photo-1679546397515-b914d6601234?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3aWxkbGlmZSUyMGFuaW1hbHMlMjBzYWZhcml8ZW58MXx8fHwxNzU4OTY0NDg3fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
  nightlife: 'https://images.unsplash.com/photo-1758383200442-3c013f13473c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuaWdodGxpZmUlMjBiYXJzJTIwZXZlbmluZyUyMGNpdHl8ZW58MXx8fHwxNzU4OTY0NDkxfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
  shopping: 'https://images.unsplash.com/photo-1728889853414-3782d56aa563?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzaG9wcGluZyUyMG1hbGwlMjBib3V0aXF1ZSUyMHN0b3Jlc3xlbnwxfHx8fDE3NTg5NjQ0OTZ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral'
};

const dietaryOptions = ['Vegetarian', 'Gluten Free', 'Halal', 'Sugar-Free'];

export function CreateMagicItineraryPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: CreateMagicItineraryPageProps) {
  const [currentStep, setCurrentStep] = useState(1);
  const [isGenerating, setIsGenerating] = useState(false);
  const [showResults, setShowResults] = useState(false);
  const [viewMode, setViewMode] = useState<'daily' | 'summary'>('daily');
  const [itineraryData, setItineraryData] = useState<ItineraryData>({
    destination: '',
    locationSearch: '',
    startDate: undefined,
    endDate: undefined,
    energy: '',
    withKids: false,
    museums: false,
    scenicSpots: false,
    culturalSites: false,
    wildlife: false,
    dietaryPreferences: [],
    nightlife: false,
    shopping: false
  });

  const [generatedItinerary, setGeneratedItinerary] = useState<any>(null);
  const [favorites, setFavorites] = useState<Set<string>>(new Set());
  const [openDays, setOpenDays] = useState<Set<number>>(new Set([1])); // First day open by default
  const [selectedActivity, setSelectedActivity] = useState<string | null>(null);

  const toggleFavorite = (activityKey: string) => {
    setFavorites(prev => {
      const newSet = new Set(prev);
      if (newSet.has(activityKey)) {
        newSet.delete(activityKey);
      } else {
        newSet.add(activityKey);
      }
      return newSet;
    });
  };

  const toggleDay = (dayNumber: number) => {
    setOpenDays(prev => {
      const newSet = new Set(prev);
      if (newSet.has(dayNumber)) {
        newSet.delete(dayNumber);
      } else {
        newSet.add(dayNumber);
      }
      return newSet;
    });
  };

  const handleActivityClick = (activityKey: string) => {
    setSelectedActivity(selectedActivity === activityKey ? null : activityKey);
  };

  const totalSteps = 4;
  const progress = (currentStep / totalSteps) * 100;

  const handleNext = () => {
    if (currentStep < totalSteps) {
      setCurrentStep(currentStep + 1);
    } else {
      generateItinerary();
    }
  };

  const handlePrevious = () => {
    if (currentStep > 1) {
      setCurrentStep(currentStep - 1);
    }
  };

  const generateItinerary = async () => {
    setIsGenerating(true);
    
    // Simulate API call with realistic delay
    await new Promise(resolve => setTimeout(resolve, 3000));
    
    // Generate mock itinerary based on selections
    const selectedDestination = destinations.find(d => d.id === itineraryData.destination);
    const totalDays = itineraryData.startDate && itineraryData.endDate 
      ? Math.ceil((itineraryData.endDate.getTime() - itineraryData.startDate.getTime()) / (1000 * 60 * 60 * 24))
      : 3;
    
    const generateDailyPlans = () => {
      const plans = [];
      
      // Enhanced activity templates with images and details
      const activityTemplates = [
        {
          time: '8:00 am',
          activity: 'Luxury Hotel Check-in',
          location: 'The Grand Hotel',
          address: '123 Main Street, City Center',
          image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800&h=600&fit=crop',
          categories: ['Accommodation', 'Luxury'],
          description: [
            'Check-in at luxury downtown hotel',
            'Enjoy welcome amenities',
            'Explore hotel facilities',
            'Settle into your room'
          ]
        },
        {
          time: '10:00 am',
          activity: 'City Landmark Visit',
          location: 'Historic City Square',
          address: 'Central Plaza, Downtown District',
          image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=800&h=600&fit=crop',
          categories: ['Culture', 'Landmark', 'Sightseeing'],
          description: [
            'Explore the city\'s historic heart',
            'Learn about local history',
            'Take memorable photos',
            'Visit nearby attractions'
          ]
        },
        {
          time: '12:00 pm',
          activity: 'Local Cuisine Experience',
          location: 'Artisan Cafe & Restaurant',
          address: '45 Food Street, Culinary Quarter',
          image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=800&h=600&fit=crop',
          categories: ['Food', 'Drinks', 'Culture'],
          description: [
            'Taste authentic local dishes',
            'Try specialty coffee or tea',
            'Experience local food culture',
            'Browse artisan food products'
          ]
        },
        {
          time: '2:00 pm',
          activity: 'Botanical Gardens',
          location: 'Royal Gardens',
          address: 'Garden Avenue, Green District',
          image: 'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=800&h=600&fit=crop',
          categories: ['Nature', 'Relaxation'],
          description: [
            'Stroll through beautiful gardens',
            'Discover native plant species',
            'Relax in peaceful surroundings',
            'Capture stunning nature photography'
          ]
        },
        {
          time: '4:00 pm',
          activity: 'Art Gallery Visit',
          location: 'Contemporary Art Museum',
          address: '78 Arts Avenue, Cultural District',
          image: 'https://images.unsplash.com/photo-1564399577149-749794d74eee?w=800&h=600&fit=crop',
          categories: ['Culture', 'Art', 'Museum'],
          description: [
            'View contemporary art collections',
            'Attend guided exhibitions',
            'Visit the museum shop',
            'Enjoy cultural experiences'
          ]
        },
        {
          time: '7:00 pm',
          activity: 'Sunset Dinner',
          location: 'Rooftop Restaurant',
          address: '99 Sky Tower, City Heights',
          image: 'https://images.unsplash.com/photo-1552566626-52f8b828add9?w=800&h=600&fit=crop',
          categories: ['Food', 'Drinks', 'Luxury'],
          description: [
            'Fine dining experience',
            'Panoramic city views',
            'Signature cocktails',
            'Memorable sunset atmosphere'
          ]
        }
      ];

      for (let i = 0; i < totalDays; i++) {
        const currentDate = new Date(itineraryData.startDate!);
        currentDate.setDate(currentDate.getDate() + i);
        
        plans.push({
          day: i + 1,
          date: currentDate.toLocaleDateString('en-US', { 
            weekday: 'long', 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
          }),
          title: i === 0 ? `Welcome to ${selectedDestination?.name}` : 
                 i === totalDays - 1 ? 'Farewell Day' : 
                 `Day ${i + 1} Exploration`,
          activities: activityTemplates.slice(0, 5).map((template, idx) => ({
            ...template,
            // Vary times slightly for different days
            time: template.time
          }))
        });
      }
      return plans;
    };

    const mockItinerary = {
      destination: {
        ...selectedDestination,
        weather: '22°C, Sunny'
      },
      totalDays: totalDays,
      dailyPlans: generateDailyPlans(),
      estimatedCost: `${totalDays * 280}`,
      includedActivities: totalDays * 5
    };
    
    setGeneratedItinerary(mockItinerary);
    setIsGenerating(false);
    setShowResults(true);
  };

  const canProceed = () => {
    switch (currentStep) {
      case 1: return itineraryData.destination !== '' && itineraryData.startDate && itineraryData.endDate;
      case 2: return itineraryData.energy !== '';
      case 3: return true; // Kids and dietary questions always allow proceeding
      case 4: return true; // Optional preference questions
      default: return true;
    }
  };

  const handleDietaryToggle = (option: string) => {
    setItineraryData(prev => ({
      ...prev,
      dietaryPreferences: prev.dietaryPreferences.includes(option)
        ? prev.dietaryPreferences.filter(item => item !== option)
        : [...prev.dietaryPreferences, option]
    }));
  };

  const renderStepper = () => (
    <div className="container mx-auto px-4 py-8">
      <div className="flex items-center justify-between max-w-4xl mx-auto">
        {Array.from({ length: totalSteps }, (_, index) => {
          const stepNumber = index + 1;
          const isActive = stepNumber === currentStep;
          const isCompleted = stepNumber < currentStep;
          
          return (
            <div key={stepNumber} className="flex items-center">
              <div
                className={`w-8 h-8 rounded-full flex items-center justify-center border-2 transition-all ${
                  isCompleted
                    ? 'bg-primary border-primary text-white'
                    : isActive
                    ? 'border-primary text-primary bg-white'
                    : 'border-gray-300 text-gray-400 bg-white'
                }`}
              >
                {isCompleted ? (
                  <CheckCircle className="w-4 h-4" />
                ) : (
                  <span className="text-sm font-medium">{stepNumber}</span>
                )}
              </div>
              {stepNumber < totalSteps && (
                <div
                  className={`w-12 h-0.5 mx-2 transition-colors ${
                    isCompleted ? 'bg-primary' : 'bg-gray-300'
                  }`}
                />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );

  const renderStep = () => {
    if (isGenerating) {
      return (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          className="text-center space-y-8 py-20"
        >
          <div className="relative">
            <motion.div
              animate={{ rotate: 360 }}
              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
              className="w-16 h-16 mx-auto"
            >
              <Sparkles className="w-16 h-16 text-primary" />
            </motion.div>
          </div>

          <div className="space-y-4">
            <h2 className="font-light">Creating your</h2>
            <h2 className="font-bold text-primary italic">Magic Itinerary</h2>
            <p className="text-muted-foreground max-w-md mx-auto">
              Our AI is analyzing your preferences and crafting the perfect travel experience...
            </p>
          </div>

          <div className="max-w-xs mx-auto">
            <Progress value={66} className="w-full" />
          </div>
        </motion.div>
      );
    }

    if (showResults) {
      return (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="space-y-8"
        >
          <div className="text-center space-y-4">
            <div className="flex items-center justify-center gap-2 text-primary">
              <Star className="w-6 h-6 fill-current" />
              <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight">
                <span className="font-light">Your</span>{' '}
                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Magic Itinerary</span>
              </h1>
              <Star className="w-6 h-6 fill-current" />
            </div>
            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
              Here's your personalized {generatedItinerary?.totalDays}-day adventure in {generatedItinerary?.destination?.name}!
            </p>
          </div>

          {/* View Toggle */}
          <div className="flex justify-center">
            <div className="bg-muted p-1 rounded-lg">
              <Button
                variant={viewMode === 'daily' ? 'default' : 'ghost'}
                size="sm"
                onClick={() => setViewMode('daily')}
                className="rounded-md font-poppins font-medium"
              >
                Daily View
              </Button>
              <Button
                variant={viewMode === 'summary' ? 'default' : 'ghost'}
                size="sm"
                onClick={() => setViewMode('summary')}
                className="rounded-md font-poppins font-medium"
              >
                Summary
              </Button>
            </div>
          </div>

          <div className="max-w-6xl mx-auto space-y-8">
            {/* Itinerary Overview */}
            <Card className="p-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center">
                  <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary?.totalDays}</div>
                  <div className="font-poppins text-sm text-muted-foreground font-normal">Days</div>
                </div>
                <div className="text-center">
                  <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary?.includedActivities}</div>
                  <div className="font-poppins text-sm text-muted-foreground font-normal">Activities</div>
                </div>
                <div className="text-center">
                  <div className="font-merchant text-3xl text-primary mb-2">{generatedItinerary?.estimatedCost}</div>
                  <div className="font-poppins text-sm text-muted-foreground font-normal">Estimated Cost</div>
                </div>
              </div>
            </Card>

            {/* Daily Plans - Enhanced View */}
            {viewMode === 'daily' && (
              <div className="space-y-8">
                {/* Location Header with Weather - Show Once */}
                <motion.div
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.6, delay: 0.3 }}
                  className="bg-gray-50 rounded-2xl p-6 shadow-sm border border-gray-200"
                >
                  <div className="flex items-center justify-between">
                    <div>
                      <h2 className="font-merchant text-3xl md:text-4xl leading-tight mb-2">
                        {generatedItinerary?.destination?.name}, {generatedItinerary?.destination?.country}
                      </h2>
                      <p className="font-poppins text-base text-primary font-medium">{generatedItinerary?.destination?.weather}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <Sun className="w-10 h-10 text-amber-500" />
                    </div>
                  </div>
                </motion.div>

                {/* Days Loop */}
                {generatedItinerary?.dailyPlans?.map((day: any, dayIndex: number) => (
                  <div key={dayIndex} className="space-y-6">
                    {/* Day Header */}
                    <motion.div
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ duration: 0.6, delay: 0.4 + dayIndex * 0.1 }}
                      className="flex items-center gap-4 pl-2"
                    >
                      <div className="bg-gradient-to-br from-primary to-secondary text-white w-16 h-16 rounded-full flex items-center justify-center shadow-lg">
                        <span className="font-merchant text-2xl font-semibold">{day.day}</span>
                      </div>
                      <div>
                        <h3 className="font-merchant text-2xl md:text-3xl leading-snug font-semibold">Day {day.day}</h3>
                        <p className="font-poppins text-base text-muted-foreground font-normal">{day.title}</p>
                      </div>
                    </motion.div>

                    {/* GMT Label */}
                    <div className="pl-2">
                      <p className="font-poppins text-sm text-gray-500 font-normal">GMT</p>
                    </div>

                    {/* Activity Cards - Desktop Grid Layout with Timeline */}
                    <div className="relative space-y-8">
                      {/* Timeline Line */}
                      <div className="absolute left-12 top-0 bottom-0 w-px bg-gray-200 hidden md:block" style={{ height: 'calc(100% - 2rem)' }} />
                      
                      {day.activities?.map((activity: any, actIndex: number) => {
                        const activityKey = `day${day.day}-act${actIndex}`;
                        const isFavorite = favorites.has(activityKey);

                        return (
                          <motion.div
                            key={actIndex}
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.5, delay: 0.5 + dayIndex * 0.1 + actIndex * 0.05 }}
                            className="flex flex-col md:flex-row gap-6 relative"
                          >
                            {/* Time Column with Timeline Connector */}
                            <div className="flex-shrink-0 md:w-24 pt-2 relative z-10">
                              <div className="font-poppins text-base font-medium text-gray-700 bg-white pr-4">
                                {activity.time}
                              </div>
                              {/* Timeline Dot */}
                              <div className="hidden md:block absolute right-0 top-3 w-2 h-2 bg-primary rounded-full" style={{ transform: 'translateX(50%)' }} />
                            </div>

                            {/* Activity Card */}
                            <div className="flex-1">
                              <Card className="overflow-hidden hover:shadow-xl transition-shadow duration-300 border-2 border-gray-100">
                                <CardContent className="p-0">
                                  {/* Hero Image with Overlay Buttons */}
                                  <div className="relative h-64 md:h-72 bg-gray-200">
                                    <ImageWithFallback
                                      src={activity.image}
                                      alt={activity.activity}
                                      className="w-full h-full object-cover"
                                    />
                                    
                                    {/* Favorite Heart Button - Top Right */}
                                    <div className="absolute top-4 right-4">
                                      <Button
                                        size="icon"
                                        variant="secondary"
                                        className="bg-white/95 hover:bg-white shadow-lg backdrop-blur-sm rounded-full w-12 h-12"
                                        onClick={() => toggleFavorite(activityKey)}
                                      >
                                        <Heart className={`w-5 h-5 ${isFavorite ? 'fill-primary text-primary' : 'text-gray-700'}`} />
                                      </Button>
                                    </div>

                                    {/* Get Directions Button - Bottom Left */}
                                    <div className="absolute bottom-4 left-4">
                                      <Button 
                                        className="bg-primary hover:bg-primary/90 text-white font-poppins font-semibold shadow-lg px-6 py-3 rounded-xl"
                                      >
                                        <Navigation className="w-4 h-4 mr-2" />
                                        Get Directions
                                      </Button>
                                    </div>
                                  </div>

                                  {/* Content Section */}
                                  <div className="p-6 space-y-4">
                                    {/* Location Name & Address */}
                                    <div className="space-y-2">
                                      <h4 className="font-merchant text-xl md:text-2xl leading-snug font-semibold text-gray-900">
                                        {activity.activity}
                                      </h4>
                                      <div className="flex items-start gap-2 text-gray-600">
                                        <MapPin className="w-4 h-4 mt-1 flex-shrink-0 text-primary" />
                                        <span className="font-poppins text-sm font-normal leading-relaxed">{activity.address}</span>
                                      </div>
                                    </div>

                                    {/* Category Badges */}
                                    <div className="flex flex-wrap gap-2">
                                      {activity.categories?.map((category: string, catIndex: number) => (
                                        <Badge 
                                          key={catIndex} 
                                          variant="secondary"
                                          className="font-poppins font-normal text-sm bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1"
                                        >
                                          {category}
                                        </Badge>
                                      ))}
                                    </div>

                                    {/* Activity Details - Bullet Points */}
                                    <div className="space-y-2 pt-2">
                                      {activity.description?.map((detail: string, detailIndex: number) => (
                                        <div key={detailIndex} className="flex items-start gap-3">
                                          <span className="text-primary font-semibold mt-1.5 flex-shrink-0">•</span>
                                          <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">{detail}</span>
                                        </div>
                                      ))}
                                    </div>
                                  </div>
                                </CardContent>
                              </Card>
                            </div>
                          </motion.div>
                        );
                      })}
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Summary View */}
            {viewMode === 'summary' && (
              <div className="space-y-4">
                <h3 className="font-merchant text-2xl md:text-3xl text-center mb-8 leading-tight font-semibold">Trip Summary</h3>
                <div className="space-y-4">
                  {generatedItinerary?.dailyPlans?.map((day: any, dayIndex: number) => {
                    const isDayOpen = openDays.has(day.day);
                    
                    return (
                      <Collapsible
                        key={dayIndex}
                        open={isDayOpen}
                        onOpenChange={() => toggleDay(day.day)}
                      >
                        <Card className="overflow-hidden border-2 border-gray-200">
                          <CollapsibleTrigger className="w-full">
                            <div className="flex items-center justify-between p-4 bg-gradient-to-r from-primary/5 to-transparent hover:from-primary/10 transition-colors cursor-pointer">
                              <div className="flex items-center gap-3">
                                <div className="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center font-merchant font-semibold">
                                  {day.day}
                                </div>
                                <div className="text-left">
                                  <h4 className="font-merchant text-lg font-semibold text-gray-900">
                                    Day {day.day}
                                  </h4>
                                  <p className="font-poppins text-sm text-gray-500 font-normal">
                                    {day.date}
                                  </p>
                                </div>
                              </div>
                              <div className="flex items-center gap-2">
                                <Badge variant="secondary" className="font-poppins font-normal bg-primary/10 text-primary">
                                  {day.activities?.length || 0} activities
                                </Badge>
                                {isDayOpen ? (
                                  <ChevronUp className="w-5 h-5 text-gray-500" />
                                ) : (
                                  <ChevronDown className="w-5 h-5 text-gray-500" />
                                )}
                              </div>
                            </div>
                          </CollapsibleTrigger>
                          
                          <CollapsibleContent>
                            <div className="p-4 space-y-2 bg-white">
                              {day.activities?.map((activity: any, actIndex: number) => {
                                const activityKey = `summary-day${day.day}-act${actIndex}`;
                                const isSelected = selectedActivity === activityKey;
                                
                                return (
                                  <div
                                    key={actIndex}
                                    className="border border-gray-200 rounded-lg overflow-hidden hover:border-primary/50 transition-all duration-200"
                                  >
                                    <div
                                      className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-50 transition-colors"
                                      onClick={() => handleActivityClick(activityKey)}
                                    >
                                      <div className="flex items-center gap-3 flex-1">
                                        <div className="flex items-center gap-2 text-primary min-w-[80px]">
                                          <Clock className="w-4 h-4" />
                                          <span className="font-poppins text-sm font-medium">{activity.time}</span>
                                        </div>
                                        <div className="flex-1">
                                          <p className="font-poppins font-medium text-gray-900">{activity.activity}</p>
                                        </div>
                                      </div>
                                      {isSelected ? (
                                        <ChevronUp className="w-4 h-4 text-gray-400" />
                                      ) : (
                                        <ChevronDown className="w-4 h-4 text-gray-400" />
                                      )}
                                    </div>
                                    
                                    <AnimatePresence>
                                      {isSelected && (
                                        <motion.div
                                          initial={{ height: 0, opacity: 0 }}
                                          animate={{ height: 'auto', opacity: 1 }}
                                          exit={{ height: 0, opacity: 0 }}
                                          transition={{ duration: 0.3, ease: 'easeInOut' }}
                                          className="border-t border-gray-200 bg-gray-50"
                                        >
                                          <div className="p-4 space-y-3">
                                            {/* Activity Details */}
                                            <div className="space-y-2">
                                              {activity.description?.map((detail: string, detailIndex: number) => (
                                                <div key={detailIndex} className="flex items-start gap-2">
                                                  <span className="text-primary font-semibold mt-1 flex-shrink-0">•</span>
                                                  <span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
                                                    {detail}
                                                  </span>
                                                </div>
                                              ))}
                                            </div>
                                            
                                            {/* Get Directions Button */}
                                            <div className="pt-2">
                                              <Button 
                                                className="bg-primary hover:bg-primary/90 text-white font-poppins font-semibold w-full"
                                                size="sm"
                                              >
                                                <Navigation className="w-4 h-4 mr-2" />
                                                Get Directions
                                              </Button>
                                            </div>
                                          </div>
                                        </motion.div>
                                      )}
                                    </AnimatePresence>
                                  </div>
                                );
                              })}
                            </div>
                          </CollapsibleContent>
                        </Card>
                      </Collapsible>
                    );
                  })}
                </div>
              </div>
            )}

            {/* Action Buttons */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-8">
              <Button
                variant="outline"
                onClick={() => setShowResults(false)}
                className="font-poppins font-medium px-8 py-3 text-lg"
              >
                <Heart className="w-5 h-5 mr-2" />
                Create Another
              </Button>
              <Button
                className="bg-primary hover:bg-primary/90 font-poppins font-semibold px-8 py-3 text-lg"
              >
                Save Itinerary
              </Button>
            </div>
          </div>
        </motion.div>
      );
    }

    switch (currentStep) {
      case 1:
        return (
          <motion.div
            key="step1"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="space-y-12"
          >
            {/* Where are you visiting section */}
            <div className="space-y-6">
              <div className="text-center space-y-2">
                <h2 className="font-merchant text-2xl leading-tight">
                  <span className="font-light">Where are you</span>{' '}
                  <span className="font-bold text-primary italic">visiting?</span>
                </h2>
              </div>

              {/* Location Search */}
              <div className="max-w-md mx-auto space-y-4">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                  <Input
                    placeholder="Search destinations..."
                    value={itineraryData.locationSearch}
                    onChange={(e) => setItineraryData(prev => ({ ...prev, locationSearch: e.target.value }))}
                    className="pl-10 h-12 text-center"
                  />
                </div>

                {/* Popular Destinations */}
                <div className="grid grid-cols-1 gap-3">
                  {destinations
                    .filter(dest => 
                      itineraryData.locationSearch === '' || 
                      dest.name.toLowerCase().includes(itineraryData.locationSearch.toLowerCase()) ||
                      dest.country.toLowerCase().includes(itineraryData.locationSearch.toLowerCase())
                    )
                    .map((destination) => (
                    <motion.div
                      key={destination.id}
                      whileHover={{ scale: 1.02 }}
                      whileTap={{ scale: 0.98 }}
                    >
                      <Card
                        className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center px-4 ${
                          itineraryData.destination === destination.id
                            ? 'border-primary bg-primary text-white'
                            : 'border-gray-200 hover:border-primary/40'
                        }`}
                        onClick={() => setItineraryData(prev => ({ ...prev, destination: destination.id, locationSearch: destination.name }))}
                      >
                        <div className="flex items-center gap-3 w-full">
                          <MapPin className={`w-5 h-5 ${
                            itineraryData.destination === destination.id ? 'text-white' : 'text-gray-400'
                          }`} />
                          <div className="flex-1 text-left">
                            <h3 className={`font-semibold ${
                              itineraryData.destination === destination.id ? 'text-white' : 'text-gray-800'
                            }`}>
                              {destination.name}
                            </h3>
                            <p className={`text-sm ${
                              itineraryData.destination === destination.id ? 'text-white/80' : 'text-gray-500'
                            }`}>
                              {destination.country}
                            </p>
                          </div>
                        </div>
                      </Card>
                    </motion.div>
                  ))}
                </div>
              </div>
            </div>

            {/* When are you visiting section */}
            <div className="space-y-6">
              <div className="text-center space-y-2">
                <h2 className="text-2xl font-light">When are you</h2>
                <h2 className="text-2xl font-bold text-primary italic">visiting?</h2>
              </div>

              <div className="max-w-2xl mx-auto">
                <Card className="p-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {/* Start Date */}
                    <div className="space-y-3">
                      <label className="block font-medium text-center">Check-in Date</label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button
                            variant="outline"
                            className={`w-full h-12 justify-start text-left font-normal ${
                              !itineraryData.startDate && "text-muted-foreground"
                            }`}
                          >
                            <Calendar className="mr-2 h-4 w-4" />
                            {itineraryData.startDate ? (
                              itineraryData.startDate.toLocaleDateString()
                            ) : (
                              "Select start date"
                            )}
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                          <CalendarComponent
                            mode="single"
                            selected={itineraryData.startDate}
                            onSelect={(date) => setItineraryData(prev => ({ ...prev, startDate: date }))}
                            disabled={(date) => date < new Date()}
                            initialFocus
                          />
                        </PopoverContent>
                      </Popover>
                    </div>

                    {/* End Date */}
                    <div className="space-y-3">
                      <label className="block font-medium text-center">Check-out Date</label>
                      <Popover>
                        <PopoverTrigger asChild>
                          <Button
                            variant="outline"
                            className={`w-full h-12 justify-start text-left font-normal ${
                              !itineraryData.endDate && "text-muted-foreground"
                            }`}
                          >
                            <Calendar className="mr-2 h-4 w-4" />
                            {itineraryData.endDate ? (
                              itineraryData.endDate.toLocaleDateString()
                            ) : (
                              "Select end date"
                            )}
                          </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                          <CalendarComponent
                            mode="single"
                            selected={itineraryData.endDate}
                            onSelect={(date) => setItineraryData(prev => ({ ...prev, endDate: date }))}
                            disabled={(date) => date < (itineraryData.startDate || new Date())}
                            initialFocus
                          />
                        </PopoverContent>
                      </Popover>
                    </div>
                  </div>

                  {/* Date Summary */}
                  {itineraryData.startDate && itineraryData.endDate && (
                    <div className="mt-6 p-4 bg-primary/5 rounded-lg border border-primary/20">
                      <div className="text-center">
                        <p className="font-medium text-primary">
                          {Math.ceil((itineraryData.endDate.getTime() - itineraryData.startDate.getTime()) / (1000 * 60 * 60 * 24))} days
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {itineraryData.startDate.toLocaleDateString()} - {itineraryData.endDate.toLocaleDateString()}
                        </p>
                      </div>
                    </div>
                  )}
                </Card>
              </div>
            </div>
          </motion.div>
        );

      case 2:
        return (
          <motion.div
            key="step2"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="space-y-12"
          >
            {/* Energy Question */}
            <div className="space-y-6">
              <div className="text-center space-y-2">
                <h2 className="font-merchant text-2xl leading-tight">
                  <span className="font-light">What kind of energy are you after on</span>{' '}
                  <span className="font-bold text-primary italic">this trip?</span>
                </h2>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
                {[
                  { id: 'relaxed', name: 'Relaxed', description: 'Within 1-3km' },
                  { id: 'balanced', name: 'Balanced', description: 'Within 3-10 km' },
                  { id: 'action-packed', name: 'Action Packed', description: 'More than 10 km' }
                ].map((option) => (
                  <motion.div
                    key={option.id}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <Card
                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-24 flex items-center justify-center text-center ${
                        itineraryData.energy === option.id
                          ? 'border-primary bg-primary text-white'
                          : 'border-gray-200 hover:border-primary/40'
                      }`}
                      onClick={() => setItineraryData(prev => ({ ...prev, energy: option.id }))}
                    >
                      <div className="p-3">
                        <h3 className={`font-semibold ${
                          itineraryData.energy === option.id ? 'text-white' : 'text-gray-800'
                        }`}>
                          {option.name}
                        </h3>
                        <p className={`text-xs ${
                          itineraryData.energy === option.id ? 'text-white/80' : 'text-gray-500'
                        }`}>
                          {option.description}
                        </p>
                      </div>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* Kids Question */}
            <div className="space-y-6">
              <div className="text-center space-y-2">
                <h2 className="font-merchant text-2xl leading-tight">
                  <span className="font-light">Are you</span>{' '}
                  <span className="font-bold text-primary italic">travelling with kids?</span>
                </h2>
              </div>

              <div className="grid grid-cols-2 gap-4 max-w-md mx-auto">
                {[
                  { value: true, label: 'Yes', icon: '👨‍👩‍👧‍👦' },
                  { value: false, label: 'No', icon: '👫' }
                ].map((option) => (
                  <motion.div
                    key={option.label}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <Card
                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-24 flex items-center justify-center text-center ${
                        itineraryData.withKids === option.value
                          ? 'border-primary bg-primary text-white'
                          : 'border-gray-200 hover:border-primary/40'
                      }`}
                      onClick={() => setItineraryData(prev => ({ ...prev, withKids: option.value }))}
                    >
                      <div className="space-y-2">
                        <div className="text-2xl">{option.icon}</div>
                        <h3 className={`font-semibold ${
                          itineraryData.withKids === option.value ? 'text-white' : 'text-gray-800'
                        }`}>
                          {option.label}
                        </h3>
                      </div>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.div>
        );

      case 3:
        return (
          <motion.div
            key="step3"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="space-y-8"
          >
            <div className="text-center space-y-2">
              <h2 className="text-2xl font-light">Do you follow any</h2>
              <h2 className="text-2xl font-bold text-primary italic">dietary preferences?</h2>
            </div>

            <div className="grid grid-cols-2 gap-4 max-w-md mx-auto">
              {[
                { id: 'vegetarian', label: 'Vegetarian' },
                { id: 'meat-lover', label: 'Meat lover' },
                { id: 'halal', label: 'Halal' },
                { id: 'no-preference', label: "Doesn't matter" }
              ].map((option) => (
                <motion.div
                  key={option.id}
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  <Card
                    className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-20 flex items-center justify-center text-center ${
                      itineraryData.dietaryPreferences.includes(option.id)
                        ? 'border-primary bg-primary text-white'
                        : 'border-gray-200 hover:border-primary/40'
                    }`}
                    onClick={() => handleDietaryToggle(option.id)}
                  >
                    <h3 className={`font-semibold text-sm ${
                      itineraryData.dietaryPreferences.includes(option.id) ? 'text-white' : 'text-gray-800'
                    }`}>
                      {option.label}
                    </h3>
                  </Card>
                </motion.div>
              ))}
            </div>
          </motion.div>
        );

      case 4:
        return (
          <motion.div
            key="step4"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="space-y-8"
          >
            <div className="max-w-lg mx-auto space-y-8">
              {/* Museums Question */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium text-center">Do you enjoy visiting popular museums and art galleries?</h3>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { value: true, label: 'Not really' },
                    { value: null, label: 'Yes if interesting' },
                    { value: false, label: 'Totally my vibe' }
                  ].map((option, index) => (
                    <Card
                      key={index}
                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
                        itineraryData.museums === option.value
                          ? 'border-primary bg-primary text-white'
                          : 'border-gray-200 hover:border-primary/40'
                      }`}
                      onClick={() => setItineraryData(prev => ({ ...prev, museums: option.value }))}
                    >
                      <span className={`text-sm font-medium ${
                        itineraryData.museums === option.value ? 'text-white' : 'text-gray-800'
                      }`}>
                        {option.label}
                      </span>
                    </Card>
                  ))}
                </div>
              </div>

              {/* Scenic Spots Question */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium text-center">Do you enjoy visiting popular scenic viewpoints and photo spots?</h3>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { value: true, label: 'Not really' },
                    { value: null, label: 'Yes if interesting' },
                    { value: false, label: 'Absolutely love' }
                  ].map((option, index) => (
                    <Card
                      key={index}
                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
                        itineraryData.scenicSpots === option.value
                          ? 'border-primary bg-primary text-white'
                          : 'border-gray-200 hover:border-primary/40'
                      }`}
                      onClick={() => setItineraryData(prev => ({ ...prev, scenicSpots: option.value }))}
                    >
                      <span className={`text-sm font-medium ${
                        itineraryData.scenicSpots === option.value ? 'text-white' : 'text-gray-800'
                      }`}>
                        {option.label}
                      </span>
                    </Card>
                  ))}
                </div>
              </div>

              {/* Cultural Sites Question */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium text-center">Do you enjoy visiting popular cultural landmarks and historical sites?</h3>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { value: true, label: 'Not really' },
                    { value: null, label: 'If nearby' },
                    { value: false, label: 'Absolutely love' }
                  ].map((option, index) => (
                    <Card
                      key={index}
                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
                        itineraryData.culturalSites === option.value
                          ? 'border-primary bg-primary text-white'
                          : 'border-gray-200 hover:border-primary/40'
                      }`}
                      onClick={() => setItineraryData(prev => ({ ...prev, culturalSites: option.value }))}
                    >
                      <span className={`text-sm font-medium ${
                        itineraryData.culturalSites === option.value ? 'text-white' : 'text-gray-800'
                      }`}>
                        {option.label}
                      </span>
                    </Card>
                  ))}
                </div>
              </div>

              {/* Wildlife Question */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium text-center">Would you like your trip to include some wildlife experiences?</h3>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { value: true, label: 'Not really' },
                    { value: null, label: 'If nearby' },
                    { value: false, label: 'Absolutely love' }
                  ].map((option, index) => (
                    <Card
                      key={index}
                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
                        itineraryData.wildlife === option.value
                          ? 'border-primary bg-primary text-white'
                          : 'border-gray-200 hover:border-primary/40'
                      }`}
                      onClick={() => setItineraryData(prev => ({ ...prev, wildlife: option.value }))}
                    >
                      <span className={`text-sm font-medium ${
                        itineraryData.wildlife === option.value ? 'text-white' : 'text-gray-800'
                      }`}>
                        {option.label}
                      </span>
                    </Card>
                  ))}
                </div>
              </div>

              {/* Nightlife Question */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium text-center">Are you into nightlife and evening scenes?</h3>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { value: true, label: 'Not really' },
                    { value: null, label: 'A few nights' },
                    { value: false, label: 'Absolutely' }
                  ].map((option, index) => (
                    <Card
                      key={index}
                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
                        itineraryData.nightlife === option.value
                          ? 'border-primary bg-primary text-white'
                          : 'border-gray-200 hover:border-primary/40'
                      }`}
                      onClick={() => setItineraryData(prev => ({ ...prev, nightlife: option.value }))}
                    >
                      <span className={`text-sm font-medium ${
                        itineraryData.nightlife === option.value ? 'text-white' : 'text-gray-800'
                      }`}>
                        {option.label}
                      </span>
                    </Card>
                  ))}
                </div>
              </div>

              {/* Shopping Question */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium text-center">How do you feel about shopping during your trip?</h3>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { value: true, label: 'Not really' },
                    { value: null, label: 'Some shopping' },
                    { value: false, label: 'Love shopping' }
                  ].map((option, index) => (
                    <Card
                      key={index}
                      className={`cursor-pointer transition-all duration-300 hover:shadow-md border-2 h-16 flex items-center justify-center text-center ${
                        itineraryData.shopping === option.value
                          ? 'border-primary bg-primary text-white'
                          : 'border-gray-200 hover:border-primary/40'
                      }`}
                      onClick={() => setItineraryData(prev => ({ ...prev, shopping: option.value }))}
                    >
                      <span className={`text-sm font-medium ${
                        itineraryData.shopping === option.value ? 'text-white' : 'text-gray-800'
                      }`}>
                        {option.label}
                      </span>
                    </Card>
                  ))}
                </div>
              </div>
            </div>
          </motion.div>
        );



      default:
        return null;
    }
  };

  return (
    <div className="min-h-screen bg-background">
      <Navbar
        activeCity=""
        onCityChange={() => {}}
        onHomeClick={onHomeClick}
        onPassesClick={onPassesClick}
        onSignInClick={onSignInClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        currentPage="create-itinerary"
        isUserSignedIn={!!user}
        user={user}
      />

      <div className="container mx-auto px-4 pt-40 pb-8">
        {/* Header - Only show during trip planning steps */}
        {!isGenerating && !showResults && (
          <>
            <div className="max-w-4xl mx-auto text-center mb-8">
              <h1 className="font-merchant text-3xl md:text-4xl leading-tight">
                <span className="font-light">Tell Us About Your</span>{' '}
                <span className="font-bold text-primary italic">Trip</span>
              </h1>
            </div>

            {/* Progress Bar */}
            <div className="max-w-md mx-auto mb-8">
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div 
                  className="bg-primary h-2 rounded-full transition-all duration-300"
                  style={{ width: `${progress}%` }}
                />
              </div>
            </div>

            {/* Step Circles */}
            <div className="flex justify-center items-center mb-12">
              <div className="flex items-center gap-4">
                {Array.from({ length: totalSteps }, (_, index) => {
                  const stepNumber = index + 1;
                  const isActive = stepNumber === currentStep;
                  const isCompleted = stepNumber < currentStep;
                  
                  return (
                    <div key={stepNumber} className="flex items-center">
                      <div
                        className={`w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 ${
                          isCompleted
                            ? 'bg-primary text-white'
                            : isActive
                            ? 'bg-primary text-white'
                            : 'bg-gray-200 text-gray-400'
                        }`}
                      >
                        {isCompleted ? (
                          <CheckCircle className="w-4 h-4" />
                        ) : (
                          <span className="text-sm font-medium">{stepNumber}</span>
                        )}
                      </div>
                      {stepNumber < totalSteps && (
                        <div
                          className={`w-12 h-0.5 mx-2 transition-colors duration-300 ${
                            isCompleted ? 'bg-primary' : 'bg-gray-200'
                          }`}
                        />
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </>
        )}

        {/* Main Content */}
        <div className="max-w-4xl mx-auto">
          <AnimatePresence mode="wait">
            {renderStep()}
          </AnimatePresence>

          {/* Navigation Buttons */}
          {!isGenerating && !showResults && (
            <div className="flex justify-between mt-12 max-w-md mx-auto">
              <Button
                variant="outline"
                onClick={handlePrevious}
                disabled={currentStep === 1}
                className="flex items-center gap-2 px-6 py-3"
              >
                <ArrowLeft className="w-4 h-4" />
                Back
              </Button>

              <Button
                onClick={handleNext}
                disabled={!canProceed()}
                className="flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary/90"
              >
                {currentStep === totalSteps ? 'Create Magic Itinerary' : 'Next'}
                {currentStep !== totalSteps && <ArrowRight className="w-4 h-4" />}
                {currentStep === totalSteps && <Sparkles className="w-4 h-4" />}
              </Button>
            </div>
          )}
        </div>
      </div>

      <Footer
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onPassesClick={onPassesClick}
        onSignInClick={onSignInClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onContactUsClick={onContactUsClick}
        currentPage={currentPage}
      />
    </div>
  );
}