From 351c767104cf869340920401d5b3a8560fabb0a2 Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Wed, 22 Apr 2026 23:20:26 +0530
Subject: [PATCH 01/11] replace the citySelected condition from local to
 session storage

---
 src/components/CitySelectionDialog.tsx |  1 +
 src/components/Navbar.tsx              | 61 ++++----------------------
 2 files changed, 10 insertions(+), 52 deletions(-)

diff --git a/src/components/CitySelectionDialog.tsx b/src/components/CitySelectionDialog.tsx
index 188d4a0..a972fc5 100644
--- a/src/components/CitySelectionDialog.tsx
+++ b/src/components/CitySelectionDialog.tsx
@@ -45,6 +45,7 @@ export function CitySelectionDialog({
     navigate(`/${slugify(city.cityName)}`);
     localStorage.setItem("cityId", String(city.id))
     localStorage.setItem("cityName", String(city.cityName))
+    sessionStorage.setItem("citySelected", String(city.cityName))
     onClose();
   };
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 3a7d78c..905ecfe 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -2,12 +2,10 @@ import { useState, useEffect, useRef, forwardRef } from 'react';
 import { Menu, X, ShoppingBag, ChevronDown, Globe, User, Settings, LogOut } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import Frame1597884853 from '../imports/Frame1597884853';
 import { Button } from './ui/button';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { CTAButton } from './CTAButton';
 import logoImage from '../assets/cit-logo.png';
-import melbourneLogo from '../assets/melbourne-logo.png';
 import { CitySelectionDialog, slugify } from './CitySelectionDialog';
 import { useAuth } from '../context/AuthContext';
 import { LoginModal } from './LoginModal';
@@ -62,15 +60,12 @@ interface NavigationItem {
 export default function Navbar({
   activeCity,
   onCityChange,
-  onSignInClick,
-  onSignOutClick,
   isUserSignedIn = false,
   // user
 }: NavbarProps) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const [activeLanguageDropdown, setActiveLanguageDropdown] = useState(false);
-  const [activeCartDropdown, setActiveCartDropdown] = useState(false);
   const [activeUserDropdown, setActiveUserDropdown] = useState(false);
   const [activeCityDropdown, setActiveCityDropdown] = useState(false);
   const [isCityDialogOpen, setIsCityDialogOpen] = useState(false);
@@ -79,7 +74,6 @@ export default function Navbar({
   const [dialogSource, setDialogSource] = useState<'navbar' | 'cta'>('navbar');
 
   const languageRef = useRef<HTMLDivElement>(null);
-  const cartRef = useRef<HTMLDivElement>(null);
   const userRef = useRef<HTMLDivElement>(null);
   const cityRef = useRef<HTMLDivElement>(null);
 
@@ -96,7 +90,7 @@ export default function Navbar({
   const cityName = localStorage.getItem("cityName")
 
   // const citySelected = location.pathname.includes(slugify(cityName) || "")
-  const citySelected = cityName
+  const citySelected = sessionStorage.getItem("citySelected")
 
   const baseUrl = import.meta.env.VITE_BASE_URL;
 
@@ -137,15 +131,6 @@ export default function Navbar({
         path: '/whats-included',
         isShared: false
       },
-      // Position 4 - Shared item
-      // {
-      //   label: 'Your Card',
-      //   path: '/passes',
-      //   isShared: true,
-      //   landingLabel: 'Your Card',
-      //   melbourneLabel: 'Your Card'
-      // },
-      // Position 5
       {
         label: 'FAQ',
         path: '/faq',
@@ -159,7 +144,7 @@ export default function Navbar({
         melbourneLabel: 'Your Postcard'
       }
     ],
-    melbourne: [
+    citySelected: [
       // Position 1
       {
         label: 'Attractions',
@@ -240,20 +225,20 @@ export default function Navbar({
   }, [location.pathname]);
 
   // ✅ Determine which navbar to show
-  const getAutoNavigationSource = (): 'landing' | 'melbourne' => {
+  const getAutoNavigationSource = () => {
     const path = location.pathname;
 
     // Explicit routes
-    if (path.startsWith('/melbourne')) return 'melbourne';
+    // if (path.startsWith('/melbourne')) return 'melbourne';
     if (path === '/' || path.startsWith('/explore')) return 'landing';
 
     // Shared routes
-    if (['/passes', '/how-it-works'].includes(path)) {
-      return lastKnownCity; // ← remembers where user came from
-    }
+    // if (['/passes', '/how-it-works'].includes(path)) {
+    //   return lastKnownCity; // ← remembers where user came from
+    // }
 
     // Fallback
-    return lastKnownCity;
+    return citySelected;
   };
 
 
@@ -261,7 +246,7 @@ export default function Navbar({
   const getNavigationItems = (): NavigationItem[] => {
     const currentSource = getAutoNavigationSource();
     const items = currentSource === 'landing' ?
-      navigationConfig.landing : navigationConfig.melbourne;
+      navigationConfig.landing : navigationConfig.citySelected;
 
     return items.map((item, index) => ({
       ...item,
@@ -370,34 +355,6 @@ export default function Navbar({
     { id: '2', name: 'Melbourne Premium Pass', price: '$129', quantity: 1 },
   ];
 
-  // Calculate cart total
-  const cartTotal = cartItems.reduce((total, item) => {
-    const price = parseFloat(item.price.replace('$', ''));
-    return total + (price * item.quantity);
-  }, 0);
-
-  // Cart dropdown items with proper navigation for checkout
-  const cartDropdownItems: DropdownItem[] = [
-    ...cartItems.map(item => ({
-      id: item.id,
-      label: `${item.name} - ${item.price}`,
-      badge: `${item.quantity}x`
-    })),
-    {
-      id: 'total',
-      label: `Total: $${cartTotal.toFixed(2)}`,
-      icon: <ShoppingBag className="w-4 h-4" />
-    },
-    {
-      id: 'checkout',
-      label: 'Proceed to Checkout',
-      action: () => {
-        navigate('/checkout');
-        setActiveCartDropdown(false);
-      }
-    }
-  ];
-
   const closeMobileMenu = () => {
     setIsMobileMenuOpen(false);
   };

From 617b49424951136c80a37d841bc4946ae6fe2c02 Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Wed, 22 Apr 2026 23:49:59 +0530
Subject: [PATCH 02/11] rename and replace the design files with actual page
 names

---
 src/AppRouter.tsx                             |   43 +-
 src/pages/CartPageDesign.tsx                  |  878 ----------
 src/pages/CheckoutPage.tsx                    | 1259 +++++++-------
 src/pages/CheckoutPage2.tsx                   |  886 ----------
 ...Design.tsx => CreateMagicIternaryPage.tsx} |   48 +-
 src/pages/CreateMagicItineraryPage.tsx        | 1450 -----------------
 src/pages/ItineraryViewPage.tsx               |  569 ++-----
 src/pages/ItineraryViewPageDesign.tsx         |  501 ------
 src/pages/ProfilePage.tsx                     |    6 +-
 ...PageDesign.tsx => ViewCardDetailsPage.tsx} |   16 +-
 10 files changed, 734 insertions(+), 4922 deletions(-)
 delete mode 100644 src/pages/CartPageDesign.tsx
 delete mode 100644 src/pages/CheckoutPage2.tsx
 rename src/pages/{CreateMagicIternaryPageDesign.tsx => CreateMagicIternaryPage.tsx} (96%)
 delete mode 100644 src/pages/CreateMagicItineraryPage.tsx
 delete mode 100644 src/pages/ItineraryViewPageDesign.tsx
 rename src/pages/{ViewCardDetailsPageDesign.tsx => ViewCardDetailsPage.tsx} (97%)

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index a8e8300..f875fdb 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -6,17 +6,13 @@ import { MelbournePage } from './pages/MelbournePage';
 import { PassesPage } from './pages/PassesPage';
 import { AttractionsPage } from './pages/AttractionsPage';
 import { AttractionDetailsPage } from './pages/AttractionDetailsPage';
-import { CheckoutPage } from './pages/CheckoutPage';
 import { SecureCheckoutPage } from './pages/SecureCheckoutPage';
 import { BlogsPage } from './pages/BlogsPage';
 import { BlogDetailsPage } from './pages/BlogDetailsPage';
-import { HowItWorksPage } from './components/HowItWorksPage';
 import { FAQPage } from './components/FAQPage';
 import { PrivacyPolicyPage } from './pages/PrivacyPolicyPage';
 import { AboutUsPage } from './pages/AboutUsPage';
 import { ProfilePage } from './pages/ProfilePage';
-import { CreateMagicItineraryPage } from './pages/CreateMagicItineraryPage';
-import { ItineraryViewPage } from './pages/ItineraryViewPage';
 import { OffersPage } from './pages/OffersPage';
 import { CityCardsPage } from './pages/CityCardsPage';
 import { MagicItineraryPage } from './pages/MagicItineraryPage';
@@ -24,7 +20,6 @@ import { PostCardsPage } from './pages/PostCardsPage';
 import { DownloadAppPage } from './pages/DownloadAppPage';
 import { HotelDiscountsPage } from './pages/HotelDiscountsPage';
 import { ContactUsPage } from './pages/ContactUsPage';
-
 import { pageTransition } from './utils/animations';
 import { LandingPage } from './pages/landingPage';
 import ComingSoonPage from './pages/ComingSoonPage';
@@ -34,15 +29,14 @@ import { LandingMagicItineraryPage } from './pages/LandingMagicItineraryPage';
 import { DiscoverPage } from './pages/DiscoverPage';
 import { CartPage } from './pages/CartPage';
 import { PaymentDetailsPage } from './pages/PaymentDetailsPage';
-import { CartPageDesign } from './pages/CartPageDesign';
-import { CheckoutPage2 } from './pages/CheckoutPage2';
 import { SuperSavingsDetailsPage } from './pages/SuperSavingsDetailsPage';
-import { ViewCardDetailsPage } from './pages/ViewCardDetailsPageDesign';
-import { CreateMagicItineraryPageDesign } from './pages/CreateMagicIternaryPageDesign';
-import { ItineraryViewPageDesign } from './pages/ItineraryViewPageDesign';
+import { ViewCardDetailsPage } from './pages/ViewCardDetailsPage';
 import ItinerarySummaryPage from './pages/ItinerarySummaryPage';
 import { PaymentSuccessPage } from './pages/PaymentSuccessPage';
 import { PaymentCancelPage } from './pages/PaymentCancelPage';
+import { ItineraryViewPage } from './pages/ItineraryViewPage';
+import { CheckoutPage } from './pages/CheckoutPage';
+import { CreateMagicItineraryPage } from './pages/CreateMagicIternaryPage';
 
 // User type definition
 interface User {
@@ -134,13 +128,6 @@ export function AppRouter({
                         </motion.div>
                     } />
 
-                    {/* Checkout Routes */}
-                    {/* <Route path="/checkout" element={
-                        <motion.div key="checkout" {...pageTransition}>
-                            <CheckoutPage {...commonNavHandlers} />
-                        </motion.div>
-                    } /> */}
-
                     <Route path="/secure-checkout" element={
                         <motion.div key="secure-checkout" {...pageTransition}>
                             <SecureCheckoutPage {...commonNavHandlers} />
@@ -200,7 +187,7 @@ export function AppRouter({
                             <ProfilePage {...commonNavHandlers} />
                         </motion.div>
                     } />
-                    <Route path="/view-card-design/:cardId" element={
+                    <Route path="/view-card-details/:cardId" element={
                         <motion.div key="profile" {...pageTransition}>
                             <ViewCardDetailsPage {...commonNavHandlers} />
                         </motion.div>
@@ -213,22 +200,12 @@ export function AppRouter({
                             <CreateMagicItineraryPage {...commonNavHandlers} />
                         </motion.div>
                     } />
-                    <Route path="/create-itinerary-design" element={
-                        <motion.div key="create-itinerary" {...pageTransition}>
-                            <CreateMagicItineraryPageDesign {...commonNavHandlers} />
-                        </motion.div>
-                    } />
 
-                    <Route path="/itinerary-view" element={
+                    <Route path="/view-itinerary/:itineraryId" element={
                         <motion.div key="itinerary-view" {...pageTransition}>
                             <ItineraryViewPage {...commonNavHandlers} />
                         </motion.div>
                     } />
-                    <Route path="/itinerary-view-design/:itineraryId" element={
-                        <motion.div key="itinerary-view" {...pageTransition}>
-                            <ItineraryViewPageDesign {...commonNavHandlers} />
-                        </motion.div>
-                    } />
                     <Route path="/itinerary-summary/:itineraryId" element={
                         <motion.div key="itinerary-summary" {...pageTransition}>
                             <ItinerarySummaryPage {...commonNavHandlers} />
@@ -310,14 +287,10 @@ export function AppRouter({
                     } />
                     <Route path="/checkout" element={
                         <motion.div key="super-savings" {...pageTransition}>
-                            <CheckoutPage2 {...commonNavHandlers} />
-                        </motion.div>
-                    } />
-                    <Route path="/cart-design" element={
-                        <motion.div key="super-savings" {...pageTransition}>
-                            <CartPageDesign {...commonNavHandlers} />
+                            <CheckoutPage {...commonNavHandlers} />
                         </motion.div>
                     } />
+                 
                     <Route path="/payment/:bookingId" element={
                         <motion.div key="super-savings" {...pageTransition}>
                             <PaymentDetailsPage {...commonNavHandlers} />
diff --git a/src/pages/CartPageDesign.tsx b/src/pages/CartPageDesign.tsx
deleted file mode 100644
index e51725c..0000000
--- a/src/pages/CartPageDesign.tsx
+++ /dev/null
@@ -1,878 +0,0 @@
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import {
-  Users, Baby, ShoppingBag, Trash2, Check, CreditCard, Mail,
-  ChevronRight, ChevronDown, Minus, Plus, Calendar, ArrowLeft, MapPin,
-  Zap, Shield, Clock, Percent, Sparkles
-} from 'lucide-react';
-import Navbar from '../components/Navbar';
-import { Footer } from '../components/Footer';
-import { ImageWithFallback } from '../components/figma/ImageWithFallback';
-import { useNavigate } from 'react-router-dom';
-import { useGetCardsinCartQuery } from '../Redux/services/cards.service';
-import LoadingSpinner from '../components/LoadingSpinner'
-
-/* ─── Types ─── */
-export interface CartItem {
-  id: string;
-  city: string;
-  cardType: 'Flexi' | 'Unlimited';
-  days: number;
-  adults: number;
-  children: number;
-  quantity: number;
-  pricePerUnit: number;
-  image: string;
-}
-
-interface Attraction {
-  id: string;
-  name: string;
-  image: string;
-  category: string;
-  included: boolean;
-}
-
-interface CartPageDesignProps {
-  onBackClick: () => void;
-  onHomeClick: () => void;
-  onPassesClick: () => void;
-  onCheckoutClick?: () => void;
-  onSecureCheckoutClick?: (item: CartItem) => 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;
-  onSuperSavingsClick?: () => void;
-  onEsimsClick?: () => void;
-  onHotelDiscountsClick?: () => void;
-  onContactUsClick?: () => void;
-  onCartClick?: () => void;
-  currentPage?: string;
-  user?: { email: string; name: string } | null;
-}
-
-/* ─── Data ─── */
-const initialCartItems: CartItem[] = [
-  {
-    id: '1', city: 'Melbourne', cardType: 'Flexi', days: 3, adults: 3, children: 3, quantity: 2, pricePerUnit: 49.50,
-    image: 'https://images.unsplash.com/photo-1655963754904-2cf2b562a681?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBmbGluZGVycyUyMHN0YXRpb24lMjBzdW5zZXR8ZW58MXx8fHwxNzc2MzE5NDgzfDA&ixlib=rb-4.1.0&q=80&w=1080',
-  },
-  {
-    id: '2', city: 'Sydney', cardType: 'Flexi', days: 3, adults: 3, children: 3, quantity: 2, pricePerUnit: 49.50,
-    image: 'https://images.unsplash.com/photo-1695018228065-2e0026c654af?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBvcGVyYSUyMGhvdXNlJTIwaGFyYm91ciUyMGJyaWRnZXxlbnwxfHx8fDE3NzYzMTk0ODN8MA&ixlib=rb-4.1.0&q=80&w=1080',
-  },
-  {
-    id: '3', city: 'Melbourne', cardType: 'Unlimited', days: 6, adults: 2, children: 1, quantity: 1, pricePerUnit: 79.00,
-    image: 'https://images.unsplash.com/photo-1705120624704-0970afc29fea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBzdHJlZXQlMjBhcnQlMjBsYW5ld2F5c3xlbnwxfHx8fDE3NzYzMTk0ODR8MA&ixlib=rb-4.1.0&q=80&w=1080',
-  },
-];
-
-const dayOptions = [3, 6, 12, 18, 24];
-
-const attractionsData: Record<string, Record<string, Attraction[]>> = {
-  Melbourne: {
-    Flexi: [
-      { id: 'mel-1', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-      { id: 'mel-2', name: 'Melbourne Zoo', image: 'https://images.unsplash.com/photo-1730074888490-31239540bacf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NzYzMTk5NzB8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-      { id: 'mel-3', name: 'Royal Botanic Gardens', image: 'https://images.unsplash.com/photo-1585894507208-eeead8cb9a56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBib3RhbmljYWwlMjBnYXJkZW4lMjBncmVlbnxlbnwxfHx8fDE3NzYzMTk5NzF8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Nature', included: true },
-      { id: 'mel-4', name: 'NGV Art Gallery', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-    ],
-    Unlimited: [
-      { id: 'mel-1', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-      { id: 'mel-2', name: 'Melbourne Zoo', image: 'https://images.unsplash.com/photo-1730074888490-31239540bacf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NzYzMTk5NzB8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-      { id: 'mel-3', name: 'Royal Botanic Gardens', image: 'https://images.unsplash.com/photo-1585894507208-eeead8cb9a56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBib3RhbmljYWwlMjBnYXJkZW4lMjBncmVlbnxlbnwxfHx8fDE3NzYzMTk5NzF8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Nature', included: true },
-      { id: 'mel-4', name: 'NGV Art Gallery', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-      { id: 'mel-5', name: 'Melbourne Star Wheel', image: 'https://images.unsplash.com/photo-1769880659692-fa77e04c5ffa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvYnNlcnZhdGlvbiUyMHdoZWVsJTIwYW11c2VtZW50JTIwbmlnaHR8ZW58MXx8fHwxNzc2MzE5OTc2fDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-      { id: 'mel-6', name: 'Penguin Parade', image: 'https://images.unsplash.com/photo-1670391050251-d1cfbc3891c4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwZW5ndWlucyUyMHdpbGRsaWZlJTIwbmF0dXJlfGVufDF8fHx8MTc3NjMxOTk3Nnww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-      { id: 'mel-7', name: 'Yarra River Cruise', image: 'https://images.unsplash.com/photo-1562003914-018a4a6c2171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyaXZlciUyMGNydWlzZSUyMGJvYXQlMjBjaXR5fGVufDF8fHx8MTc3NjMxOTk3M3ww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-    ],
-  },
-  Sydney: {
-    Flexi: [
-      { id: 'syd-1', name: 'Harbour Bridge Climb', image: 'https://images.unsplash.com/photo-1767974062666-2685a670e353?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwY2xpbWJ8ZW58MXx8fHwxNzc2MzE5OTcxfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Adventure', included: true },
-      { id: 'syd-2', name: 'Taronga Zoo', image: 'https://images.unsplash.com/photo-1704852168456-b70e08441917?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjB0YXJvbmdhJTIwem9vJTIwYW5pbWFsc3xlbnwxfHx8fDE3NzYzMTk5NzJ8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-      { id: 'syd-3', name: 'Art Gallery NSW', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-    ],
-    Unlimited: [
-      { id: 'syd-1', name: 'Harbour Bridge Climb', image: 'https://images.unsplash.com/photo-1767974062666-2685a670e353?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwY2xpbWJ8ZW58MXx8fHwxNzc2MzE5OTcxfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Adventure', included: true },
-      { id: 'syd-2', name: 'Taronga Zoo', image: 'https://images.unsplash.com/photo-1704852168456-b70e08441917?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjB0YXJvbmdhJTIwem9vJTIwYW5pbWFsc3xlbnwxfHx8fDE3NzYzMTk5NzJ8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-      { id: 'syd-3', name: 'Art Gallery NSW', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-      { id: 'syd-4', name: 'Sydney Harbour Cruise', image: 'https://images.unsplash.com/photo-1562003914-018a4a6c2171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyaXZlciUyMGNydWlzZSUyMGJvYXQlMjBjaXR5fGVufDF8fHx8MTc3NjMxOTk3M3ww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-      { id: 'syd-5', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-    ],
-  },
-};
-
-const offersData: Record<string, { title: string; description: string; image: string }[]> = {
-  Flexi: [
-    { title: 'Astor Hotels Ultra Deluxe', description: '15% Discount on all treatments for first-time clients', image: 'https://images.unsplash.com/photo-1715191904112-4a5d9c3089fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMHJlc29ydCUyMGV4dGVyaW9yfGVufDF8fHx8MTc3NjMyMTM2MXww&ixlib=rb-4.1.0&q=80&w=1080' },
-    { title: 'Green Valley Spa Lux', description: '20% Off on membership plans for new members', image: 'https://images.unsplash.com/photo-1759216853079-831ef8c8b327?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcGElMjB3ZWxsbmVzcyUyMHRyZWF0bWVudCUyMGludGVyaW9yfGVufDF8fHx8MTc3NjMyMTM2M3ww&ixlib=rb-4.1.0&q=80&w=1080' },
-    { title: 'Harbour Dining Co.', description: '10% Off your first dining experience at waterfront', image: 'https://images.unsplash.com/photo-1676471932681-45fa972d848a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyZXN0YXVyYW50JTIwZmluZSUyMGRpbmluZ3xlbnwxfHx8fDE3NzYzMTkxNDl8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-    { title: 'National Gallery Exhibition', description: 'Free audio guide with every gallery visit', image: 'https://images.unsplash.com/photo-1569342380852-035f42d9ca41?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtdXNldW0lMjBnYWxsZXJ5JTIwZXhoaWJpdGlvbnxlbnwxfHx8fDE3NzYyNDYwMjh8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-    { title: 'Sunset Harbour Cruise', description: 'Complimentary drink on every sunset cruise booking', image: 'https://images.unsplash.com/photo-1765783800962-83d99ff7b158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjcnVpc2UlMjBib2F0JTIwaGFyYm9yJTIwdG91cnxlbnwxfHx8fDE3NzYzMjE2MDd8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-  ],
-  Unlimited: [
-    { title: 'SkyView Ferris Wheel', description: 'Complimentary second ride for all pass holders', image: 'https://images.unsplash.com/photo-1626209025747-b41ee6ec191f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmZXJyaXMlMjB3aGVlbCUyMGFtdXNlbWVudCUyMHBhcmt8ZW58MXx8fHwxNzc2MzE3NDI2fDA&ixlib=rb-4.1.0&q=80&w=1080' },
-    { title: 'City Mall Boutique', description: '15% Off at select boutique stores with your pass', image: 'https://images.unsplash.com/photo-1567966689299-819568579d36?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzaG9wcGluZyUyMG1hbGwlMjBib3V0aXF1ZSUyMHJldGFpbHxlbnwxfHx8fDE3NzYzMjEzNjN8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-    { title: 'Adventure Outfitters', description: 'Free gear rental on outdoor adventure bookings', image: 'https://images.unsplash.com/photo-1761131221577-0716baffc6ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhZHZlbnR1cmUlMjBzcG9ydHMlMjBvdXRkb29yJTIwYWN0aXZpdHl8ZW58MXx8fHwxNzc2MzIxMzYzfDA&ixlib=rb-4.1.0&q=80&w=1080' },
-    { title: 'Skyline Rooftop Lounge', description: 'Buy one get one free on signature cocktails', image: 'https://images.unsplash.com/photo-1642114955097-8f3d0e141641?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb29mdG9wJTIwYmFyJTIwY2l0eSUyMHNreWxpbmUlMjBuaWdodHxlbnwxfHx8fDE3NzYyNDU2NTl8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-    { title: 'Yarra Valley Wines', description: 'Exclusive wine tasting tour with pass holders discount', image: 'https://images.unsplash.com/photo-1764649841527-c8852b63cc53?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3aW5lJTIwdGFzdGluZyUyMHZpbmV5YXJkJTIwY2VsbGFyfGVufDF8fHx8MTc3NjMyMTYwOHww&ixlib=rb-4.1.0&q=80&w=1080' },
-  ],
-};
-
-const priceTable: Record<string, Record<number, number>> = {
-  Flexi: { 3: 49.5, 6: 69, 12: 99, 18: 129, 24: 159 },
-  Unlimited: { 3: 79, 6: 109, 12: 149, 18: 189, 24: 229 },
-};
-
-/* ═══════════════════════════════════════════
-   FIGMA CARD TYPE COMPONENTS
-   ═══════════════════════════════════════════ */
-
-function FlexiCardPreview({ city, adultPrice, childPrice, isSelected }: { city: string; adultPrice: number; childPrice: number; isSelected: boolean }) {
-  return (
-    <div className={`relative h-[160px] w-full rounded-lg transition-all duration-200 ${
-      isSelected ? 'ring-2 ring-[#F95F62] shadow-md shadow-[#F95F62]/10' : 'hover:shadow-md'
-    }`}>
-      {/* Card bg */}
-      <div className="absolute inset-0 bg-white border border-[rgba(249,95,175,0.2)] rounded-lg shadow-[0px_4px_20px_0px_rgba(0,0,0,0.06)]" />
-      {/* City image */}
-      <div className="absolute h-[158px] left-[1px] top-[1px] w-[103px] rounded-bl-[7px] rounded-tl-[7px] overflow-hidden">
-        {/* <img alt="" className="absolute inset-0 w-full h-full object-cover" src={imgRectangle26} /> */}
-      </div>
-      {/* City name - left aligned */}
-      <div className="absolute left-[112px] top-[12px]">
-        <p className="font-['Poppins',sans-serif] font-medium text-[16px] text-[#2a2a2a] leading-[22px] whitespace-nowrap">{city}</p>
-      </div>
-      {/* Pricing */}
-      <div className="absolute left-[112px] top-[40px] flex flex-col gap-[6px]">
-        <div className="flex gap-[2px] items-center">
-          <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">From</span>
-          <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${adultPrice}</span>
-          <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Adult</span>
-        </div>
-        <div className="flex gap-[2px] items-center">
-          <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">and</span>
-          <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${childPrice}</span>
-          <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Child</span>
-        </div>
-      </div>
-      {/* Description */}
-      <div className="absolute left-[112px] top-[112px] right-[44px]">
-        <p className="font-['Poppins',sans-serif] text-[11px] text-left text-[rgba(0,0,0,0.4)] tracking-[0.06px] leading-[14px]">
-          Dive into an extensive selection of thrilling destinations!
-        </p>
-      </div>
-      {/* Side tab - Flexi (pink) */}
-      <div className="absolute bg-[#f95faf] h-full right-0 top-0 w-[35px] rounded-br-lg rounded-tr-lg flex flex-col items-center justify-center gap-[2px]">
-        <span className="font-['Poppins',sans-serif] text-[12px] text-white/70 [writing-mode:vertical-rl] rotate-180">Card</span>
-        <span className="font-['Poppins',sans-serif] text-[16px] text-white [writing-mode:vertical-rl] rotate-180">Flexi</span>
-      </div>
-      {/* Selected checkmark */}
-      {isSelected && (
-        <div className="absolute top-2 right-[44px] w-6 h-6 rounded-full bg-[#F95F62] flex items-center justify-center z-10">
-          <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function UnlimitedCardPreview({ city, adultPrice, childPrice, isSelected }: { city: string; adultPrice: number; childPrice: number; isSelected: boolean }) {
-  return (
-    <div className={`relative h-[160px] w-full rounded-lg transition-all duration-200 ${
-      isSelected ? 'ring-2 ring-[#F95F62] shadow-md shadow-[#F95F62]/10' : 'hover:shadow-md'
-    }`}>
-      {/* Card bg */}
-      <div className="absolute inset-0 bg-white border border-[rgba(0,0,0,0.2)] rounded-lg" />
-      {/* City image */}
-      <div className="absolute h-[158px] left-[1px] top-[1px] w-[103px] rounded-bl-[7px] rounded-tl-[7px] overflow-hidden">
-        {/* <img alt="" className="absolute inset-0 w-full h-full object-cover" src={imgRectangle26} /> */}
-      </div>
-      {/* City name - left aligned */}
-      <div className="absolute left-[112px] top-[12px]">
-        <p className="font-['Poppins',sans-serif] font-medium text-[16px] text-[#2a2a2a] leading-[20px] whitespace-nowrap">{city}</p>
-      </div>
-      {/* Pricing */}
-      <div className="absolute left-[112px] top-[40px] flex flex-col gap-[6px]">
-        <div className="flex gap-[2px] items-center">
-          <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">From</span>
-          <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${adultPrice}</span>
-          <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Adult</span>
-        </div>
-        <div className="flex gap-[2px] items-center">
-          <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">and</span>
-          <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${childPrice}</span>
-          <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Child</span>
-        </div>
-      </div>
-      {/* Description */}
-      <div className="absolute left-[112px] top-[112px] right-[44px]">
-        <p className="font-['Poppins',sans-serif] text-[11px] text-left text-[rgba(0,0,0,0.4)] tracking-[0.06px] leading-[14px]">
-          Dive into an extensive selection of thrilling destinations!
-        </p>
-      </div>
-      {/* Side tab - Unlimited (coral) */}
-      <div className="absolute bg-[#f95f62] h-full right-0 top-0 w-[35px] rounded-br-lg rounded-tr-lg flex flex-col items-center justify-center gap-[2px]">
-        <span className="font-['Poppins',sans-serif] text-[12px] text-white/70 [writing-mode:vertical-rl] rotate-180">Card</span>
-        <span className="font-['Poppins',sans-serif] text-[16px] text-white [writing-mode:vertical-rl] rotate-180">Unlimited</span>
-      </div>
-      {/* Selected checkmark */}
-      {isSelected && (
-        <div className="absolute top-2 right-[44px] w-6 h-6 rounded-full bg-[#F95F62] flex items-center justify-center z-10">
-          <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ═══════════════════════════════════════════
-   CHECKOUT CONFIGURATION CARD (Mobile-first)
-   ═══════════════════════════════════════════ */
-
-function CheckoutConfigCard({
-  item,
-  onChange,
-  onProceed,
-}: {
-  item: CartItem;
-  onChange: (updates: Partial<CartItem>) => void;
-  onProceed: () => void;
-}) {
-  const [daysOpen, setDaysOpen] = useState(false);
-  const originalPrice = (item.pricePerUnit * item.quantity * 1.35);
-  const totalPrice = item.pricePerUnit * item.quantity;
-
-  return (
-    <div className="bg-white rounded-2xl shadow-[0px_4px_24px_0px_rgba(0,0,0,0.06)] overflow-hidden w-full max-w-[400px]">
-      {/* City header */}
-      <div className="pt-6 pb-2 text-center">
-        <h4 className="font-poppins text-lg leading-snug font-medium text-[#2a2a2a]">{item.city}</h4>
-        <div className="mt-2 flex justify-center">
-          <span className={`inline-flex items-center px-4 py-1 rounded-full font-poppins text-xs font-medium ${
-            item.cardType === 'Flexi'
-              ? 'bg-[#f95faf]/10 text-[#f95faf]'
-              : 'bg-[#f95f62]/10 text-[#f95f62]'
-          }`}>
-            {item.cardType} Card
-          </span>
-        </div>
-      </div>
-
-      {/* Configuration rows */}
-      <div className="px-6 py-4 space-y-0">
-        {/* No. of Adults */}
-        <div className="flex items-center justify-between py-4 border-b border-gray-100">
-          <span className="font-poppins text-sm font-normal text-[#2a2a2a]">No. of Adults</span>
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => item.adults > 1 && onChange({ adults: item.adults - 1 })}
-              disabled={item.adults <= 1}
-              className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
-                item.adults <= 1 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'
-              }`}
-            >
-              <Minus className="w-4 h-4" />
-            </button>
-            <span className="font-poppins text-base font-medium text-[#2a2a2a] w-5 text-center tabular-nums">{item.adults}</span>
-            <button
-              onClick={() => onChange({ adults: item.adults + 1 })}
-              className="w-8 h-8 rounded-full bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20 flex items-center justify-center transition-colors"
-            >
-              <Plus className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* No. of Children */}
-        <div className="flex items-center justify-between py-4 border-b border-gray-100">
-          <span className="font-poppins text-sm font-normal text-[#2a2a2a]">No. of Children</span>
-          <div className="flex items-center gap-3">
-            <button
-              onClick={() => item.children > 0 && onChange({ children: item.children - 1 })}
-              disabled={item.children <= 0}
-              className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
-                item.children <= 0 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'
-              }`}
-            >
-              <Minus className="w-4 h-4" />
-            </button>
-            <span className="font-poppins text-base font-medium text-[#2a2a2a] w-5 text-center tabular-nums">{item.children}</span>
-            <button
-              onClick={() => onChange({ children: item.children + 1 })}
-              className="w-8 h-8 rounded-full bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20 flex items-center justify-center transition-colors"
-            >
-              <Plus className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* No. of Days (dropdown) */}
-        <div className="flex items-center justify-between py-4 border-b border-gray-100">
-          <span className="font-poppins text-sm font-normal text-[#2a2a2a]">
-            {item.cardType === 'Flexi' ? 'No. of Attractions' : 'No. of Days'}
-          </span>
-          <div className="relative">
-            <button
-              onClick={() => setDaysOpen(!daysOpen)}
-              className="flex items-center gap-2 border border-[#f95f62]/30 rounded-lg px-3 py-1.5 min-w-[72px] justify-between hover:border-[#f95f62] transition-colors"
-            >
-              <span className="font-poppins text-base font-medium text-[#f95f62] tabular-nums">{item.days}</span>
-              <ChevronDown className={`w-4 h-4 text-[#f95f62] transition-transform ${daysOpen ? 'rotate-180' : ''}`} />
-            </button>
-            <AnimatePresence>
-              {daysOpen && (
-                <motion.div
-                  initial={{ opacity: 0, y: -4, scale: 0.95 }}
-                  animate={{ opacity: 1, y: 0, scale: 1 }}
-                  exit={{ opacity: 0, y: -4, scale: 0.95 }}
-                  transition={{ duration: 0.15 }}
-                  className="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-100 z-30 min-w-[72px] overflow-hidden"
-                >
-                  {dayOptions.map((d) => (
-                    <button
-                      key={d}
-                      onClick={() => { onChange({ days: d }); setDaysOpen(false); }}
-                      className={`w-full px-3 py-2 text-left font-poppins text-sm transition-colors ${
-                        item.days === d
-                          ? 'bg-[#f95f62]/10 text-[#f95f62] font-medium'
-                          : 'text-[#2a2a2a] hover:bg-gray-50 font-normal'
-                      }`}
-                    >
-                      {d}
-                    </button>
-                  ))}
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-
-        {/* You Pay */}
-        <div className="flex items-center justify-between py-5">
-          <span className="font-poppins text-sm font-normal text-[#2a2a2a]">You Pay</span>
-          <div className="flex items-center gap-2">
-            <span className="font-poppins text-sm font-normal text-[#aaa] line-through">
-              ${originalPrice.toFixed(0)}
-            </span>
-            <span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">
-              ${totalPrice.toFixed(0)}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Proceed button */}
-      <div className="px-6 pb-6">
-        <motion.button
-          whileHover={{ scale: 1.01 }}
-          whileTap={{ scale: 0.98 }}
-          onClick={onProceed}
-          className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20"
-        >
-          Proceed to Pay
-        </motion.button>
-      </div>
-    </div>
-  );
-}
-
-/* ═══════════════════════════════════════════
-   MAIN CART PAGE
-   ═══════════════════════════════════════════ */
-
-export function CartPageDesign({
-  onBackClick,
-  onHomeClick,
-  onPassesClick,
-  onCheckoutClick,
-  onSecureCheckoutClick,
-  onSignInClick,
-  onSignOutClick,
-  onAttractionsClick,
-  onBlogsClick,
-  onHowItWorksClick,
-  onFAQClick,
-  onPrivacyPolicyClick,
-  onAboutUsClick,
-  onProfileClick,
-  onCityCardsClick,
-  onMagicItineraryClick,
-  onPostCardsClick,
-  onOffersClick,
-  onSuperSavingsClick,
-  onEsimsClick,
-  onHotelDiscountsClick,
-  onContactUsClick,
-  onCartClick,
-  currentPage,
-  user,
-}: CartPageDesignProps) {
-  const [activeTab, setActiveTab] = useState<'cards' | 'postcards'>('cards');
-  const [cartItems, setCartItems] = useState<CartItem[]>(initialCartItems);
-  const [selectedCardId, setSelectedCardId] = useState<string | null>(null);
-  const [view, setView] = useState<'cart' | 'checkout'>('cart');
-  const [checkoutItem, setCheckoutItem] = useState<CartItem | null>(null);
-
-  const handleRemoveItem = (id: string) => {
-    setCartItems(prev => prev.filter(item => item.id !== id));
-    if (selectedCardId === id) setSelectedCardId(null);
-  };
-
-  const handleSelectCard = (id: string) => {
-    setSelectedCardId(prev => (prev === id ? null : id));
-  };
-
-  const handleGoToCheckout = () => {
-    const item = cartItems.find(i => i.id === selectedCardId);
-    if (item) {
-      setCheckoutItem({ ...item });
-      setView('checkout');
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-  };
-
-  const handleBackToCart = () => {
-    setView('cart');
-    setCheckoutItem(null);
-  };
-
-  const handleCheckoutItemChange = (updates: Partial<CartItem>) => {
-    if (!checkoutItem) return;
-    const updated = { ...checkoutItem, ...updates };
-    const prices = priceTable[updated.cardType];
-    if (prices && prices[updated.days] !== undefined) {
-      updated.pricePerUnit = prices[updated.days];
-    }
-    setCheckoutItem(updated);
-  };
-
-  const isEmpty = cartItems.length === 0;
-  const selectedItem = cartItems.find(i => i.id === selectedCardId);
-  const attractions = checkoutItem ? (attractionsData[checkoutItem.city]?.[checkoutItem.cardType] || []) : [];
-  const offers = checkoutItem ? (offersData[checkoutItem.cardType] || []) : [];
-
-  return (
-    <div className="min-h-screen bg-[#fafafa] font-poppins">
-      <Navbar
-        activeCity="Melbourne" onCityChange={() => {}} onSignInClick={onSignInClick} onSignOutClick={onSignOutClick}
-        onPassesClick={onPassesClick} onCheckoutClick={onCheckoutClick} onHomeClick={onHomeClick}
-        onAttractionsClick={onAttractionsClick} onBlogsClick={onBlogsClick} onHowItWorksClick={onHowItWorksClick}
-        onFAQClick={onFAQClick} onPrivacyPolicyClick={onPrivacyPolicyClick} onAboutUsClick={onAboutUsClick}
-        onProfileClick={onProfileClick} onCityCardsClick={onCityCardsClick} onMagicItineraryClick={onMagicItineraryClick}
-        onPostCardsClick={onPostCardsClick} onOffersClick={onOffersClick} onSuperSavingsClick={onSuperSavingsClick}
-        onEsimsClick={onEsimsClick} onHotelDiscountsClick={onHotelDiscountsClick} onCartClick={onCartClick}
-        currentPage={currentPage as any} user={user}
-      />
-
-      <AnimatePresence mode="wait">
-        {view === 'cart' ? (
-          /* ─── CART VIEW ─── */
-          <motion.div
-            key="cart-view"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0, x: -30 }}
-            transition={{ duration: 0.3 }}
-            className="w-full px-4 sm:px-6 lg:px-10 xl:px-16 pt-32 pb-24 max-w-[1440px] mx-auto"
-          >
-            {/* Header */}
-            <div className="mb-8">
-              <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
-                <span className="font-light">Your</span>{' '}
-                <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent">Cart</span>
-              </h2>
-              <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1">
-                {isEmpty ? 'Your cart is empty' : `${cartItems.length} ${cartItems.length === 1 ? 'item' : 'items'} in your cart`}
-              </p>
-            </div>
-
-            {/* Tab switcher */}
-            {/* Cards listed directly below */}
-
-            {/* Content */}
-            <AnimatePresence mode="wait">
-              {activeTab === 'cards' ? (
-                <motion.div key="cards-content" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }} transition={{ duration: 0.2 }}>
-                  {isEmpty ? (
-                    <EmptyState icon={<CreditCard className="w-16 h-16 text-[#F95F62]/20" strokeWidth={1.2} />} title="No cards in your cart" description="Browse our city passes to unlock amazing experiences and savings on your next adventure" actionLabel="Explore Passes" onAction={onPassesClick} />
-                  ) : (
-                    <div className="space-y-3">
-                      {/* Table header (desktop) */}
-                      <div className="md:grid md:grid-cols-12 gap-4 px-5 pb-2">
-                        <div className="col-span-5 font-poppins text-xs font-medium text-[#8e8e8e] uppercase tracking-wider">City Cards</div>
-                        <div className="col-span-2 font-poppins text-xs font-medium text-[#8e8e8e] uppercase tracking-wider text-center">Travellers</div>
-                        <div className="col-span-1 font-poppins text-xs font-medium text-[#8e8e8e] uppercase tracking-wider text-center">Qty</div>
-                        <div className="col-span-3 font-poppins text-xs font-medium text-[#8e8e8e] uppercase tracking-wider text-right">Price</div>
-                        <div className="col-span-1" />
-                      </div>
-
-                      <AnimatePresence>
-                        {cartItems.map((item) => {
-                          const isSelected = selectedCardId === item.id;
-                          const totalPrice = item.pricePerUnit * item.quantity;
-
-                          return (
-                            <motion.div
-                              key={item.id}
-                              layout
-                              initial={{ opacity: 0, y: 12 }}
-                              animate={{ opacity: 1, y: 0 }}
-                              exit={{ opacity: 0, x: -60, transition: { duration: 0.25 } }}
-                              onClick={() => handleSelectCard(item.id)}
-                              className={`relative bg-white rounded-2xl overflow-hidden cursor-pointer transition-all duration-300 ${
-                                isSelected ? 'ring-2 ring-[#F95F62] shadow-lg shadow-[#F95F62]/8' : 'ring-1 ring-gray-100 hover:ring-gray-200 hover:shadow-md'
-                              }`}
-                            >
-                              {/* Selected badge */}
-                              <AnimatePresence>
-                                {isSelected && (
-                                  <motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="absolute top-3 left-3 z-20 w-6 h-6 rounded-full bg-[#F95F62] flex items-center justify-center shadow-md">
-                                    <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />
-                                  </motion.div>
-                                )}
-                              </AnimatePresence>
-
-                              {/* Mobile layout */}
-                              <div className="md:hidden flex gap-4 p-4">
-                                <div className="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 relative">
-                                  <ImageWithFallback src={item.image} alt={item.city} className="absolute inset-0 w-full h-full object-cover" />
-                                </div>
-                                <div className="flex-1 min-w-0">
-                                  <div className="flex items-start justify-between">
-                                    <div>
-                                      <h5 className="font-poppins text-base leading-snug font-medium text-[#2a2a2a]">{item.city}</h5>
-                                      <div className="flex items-center gap-2 mt-0.5">
-                                        <span className={`inline-flex px-2 py-0.5 rounded-full text-[10px] font-medium ${item.cardType === 'Flexi' ? 'bg-[#F95FAF]/10 text-[#F95FAF]' : 'bg-[#F95F62]/10 text-[#F95F62]'}`}>{item.cardType}</span>
-                                        <span className="font-poppins text-xs font-normal text-[#8e8e8e]">{item.days}d</span>
-                                      </div>
-                                    </div>
-                                    <button onClick={(e) => { e.stopPropagation(); handleRemoveItem(item.id); }} className="p-1.5 rounded-lg text-gray-300 hover:text-[#F95F62] hover:bg-red-50 transition-colors">
-                                      <Trash2 className="w-4 h-4" />
-                                    </button>
-                                  </div>
-                                  <div className="flex items-center justify-between mt-2">
-                                    <span className="font-poppins text-xs font-normal text-[#8e8e8e]">{item.adults}A · {item.children}C · Qty {item.quantity}</span>
-                                    <div className="text-right">
-                                      <span className="font-poppins text-base font-medium text-[#F95F62] tracking-tight">${totalPrice.toFixed(2)}</span>
-                                      {item.quantity > 1 && <span className="block font-poppins text-[10px] font-normal text-[#aaa]">${item.pricePerUnit.toFixed(2)}/ea</span>}
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-
-                              {/* Desktop layout */}
-                              <div className="md:grid md:grid-cols-12 gap-4 items-center p-5">
-                                <div className="col-span-5 flex items-center gap-4">
-                                  <div className="w-16 h-16 rounded-xl overflow-hidden flex-shrink-0 relative">
-                                    <ImageWithFallback src={item.image} alt={item.city} className="absolute inset-0 w-full h-full object-cover" />
-                                  </div>
-                                  <div>
-                                    <h5 className="font-poppins text-base leading-snug font-medium text-[#2a2a2a]">{item.city}</h5>
-                                    <div className="flex items-center gap-2 mt-1">
-                                      <span className={`inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium ${item.cardType === 'Flexi' ? 'bg-[#F95FAF]/10 text-[#F95FAF]' : 'bg-[#F95F62]/10 text-[#F95F62]'}`}>{item.cardType} Card</span>
-                                      <span className="flex items-center gap-1 font-poppins text-xs font-normal text-[#8e8e8e]"><Calendar className="w-3 h-3" />{item.days} days</span>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div className="col-span-2 text-center">
-                                  <div className="flex items-center justify-center gap-3">
-                                    <span className="flex items-center gap-1 font-poppins text-sm font-normal text-[#555]"><Users className="w-3.5 h-3.5 text-[#8e8e8e]" />{item.adults}</span>
-                                    <span className="flex items-center gap-1 font-poppins text-sm font-normal text-[#555]"><Baby className="w-3.5 h-3.5 text-[#8e8e8e]" />{item.children}</span>
-                                  </div>
-                                </div>
-                                <div className="col-span-1 flex justify-center">
-                                  <span className="font-poppins text-sm font-medium text-[#2a2a2a] bg-gray-50 px-4 py-1.5 rounded-full">{item.quantity}</span>
-                                </div>
-                                <div className="col-span-3 text-right">
-                                  <span className="font-poppins text-lg font-medium text-[#F95F62] tracking-tight">${totalPrice.toFixed(2)}</span>
-                                  {item.quantity > 1 && <span className="block font-poppins text-xs font-normal text-[#aaa] mt-0.5">${item.pricePerUnit.toFixed(2)} per unit</span>}
-                                </div>
-                                <div className="col-span-1 flex justify-end">
-                                  <button onClick={(e) => { e.stopPropagation(); handleRemoveItem(item.id); }} className="p-2 rounded-lg text-gray-300 hover:text-[#F95F62] hover:bg-red-50 transition-all" title="Remove from cart">
-                                    <Trash2 className="w-4.5 h-4.5" />
-                                  </button>
-                                </div>
-                              </div>
-                            </motion.div>
-                          );
-                        })}
-                      </AnimatePresence>
-
-                      {/* Bottom checkout bar */}
-                      <motion.div layout className="mt-6 bg-white rounded-2xl ring-1 ring-gray-100 p-5 flex flex-col sm:flex-row items-center justify-between gap-4">
-                        <div className="text-center sm:text-left">
-                          {selectedItem ? (
-                            <>
-                              <p className="font-poppins text-xs font-normal text-[#8e8e8e]">
-                                Selected: {selectedItem.city} {selectedItem.cardType} · {selectedItem.days}d · Qty {selectedItem.quantity}
-                              </p>
-                              <p className="font-poppins text-2xl font-medium text-[#F95F62] tracking-tight mt-0.5">
-                                ${(selectedItem.pricePerUnit * selectedItem.quantity).toFixed(2)}
-                              </p>
-                            </>
-                          ) : (
-                            <p className="font-poppins text-sm font-normal text-[#8e8e8e]">Tap a card above to select it for checkout</p>
-                          )}
-                        </div>
-                        <motion.button
-                          whileHover={selectedItem ? { scale: 1.02 } : {}}
-                          whileTap={selectedItem ? { scale: 0.98 } : {}}
-                          onClick={handleGoToCheckout}
-                          disabled={!selectedItem}
-                          className={`w-full sm:w-auto px-8 py-3.5 rounded-xl font-poppins text-base font-medium flex items-center justify-center gap-2 transition-all duration-200 ${
-                            selectedItem ? 'bg-[#F95F62] text-white hover:bg-[#e8545a] shadow-lg shadow-[#F95F62]/20' : 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                          }`}
-                        >
-                          Secure Checkout <ChevronRight className="w-4 h-4" />
-                        </motion.button>
-                      </motion.div>
-                    </div>
-                  )}
-                </motion.div>
-              ) : (
-                <motion.div key="postcards-content" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }} transition={{ duration: 0.2 }}>
-                  <EmptyState icon={<Mail className="w-16 h-16 text-[#F95F62]/20" strokeWidth={1.2} />} title="No post cards yet" description="Send beautiful digital post cards to friends and family from your favourite destinations around the world" actionLabel="Browse Post Cards" onAction={onPostCardsClick} />
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </motion.div>
-        ) : (
-          /* ─── CHECKOUT VIEW ─── */
-          <motion.div
-            key="checkout-view"
-            initial={{ opacity: 0, x: 40 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: 40 }}
-            transition={{ duration: 0.3 }}
-            className="w-full px-4 sm:px-6 lg:px-10 xl:px-16 pt-32 pb-24 max-w-[1440px] mx-auto"
-          >
-            {checkoutItem && (
-              <>
-                {/* Back */}
-                <button onClick={handleBackToCart} className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8">
-                  <ArrowLeft className="w-4 h-4" />Back to Cart
-                </button>
-
-                {/* Stepper */}
-                {/* <CheckoutStepper currentStep={2} /> */}
-
-                {/* Checkout heading */}
-                <div className="mb-10">
-                  <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
-                    <span className="font-light">Checkout</span>{' '}
-                    <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent">{checkoutItem.city}</span>
-                  </h2>
-
-                </div>
-
-                <div className="flex flex-col lg:flex-row gap-10">
-                  {/* Left column */}
-                  <div className="flex-1 space-y-8">
-
-                    {/* ── Card Type Selection (Figma cards) ── */}
-                    <div>
-                      <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">
-                        Choose Your Card
-                      </h3>
-                      <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">
-                        Select the card type that best suits your travel style
-                      </p>
-                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-[16px]">
-                        {/* Flexi */}
-                        <button
-                          onClick={() => handleCheckoutItemChange({ cardType: 'Flexi' })}
-                          className="relative transition-all duration-200"
-                        >
-                          <FlexiCardPreview
-                            city={checkoutItem.city}
-                            adultPrice={priceTable.Flexi[checkoutItem.days] || 80}
-                            childPrice={10}
-                            isSelected={checkoutItem.cardType === 'Flexi'}
-                          />
-                        </button>
-
-                        {/* Unlimited */}
-                        <button
-                          onClick={() => handleCheckoutItemChange({ cardType: 'Unlimited' })}
-                          className="relative transition-all duration-200"
-                        >
-                          <UnlimitedCardPreview
-                            city={checkoutItem.city}
-                            adultPrice={priceTable.Unlimited[checkoutItem.days] || 120}
-                            childPrice={20}
-                            isSelected={checkoutItem.cardType === 'Unlimited'}
-                          />
-                        </button>
-                      </div>
-
-                      {/* ── Config Card (mobile only) — right after card selection ── */}
-                      <div className="lg:hidden mt-6">
-                        <CheckoutConfigCard
-                          item={checkoutItem}
-                          onChange={handleCheckoutItemChange}
-                          onProceed={() => checkoutItem && onSecureCheckoutClick?.(checkoutItem)}
-                        />
-                      </div>
-
-                      {/* Features Comparison */}
-                      <div className="mt-6 bg-[#f5f5f5] rounded-xl p-4">
-                        <div className="grid grid-cols-[1fr_70px_70px] gap-y-0 items-center">
-                          {/* Header */}
-                          <p className="font-poppins font-medium text-sm text-[#2a2a2a] py-3">Features</p>
-                          <p className="font-poppins font-medium text-sm text-[#2a2a2a] text-center py-3">Flexi</p>
-                          <p className="font-poppins font-medium text-sm text-[#2a2a2a] text-center py-3">Unlimited</p>
-                          {[
-                            { feature: 'Access to attractions', flexi: true, unlimited: true },
-                            { feature: 'Entry to attractions', flexi: true, unlimited: true },
-                            { feature: 'Access to experiences', flexi: true, unlimited: true },
-                            { feature: 'Entry to sites', flexi: false, unlimited: true },
-                            { feature: 'Access to venues', flexi: true, unlimited: true },
-                            { feature: 'Entry to events', flexi: true, unlimited: true },
-                            { feature: 'Access to experiences', flexi: false, unlimited: true },
-                            { feature: 'Access to Itinerary creation', flexi: false, unlimited: true },
-                            { feature: 'Access to postcard creation', flexi: false, unlimited: true },
-                          ].map((row, i) => (
-                            <React.Fragment key={i}>
-                              <p className="font-poppins font-normal text-[13px] text-[#2a2a2a] py-2.5 border-t border-[rgba(0,0,0,0.08)] flex items-center gap-1.5">
-                                <span className="text-[#2a2a2a]">•</span> {row.feature}
-                              </p>
-                              <div className="flex justify-center py-2.5 border-t border-[rgba(0,0,0,0.08)]">
-                                {row.flexi ? (
-                                  <div className="w-5 h-5 rounded-full bg-[#F95F62] flex items-center justify-center">
-                                    <Check className="w-3 h-3 text-white" strokeWidth={3} />
-                                  </div>
-                                ) : (
-                                  <span className="font-poppins text-[13px] text-[rgba(0,0,0,0.3)]">–</span>
-                                )}
-                              </div>
-                              <div className="flex justify-center py-2.5 border-t border-[rgba(0,0,0,0.08)]">
-                                {row.unlimited ? (
-                                  <div className="w-5 h-5 rounded-full bg-[#F95F62] flex items-center justify-center">
-                                    <Check className="w-3 h-3 text-white" strokeWidth={3} />
-                                  </div>
-                                ) : (
-                                  <span className="font-poppins text-[13px] text-[rgba(0,0,0,0.3)]">–</span>
-                                )}
-                              </div>
-                            </React.Fragment>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* ── Offers ── */}
-                    <div>
-                      <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">
-                        {checkoutItem.cardType} Card Offers
-                      </h3>
-                      <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">
-                        Exclusive deals and discounts included with your {checkoutItem.cardType} pass
-                      </p>
-                      <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
-                        {offers.map((offer, idx) => (
-                          <div key={idx} className="relative bg-white rounded-xl shrink-0 w-[180px] h-[260px] snap-start">
-                            <div className="flex flex-col gap-2 items-start overflow-hidden p-3 rounded-xl h-full">
-                              <div className="h-[120px] w-full rounded-lg overflow-hidden shrink-0 relative">
-                                <ImageWithFallback
-                                  src={offer.image}
-                                  alt={offer.title}
-                                  className="absolute inset-0 w-full h-full object-cover rounded-lg"
-                                />
-                              </div>
-                              <div className="w-full h-[44px] overflow-hidden">
-                                <p className="font-['Poppins',sans-serif] font-normal text-[18px] text-black tracking-[-0.72px] leading-[22px] line-clamp-2">
-                                  {offer.title}
-                                </p>
-                              </div>
-                              <div className="w-full flex-1">
-                                <p className="font-['Poppins',sans-serif] font-normal text-[12px] text-[rgba(0,0,0,0.6)] leading-[16px] line-clamp-3">
-                                  {offer.description}
-                                </p>
-                              </div>
-                            </div>
-                            <div className="absolute inset-0 border border-[rgba(249,95,98,0.24)] rounded-xl pointer-events-none" />
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* ── Available Attractions ── */}
-                    <div>
-                      <div className="flex items-center justify-between">
-                        <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Available Attractions</h3>
-                        <span className="font-poppins text-xs font-medium text-[#F95F62] bg-[#F95F62]/10 px-3 py-1 rounded-full">{attractions.length} included</span>
-                      </div>
-                      <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">
-                        Explore all the experiences you can enjoy with your pass
-                      </p>
-                      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
-                        {attractions.map((a) => (
-                          <div key={a.id} className="group relative rounded-xl overflow-hidden">
-                            <div className="aspect-[4/3] relative">
-                              <ImageWithFallback src={a.image} alt={a.name} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
-                              <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
-                              <div className="absolute top-2 right-2">
-                                <span className="inline-flex px-2 py-0.5 rounded-full bg-white/90 backdrop-blur-sm text-[10px] font-poppins font-medium text-[#555]">{a.category}</span>
-                              </div>
-                              <div className="absolute bottom-2 left-2 right-2">
-                                <h6 className="font-poppins text-sm leading-snug font-medium text-white drop-shadow-sm">{a.name}</h6>
-                              </div>
-
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Right column: Config card (desktop only, sticky) */}
-                  <div className="hidden lg:block lg:w-[420px] flex-shrink-0">
-                    <div className="lg:sticky lg:top-28">
-                      <CheckoutConfigCard
-                        item={checkoutItem}
-                        onChange={handleCheckoutItemChange}
-                        onProceed={() => checkoutItem && onSecureCheckoutClick?.(checkoutItem)}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </>
-            )}
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      <Footer
-        onHomeClick={onHomeClick} onPassesClick={onPassesClick} onAttractionsClick={onAttractionsClick}
-        onBlogsClick={onBlogsClick} onHowItWorksClick={onHowItWorksClick} onFAQClick={onFAQClick}
-        onPrivacyPolicyClick={onPrivacyPolicyClick} onAboutUsClick={onAboutUsClick} onContactUsClick={onContactUsClick}
-      />
-    </div>
-  );
-}
-
-/* ─── Empty state ─── */
-function EmptyState({ icon, title, description, actionLabel, onAction }: {
-  icon: React.ReactNode; title: string; description: string; actionLabel: string; onAction?: () => void;
-}) {
-  return (
-    <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.4 }} className="flex flex-col items-center justify-center py-20 max-w-sm mx-auto text-center">
-      <motion.div className="w-28 h-28 rounded-3xl bg-[#fee7e7]/50 flex items-center justify-center mb-6" animate={{ y: [0, -6, 0] }} transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}>{icon}</motion.div>
-      <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a] mb-2">{title}</h3>
-      <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mb-8">{description}</p>
-      <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} onClick={onAction} className="bg-[#F95F62] text-white font-poppins text-base font-medium px-8 py-3.5 rounded-xl hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#F95F62]/15 w-full">{actionLabel}</motion.button>
-    </motion.div>
-  );
-}
\ No newline at end of file
diff --git a/src/pages/CheckoutPage.tsx b/src/pages/CheckoutPage.tsx
index 235aa7e..8ee3100 100644
--- a/src/pages/CheckoutPage.tsx
+++ b/src/pages/CheckoutPage.tsx
@@ -1,733 +1,574 @@
-import { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
-import { ArrowLeft, CreditCard, Users, Calendar, MapPin, Shield, Truck, Clock, ChevronRight, Check, ChevronDown, X, Mail, Smartphone } from 'lucide-react';
-import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
-import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
-import { Separator } from '../components/ui/separator';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../components/ui/dialog';
-import { RadioGroup, RadioGroupItem } from '../components/ui/radio-group';
-import { Checkbox } from '../components/ui/checkbox';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select';
-import { Badge } from '../components/ui/badge';
-import { Textarea } from '../components/ui/textarea';
+import {
+    ArrowLeft, Check, Minus, Plus, ChevronDown
+} from 'lucide-react';
+import Navbar from '../components/Navbar';
+import { Footer } from '../components/Footer';
 import { ImageWithFallback } from '../components/figma/ImageWithFallback';
-import { Layout } from '../Layout';
+import { useNavigate } from 'react-router-dom';
+import { useAddCardToCartMutation, useGetCheckoutPageDataQuery } from '../Redux/services/cards.service';
+import LoadingSpinner from '../components/LoadingSpinner';
+import { toast } from 'sonner';
 
-interface CheckoutPageProps {
-  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;
-  onSecureCheckoutClick?: () => void;
-  onContactUsClick?: () => void;
-  onEsimsClick?: () => void;
-  onHotelDiscountsClick?: () => void;
-  currentPage?: string;
-  user?: { email: string; name: string } | null;
+/* ─── Types ─── */
+export interface CartItem {
+    id: string;
+    city: string;
+    cardType: 'Flexi' | 'Unlimited';
+    days: number;
+    adults: number;
+    children: number;
+    quantity: number;
+    pricePerUnit: number;
+    image: string;
 }
 
+interface Attraction {
+    id: string;
+    name: string;
+    image: string;
+    category: string;
+    included: boolean;
+}
 
-// Mock cart data
-const mockCartItems = [
-  {
-    id: '1',
-    name: 'Paris Unlimited Pass',
-    type: '7-Day Pass',
-    price: 79,
-    originalPrice: 149,
-    discount: 47,
-    attractions: 45,
-    validity: '7 days',
-    image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?w=400',
-    features: ['Skip-the-line access', 'Mobile voucher', 'Free cancellation']
-  }
-];
+/* ─── Data (Same as Original) ─── */
+const dayOptions = [3, 6, 12, 18, 24];
 
-export function CheckoutPage({
-  onBackClick,
-  onHomeClick,
-  onMelbourneClick,
-  onPassesClick,
-  onCheckoutClick,
-  onSignInClick,
-  onSignOutClick,
-  onAttractionsClick,
-  onBlogsClick,
-  onHowItWorksClick,
-  onFAQClick,
-  onPrivacyPolicyClick,
-  onAboutUsClick,
-  onProfileClick,
-  onCityCardsClick,
-  onMagicItineraryClick,
-  onPostCardsClick,
-  onOffersClick,
-  onSecureCheckoutClick,
-  onContactUsClick,
-  onEsimsClick,
-  onHotelDiscountsClick,
-  currentPage,
-  user,
-}: CheckoutPageProps) {
-  const [purchaseType, setPurchaseType] = useState<'self' | 'gift'>('self');
-  const [selectedPayment, setSelectedPayment] = useState('credit-card');
-  const [showEmailVerification, setShowEmailVerification] = useState(false);
-  const [verificationCode, setVerificationCode] = useState('');
-  const [isEmailVerified, setIsEmailVerified] = useState(false);
-  const [formData, setFormData] = useState({
-    email: '',
-    firstName: '',
-    lastName: '',
-    phone: '',
-    country: '',
-    address: '',
-    city: '',
-    postalCode: '',
-    cardNumber: '',
-    expiry: '',
-    cvv: '',
-    cardName: '',
-    agreeTerms: false,
-    subscribeNewsletter: false
-  });
-  const [giftData, setGiftData] = useState({
-    recipientName: '',
-    recipientPhone: '',
-    recipientEmail: '',
-    personalizedMessage: ''
-  });
+const priceTable: Record<string, Record<number, number>> = {
+    Flexi: { 3: 49.5, 6: 69, 12: 99, 18: 129, 24: 159 },
+    Unlimited: { 3: 79, 6: 109, 12: 149, 18: 189, 24: 229 },
+};
 
-  const subtotal = mockCartItems.reduce((sum, item) => sum + item.price, 0);
-  const tax = Math.round(subtotal * 0.1);
-  const total = subtotal + tax;
-  const totalSavings = mockCartItems.reduce((sum, item) => sum + (item.originalPrice - item.price), 0);
+const attractionsData: Record<string, Record<string, Attraction[]>> = {
+    Melbourne: {
+        Flexi: [
+            { id: 'mel-1', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
+            { id: 'mel-2', name: 'Melbourne Zoo', image: 'https://images.unsplash.com/photo-1730074888490-31239540bacf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NzYzMTk5NzB8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
+            { id: 'mel-3', name: 'Royal Botanic Gardens', image: 'https://images.unsplash.com/photo-1585894507208-eeead8cb9a56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBib3RhbmljYWwlMjBnYXJkZW4lMjBncmVlbnxlbnwxfHx8fDE3NzYzMTk5NzF8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Nature', included: true },
+            { id: 'mel-4', name: 'NGV Art Gallery', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
+        ],
+        Unlimited: [
+            { id: 'mel-1', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
+            { id: 'mel-2', name: 'Melbourne Zoo', image: 'https://images.unsplash.com/photo-1730074888490-31239540bacf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NzYzMTk5NzB8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
+            { id: 'mel-3', name: 'Royal Botanic Gardens', image: 'https://images.unsplash.com/photo-1585894507208-eeead8cb9a56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBib3RhbmljYWwlMjBnYXJkZW4lMjBncmVlbnxlbnwxfHx8fDE3NzYzMTk5NzF8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Nature', included: true },
+            { id: 'mel-4', name: 'NGV Art Gallery', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
+            { id: 'mel-5', name: 'Melbourne Star Wheel', image: 'https://images.unsplash.com/photo-1769880659692-fa77e04c5ffa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvYnNlcnZhdGlvbiUyMHdoZWVsJTIwYW11c2VtZW50JTIwbmlnaHR8ZW58MXx8fHwxNzc2MzE5OTc2fDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
+            { id: 'mel-6', name: 'Penguin Parade', image: 'https://images.unsplash.com/photo-1670391050251-d1cfbc3891c4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwZW5ndWlucyUyMHdpbGRsaWZlJTIwbmF0dXJlfGVufDF8fHx8MTc3NjMxOTk3Nnww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
+            { id: 'mel-7', name: 'Yarra River Cruise', image: 'https://images.unsplash.com/photo-1562003914-018a4a6c2171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyaXZlciUyMGNydWlzZSUyMGJvYXQlMjBjaXR5fGVufDF8fHx8MTc3NjMxOTk3M3ww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
+        ],
+    },
+    Sydney: {
+        Flexi: [
+            { id: 'syd-1', name: 'Harbour Bridge Climb', image: 'https://images.unsplash.com/photo-1767974062666-2685a670e353?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwY2xpbWJ8ZW58MXx8fHwxNzc2MzE5OTcxfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Adventure', included: true },
+            { id: 'syd-2', name: 'Taronga Zoo', image: 'https://images.unsplash.com/photo-1704852168456-b70e08441917?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjB0YXJvbmdhJTIwem9vJTIwYW5pbWFsc3xlbnwxfHx8fDE3NzYzMTk5NzJ8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
+            { id: 'syd-3', name: 'Art Gallery NSW', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
+        ],
+        Unlimited: [
+            { id: 'syd-1', name: 'Harbour Bridge Climb', image: 'https://images.unsplash.com/photo-1767974062666-2685a670e353?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwY2xpbWJ8ZW58MXx8fHwxNzc2MzE5OTcxfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Adventure', included: true },
+            { id: 'syd-2', name: 'Taronga Zoo', image: 'https://images.unsplash.com/photo-1704852168456-b70e08441917?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjB0YXJvbmdhJTIwem9vJTIwYW5pbWFsc3xlbnwxfHx8fDE3NzYzMTk5NzJ8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
+            { id: 'syd-3', name: 'Art Gallery NSW', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
+            { id: 'syd-4', name: 'Sydney Harbour Cruise', image: 'https://images.unsplash.com/photo-1562003914-018a4a6c2171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyaXZlciUyMGNydWlzZSUyMGJvYXQlMjBjaXR5fGVufDF8fHx8MTc3NjMxOTk3M3ww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
+            { id: 'syd-5', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
+        ],
+    },
+};
 
-  const handleInputChange = (field: string, value: string | boolean) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    
-    // Trigger email verification when email is complete
-    if (field === 'email' && typeof value === 'string' && value.includes('@') && value.includes('.') && !isEmailVerified) {
-      setTimeout(() => {
-        setShowEmailVerification(true);
-      }, 1000);
-    }
-  };
+const offersData: Record<string, { title: string; description: string; image: string }[]> = {
+    Flexi: [
+        { title: 'Astor Hotels Ultra Deluxe', description: '15% Discount on all treatments for first-time clients', image: 'https://images.unsplash.com/photo-1715191904112-4a5d9c3089fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMHJlc29ydCUyMGV4dGVyaW9yfGVufDF8fHx8MTc3NjMyMTM2MXww&ixlib=rb-4.1.0&q=80&w=1080' },
+        { title: 'Green Valley Spa Lux', description: '20% Off on membership plans for new members', image: 'https://images.unsplash.com/photo-1759216853079-831ef8c8b327?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcGElMjB3ZWxsbmVzcyUyMHRyZWF0bWVudCUyMGludGVyaW9yfGVufDF8fHx8MTc3NjMyMTM2M3ww&ixlib=rb-4.1.0&q=80&w=1080' },
+        { title: 'Harbour Dining Co.', description: '10% Off your first dining experience at waterfront', image: 'https://images.unsplash.com/photo-1676471932681-45fa972d848a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyZXN0YXVyYW50JTIwZmluZSUyMGRpbmluZ3xlbnwxfHx8fDE3NzYzMTkxNDl8MA&ixlib=rb-4.1.0&q=80&w=1080' },
+        { title: 'National Gallery Exhibition', description: 'Free audio guide with every gallery visit', image: 'https://images.unsplash.com/photo-1569342380852-035f42d9ca41?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtdXNldW0lMjBnYWxsZXJ5JTIwZXhoaWJpdGlvbnxlbnwxfHx8fDE3NzYyNDYwMjh8MA&ixlib=rb-4.1.0&q=80&w=1080' },
+        { title: 'Sunset Harbour Cruise', description: 'Complimentary drink on every sunset cruise booking', image: 'https://images.unsplash.com/photo-1765783800962-83d99ff7b158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjcnVpc2UlMjBib2F0JTIwaGFyYm9yJTIwdG91cnxlbnwxfHx8fDE3NzYzMjE2MDd8MA&ixlib=rb-4.1.0&q=80&w=1080' },
+    ],
+    Unlimited: [
+        { title: 'SkyView Ferris Wheel', description: 'Complimentary second ride for all pass holders', image: 'https://images.unsplash.com/photo-1626209025747-b41ee6ec191f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmZXJyaXMlMjB3aGVlbCUyMGFtdXNlbWVudCUyMHBhcmt8ZW58MXx8fHwxNzc2MzE3NDI2fDA&ixlib=rb-4.1.0&q=80&w=1080' },
+        { title: 'City Mall Boutique', description: '15% Off at select boutique stores with your pass', image: 'https://images.unsplash.com/photo-1567966689299-819568579d36?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzaG9wcGluZyUyMG1hbGwlMjBib3V0aXF1ZSUyMHJldGFpbHxlbnwxfHx8fDE3NzYzMjEzNjN8MA&ixlib=rb-4.1.0&q=80&w=1080' },
+        { title: 'Adventure Outfitters', description: 'Free gear rental on outdoor adventure bookings', image: 'https://images.unsplash.com/photo-1761131221577-0716baffc6ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhZHZlbnR1cmUlMjBzcG9ydHMlMjBvdXRkb29yJTIwYWN0aXZpdHl8ZW58MXx8fHwxNzc2MzIxMzYzfDA&ixlib=rb-4.1.0&q=80&w=1080' },
+        { title: 'Skyline Rooftop Lounge', description: 'Buy one get one free on signature cocktails', image: 'https://images.unsplash.com/photo-1642114955097-8f3d0e141641?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb29mdG9wJTIwYmFyJTIwY2l0eSUyMHNreWxpbmUlMjBuaWdodHxlbnwxfHx8fDE3NzYyNDU2NTl8MA&ixlib=rb-4.1.0&q=80&w=1080' },
+        { title: 'Yarra Valley Wines', description: 'Exclusive wine tasting tour with pass holders discount', image: 'https://images.unsplash.com/photo-1764649841527-c8852b63cc53?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3aW5lJTIwdGFzdGluZyUyMHZpbmV5YXJkJTIwY2VsbGFyfGVufDF8fHx8MTc3NjMyMTYwOHww&ixlib=rb-4.1.0&q=80&w=1080' },
+    ],
+};
 
-  const handleGiftInputChange = (field: string, value: string) => {
-    setGiftData(prev => ({ ...prev, [field]: value }));
-  };
+/* ─── FIGMA CARD PREVIEWS (Exact Copy) ─── */
+function FlexiCardPreview({ city, adultPrice, childPrice, isSelected, image }: { city: string; adultPrice: number; childPrice: number; isSelected: boolean, image: string; }) {
+    return (
+        <div className={`relative h-[160px] w-full rounded-lg transition-all duration-200 ${isSelected ? 'ring-2 ring-[#F95F62] shadow-md shadow-[#F95F62]/10' : 'hover:shadow-md'
+            }`}>
+            {/* Card bg */}
+            <div className="absolute inset-0 bg-white border border-[rgba(249,95,175,0.2)] rounded-lg shadow-[0px_4px_20px_0px_rgba(0,0,0,0.06)]" />
+            {/* City image */}
+            <div className="absolute h-[158px] left-[1px] top-[1px] w-[103px] rounded-bl-[7px] rounded-tl-[7px] overflow-hidden">
+                <img alt="" className="absolute inset-0 w-full h-full object-cover" src={image} />
+            </div>
+            {/* City name - left aligned */}
+            <div className="absolute left-[112px] top-[12px]">
+                <p className="font-['Poppins',sans-serif] font-medium text-[16px] text-[#2a2a2a] leading-[22px] whitespace-nowrap">{city}</p>
+            </div>
+            {/* Pricing */}
+            <div className="absolute left-[112px] top-[40px] flex flex-col gap-[6px]">
+                <div className="flex gap-[2px] items-center">
+                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">From</span>
+                    <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${adultPrice}</span>
+                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Adult</span>
+                </div>
+                <div className="flex gap-[2px] items-center">
+                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">and</span>
+                    <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${childPrice}</span>
+                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Child</span>
+                </div>
+            </div>
+            {/* Description */}
+            <div className="absolute left-[112px] top-[112px] right-[44px]">
+                <p className="font-['Poppins',sans-serif] text-[11px] text-left text-[rgba(0,0,0,0.4)] tracking-[0.06px] leading-[14px]">
+                    Dive into an extensive selection of thrilling destinations!
+                </p>
+            </div>
+            {/* Side tab - Flexi (pink) */}
+            <div className="absolute bg-[#f95faf] h-full right-0 top-0 w-[35px] rounded-br-lg rounded-tr-lg flex flex-col items-center justify-center gap-[2px]">
+                <span className="font-['Poppins',sans-serif] text-[12px] text-white/70 [writing-mode:vertical-rl] rotate-180">Card</span>
+                <span className="font-['Poppins',sans-serif] text-[16px] text-white [writing-mode:vertical-rl] rotate-180">Flexi</span>
+            </div>
+            {/* Selected checkmark */}
+            {isSelected && (
+                <div className="absolute top-2 right-[44px] w-6 h-6 rounded-full bg-[#F95F62] flex items-center justify-center z-10">
+                    <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />
+                </div>
+            )}
+        </div>
+    );
+}
 
-  const handleEmailVerification = () => {
-    if (verificationCode === '123456') {
-      setIsEmailVerified(true);
-      setShowEmailVerification(false);
-    }
-  };
+function UnlimitedCardPreview({ city, adultPrice, childPrice, isSelected, image }: { city: string; adultPrice: number; childPrice: number; isSelected: boolean, image: string; }) {
+    return (
+        <div className={`relative h-[160px] w-full rounded-lg transition-all duration-200 ${isSelected ? 'ring-2 ring-[#F95F62] shadow-md shadow-[#F95F62]/10' : 'hover:shadow-md'
+            }`}>
+            {/* Card bg */}
+            <div className="absolute inset-0 bg-white border border-[rgba(0,0,0,0.2)] rounded-lg" />
+            {/* City image */}
+            <div className="absolute h-[158px] left-[1px] top-[1px] w-[103px] rounded-bl-[7px] rounded-tl-[7px] overflow-hidden">
+                <img alt="" className="absolute inset-0 w-full h-full object-cover" src={image} />
+            </div>
+            {/* City name - left aligned */}
+            <div className="absolute left-[112px] top-[12px]">
+                <p className="font-['Poppins',sans-serif] font-medium text-[16px] text-[#2a2a2a] leading-[20px] whitespace-nowrap">{city}</p>
+            </div>
+            {/* Pricing */}
+            <div className="absolute left-[112px] top-[40px] flex flex-col gap-[6px]">
+                <div className="flex gap-[2px] items-center">
+                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">From</span>
+                    <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${adultPrice}</span>
+                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Adult</span>
+                </div>
+                <div className="flex gap-[2px] items-center">
+                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">and</span>
+                    <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${childPrice}</span>
+                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Child</span>
+                </div>
+            </div>
+            {/* Description */}
+            <div className="absolute left-[112px] top-[112px] right-[44px]">
+                <p className="font-['Poppins',sans-serif] text-[11px] text-left text-[rgba(0,0,0,0.4)] tracking-[0.06px] leading-[14px]">
+                    Dive into an extensive selection of thrilling destinations!
+                </p>
+            </div>
+            {/* Side tab - Unlimited (coral) */}
+            <div className="absolute bg-[#f95f62] h-full right-0 top-0 w-[35px] rounded-br-lg rounded-tr-lg flex flex-col items-center justify-center gap-[2px]">
+                <span className="font-['Poppins',sans-serif] text-[12px] text-white/70 [writing-mode:vertical-rl] rotate-180">Card</span>
+                <span className="font-['Poppins',sans-serif] text-[16px] text-white [writing-mode:vertical-rl] rotate-180">Unlimited</span>
+            </div>
+            {/* Selected checkmark */}
+            {isSelected && (
+                <div className="absolute top-2 right-[44px] w-6 h-6 rounded-full bg-[#F95F62] flex items-center justify-center z-10">
+                    <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />
+                </div>
+            )}
+        </div>
+    );
+}
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isEmailVerified) {
-      setShowEmailVerification(true);
-      return;
-    }
-    const checkoutData = {
-      purchaseType,
-      formData,
-      ...(purchaseType === 'gift' && { giftData }),
-      selectedPayment,
-      cartItems: mockCartItems
+/* ─── CheckoutConfigCard (Exact Copy) ─── */
+function CheckoutConfigCard({
+    item,
+    onProceed,
+}: {
+    item: any;
+    onProceed: () => void;
+}) {
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [noOfAdults, setNoOfAdults] = useState(1)
+    const [noOfChildren, setNoOfChildren] = useState(0)
+    const [noOfAttractions, setNoOfAttractions] = useState(item?.minNumber);
+    const [noOfDays, setNoOfDays] = useState(item?.minNumber)
+
+    const cityId = localStorage.getItem("cityId")
+    const cityName = localStorage.getItem("cityName")
+    const cardTypeId = item?.cardType?.id
+    const cardId = item?.id
+    const cardMode = item?.cardType?.name === "selective_pass" ? "flexi" : "unlimited"
+    const adultPrice = item?.adultPrice * noOfAdults
+    const childPrice = item?.childPrice * noOfChildren
+    const basePrice = adultPrice + childPrice
+    const taxAmount = basePrice * 0.1
+    const strikedPrice = basePrice + 20
+
+    const [addCardToCart] = useAddCardToCartMutation()
+
+    useEffect(() => {
+        setNoOfAttractions(item?.minNumber)
+        setNoOfDays(item?.minNumber)
+    }, [item])
+
+    const numberArray = Array.from(
+        { length: item?.maxNumber - item?.minNumber + 1 },
+        (_, i) => item?.minNumber + i
+    );
+    const navigate = useNavigate();
+
+    const cardBookingDetails = {
+        cityXid: cityId,
+        cardTypeXid: cardTypeId,
+        cardXid: cardId,
+        cardMode, // stays as-is
+        totalAdult: noOfAdults,
+        baseAmount: basePrice, // static value
+        taxAmount,
+        totalChild: noOfChildren,
+        noOfAttractions,
+        noOfDays
     };
-    console.log('Processing checkout...', checkoutData);
-  };
 
-  const paymentMethods = [
-    {
-      id: 'credit-card',
-      name: 'Credit Card',
-      icon: <CreditCard className="w-5 h-5" />,
-      description: 'Visa, Mastercard, American Express'
-    },
-    {
-      id: 'paypal',
-      name: 'PayPal',
-      icon: <div className="w-5 h-5 bg-blue-600 rounded-sm flex items-center justify-center text-xs font-bold text-white">P</div>,
-      description: 'Pay with your PayPal account'
-    },
-    {
-      id: 'google-pay',
-      name: 'Google Pay',
-      icon: <div className="w-5 h-5 bg-green-600 rounded-sm flex items-center justify-center text-xs font-bold text-white">G</div>,
-      description: 'Pay with Google Pay'
+    const handleProceedToPayment = async () => {
+        try {
+            console.log("Adding card to cart", cardBookingDetails);
+            const response = await addCardToCart(cardBookingDetails);
+            console.log(response)
+            const bookingId = response?.data?.id
+            navigate(`/payment/${bookingId}`)
+        } catch (error) {
+            console.error("Error adding card to cart:", error);
+            toast.error("Failed to move forward. Please try again.");
+        }
     }
-  ];
 
-  return (
-    <div className="min-h-screen bg-background">
-      <Layout
-            activeCity="Melbourne"
-            onSignInClick={onSignInClick}
-            onSignOutClick={onSignOutClick}
-            user={user}
-          >
-
-      {/* Header Section */}
-      <section className="pt-32 pb-8 bg-gradient-to-br from-muted/30 to-background">
-        <div className="container mx-auto px-4 pt-8">
-          {/* Back Button */}
-          <motion.button
-            onClick={onBackClick}
-            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6 transition-colors duration-200"
-            initial={{ opacity: 0, x: -20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.5 }}
-          >
-            <ArrowLeft className="w-5 h-5" />
-            <span className="font-medium">Back to Cart</span>
-          </motion.button>
-
-          {/* Page Title */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.1 }}
-          >
-            <h1 className="font-merchant text-3xl md:text-4xl lg:text-5xl mb-4">
-              <span className="font-light">Secure</span>{' '}
-              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pr-2">Checkout</span>
-            </h1>
-            <p className="font-poppins text-lg text-gray-600">
-              Complete your purchase and start exploring Paris
-            </p>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Main Checkout Content */}
-      <section className="py-12">
-        <div className="container mx-auto px-4">
-          <form onSubmit={handleSubmit} className="grid grid-cols-1 lg:grid-cols-5 gap-8">
-            {/* Left Column - Form Inputs (3/5 width) */}
-            <div className="lg:col-span-3 space-y-8">
-              {/* Purchase Type Selection */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.1 }}
-              >
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="font-merchant">Purchase Type</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <RadioGroup
-                      value={purchaseType}
-                      onValueChange={(value) => setPurchaseType(value as 'self' | 'gift')}
-                      className="grid grid-cols-1 md:grid-cols-2 gap-4"
-                    >
-                      <div className="relative">
-                        <RadioGroupItem value="self" id="self" className="peer sr-only" />
-                        <Label
-                          htmlFor="self"
-                          className="flex flex-col items-center justify-between rounded-lg border-2 border-muted bg-white p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all min-h-[44px]"
-                        >
-                          <div className="flex items-center gap-3 w-full">
-                            <Users className="w-5 h-5" />
-                            <div className="flex-1">
-                              <p className="font-poppins font-medium">Buy for Myself</p>
-                              <p className="text-sm text-muted-foreground font-poppins">Purchase a pass for your own use</p>
-                            </div>
-                          </div>
-                        </Label>
-                      </div>
-                      <div className="relative">
-                        <RadioGroupItem value="gift" id="gift" className="peer sr-only" />
-                        <Label
-                          htmlFor="gift"
-                          className="flex flex-col items-center justify-between rounded-lg border-2 border-muted bg-white p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all min-h-[44px]"
-                        >
-                          <div className="flex items-center gap-3 w-full">
-                            <Mail className="w-5 h-5" />
-                            <div className="flex-1">
-                              <p className="font-poppins font-medium">Gift a Pass</p>
-                              <p className="text-sm text-muted-foreground font-poppins">Send as a gift to someone special</p>
-                            </div>
-                          </div>
-                        </Label>
-                      </div>
-                    </RadioGroup>
-                  </CardContent>
-                </Card>
-              </motion.div>
-
-              {/* Gift Recipient Information - Only shown when gift is selected */}
-              {purchaseType === 'gift' && (
-                <motion.div
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: 0.2 }}
-                >
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className="flex items-center gap-2 font-merchant">
-                        <Mail className="w-5 h-5" />
-                        Gift Recipient Details
-                      </CardTitle>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      <div>
-                        <Label htmlFor="recipientName" className="font-poppins">Recipient Name *</Label>
-                        <Input
-                          id="recipientName"
-                          value={giftData.recipientName}
-                          onChange={(e) => handleGiftInputChange('recipientName', e.target.value)}
-                          placeholder="Jane Smith"
-                          required={purchaseType === 'gift'}
-                          className="mt-1 font-poppins"
-                        />
-                      </div>
-                      <div>
-                        <Label htmlFor="recipientEmail" className="font-poppins">Recipient Email Address *</Label>
-                        <Input
-                          id="recipientEmail"
-                          type="email"
-                          value={giftData.recipientEmail}
-                          onChange={(e) => handleGiftInputChange('recipientEmail', e.target.value)}
-                          placeholder="recipient@email.com"
-                          required={purchaseType === 'gift'}
-                          className="mt-1 font-poppins"
-                        />
-                      </div>
-                      <div>
-                        <Label htmlFor="recipientPhone" className="font-poppins">Recipient Phone Number *</Label>
-                        <Input
-                          id="recipientPhone"
-                          type="tel"
-                          value={giftData.recipientPhone}
-                          onChange={(e) => handleGiftInputChange('recipientPhone', e.target.value)}
-                          placeholder="+1 (555) 123-4567"
-                          required={purchaseType === 'gift'}
-                          className="mt-1 font-poppins"
-                        />
-                      </div>
-                      <div>
-                        <Label htmlFor="personalizedMessage" className="font-poppins">Personalized Message</Label>
-                        <Textarea
-                          id="personalizedMessage"
-                          value={giftData.personalizedMessage}
-                          onChange={(e) => handleGiftInputChange('personalizedMessage', e.target.value)}
-                          placeholder="Write a special message for your gift recipient..."
-                          rows={4}
-                          className="mt-1 font-poppins"
-                        />
-                        <p className="text-xs text-muted-foreground mt-1 font-poppins">Optional: Add a personal touch to your gift</p>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              )}
-
-              {/* Contact Information */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: purchaseType === 'gift' ? 0.3 : 0.2 }}
-              >
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2 font-merchant">
-                      <Users className="w-5 h-5" />
-                      {purchaseType === 'gift' ? 'Your Information (Purchaser)' : 'Contact Information'}
-                      {isEmailVerified && <Check className="w-5 h-5 text-green-600" />}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div>
-                      <Label htmlFor="email" className="font-poppins">Email Address *</Label>
-                      <div className="relative">
-                        <Input
-                          id="email"
-                          type="email"
-                          value={formData.email}
-                          onChange={(e) => handleInputChange('email', e.target.value)}
-                          placeholder="your@email.com"
-                          required
-                          className={`mt-1 font-poppins ${isEmailVerified ? 'border-green-600 bg-green-50' : ''}`}
-                        />
-                        {isEmailVerified && (
-                          <Check className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-green-600" />
-                        )}
-                      </div>
-                      {isEmailVerified && (
-                        <p className="text-sm text-green-600 mt-1 font-poppins">Email verified ✓</p>
-                      )}
-                    </div>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                      <div>
-                        <Label htmlFor="firstName" className="font-poppins">First Name *</Label>
-                        <Input
-                          id="firstName"
-                          value={formData.firstName}
-                          onChange={(e) => handleInputChange('firstName', e.target.value)}
-                          placeholder="John"
-                          required
-                          className="mt-1 font-poppins"
-                        />
-                      </div>
-                      <div>
-                        <Label htmlFor="lastName" className="font-poppins">Last Name *</Label>
-                        <Input
-                          id="lastName"
-                          value={formData.lastName}
-                          onChange={(e) => handleInputChange('lastName', e.target.value)}
-                          placeholder="Doe"
-                          required
-                          className="mt-1 font-poppins"
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <Label htmlFor="phone" className="font-poppins">Phone Number</Label>
-                      <Input
-                        id="phone"
-                        type="tel"
-                        value={formData.phone}
-                        onChange={(e) => handleInputChange('phone', e.target.value)}
-                        placeholder="+1 (555) 123-4567"
-                        className="mt-1 font-poppins"
-                      />
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
-
-              {/* Payment Method */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: 0.3 }}
-              >
-
-              </motion.div>
-
-              {/* Billing Address */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: purchaseType === 'gift' ? 0.4 : 0.3 }}
-              >
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="flex items-center gap-2 font-merchant">
-                      <MapPin className="w-5 h-5" />
-                      Billing Address
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    <div>
-                      <Label htmlFor="country" className="font-poppins">Country *</Label>
-                      <Select value={formData.country} onValueChange={(value) => handleInputChange('country', value)}>
-                        <SelectTrigger className="mt-1">
-                          <SelectValue placeholder="Select country" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="us">United States</SelectItem>
-                          <SelectItem value="au">Australia</SelectItem>
-                          <SelectItem value="uk">United Kingdom</SelectItem>
-                          <SelectItem value="ca">Canada</SelectItem>
-                          <SelectItem value="de">Germany</SelectItem>
-                          <SelectItem value="fr">France</SelectItem>
-                          <SelectItem value="in">India</SelectItem>
-                          <SelectItem value="jp">Japan</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div>
-                      <Label htmlFor="address" className="font-poppins">Street Address *</Label>
-                      <Input
-                        id="address"
-                        value={formData.address}
-                        onChange={(e) => handleInputChange('address', e.target.value)}
-                        placeholder="123 Main Street"
-                        required
-                        className="mt-1 font-poppins"
-                      />
-                    </div>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                      <div>
-                        <Label htmlFor="city" className="font-poppins">City *</Label>
-                        <Input
-                          id="city"
-                          value={formData.city}
-                          onChange={(e) => handleInputChange('city', e.target.value)}
-                          placeholder="New York"
-                          required
-                          className="mt-1 font-poppins"
-                        />
-                      </div>
-                      <div>
-                        <Label htmlFor="postalCode" className="font-poppins">Postal Code *</Label>
-                        <Input
-                          id="postalCode"
-                          value={formData.postalCode}
-                          onChange={(e) => handleInputChange('postalCode', e.target.value)}
-                          placeholder="10001"
-                          required
-                          className="mt-1 font-poppins"
-                        />
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
-
-              {/* Terms and Newsletter */}
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: purchaseType === 'gift' ? 0.5 : 0.4 }}
-                className="space-y-4"
-              >
-                <div className="flex items-start space-x-2">
-                  <Checkbox
-                    id="terms"
-                    checked={formData.agreeTerms}
-                    onCheckedChange={(checked) => handleInputChange('agreeTerms', checked as boolean)}
-                  />
-                  <div className="grid gap-1.5 leading-none">
-                    <label
-                      htmlFor="terms"
-                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 font-poppins"
-                    >
-                      I agree to the Terms of Service and Privacy Policy *
-                    </label>
-                  </div>
+    return (
+        <div className="bg-white rounded-2xl shadow-[0px_4px_24px_0px_rgba(0,0,0,0.06)] overflow-hidden w-full max-w-[400px]">
+            <div className="pt-6 pb-2 text-center">
+                <h4 className="font-poppins text-lg leading-snug font-medium text-[#2a2a2a]">{cityName}</h4>
+                <div className="mt-2 flex justify-center">
+                    <span className={`inline-flex items-center px-4 py-1 rounded-full font-poppins text-xs font-medium ${item?.cardType?.name === 'selective_pass' ? 'bg-[#f95faf]/10 text-[#f95faf]' : 'bg-[#f95f62]/10 text-[#f95f62]'}`}>
+                        {item?.cardType?.displayName}
+                    </span>
                 </div>
-                <div className="flex items-start space-x-2">
-                  <Checkbox
-                    id="newsletter"
-                    checked={formData.subscribeNewsletter}
-                    onCheckedChange={(checked) => handleInputChange('subscribeNewsletter', checked as boolean)}
-                  />
-                  <div className="grid gap-1.5 leading-none">
-                    <label
-                      htmlFor="newsletter"
-                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 font-poppins"
-                    >
-                      Subscribe to our newsletter for travel tips and special offers
-                    </label>
-                  </div>
+            </div>
+            <div className="px-6 py-4 space-y-0">
+                <div className="flex items-center justify-between py-4 border-b border-gray-100">
+                    <span className="font-poppins text-sm font-normal text-[#2a2a2a]">No. of Adults</span>
+                    <div className="flex items-center gap-3">
+                        <button onClick={() => noOfAdults > 1 && setNoOfAdults((prev) => prev - 1)} disabled={noOfAdults <= 1} className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${noOfAdults <= 1 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'}`}>
+                            <Minus className="w-4 h-4" />
+                        </button>
+                        <span className="font-poppins text-base font-medium text-[#2a2a2a] w-5 text-center tabular-nums">{noOfAdults}</span>
+                        <button onClick={() => setNoOfAdults((prev) => prev + 1)} disabled={noOfAdults >= 15} className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${noOfAdults >= 15 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'}`}>
+                            <Plus className="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+
+                <div className="flex items-center justify-between py-4 border-b border-gray-100">
+                    <span className="font-poppins text-sm font-normal text-[#2a2a2a]">No. of Children</span>
+                    <div className="flex items-center gap-3">
+                        <button onClick={() => noOfChildren > 0 && setNoOfChildren((prev) => prev - 1)} disabled={noOfChildren <= 0} className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${noOfChildren <= 0 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'}`}>
+                            <Minus className="w-4 h-4" />
+                        </button>
+                        <span className="font-poppins text-base font-medium text-[#2a2a2a] w-5 text-center tabular-nums">{noOfChildren}</span>
+                        <button onClick={() => setNoOfChildren((prev) => prev + 1)} disabled={noOfChildren >= 10} className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${noOfChildren >= 10 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'}`}>
+                            <Plus className="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+
+                <div className="flex items-center justify-between py-4 border-b border-gray-100">
+                    <span className="font-poppins text-sm font-normal text-[#2a2a2a]">
+                        {item?.cardType?.name === 'selective_pass' ? 'No. of Attractions' : 'No. of Days'}
+                    </span>
+                    <div className="relative">
+                        <button onClick={() => setDropdownOpen(!dropdownOpen)} className="flex items-center gap-2 border border-[#f95f62]/30 rounded-lg px-3 py-1.5 min-w-[72px] justify-between hover:border-[#f95f62] transition-colors">
+                            <span className="font-poppins text-base font-medium text-[#f95f62] tabular-nums">{cardMode === "flexi" ? noOfAttractions : noOfDays}</span>
+                            <ChevronDown className={`w-4 h-4 text-[#f95f62] transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
+                        </button>
+                        <AnimatePresence>
+                            {dropdownOpen && (
+                                <motion.div
+                                    initial={{ opacity: 0, y: -4, scale: 0.95 }}
+                                    animate={{ opacity: 1, y: 0, scale: 1 }}
+                                    exit={{ opacity: 0, y: -4, scale: 0.95 }}
+                                    className="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-100 z-30 min-w-[72px] 
+                 max-h-48 overflow-y-auto"
+                                >
+                                    {numberArray.map((i) => (
+                                        <button
+                                            key={i}
+                                            onClick={() => {
+                                                cardMode === "flexi" ? setNoOfAttractions(i) : setNoOfDays(i);
+                                                setDropdownOpen(false);
+                                            }}
+                                            className={`w-full px-3 py-2 text-left font-poppins text-sm transition-colors ${(cardMode === "flexi" ? noOfAttractions === i : noOfDays === i)
+                                                ? "bg-[#f95f62]/10 text-[#f95f62] font-medium"
+                                                : "text-[#2a2a2a] hover:bg-gray-50 font-normal"
+                                                }`}
+
+                                        >
+                                            {i}
+                                        </button>
+                                    ))}
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                </div>
+
+                <div className="flex items-center justify-between py-5">
+                    <span className="font-poppins text-sm font-normal text-[#2a2a2a]">You Pay</span>
+                    <div className="flex items-center gap-2">
+                        <span className="font-poppins text-sm font-normal text-[#aaa] line-through">${strikedPrice}</span>
+                        <span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">${basePrice}</span>
+                    </div>
                 </div>
-              </motion.div>
             </div>
 
-            {/* Right Column - Order Summary (2/5 width) */}
-            <div className="lg:col-span-2">
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.5, delay: purchaseType === 'gift' ? 0.4 : 0.3 }}
-                className="sticky top-24"
-              >
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="font-merchant flex items-center gap-2">
-                      Order Summary
-                      {purchaseType === 'gift' && (
-                        <Badge variant="secondary" className="font-poppins">
-                          <Mail className="w-3 h-3 mr-1" />
-                          Gift Purchase
-                        </Badge>
-                      )}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="space-y-6">
-                    {/* Gift Indicator */}
-                    {purchaseType === 'gift' && giftData.recipientName && (
-                      <div className="bg-gradient-to-r from-primary/10 to-secondary/10 border border-primary/20 rounded-lg p-4">
-                        <div className="flex items-start gap-3">
-                          <Mail className="w-5 h-5 text-primary mt-0.5" />
-                          <div className="flex-1">
-                            <p className="font-medium text-sm font-poppins mb-1">Gift Recipient</p>
-                            <p className="text-sm text-gray-700 font-poppins">{giftData.recipientName}</p>
-                            <p className="text-xs text-gray-500 font-poppins mt-1">{giftData.recipientEmail}</p>
-                          </div>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Cart Items */}
-                    <div className="space-y-4">
-                      {mockCartItems.map((item) => (
-                        <div key={item.id} className="flex gap-4">
-                          <ImageWithFallback
-                            src={item.image}
-                            alt={item.name}
-                            className="w-20 h-20 rounded-lg object-cover"
-                          />
-                          <div className="flex-1 min-w-0">
-                            <h4 className="font-medium text-base mb-1 font-poppins">{item.name}</h4>
-                            <p className="text-sm text-gray-500 mb-2 font-poppins">{item.type}</p>
-                            <div className="flex items-center gap-2 mb-2">
-                              <span className="font-bold text-lg font-poppins">€{item.price}</span>
-                              <span className="text-sm text-gray-500 line-through font-poppins">€{item.originalPrice}</span>
-                              <Badge variant="outline" className="text-xs">
-                                -{item.discount}%
-                              </Badge>
-                            </div>
-                            <div className="text-sm text-gray-600 font-poppins">
-                              {item.attractions} attractions • Valid for {item.validity}
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-
-                    <Separator />
-
-                    {/* Features Summary */}
-                    <div className="space-y-3">
-                      <h4 className="font-medium font-merchant">What's Included:</h4>
-                      <div className="space-y-2">
-                        <div className="flex items-center gap-2 text-sm font-poppins">
-                          <Check className="w-4 h-4 text-green-600" />
-                          <span>Skip-the-line access to {mockCartItems[0].attractions} attractions</span>
-                        </div>
-                        <div className="flex items-center gap-2 text-sm font-poppins">
-                          <Check className="w-4 h-4 text-green-600" />
-                          <span>Valid for {mockCartItems[0].validity}</span>
-                        </div>
-                        <div className="flex items-center gap-2 text-sm font-poppins">
-                          <Check className="w-4 h-4 text-green-600" />
-                          <span>Instant mobile delivery</span>
-                        </div>
-                        <div className="flex items-center gap-2 text-sm font-poppins">
-                          <Check className="w-4 h-4 text-green-600" />
-                          <span>Free cancellation</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    {/* Pricing Breakdown */}
-                    <div className="space-y-3">
-                      <div className="flex justify-between text-sm font-poppins">
-                        <span>Subtotal</span>
-                        <span>€{subtotal}</span>
-                      </div>
-                      <div className="flex justify-between text-sm font-poppins">
-                        <span>Taxes & Fees</span>
-                        <span>€{tax}</span>
-                      </div>
-                      <div className="flex justify-between text-sm text-green-600 font-poppins">
-                        <span>Total Savings</span>
-                        <span>-€{totalSavings}</span>
-                      </div>
-                      <Separator />
-                      <div className="flex justify-between font-bold text-xl font-poppins">
-                        <span>Total</span>
-                        <span>€{total}</span>
-                      </div>
-                    </div>
-
-                    {/* Checkout Button */}
-                    <Button
-                      type="button"
-                      onClick={() => onSecureCheckoutClick?.()}
-                      className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium py-4 text-lg font-poppins"
-                      disabled={
-                        !formData.agreeTerms || 
-                        !formData.email || 
-                        !formData.firstName || 
-                        !formData.lastName || 
-                        !isEmailVerified ||
-                        (purchaseType === 'gift' && (!giftData.recipientName || !giftData.recipientEmail || !giftData.recipientPhone))
-                      }
-                    >
-                      {purchaseType === 'gift' ? 'Send Gift & Proceed to Checkout' : 'Proceed to Secure Checkout'}
-                      <ChevronRight className="w-5 h-5 ml-2" />
-                    </Button>
-
-                    {/* Security Notice */}
-                    <div className="flex items-center gap-2 text-xs text-gray-500 justify-center font-poppins">
-                      <Shield className="w-4 h-4" />
-                      <span>Secure 256-bit SSL encryption</span>
-                    </div>
-                  </CardContent>
-                </Card>
-              </motion.div>
+            <div className="px-6 pb-6">
+                <motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={handleProceedToPayment} className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20 cursor-pointer">
+                    Proceed to Pay
+                </motion.button>
             </div>
-          </form>
         </div>
-      </section>
+    );
+}
 
-      {/* Email Verification Popup */}
-      <Dialog open={showEmailVerification} onOpenChange={setShowEmailVerification}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2 font-merchant">
-              <Mail className="w-5 h-5" />
-              Verify Your Email
-            </DialogTitle>
-            <DialogDescription className="font-poppins">
-              Enter the verification code sent to your email to continue with your booking.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4">
-            <p className="text-sm text-gray-600 font-poppins">
-              We've sent a verification code to <strong>{formData.email}</strong>
-            </p>
-            <div>
-              <Label htmlFor="verification" className="font-poppins">Verification Code</Label>
-              <Input
-                id="verification"
-                value={verificationCode}
-                onChange={(e) => setVerificationCode(e.target.value)}
-                placeholder="Enter 6-digit code"
-                className="mt-1 font-poppins text-center text-lg letter-spacing-2"
-                maxLength={6}
-              />
-            </div>
-            <div className="flex gap-3">
-              <Button
-                onClick={handleEmailVerification}
-                className="flex-1 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins"
-                disabled={verificationCode.length !== 6}
-              >
-                Verify Email
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => setShowEmailVerification(false)}
-                className="font-poppins"
-              >
-                Skip for now
-              </Button>
-            </div>
-            <p className="text-xs text-gray-500 text-center font-poppins">
-              Demo code: <strong>123456</strong>
-            </p>
-          </div>
-        </DialogContent>
-      </Dialog>
+/* ─── MAIN CHECKOUT PAGE 2 ─── */
+export function CheckoutPage({
+    onHomeClick,
+    onPassesClick,
+    onAttractionsClick,
+    onBlogsClick,
+    onHowItWorksClick,
+    onFAQClick,
+    onPrivacyPolicyClick,
+    onAboutUsClick,
+    onContactUsClick,
+    onSignInClick,
+    onSignOutClick,
+    onProfileClick,
+    user,
+    currentPage,
+}: any) {
+    const navigate = useNavigate();
 
-      </Layout>
-    </div>
-  );
-}
\ No newline at end of file
+    // Default item (you can pass via props later)
+    const baseUrl = import.meta.env.VITE_BASE_URL;
+
+    const cityId = localStorage.getItem("cityId")
+    const { data: checkoutPageData, isLoading } = useGetCheckoutPageDataQuery(cityId)
+
+    const cityName = checkoutPageData?.city?.name ?? ""
+    const cityImage = checkoutPageData?.city?.heroBanner?.image ?? ""
+    const cards = checkoutPageData?.cards ?? []
+    const flexiCard = checkoutPageData?.cards[0] ?? null
+    const unlimitedCard = checkoutPageData?.cards[1] ?? null
+    const attractions = checkoutPageData?.attractions ?? [];
+
+    const [checkoutItem, setCheckoutItem] = useState(flexiCard);
+
+    useEffect(() => {
+        setCheckoutItem(flexiCard)
+    }, [cards])
+
+    console.log(checkoutItem)
+
+    if (isLoading) {
+        return <LoadingSpinner />
+    } 
+
+    const handleCheckoutItemChange = (cardObject: any) => {
+        setCheckoutItem(cardObject);
+    };
+
+
+    return (
+        <div className="min-h-screen bg-[#fafafa] font-poppins">
+            <Navbar
+                activeCity="Melbourne"
+                onCityChange={() => { }}
+                onSignInClick={onSignInClick}
+                onSignOutClick={onSignOutClick}
+                onPassesClick={onPassesClick}
+                onCheckoutClick={() => { }}
+                onHomeClick={onHomeClick}
+                onAttractionsClick={onAttractionsClick}
+                onBlogsClick={onBlogsClick}
+                onHowItWorksClick={onHowItWorksClick}
+                onFAQClick={onFAQClick}
+                onPrivacyPolicyClick={onPrivacyPolicyClick}
+                onAboutUsClick={onAboutUsClick}
+                onProfileClick={onProfileClick}
+                onCityCardsClick={() => { }}
+                onMagicItineraryClick={() => { }}
+                onPostCardsClick={() => { }}
+                onOffersClick={() => { }}
+                onSuperSavingsClick={() => { }}
+                onEsimsClick={() => { }}
+                onHotelDiscountsClick={() => { }}
+                onCartClick={() => { }}
+                currentPage={currentPage}
+                user={user}
+            />
+
+            <div className="w-full px-4 sm:px-6 lg:px-10 xl:px-16 pt-32 pb-24 max-w-[1440px] mx-auto">
+                <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8">
+                    <ArrowLeft className="w-4 h-4" />Back
+                </button>
+
+                <div className="mb-10">
+                    <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
+                        <span className="font-light">Checkout</span>{' '}
+                        <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent pr-2">{cityName}</span>
+                    </h2>
+                </div>
+
+                <div className="flex flex-col lg:flex-row gap-10">
+                    {/* Left Column */}
+                    <div className="flex-1 space-y-8">
+                        {/* Card Type Selection */}
+                        <div>
+                            <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Choose Your Card</h3>
+                            <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Select the card type that best suits your travel style</p>
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-[16px]">
+                                <button onClick={() => handleCheckoutItemChange(flexiCard)}>
+                                    <FlexiCardPreview city={cityName} image={cityImage} adultPrice={flexiCard.adultPrice} childPrice={flexiCard.childPrice} isSelected={checkoutItem?.cardType.name === 'selective_pass'} />
+                                </button>
+                                <button onClick={() => handleCheckoutItemChange(unlimitedCard)}>
+                                    <UnlimitedCardPreview city={cityName} image={cityImage} adultPrice={unlimitedCard.adultPrice} childPrice={unlimitedCard.childPrice} isSelected={checkoutItem?.cardType.name === 'unlimited_card'} />
+                                </button>
+                            </div>
+
+                            {/* Features Comparison (Exact Copy) */}
+                            <div className="mt-6 bg-[#f5f5f5] rounded-xl p-4">
+                                <div className="grid grid-cols-[1fr_70px_70px] gap-y-0 items-center">
+                                    <p className="font-poppins font-medium text-sm text-[#2a2a2a] py-3">Features</p>
+                                    <p className="font-poppins font-medium text-sm text-[#2a2a2a] text-center py-3">Flexi</p>
+                                    <p className="font-poppins font-medium text-sm text-[#2a2a2a] text-center py-3">Unlimited</p>
+                                    {[
+                                        { feature: 'Access to attractions', flexi: true, unlimited: true },
+                                        { feature: 'Entry to attractions', flexi: true, unlimited: true },
+                                        { feature: 'Access to experiences', flexi: true, unlimited: true },
+                                        { feature: 'Entry to sites', flexi: false, unlimited: true },
+                                        { feature: 'Access to venues', flexi: true, unlimited: true },
+                                        { feature: 'Entry to events', flexi: true, unlimited: true },
+                                        { feature: 'Access to experiences', flexi: false, unlimited: true },
+                                        { feature: 'Access to Itinerary creation', flexi: false, unlimited: true },
+                                        { feature: 'Access to postcard creation', flexi: false, unlimited: true },
+                                    ].map((row, i) => (
+                                        <React.Fragment key={i}>
+                                            <p className="font-poppins font-normal text-[13px] text-[#2a2a2a] py-2.5 border-t border-[rgba(0,0,0,0.08)] flex items-center gap-1.5">
+                                                <span className="text-[#2a2a2a]">•</span> {row.feature}
+                                            </p>
+                                            <div className="flex justify-center py-2.5 border-t border-[rgba(0,0,0,0.08)]">
+                                                {row.flexi ? <div className="w-5 h-5 rounded-full bg-[#F95F62] flex items-center justify-center"><Check className="w-3 h-3 text-white" strokeWidth={3} /></div> : <span className="font-poppins text-[13px] text-[rgba(0,0,0,0.3)]">–</span>}
+                                            </div>
+                                            <div className="flex justify-center py-2.5 border-t border-[rgba(0,0,0,0.08)]">
+                                                {row.unlimited ? <div className="w-5 h-5 rounded-full bg-[#F95F62] flex items-center justify-center"><Check className="w-3 h-3 text-white" strokeWidth={3} /></div> : <span className="font-poppins text-[13px] text-[rgba(0,0,0,0.3)]">–</span>}
+                                            </div>
+                                        </React.Fragment>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Offers Section (Exact) */}
+                        <div>
+                            <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">{checkoutItem?.cardType?.displayName} Offers</h3>
+                            <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Exclusive deals and discounts included with your {checkoutItem?.cardType.displayName} pass</p>
+                            <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
+                                {checkoutItem?.offers.map((offer: any) => (
+                                    <div key={offer.id} className="relative bg-white rounded-xl shrink-0 w-[180px] h-[260px] snap-start">
+                                        <div className="flex flex-col gap-2 items-start overflow-hidden p-3 rounded-xl h-full">
+                                            <div className="h-[120px] w-full rounded-lg overflow-hidden shrink-0 relative">
+                                                <ImageWithFallback src={`${baseUrl}/${offer.websiteBannerImage}`} alt={offer.title} className="absolute inset-0 w-full h-full object-cover rounded-lg" />
+                                            </div>
+                                            <div className="w-full h-[44px] overflow-hidden">
+                                                <p className="font-['Poppins',sans-serif] font-normal text-[18px] text-black tracking-[-0.72px] leading-[22px] line-clamp-2">{offer.title}</p>
+                                            </div>
+                                            <div className="w-full flex-1">
+                                                <p className="font-['Poppins',sans-serif] font-normal text-[12px] text-[rgba(0,0,0,0.6)] leading-[16px] line-clamp-3">{offer.description}</p>
+                                            </div>
+                                        </div>
+                                        <div className="absolute inset-0 border border-[rgba(249,95,98,0.24)] rounded-xl pointer-events-none" />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Attractions Section (Exact) */}
+                        <div>
+                            <div className="flex items-center justify-between">
+                                <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Available Attractions</h3>
+                                <span className="font-poppins text-xs font-medium text-[#F95F62] bg-[#F95F62]/10 px-3 py-1 rounded-full">{attractions.length} included</span>
+                            </div>
+                            <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Explore all the experiences you can enjoy with your pass</p>
+                            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+                                {attractions.map((a: any) => (
+                                    <div key={a.id} className="group relative rounded-xl overflow-hidden">
+                                        <div className="aspect-[4/3] relative">
+                                            <ImageWithFallback src={a.thumbnail} alt={a.title} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
+                                            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
+                                            <div className="absolute top-2 right-2">
+                                                <span className="inline-flex px-2 py-0.5 rounded-full bg-white/90 backdrop-blur-sm text-[10px] font-poppins font-medium text-[#555]">{a.category}</span>
+                                            </div>
+                                            <div className="absolute bottom-2 left-2 right-2">
+                                                <h6 className="font-poppins text-sm leading-snug font-medium text-white drop-shadow-sm">{a.title}</h6>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Right Column - Config Card */}
+                    <div className="hidden lg:block lg:w-[420px] flex-shrink-0">
+                        <div className="lg:sticky lg:top-28">
+                            <CheckoutConfigCard
+                                item={checkoutItem}
+                                onChange={handleCheckoutItemChange}
+                                // onProceed={() => navigate("/payment")}
+                            />
+                        </div>
+                    </div>
+
+                    {/* Mobile Config Card */}
+                    <div className="lg:hidden mt-6">
+                        <CheckoutConfigCard
+                            item={checkoutItem}
+                            onChange={handleCheckoutItemChange}
+                            // onProceed={() => navigate("/payment")}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <Footer
+                onHomeClick={onHomeClick}
+                onPassesClick={onPassesClick}
+                onAttractionsClick={onAttractionsClick}
+                onBlogsClick={onBlogsClick}
+                onHowItWorksClick={onHowItWorksClick}
+                onFAQClick={onFAQClick}
+                onPrivacyPolicyClick={onPrivacyPolicyClick}
+                onAboutUsClick={onAboutUsClick}
+                onContactUsClick={onContactUsClick}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/CheckoutPage2.tsx b/src/pages/CheckoutPage2.tsx
deleted file mode 100644
index 4235469..0000000
--- a/src/pages/CheckoutPage2.tsx
+++ /dev/null
@@ -1,886 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import {
-    ArrowLeft, Check, Minus, Plus, ChevronDown
-} from 'lucide-react';
-import Navbar from '../components/Navbar';
-import { Footer } from '../components/Footer';
-import { ImageWithFallback } from '../components/figma/ImageWithFallback';
-import { useNavigate } from 'react-router-dom';
-import { useAddCardToCartMutation, useGetCheckoutPageDataQuery } from '../Redux/services/cards.service';
-import LoadingSpinner from '../components/LoadingSpinner';
-import { toast } from 'sonner';
-
-/* ─── Types ─── */
-export interface CartItem {
-    id: string;
-    city: string;
-    cardType: 'Flexi' | 'Unlimited';
-    days: number;
-    adults: number;
-    children: number;
-    quantity: number;
-    pricePerUnit: number;
-    image: string;
-}
-
-interface Attraction {
-    id: string;
-    name: string;
-    image: string;
-    category: string;
-    included: boolean;
-}
-
-/* ─── Data (Same as Original) ─── */
-const dayOptions = [3, 6, 12, 18, 24];
-
-const priceTable: Record<string, Record<number, number>> = {
-    Flexi: { 3: 49.5, 6: 69, 12: 99, 18: 129, 24: 159 },
-    Unlimited: { 3: 79, 6: 109, 12: 149, 18: 189, 24: 229 },
-};
-
-const attractionsData: Record<string, Record<string, Attraction[]>> = {
-    Melbourne: {
-        Flexi: [
-            { id: 'mel-1', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-2', name: 'Melbourne Zoo', image: 'https://images.unsplash.com/photo-1730074888490-31239540bacf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NzYzMTk5NzB8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-3', name: 'Royal Botanic Gardens', image: 'https://images.unsplash.com/photo-1585894507208-eeead8cb9a56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBib3RhbmljYWwlMjBnYXJkZW4lMjBncmVlbnxlbnwxfHx8fDE3NzYzMTk5NzF8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Nature', included: true },
-            { id: 'mel-4', name: 'NGV Art Gallery', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-        ],
-        Unlimited: [
-            { id: 'mel-1', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-2', name: 'Melbourne Zoo', image: 'https://images.unsplash.com/photo-1730074888490-31239540bacf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NzYzMTk5NzB8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-3', name: 'Royal Botanic Gardens', image: 'https://images.unsplash.com/photo-1585894507208-eeead8cb9a56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBib3RhbmljYWwlMjBnYXJkZW4lMjBncmVlbnxlbnwxfHx8fDE3NzYzMTk5NzF8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Nature', included: true },
-            { id: 'mel-4', name: 'NGV Art Gallery', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-            { id: 'mel-5', name: 'Melbourne Star Wheel', image: 'https://images.unsplash.com/photo-1769880659692-fa77e04c5ffa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvYnNlcnZhdGlvbiUyMHdoZWVsJTIwYW11c2VtZW50JTIwbmlnaHR8ZW58MXx8fHwxNzc2MzE5OTc2fDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-            { id: 'mel-6', name: 'Penguin Parade', image: 'https://images.unsplash.com/photo-1670391050251-d1cfbc3891c4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwZW5ndWlucyUyMHdpbGRsaWZlJTIwbmF0dXJlfGVufDF8fHx8MTc3NjMxOTk3Nnww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-7', name: 'Yarra River Cruise', image: 'https://images.unsplash.com/photo-1562003914-018a4a6c2171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyaXZlciUyMGNydWlzZSUyMGJvYXQlMjBjaXR5fGVufDF8fHx8MTc3NjMxOTk3M3ww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-        ],
-    },
-    Sydney: {
-        Flexi: [
-            { id: 'syd-1', name: 'Harbour Bridge Climb', image: 'https://images.unsplash.com/photo-1767974062666-2685a670e353?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwY2xpbWJ8ZW58MXx8fHwxNzc2MzE5OTcxfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Adventure', included: true },
-            { id: 'syd-2', name: 'Taronga Zoo', image: 'https://images.unsplash.com/photo-1704852168456-b70e08441917?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjB0YXJvbmdhJTIwem9vJTIwYW5pbWFsc3xlbnwxfHx8fDE3NzYzMTk5NzJ8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'syd-3', name: 'Art Gallery NSW', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-        ],
-        Unlimited: [
-            { id: 'syd-1', name: 'Harbour Bridge Climb', image: 'https://images.unsplash.com/photo-1767974062666-2685a670e353?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwY2xpbWJ8ZW58MXx8fHwxNzc2MzE5OTcxfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Adventure', included: true },
-            { id: 'syd-2', name: 'Taronga Zoo', image: 'https://images.unsplash.com/photo-1704852168456-b70e08441917?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjB0YXJvbmdhJTIwem9vJTIwYW5pbWFsc3xlbnwxfHx8fDE3NzYzMTk5NzJ8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'syd-3', name: 'Art Gallery NSW', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-            { id: 'syd-4', name: 'Sydney Harbour Cruise', image: 'https://images.unsplash.com/photo-1562003914-018a4a6c2171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyaXZlciUyMGNydWlzZSUyMGJvYXQlMjBjaXR5fGVufDF8fHx8MTc3NjMxOTk3M3ww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-            { id: 'syd-5', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-        ],
-    },
-};
-
-const offersData: Record<string, { title: string; description: string; image: string }[]> = {
-    Flexi: [
-        { title: 'Astor Hotels Ultra Deluxe', description: '15% Discount on all treatments for first-time clients', image: 'https://images.unsplash.com/photo-1715191904112-4a5d9c3089fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMHJlc29ydCUyMGV4dGVyaW9yfGVufDF8fHx8MTc3NjMyMTM2MXww&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Green Valley Spa Lux', description: '20% Off on membership plans for new members', image: 'https://images.unsplash.com/photo-1759216853079-831ef8c8b327?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcGElMjB3ZWxsbmVzcyUyMHRyZWF0bWVudCUyMGludGVyaW9yfGVufDF8fHx8MTc3NjMyMTM2M3ww&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Harbour Dining Co.', description: '10% Off your first dining experience at waterfront', image: 'https://images.unsplash.com/photo-1676471932681-45fa972d848a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyZXN0YXVyYW50JTIwZmluZSUyMGRpbmluZ3xlbnwxfHx8fDE3NzYzMTkxNDl8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'National Gallery Exhibition', description: 'Free audio guide with every gallery visit', image: 'https://images.unsplash.com/photo-1569342380852-035f42d9ca41?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtdXNldW0lMjBnYWxsZXJ5JTIwZXhoaWJpdGlvbnxlbnwxfHx8fDE3NzYyNDYwMjh8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Sunset Harbour Cruise', description: 'Complimentary drink on every sunset cruise booking', image: 'https://images.unsplash.com/photo-1765783800962-83d99ff7b158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjcnVpc2UlMjBib2F0JTIwaGFyYm9yJTIwdG91cnxlbnwxfHx8fDE3NzYzMjE2MDd8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-    ],
-    Unlimited: [
-        { title: 'SkyView Ferris Wheel', description: 'Complimentary second ride for all pass holders', image: 'https://images.unsplash.com/photo-1626209025747-b41ee6ec191f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmZXJyaXMlMjB3aGVlbCUyMGFtdXNlbWVudCUyMHBhcmt8ZW58MXx8fHwxNzc2MzE3NDI2fDA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'City Mall Boutique', description: '15% Off at select boutique stores with your pass', image: 'https://images.unsplash.com/photo-1567966689299-819568579d36?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzaG9wcGluZyUyMG1hbGwlMjBib3V0aXF1ZSUyMHJldGFpbHxlbnwxfHx8fDE3NzYzMjEzNjN8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Adventure Outfitters', description: 'Free gear rental on outdoor adventure bookings', image: 'https://images.unsplash.com/photo-1761131221577-0716baffc6ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhZHZlbnR1cmUlMjBzcG9ydHMlMjBvdXRkb29yJTIwYWN0aXZpdHl8ZW58MXx8fHwxNzc2MzIxMzYzfDA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Skyline Rooftop Lounge', description: 'Buy one get one free on signature cocktails', image: 'https://images.unsplash.com/photo-1642114955097-8f3d0e141641?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb29mdG9wJTIwYmFyJTIwY2l0eSUyMHNreWxpbmUlMjBuaWdodHxlbnwxfHx8fDE3NzYyNDU2NTl8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Yarra Valley Wines', description: 'Exclusive wine tasting tour with pass holders discount', image: 'https://images.unsplash.com/photo-1764649841527-c8852b63cc53?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3aW5lJTIwdGFzdGluZyUyMHZpbmV5YXJkJTIwY2VsbGFyfGVufDF8fHx8MTc3NjMyMTYwOHww&ixlib=rb-4.1.0&q=80&w=1080' },
-    ],
-};
-
-/* ─── FIGMA CARD PREVIEWS (Exact Copy) ─── */
-function FlexiCardPreview({ city, adultPrice, childPrice, isSelected, image }: { city: string; adultPrice: number; childPrice: number; isSelected: boolean, image: string; }) {
-    return (
-        <div className={`relative h-[160px] w-full rounded-lg transition-all duration-200 ${isSelected ? 'ring-2 ring-[#F95F62] shadow-md shadow-[#F95F62]/10' : 'hover:shadow-md'
-            }`}>
-            {/* Card bg */}
-            <div className="absolute inset-0 bg-white border border-[rgba(249,95,175,0.2)] rounded-lg shadow-[0px_4px_20px_0px_rgba(0,0,0,0.06)]" />
-            {/* City image */}
-            <div className="absolute h-[158px] left-[1px] top-[1px] w-[103px] rounded-bl-[7px] rounded-tl-[7px] overflow-hidden">
-                <img alt="" className="absolute inset-0 w-full h-full object-cover" src={image} />
-            </div>
-            {/* City name - left aligned */}
-            <div className="absolute left-[112px] top-[12px]">
-                <p className="font-['Poppins',sans-serif] font-medium text-[16px] text-[#2a2a2a] leading-[22px] whitespace-nowrap">{city}</p>
-            </div>
-            {/* Pricing */}
-            <div className="absolute left-[112px] top-[40px] flex flex-col gap-[6px]">
-                <div className="flex gap-[2px] items-center">
-                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">From</span>
-                    <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${adultPrice}</span>
-                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Adult</span>
-                </div>
-                <div className="flex gap-[2px] items-center">
-                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">and</span>
-                    <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${childPrice}</span>
-                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Child</span>
-                </div>
-            </div>
-            {/* Description */}
-            <div className="absolute left-[112px] top-[112px] right-[44px]">
-                <p className="font-['Poppins',sans-serif] text-[11px] text-left text-[rgba(0,0,0,0.4)] tracking-[0.06px] leading-[14px]">
-                    Dive into an extensive selection of thrilling destinations!
-                </p>
-            </div>
-            {/* Side tab - Flexi (pink) */}
-            <div className="absolute bg-[#f95faf] h-full right-0 top-0 w-[35px] rounded-br-lg rounded-tr-lg flex flex-col items-center justify-center gap-[2px]">
-                <span className="font-['Poppins',sans-serif] text-[12px] text-white/70 [writing-mode:vertical-rl] rotate-180">Card</span>
-                <span className="font-['Poppins',sans-serif] text-[16px] text-white [writing-mode:vertical-rl] rotate-180">Flexi</span>
-            </div>
-            {/* Selected checkmark */}
-            {isSelected && (
-                <div className="absolute top-2 right-[44px] w-6 h-6 rounded-full bg-[#F95F62] flex items-center justify-center z-10">
-                    <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />
-                </div>
-            )}
-        </div>
-    );
-}
-
-function UnlimitedCardPreview({ city, adultPrice, childPrice, isSelected, image }: { city: string; adultPrice: number; childPrice: number; isSelected: boolean, image: string; }) {
-    return (
-        <div className={`relative h-[160px] w-full rounded-lg transition-all duration-200 ${isSelected ? 'ring-2 ring-[#F95F62] shadow-md shadow-[#F95F62]/10' : 'hover:shadow-md'
-            }`}>
-            {/* Card bg */}
-            <div className="absolute inset-0 bg-white border border-[rgba(0,0,0,0.2)] rounded-lg" />
-            {/* City image */}
-            <div className="absolute h-[158px] left-[1px] top-[1px] w-[103px] rounded-bl-[7px] rounded-tl-[7px] overflow-hidden">
-                <img alt="" className="absolute inset-0 w-full h-full object-cover" src={image} />
-            </div>
-            {/* City name - left aligned */}
-            <div className="absolute left-[112px] top-[12px]">
-                <p className="font-['Poppins',sans-serif] font-medium text-[16px] text-[#2a2a2a] leading-[20px] whitespace-nowrap">{city}</p>
-            </div>
-            {/* Pricing */}
-            <div className="absolute left-[112px] top-[40px] flex flex-col gap-[6px]">
-                <div className="flex gap-[2px] items-center">
-                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">From</span>
-                    <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${adultPrice}</span>
-                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Adult</span>
-                </div>
-                <div className="flex gap-[2px] items-center">
-                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.6)] tracking-[0.06px]">and</span>
-                    <span className="font-['Poppins',sans-serif] font-medium text-[24px] text-[#f95f62] tracking-[-0.96px] leading-[1.3]">${childPrice}</span>
-                    <span className="font-['Poppins',sans-serif] text-[11px] text-[rgba(0,0,0,0.8)] tracking-[0.06px]">/Child</span>
-                </div>
-            </div>
-            {/* Description */}
-            <div className="absolute left-[112px] top-[112px] right-[44px]">
-                <p className="font-['Poppins',sans-serif] text-[11px] text-left text-[rgba(0,0,0,0.4)] tracking-[0.06px] leading-[14px]">
-                    Dive into an extensive selection of thrilling destinations!
-                </p>
-            </div>
-            {/* Side tab - Unlimited (coral) */}
-            <div className="absolute bg-[#f95f62] h-full right-0 top-0 w-[35px] rounded-br-lg rounded-tr-lg flex flex-col items-center justify-center gap-[2px]">
-                <span className="font-['Poppins',sans-serif] text-[12px] text-white/70 [writing-mode:vertical-rl] rotate-180">Card</span>
-                <span className="font-['Poppins',sans-serif] text-[16px] text-white [writing-mode:vertical-rl] rotate-180">Unlimited</span>
-            </div>
-            {/* Selected checkmark */}
-            {isSelected && (
-                <div className="absolute top-2 right-[44px] w-6 h-6 rounded-full bg-[#F95F62] flex items-center justify-center z-10">
-                    <Check className="w-3.5 h-3.5 text-white" strokeWidth={3} />
-                </div>
-            )}
-        </div>
-    );
-}
-
-/* ─── CheckoutConfigCard (Exact Copy) ─── */
-function CheckoutConfigCard({
-    item,
-    onProceed,
-}: {
-    item: any;
-    onProceed: () => void;
-}) {
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const [noOfAdults, setNoOfAdults] = useState(1)
-    const [noOfChildren, setNoOfChildren] = useState(0)
-    const [noOfAttractions, setNoOfAttractions] = useState(item?.minNumber);
-    const [noOfDays, setNoOfDays] = useState(item?.minNumber)
-
-    const cityId = localStorage.getItem("cityId")
-    const cityName = localStorage.getItem("cityName")
-    const cardTypeId = item?.cardType?.id
-    const cardId = item?.id
-    const cardMode = item?.cardType?.name === "selective_pass" ? "flexi" : "unlimited"
-    const adultPrice = item?.adultPrice * noOfAdults
-    const childPrice = item?.childPrice * noOfChildren
-    const basePrice = adultPrice + childPrice
-    const taxAmount = basePrice * 0.1
-    const strikedPrice = basePrice + 20
-
-    const [addCardToCart] = useAddCardToCartMutation()
-
-    useEffect(() => {
-        setNoOfAttractions(item?.minNumber)
-        setNoOfDays(item?.minNumber)
-    }, [item])
-
-    const numberArray = Array.from(
-        { length: item?.maxNumber - item?.minNumber + 1 },
-        (_, i) => item?.minNumber + i
-    );
-    const navigate = useNavigate();
-
-    const cardBookingDetails = {
-        cityXid: cityId,
-        cardTypeXid: cardTypeId,
-        cardXid: cardId,
-        cardMode, // stays as-is
-        totalAdult: noOfAdults,
-        baseAmount: basePrice, // static value
-        taxAmount,
-        totalChild: noOfChildren,
-        noOfAttractions,
-        noOfDays
-    };
-
-    const handleProceedToPayment = async () => {
-        try {
-            console.log("Adding card to cart", cardBookingDetails);
-            const response = await addCardToCart(cardBookingDetails);
-            console.log(response)
-            const bookingId = response?.data?.id
-            navigate(`/payment/${bookingId}`)
-        } catch (error) {
-            console.error("Error adding card to cart:", error);
-            toast.error("Failed to move forward. Please try again.");
-        }
-    }
-
-    return (
-        <div className="bg-white rounded-2xl shadow-[0px_4px_24px_0px_rgba(0,0,0,0.06)] overflow-hidden w-full max-w-[400px]">
-            <div className="pt-6 pb-2 text-center">
-                <h4 className="font-poppins text-lg leading-snug font-medium text-[#2a2a2a]">{cityName}</h4>
-                <div className="mt-2 flex justify-center">
-                    <span className={`inline-flex items-center px-4 py-1 rounded-full font-poppins text-xs font-medium ${item?.cardType?.name === 'selective_pass' ? 'bg-[#f95faf]/10 text-[#f95faf]' : 'bg-[#f95f62]/10 text-[#f95f62]'}`}>
-                        {item?.cardType?.displayName}
-                    </span>
-                </div>
-            </div>
-            <div className="px-6 py-4 space-y-0">
-                <div className="flex items-center justify-between py-4 border-b border-gray-100">
-                    <span className="font-poppins text-sm font-normal text-[#2a2a2a]">No. of Adults</span>
-                    <div className="flex items-center gap-3">
-                        <button onClick={() => noOfAdults > 1 && setNoOfAdults((prev) => prev - 1)} disabled={noOfAdults <= 1} className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${noOfAdults <= 1 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'}`}>
-                            <Minus className="w-4 h-4" />
-                        </button>
-                        <span className="font-poppins text-base font-medium text-[#2a2a2a] w-5 text-center tabular-nums">{noOfAdults}</span>
-                        <button onClick={() => setNoOfAdults((prev) => prev + 1)} disabled={noOfAdults >= 15} className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${noOfAdults >= 15 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'}`}>
-                            <Plus className="w-4 h-4" />
-                        </button>
-                    </div>
-                </div>
-
-                <div className="flex items-center justify-between py-4 border-b border-gray-100">
-                    <span className="font-poppins text-sm font-normal text-[#2a2a2a]">No. of Children</span>
-                    <div className="flex items-center gap-3">
-                        <button onClick={() => noOfChildren > 0 && setNoOfChildren((prev) => prev - 1)} disabled={noOfChildren <= 0} className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${noOfChildren <= 0 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'}`}>
-                            <Minus className="w-4 h-4" />
-                        </button>
-                        <span className="font-poppins text-base font-medium text-[#2a2a2a] w-5 text-center tabular-nums">{noOfChildren}</span>
-                        <button onClick={() => setNoOfChildren((prev) => prev + 1)} disabled={noOfChildren >= 10} className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${noOfChildren >= 10 ? 'bg-gray-100 text-gray-300 cursor-not-allowed' : 'bg-[#f95f62]/10 text-[#f95f62] hover:bg-[#f95f62]/20'}`}>
-                            <Plus className="w-4 h-4" />
-                        </button>
-                    </div>
-                </div>
-
-                <div className="flex items-center justify-between py-4 border-b border-gray-100">
-                    <span className="font-poppins text-sm font-normal text-[#2a2a2a]">
-                        {item?.cardType?.name === 'selective_pass' ? 'No. of Attractions' : 'No. of Days'}
-                    </span>
-                    <div className="relative">
-                        <button onClick={() => setDropdownOpen(!dropdownOpen)} className="flex items-center gap-2 border border-[#f95f62]/30 rounded-lg px-3 py-1.5 min-w-[72px] justify-between hover:border-[#f95f62] transition-colors">
-                            <span className="font-poppins text-base font-medium text-[#f95f62] tabular-nums">{cardMode === "flexi" ? noOfAttractions : noOfDays}</span>
-                            <ChevronDown className={`w-4 h-4 text-[#f95f62] transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
-                        </button>
-                        <AnimatePresence>
-                            {dropdownOpen && (
-                                <motion.div
-                                    initial={{ opacity: 0, y: -4, scale: 0.95 }}
-                                    animate={{ opacity: 1, y: 0, scale: 1 }}
-                                    exit={{ opacity: 0, y: -4, scale: 0.95 }}
-                                    className="absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-100 z-30 min-w-[72px] 
-                 max-h-48 overflow-y-auto"
-                                >
-                                    {numberArray.map((i) => (
-                                        <button
-                                            key={i}
-                                            onClick={() => {
-                                                cardMode === "flexi" ? setNoOfAttractions(i) : setNoOfDays(i);
-                                                setDropdownOpen(false);
-                                            }}
-                                            className={`w-full px-3 py-2 text-left font-poppins text-sm transition-colors ${(cardMode === "flexi" ? noOfAttractions === i : noOfDays === i)
-                                                ? "bg-[#f95f62]/10 text-[#f95f62] font-medium"
-                                                : "text-[#2a2a2a] hover:bg-gray-50 font-normal"
-                                                }`}
-
-                                        >
-                                            {i}
-                                        </button>
-                                    ))}
-                                </motion.div>
-                            )}
-                        </AnimatePresence>
-                    </div>
-                </div>
-
-                <div className="flex items-center justify-between py-5">
-                    <span className="font-poppins text-sm font-normal text-[#2a2a2a]">You Pay</span>
-                    <div className="flex items-center gap-2">
-                        <span className="font-poppins text-sm font-normal text-[#aaa] line-through">${strikedPrice}</span>
-                        <span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">${basePrice}</span>
-                    </div>
-                </div>
-            </div>
-
-            <div className="px-6 pb-6">
-                <motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={handleProceedToPayment} className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20 cursor-pointer">
-                    Proceed to Pay
-                </motion.button>
-            </div>
-        </div>
-    );
-}
-
-/* ─── MAIN CHECKOUT PAGE 2 ─── */
-export function CheckoutPage2({
-    onHomeClick,
-    onPassesClick,
-    onAttractionsClick,
-    onBlogsClick,
-    onHowItWorksClick,
-    onFAQClick,
-    onPrivacyPolicyClick,
-    onAboutUsClick,
-    onContactUsClick,
-    onSignInClick,
-    onSignOutClick,
-    onProfileClick,
-    user,
-    currentPage,
-}: any) {
-    const navigate = useNavigate();
-
-    // Default item (you can pass via props later)
-    const baseUrl = import.meta.env.VITE_BASE_URL;
-
-    const cityId = localStorage.getItem("cityId")
-    const { data: checkoutPageData, isLoading } = useGetCheckoutPageDataQuery(cityId)
-
-    const cityName = checkoutPageData?.city?.name ?? ""
-    const cityImage = checkoutPageData?.city?.heroBanner?.image ?? ""
-    const cards = checkoutPageData?.cards ?? []
-    const flexiCard = checkoutPageData?.cards[0] ?? null
-    const unlimitedCard = checkoutPageData?.cards[1] ?? null
-    const attractions = checkoutPageData?.attractions ?? [];
-
-    const [checkoutItem, setCheckoutItem] = useState(flexiCard);
-
-    useEffect(() => {
-        setCheckoutItem(flexiCard)
-    }, [cards])
-
-    console.log(checkoutItem)
-
-    if (isLoading) {
-        return <LoadingSpinner />
-    } else {
-        // console.log(flexiCard)
-    }
-
-    const handleCheckoutItemChange = (cardObject: any) => {
-        setCheckoutItem(cardObject);
-    };
-
-
-    return (
-        <div className="min-h-screen bg-[#fafafa] font-poppins">
-            <Navbar
-                activeCity="Melbourne"
-                onCityChange={() => { }}
-                onSignInClick={onSignInClick}
-                onSignOutClick={onSignOutClick}
-                onPassesClick={onPassesClick}
-                onCheckoutClick={() => { }}
-                onHomeClick={onHomeClick}
-                onAttractionsClick={onAttractionsClick}
-                onBlogsClick={onBlogsClick}
-                onHowItWorksClick={onHowItWorksClick}
-                onFAQClick={onFAQClick}
-                onPrivacyPolicyClick={onPrivacyPolicyClick}
-                onAboutUsClick={onAboutUsClick}
-                onProfileClick={onProfileClick}
-                onCityCardsClick={() => { }}
-                onMagicItineraryClick={() => { }}
-                onPostCardsClick={() => { }}
-                onOffersClick={() => { }}
-                onSuperSavingsClick={() => { }}
-                onEsimsClick={() => { }}
-                onHotelDiscountsClick={() => { }}
-                onCartClick={() => { }}
-                currentPage={currentPage}
-                user={user}
-            />
-
-            <div className="w-full px-4 sm:px-6 lg:px-10 xl:px-16 pt-32 pb-24 max-w-[1440px] mx-auto">
-                <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8">
-                    <ArrowLeft className="w-4 h-4" />Back
-                </button>
-
-                <div className="mb-10">
-                    <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
-                        <span className="font-light">Checkout</span>{' '}
-                        <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent pr-2">{cityName}</span>
-                    </h2>
-                </div>
-
-                <div className="flex flex-col lg:flex-row gap-10">
-                    {/* Left Column */}
-                    <div className="flex-1 space-y-8">
-                        {/* Card Type Selection */}
-                        <div>
-                            <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Choose Your Card</h3>
-                            <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Select the card type that best suits your travel style</p>
-                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-[16px]">
-                                <button onClick={() => handleCheckoutItemChange(flexiCard)}>
-                                    <FlexiCardPreview city={cityName} image={cityImage} adultPrice={flexiCard.adultPrice} childPrice={flexiCard.childPrice} isSelected={checkoutItem?.cardType.name === 'selective_pass'} />
-                                </button>
-                                <button onClick={() => handleCheckoutItemChange(unlimitedCard)}>
-                                    <UnlimitedCardPreview city={cityName} image={cityImage} adultPrice={unlimitedCard.adultPrice} childPrice={unlimitedCard.childPrice} isSelected={checkoutItem?.cardType.name === 'unlimited_card'} />
-                                </button>
-                            </div>
-
-                            {/* Features Comparison (Exact Copy) */}
-                            <div className="mt-6 bg-[#f5f5f5] rounded-xl p-4">
-                                <div className="grid grid-cols-[1fr_70px_70px] gap-y-0 items-center">
-                                    <p className="font-poppins font-medium text-sm text-[#2a2a2a] py-3">Features</p>
-                                    <p className="font-poppins font-medium text-sm text-[#2a2a2a] text-center py-3">Flexi</p>
-                                    <p className="font-poppins font-medium text-sm text-[#2a2a2a] text-center py-3">Unlimited</p>
-                                    {[
-                                        { feature: 'Access to attractions', flexi: true, unlimited: true },
-                                        { feature: 'Entry to attractions', flexi: true, unlimited: true },
-                                        { feature: 'Access to experiences', flexi: true, unlimited: true },
-                                        { feature: 'Entry to sites', flexi: false, unlimited: true },
-                                        { feature: 'Access to venues', flexi: true, unlimited: true },
-                                        { feature: 'Entry to events', flexi: true, unlimited: true },
-                                        { feature: 'Access to experiences', flexi: false, unlimited: true },
-                                        { feature: 'Access to Itinerary creation', flexi: false, unlimited: true },
-                                        { feature: 'Access to postcard creation', flexi: false, unlimited: true },
-                                    ].map((row, i) => (
-                                        <React.Fragment key={i}>
-                                            <p className="font-poppins font-normal text-[13px] text-[#2a2a2a] py-2.5 border-t border-[rgba(0,0,0,0.08)] flex items-center gap-1.5">
-                                                <span className="text-[#2a2a2a]">•</span> {row.feature}
-                                            </p>
-                                            <div className="flex justify-center py-2.5 border-t border-[rgba(0,0,0,0.08)]">
-                                                {row.flexi ? <div className="w-5 h-5 rounded-full bg-[#F95F62] flex items-center justify-center"><Check className="w-3 h-3 text-white" strokeWidth={3} /></div> : <span className="font-poppins text-[13px] text-[rgba(0,0,0,0.3)]">–</span>}
-                                            </div>
-                                            <div className="flex justify-center py-2.5 border-t border-[rgba(0,0,0,0.08)]">
-                                                {row.unlimited ? <div className="w-5 h-5 rounded-full bg-[#F95F62] flex items-center justify-center"><Check className="w-3 h-3 text-white" strokeWidth={3} /></div> : <span className="font-poppins text-[13px] text-[rgba(0,0,0,0.3)]">–</span>}
-                                            </div>
-                                        </React.Fragment>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-
-                        {/* Offers Section (Exact) */}
-                        <div>
-                            <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">{checkoutItem?.cardType?.displayName} Offers</h3>
-                            <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Exclusive deals and discounts included with your {checkoutItem?.cardType.displayName} pass</p>
-                            <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
-                                {checkoutItem?.offers.map((offer: any) => (
-                                    <div key={offer.id} className="relative bg-white rounded-xl shrink-0 w-[180px] h-[260px] snap-start">
-                                        <div className="flex flex-col gap-2 items-start overflow-hidden p-3 rounded-xl h-full">
-                                            <div className="h-[120px] w-full rounded-lg overflow-hidden shrink-0 relative">
-                                                <ImageWithFallback src={`${baseUrl}/${offer.websiteBannerImage}`} alt={offer.title} className="absolute inset-0 w-full h-full object-cover rounded-lg" />
-                                            </div>
-                                            <div className="w-full h-[44px] overflow-hidden">
-                                                <p className="font-['Poppins',sans-serif] font-normal text-[18px] text-black tracking-[-0.72px] leading-[22px] line-clamp-2">{offer.title}</p>
-                                            </div>
-                                            <div className="w-full flex-1">
-                                                <p className="font-['Poppins',sans-serif] font-normal text-[12px] text-[rgba(0,0,0,0.6)] leading-[16px] line-clamp-3">{offer.description}</p>
-                                            </div>
-                                        </div>
-                                        <div className="absolute inset-0 border border-[rgba(249,95,98,0.24)] rounded-xl pointer-events-none" />
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-
-                        {/* Attractions Section (Exact) */}
-                        <div>
-                            <div className="flex items-center justify-between">
-                                <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Available Attractions</h3>
-                                <span className="font-poppins text-xs font-medium text-[#F95F62] bg-[#F95F62]/10 px-3 py-1 rounded-full">{attractions.length} included</span>
-                            </div>
-                            <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Explore all the experiences you can enjoy with your pass</p>
-                            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
-                                {attractions.map((a: any) => (
-                                    <div key={a.id} className="group relative rounded-xl overflow-hidden">
-                                        <div className="aspect-[4/3] relative">
-                                            <ImageWithFallback src={a.thumbnail} alt={a.title} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
-                                            <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
-                                            <div className="absolute top-2 right-2">
-                                                <span className="inline-flex px-2 py-0.5 rounded-full bg-white/90 backdrop-blur-sm text-[10px] font-poppins font-medium text-[#555]">{a.category}</span>
-                                            </div>
-                                            <div className="absolute bottom-2 left-2 right-2">
-                                                <h6 className="font-poppins text-sm leading-snug font-medium text-white drop-shadow-sm">{a.title}</h6>
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* Right Column - Config Card */}
-                    <div className="hidden lg:block lg:w-[420px] flex-shrink-0">
-                        <div className="lg:sticky lg:top-28">
-                            <CheckoutConfigCard
-                                item={checkoutItem}
-                                onChange={handleCheckoutItemChange}
-                                onProceed={() => navigate("/payment")}
-                            />
-                        </div>
-                    </div>
-
-                    {/* Mobile Config Card */}
-                    {/* <div className="lg:hidden mt-6">
-                        <CheckoutConfigCard
-                            item={checkoutItem}
-                            onChange={handleCheckoutItemChange}
-                            onProceed={() => navigate("/payment")}
-                        />
-                    </div> */}
-                </div>
-            </div>
-
-            <Footer
-                onHomeClick={onHomeClick}
-                onPassesClick={onPassesClick}
-                onAttractionsClick={onAttractionsClick}
-                onBlogsClick={onBlogsClick}
-                onHowItWorksClick={onHowItWorksClick}
-                onFAQClick={onFAQClick}
-                onPrivacyPolicyClick={onPrivacyPolicyClick}
-                onAboutUsClick={onAboutUsClick}
-                onContactUsClick={onContactUsClick}
-            />
-        </div>
-    );
-}
-
-// export function CheckoutPage2({
-//     onHomeClick,
-//     onPassesClick,
-//     onAttractionsClick,
-//     onBlogsClick,
-//     onHowItWorksClick,
-//     onFAQClick,
-//     onPrivacyPolicyClick,
-//     onAboutUsClick,
-//     onContactUsClick,
-//     onSignInClick,
-//     onSignOutClick,
-//     onProfileClick,
-//     user,
-//     currentPage,
-// }: any) {
-//     const navigate = useNavigate();
-
-//     const cityId = localStorage.getItem("cityId");
-//     const { data: checkoutPageData, isLoading } = useGetCheckoutPageDataQuery(cityId);
-
-//     const city = checkoutPageData?.city;
-//     const allCards = checkoutPageData?.cards ?? [];
-//     const allAttractions = checkoutPageData?.attractions ?? [];
-//     const allOffers = checkoutPageData?.offers ?? [];
-
-//     const baseUrl = import.meta.env.VITE_BASE_URL;
-
-
-//     // Initialize with first card (Flexi) as default
-//     const defaultCard = allCards[0] || null;
-
-//     const [checkoutItem, setCheckoutItem] = useState<CartItem>({
-//         id: defaultCard?.id?.toString() || '1',
-//         city: city?.name || 'Melbourne',
-//         cardType: defaultCard?.cardType?.displayName || 'Flexi',
-//         days: defaultCard?.validityDuration || 3,
-//         adults: 2,
-//         children: 1,
-//         quantity: 1,
-//         pricePerUnit: defaultCard?.adultPrice || 49.5,
-//         image: city?.heroBanner?.image || '',
-//     });
-
-//     if (isLoading) {
-//         return <LoadingSpinner />;
-//     }
-
-//     const handleCheckoutItemChange = (updates: Partial<CartItem>) => {
-//         const updated = { ...checkoutItem, ...updates };
-
-//         // If card type changes, update with real card data
-//         if (updates.cardType) {
-//             const selectedCard = allCards.find(
-//                 c => c.cardType?.displayName === updates.cardType
-//             );
-//             if (selectedCard) {
-//                 updated.id = selectedCard.id.toString();
-//                 updated.days = selectedCard.validityDuration;
-//                 updated.pricePerUnit = selectedCard.adultPrice;
-//             }
-//         }
-
-//         setCheckoutItem(updated);
-//     };
-
-//     // Get currently selected card
-//     const selectedCard = allCards.find(c =>
-//         c.cardType?.displayName === checkoutItem.cardType
-//     ) || allCards[0];
-
-//     // Offers for selected card (fallback to global offers)
-//     const currentOffers = selectedCard?.offers?.length
-//         ? selectedCard.offers
-//         : allOffers;
-
-//     return (
-//         <div className="min-h-screen bg-[#fafafa] font-poppins">
-//             <Navbar
-//                 activeCity={city?.name || "Melbourne"}
-//                 onCityChange={() => { }}
-//                 onSignInClick={onSignInClick}
-//                 onSignOutClick={onSignOutClick}
-//                 onPassesClick={onPassesClick}
-//                 onCheckoutClick={() => { }}
-//                 onHomeClick={onHomeClick}
-//                 onAttractionsClick={onAttractionsClick}
-//                 onBlogsClick={onBlogsClick}
-//                 onHowItWorksClick={onHowItWorksClick}
-//                 onFAQClick={onFAQClick}
-//                 onPrivacyPolicyClick={onPrivacyPolicyClick}
-//                 onAboutUsClick={onAboutUsClick}
-//                 onProfileClick={onProfileClick}
-//                 onCityCardsClick={() => { }}
-//                 onMagicItineraryClick={() => { }}
-//                 onPostCardsClick={() => { }}
-//                 onOffersClick={() => { }}
-//                 onSuperSavingsClick={() => { }}
-//                 onEsimsClick={() => { }}
-//                 onHotelDiscountsClick={() => { }}
-//                 onCartClick={() => { }}
-//                 currentPage={currentPage}
-//                 user={user}
-//             />
-
-//             <div className="w-full px-4 sm:px-6 lg:px-10 xl:px-16 pt-32 pb-24 max-w-[1440px] mx-auto">
-//                 <button
-//                     onClick={() => navigate(-1)}
-//                     className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8"
-//                 >
-//                     <ArrowLeft className="w-4 h-4" />Back
-//                 </button>
-
-//                 <div className="mb-10">
-//                     <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight">
-//                         <span className="font-light">Checkout</span>{' '}
-//                         <span className="font-bold italic bg-gradient-to-r from-[#F95F62] to-[#F95FAF] bg-clip-text text-transparent pr-3">
-//                             {city?.name || checkoutItem.city}
-//                         </span>
-//                     </h2>
-//                 </div>
-
-//                 <div className="flex flex-col lg:flex-row gap-10">
-//                     {/* Left Column */}
-//                     <div className="flex-1 space-y-8">
-//                         {/* Card Type Selection */}
-//                         <div>
-//                             <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Choose Your Card</h3>
-//                             <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">
-//                                 Select the card type that best suits your travel style
-//                             </p>
-//                             <div className="grid grid-cols-1 sm:grid-cols-2 gap-[16px]">
-//                                 {allCards.map((card) => (
-//                                     <button
-//                                         key={card.id}
-//                                         onClick={() => handleCheckoutItemChange({
-//                                             cardType: card.cardType?.displayName || 'Flexi'
-//                                         })}
-//                                     >
-//                                         {card.cardType?.name === 'selective_pass' ? (
-//                                             <FlexiCardPreview
-//                                                 city={city?.name || checkoutItem.city}
-//                                                 adultPrice={card.adultPrice}
-//                                                 childPrice={card.childPrice}
-//                                                 isSelected={checkoutItem.cardType === card.cardType?.displayName}
-//                                             />
-//                                         ) : (
-//                                             <UnlimitedCardPreview
-//                                                 city={city?.name || checkoutItem.city}
-//                                                 adultPrice={card.adultPrice}
-//                                                 childPrice={card.childPrice}
-//                                                 isSelected={checkoutItem.cardType === card.cardType?.displayName}
-//                                             />
-//                                         )}
-//                                     </button>
-//                                 ))}
-//                             </div>
-
-//                             {/* Features Comparison - Kept as is (no CSS change) */}
-//                             <div className="mt-6 bg-[#f5f5f5] rounded-xl p-4">
-//                                 <div className="grid grid-cols-[1fr_70px_70px] gap-y-0 items-center">
-//                                     {/* Header */}
-//                                     <p className="font-poppins font-medium text-sm text-[#2a2a2a] py-3">Features</p>
-//                                     <p className="font-poppins font-medium text-sm text-[#2a2a2a] text-center py-3">Flexi</p>
-//                                     <p className="font-poppins font-medium text-sm text-[#2a2a2a] text-center py-3">Unlimited</p>
-//                                     {[
-//                                         { feature: 'Access to attractions', flexi: true, unlimited: true },
-//                                         { feature: 'Entry to attractions', flexi: true, unlimited: true },
-//                                         { feature: 'Access to experiences', flexi: true, unlimited: true },
-//                                         { feature: 'Entry to sites', flexi: false, unlimited: true },
-//                                         { feature: 'Access to venues', flexi: true, unlimited: true },
-//                                         { feature: 'Entry to events', flexi: true, unlimited: true },
-//                                         { feature: 'Access to experiences', flexi: false, unlimited: true },
-//                                         { feature: 'Access to Itinerary creation', flexi: false, unlimited: true },
-//                                         { feature: 'Access to postcard creation', flexi: false, unlimited: true },
-//                                     ].map((row, i) => (
-//                                         <React.Fragment key={i}>
-//                                             <p className="font-poppins font-normal text-[13px] text-[#2a2a2a] py-2.5 border-t border-[rgba(0,0,0,0.08)] flex items-center gap-1.5">
-//                                                 <span className="text-[#2a2a2a]">•</span> {row.feature}
-//                                             </p>
-//                                             <div className="flex justify-center py-2.5 border-t border-[rgba(0,0,0,0.08)]">
-//                                                 {row.flexi ? (
-//                                                     <div className="w-5 h-5 rounded-full bg-[#F95F62] flex items-center justify-center">
-//                                                         <Check className="w-3 h-3 text-white" strokeWidth={3} />
-//                                                     </div>
-//                                                 ) : (
-//                                                     <span className="font-poppins text-[13px] text-[rgba(0,0,0,0.3)]">–</span>
-//                                                 )}
-//                                             </div>
-//                                             <div className="flex justify-center py-2.5 border-t border-[rgba(0,0,0,0.08)]">
-//                                                 {row.unlimited ? (
-//                                                     <div className="w-5 h-5 rounded-full bg-[#F95F62] flex items-center justify-center">
-//                                                         <Check className="w-3 h-3 text-white" strokeWidth={3} />
-//                                                     </div>
-//                                                 ) : (
-//                                                     <span className="font-poppins text-[13px] text-[rgba(0,0,0,0.3)]">–</span>
-//                                                 )}
-//                                             </div>
-//                                         </React.Fragment>
-//                                     ))}
-//                                 </div>
-//                             </div>
-//                         </div>
-
-//                         {/* Offers Section */}
-//                         <div>
-//                             <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">
-//                                 {checkoutItem.cardType} Card Offers
-//                             </h3>
-//                             <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">
-//                                 Exclusive deals and discounts included with your {checkoutItem.cardType} pass
-//                             </p>
-//                             <div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
-//                                 {currentOffers.map((offer, idx) => (
-//                                     <div key={idx} className="relative bg-white rounded-xl shrink-0 w-[180px] h-[260px] snap-start">
-//                                         <div className="flex flex-col gap-2 items-start overflow-hidden p-3 rounded-xl h-full">
-//                                             <div className="h-[120px] w-full rounded-lg overflow-hidden shrink-0 relative">
-//                                                 <ImageWithFallback
-//                                                     src={`${baseUrl}/${offer.websiteBannerImage}` || offer.mobileBannerImage}
-//                                                     alt={offer.title}
-//                                                     className="absolute inset-0 w-full h-full object-cover rounded-lg"
-//                                                 />
-//                                             </div>
-//                                             <div className="w-full h-[44px] overflow-hidden">
-//                                                 <p className="font-['Poppins',sans-serif] font-normal text-[18px] text-black tracking-[-0.72px] leading-[22px] line-clamp-2">
-//                                                     {offer.title}
-//                                                 </p>
-//                                             </div>
-//                                             <div className="w-full flex-1">
-//                                                 <p className="font-['Poppins',sans-serif] font-normal text-[12px] text-[rgba(0,0,0,0.6)] leading-[16px] line-clamp-3">
-//                                                     {offer.description}
-//                                                 </p>
-//                                             </div>
-//                                         </div>
-//                                         <div className="absolute inset-0 border border-[rgba(249,95,98,0.24)] rounded-xl pointer-events-none" />
-//                                     </div>
-//                                 ))}
-//                             </div>
-//                         </div>
-
-//                         {/* Attractions Section */}
-//                         <div>
-//                             <div className="flex items-center justify-between">
-//                                 <h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Available Attractions</h3>
-//                                 <span className="font-poppins text-xs font-medium text-[#F95F62] bg-[#F95F62]/10 px-3 py-1 rounded-full">
-//                                     {allAttractions.length} included
-//                                 </span>
-//                             </div>
-//                             <p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">
-//                                 Explore all the experiences you can enjoy with your pass
-//                             </p>
-//                             <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
-//                                 {allAttractions.map((attraction) => (
-//                                     <div key={attraction.id} className="group relative rounded-xl overflow-hidden">
-//                                         <div className="aspect-[4/3] relative">
-//                                             <ImageWithFallback
-//                                                 src={attraction.thumbnail}
-//                                                 alt={attraction.title}
-//                                                 className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
-//                                             />
-//                                             <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
-//                                             <div className="absolute bottom-2 left-2 right-2">
-//                                                 <h6 className="font-poppins text-sm leading-snug font-medium text-white drop-shadow-sm">
-//                                                     {attraction.title}
-//                                                 </h6>
-//                                             </div>
-//                                         </div>
-//                                     </div>
-//                                 ))}
-//                             </div>
-//                         </div>
-//                     </div>
-
-//                     {/* Right Column - Config Card */}
-//                     <div className="hidden lg:block lg:w-[420px] flex-shrink-0">
-//                         <div className="lg:sticky lg:top-28">
-//                             <CheckoutConfigCard
-//                                 item={checkoutItem}
-//                                 onChange={handleCheckoutItemChange}
-//                                 onProceed={() => navigate("/payment")}
-//                             />
-//                         </div>
-//                     </div>
-
-//                     {/* Mobile Config Card */}
-//                     <div className="lg:hidden mt-6">
-//                         <CheckoutConfigCard
-//                             item={checkoutItem}
-//                             onChange={handleCheckoutItemChange}
-//                             onProceed={() => navigate("/payment")}
-//                         />
-//                     </div>
-//                 </div>
-//             </div>
-
-//             <Footer
-//                 onHomeClick={onHomeClick}
-//                 onPassesClick={onPassesClick}
-//                 onAttractionsClick={onAttractionsClick}
-//                 onBlogsClick={onBlogsClick}
-//                 onHowItWorksClick={onHowItWorksClick}
-//                 onFAQClick={onFAQClick}
-//                 onPrivacyPolicyClick={onPrivacyPolicyClick}
-//                 onAboutUsClick={onAboutUsClick}
-//                 onContactUsClick={onContactUsClick}
-//             />
-//         </div>
-//     );
-// }
\ No newline at end of file
diff --git a/src/pages/CreateMagicIternaryPageDesign.tsx b/src/pages/CreateMagicIternaryPage.tsx
similarity index 96%
rename from src/pages/CreateMagicIternaryPageDesign.tsx
rename to src/pages/CreateMagicIternaryPage.tsx
index 214a1f6..d99377e 100644
--- a/src/pages/CreateMagicIternaryPageDesign.tsx
+++ b/src/pages/CreateMagicIternaryPage.tsx
@@ -56,7 +56,7 @@ interface User {
     name: string;
 }
 
-interface CreateMagicItineraryPageDesignProps {
+interface CreateMagicItineraryPageProps {
     onBackClick: () => void;
     onHomeClick: () => void;
     onMelbourneClick: () => void;
@@ -94,49 +94,7 @@ interface ItineraryData {
 
 }
 
-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'
-};
-
-const dietaryOptions = ['No Restrictions', 'Vegetarian', 'Vegan', 'Pescatarian', 'Halal', 'Kosher'];
-
-export function CreateMagicItineraryPageDesign({
+export function CreateMagicItineraryPage({
     onBackClick,
     onHomeClick,
     onMelbourneClick,
@@ -160,7 +118,7 @@ export function CreateMagicItineraryPageDesign({
     onHotelDiscountsClick,
     currentPage,
     user
-}: CreateMagicItineraryPageDesignProps) {
+}: CreateMagicItineraryPageProps) {
     const [currentStep, setCurrentStep] = useState(1);
     const [isGenerating, setIsGenerating] = useState(false);
     const [showResults, setShowResults] = useState(false);
diff --git a/src/pages/CreateMagicItineraryPage.tsx b/src/pages/CreateMagicItineraryPage.tsx
deleted file mode 100644
index 5735da3..0000000
--- a/src/pages/CreateMagicItineraryPage.tsx
+++ /dev/null
@@ -1,1450 +0,0 @@
-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>
-  );
-}
\ No newline at end of file
diff --git a/src/pages/ItineraryViewPage.tsx b/src/pages/ItineraryViewPage.tsx
index 522604a..2d5626e 100644
--- a/src/pages/ItineraryViewPage.tsx
+++ b/src/pages/ItineraryViewPage.tsx
@@ -1,12 +1,15 @@
 import React, { useState } from 'react';
 import { motion } from 'motion/react';
-import { ArrowLeft, Calendar, Clock, MapPin, Users, Star, Heart, Share2, Download, CheckCircle, Navigation, Cloud, Sun } from 'lucide-react';
+import { ArrowLeft, Calendar, MapPin, Users, Star, Heart, Share2, Download, CheckCircle, Navigation, Cloud, Sun } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { Card, CardContent } from '../components/ui/card';
 import { Badge } from '../components/ui/badge';
 import Navbar from '../components/Navbar';
 import { Footer } from '../components/Footer';
 import { ImageWithFallback } from '../components/figma/ImageWithFallback';
+import { useGetItineraryDetailsByIdQuery } from '../Redux/services/itinerary.service';
+import { useParams } from 'react-router-dom';
+import LoadingSpinner from '../components/LoadingSpinner';
 
 interface ItineraryViewPageProps {
   onBackClick: () => void;
@@ -35,18 +38,6 @@ interface ItineraryViewPageProps {
   user?: { email: string; name: string; } | null;
 }
 
-// Enhanced activity type with more details
-interface Activity {
-  time: string;
-  activity: string;
-  location: string;
-  address: string;
-  image: string;
-  categories: string[];
-  description: string[];
-  isFavorite?: boolean;
-}
-
 export function ItineraryViewPage({
   onBackClick,
   onHomeClick,
@@ -74,304 +65,36 @@ export function ItineraryViewPage({
   user
 }: ItineraryViewPageProps) {
   const [viewMode, setViewMode] = useState<'daily' | 'summary'>('daily');
-  const [favorites, setFavorites] = useState<Set<string>>(new Set());
+  // const [favorites, setFavorites] = useState<Set<string>>(new Set());
 
-  const toggleFavorite = (activityKey: string) => {
-    setFavorites(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(activityKey)) {
-        newSet.delete(activityKey);
-      } else {
-        newSet.add(activityKey);
-      }
-      return newSet;
-    });
-  };
+  // ── API Integration ──────────────────────────────────────────────────────────
+  const { itineraryId } = useParams();
+  const { data: itineraryDetails, isLoading } = useGetItineraryDetailsByIdQuery(itineraryId);
 
-  // Enhanced itinerary data with images, addresses, and detailed info
-  const generatedItinerary = {
-    destination: {
-      name: 'Melbourne',
-      country: 'Australia',
-      weather: '18°C, Sunny',
-      image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=400&h=300&fit=crop'
-    },
-    totalDays: 3,
-    estimatedCost: '$450 AUD',
-    includedActivities: 18,
-    dailyPlans: [
-      {
-        day: 1,
-        title: "City Center & Culture",
-        activities: [
-          { 
-            time: '8:00 am', 
-            activity: 'The Langham Melbourne', 
-            location: 'The Langham Melbourne',
-            address: '1 Southgate Avenue, Southbank VIC 3006',
-            image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=800&h=600&fit=crop',
-            categories: ['Accommodation', 'Luxury'],
-            description: [
-              'Check-in at luxury riverside hotel',
-              'Enjoy complimentary breakfast',
-              'Relax at the spa facilities',
-              'Explore the surrounding Southbank area'
-            ]
-          },
-          { 
-            time: '10:00 am', 
-            activity: 'Federation Square', 
-            location: 'Federation Square',
-            address: 'Corner Swanston & Flinders Streets, Melbourne VIC 3000',
-            image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=800&h=600&fit=crop',
-            categories: ['Culture', 'Landmark'],
-            description: [
-              'Explore Melbourne\'s cultural precinct',
-              'Visit the ACMI museum',
-              'Enjoy street performances',
-              'Take photos at iconic locations'
-            ]
-          },
-          { 
-            time: '12:00 pm', 
-            activity: 'Degrave Street Café', 
-            location: 'Degrave Street Espresso Bar',
-            address: '23-25 Degraves Street, Melbourne VIC 3000',
-            image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=800&h=600&fit=crop',
-            categories: ['Food', 'Drinks', 'Culture'],
-            description: [
-              'Coffee at Pellegrini\'s Espresso Bar (iconic old-school cafe)',
-              'Try the famous jam doughnuts',
-              'Shop for fresh produce in the Deli Hall',
-              'Pick up unique souvenirs in the General Merchandise section'
-            ]
-          },
-          { 
-            time: '2:00 pm', 
-            activity: 'Royal Botanic Gardens', 
-            location: 'Royal Botanic Gardens Victoria',
-            address: 'Birdwood Avenue, South Yarra VIC 3141',
-            image: 'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=800&h=600&fit=crop',
-            categories: ['Nature', 'Culture'],
-            description: [
-              'Stroll through stunning landscaped gardens',
-              'Visit the Australian Forest Walk',
-              'Relax by the Ornamental Lake',
-              'Join a free guided walking tour'
-            ]
-          },
-          { 
-            time: '4:00 pm', 
-            activity: 'National Gallery of Victoria', 
-            location: 'NGV International',
-            address: '180 St Kilda Road, Melbourne VIC 3006',
-            image: 'https://images.unsplash.com/photo-1564399577149-749794d74eee?w=800&h=600&fit=crop',
-            categories: ['Culture', 'Art'],
-            description: [
-              'Explore Australia\'s oldest art museum',
-              'View international and Australian art collections',
-              'Visit the stunning water wall entrance',
-              'Browse the NGV design store'
-            ]
-          },
-          { 
-            time: '7:00 pm', 
-            activity: 'Dinner at Chin Chin', 
-            location: 'Chin Chin Restaurant',
-            address: '125 Flinders Lane, Melbourne VIC 3000',
-            image: 'https://images.unsplash.com/photo-1552566626-52f8b828add9?w=800&h=600&fit=crop',
-            categories: ['Food', 'Drinks'],
-            description: [
-              'Experience modern Thai cuisine',
-              'Try signature dishes like the Betel Leaf',
-              'Enjoy the vibrant atmosphere',
-              'Book ahead or walk-in for bar seating'
-            ]
-          }
-        ]
-      },
-      {
-        day: 2,
-        title: "Markets & Neighborhoods",
-        activities: [
-          { 
-            time: '8:00 am', 
-            activity: 'Queen Victoria Market', 
-            location: 'Queen Victoria Market',
-            address: 'Queen Street, Melbourne VIC 3000',
-            image: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=800&h=600&fit=crop',
-            categories: ['Food', 'Shopping', 'Culture'],
-            description: [
-              'Explore Melbourne\'s historic market (since 1878)',
-              'Sample fresh local produce',
-              'Shop for artisan goods and souvenirs',
-              'Grab breakfast at the Deli Hall'
-            ]
-          },
-          { 
-            time: '10:30 am', 
-            activity: 'Fitzroy Street Art Tour', 
-            location: 'Fitzroy Arts Precinct',
-            address: 'Gertrude Street, Fitzroy VIC 3065',
-            image: 'https://images.unsplash.com/photo-1499781350541-7783f6c6a0c8?w=800&h=600&fit=crop',
-            categories: ['Culture', 'Art'],
-            description: [
-              'Walk through famous street art laneways',
-              'Discover works by renowned artists',
-              'Visit independent galleries',
-              'Explore vintage and record stores'
-            ]
-          },
-          { 
-            time: '12:30 pm', 
-            activity: 'Brunswick Street Lunch', 
-            location: 'Brunswick Street Precinct',
-            address: 'Brunswick Street, Fitzroy VIC 3065',
-            image: 'https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&h=600&fit=crop',
-            categories: ['Food', 'Drinks'],
-            description: [
-              'Choose from diverse dining options',
-              'Try local cafes and restaurants',
-              'Explore bookshops and boutiques',
-              'Enjoy the vibrant neighborhood atmosphere'
-            ]
-          },
-          { 
-            time: '2:30 pm', 
-            activity: 'Carlton Gardens', 
-            location: 'Carlton Gardens',
-            address: 'Carlton Gardens, Carlton VIC 3053',
-            image: 'https://images.unsplash.com/photo-1519331379826-f10be5486c6f?w=800&h=600&fit=crop',
-            categories: ['Nature', 'Culture', 'Landmark'],
-            description: [
-              'Visit the UNESCO World Heritage site',
-              'See the Royal Exhibition Building',
-              'Stroll through Victorian-era gardens',
-              'Relax by the ornamental fountains'
-            ]
-          },
-          { 
-            time: '4:00 pm', 
-            activity: 'Melbourne Museum', 
-            location: 'Melbourne Museum',
-            address: '11 Nicholson Street, Carlton VIC 3053',
-            image: 'https://images.unsplash.com/photo-1566127992631-137a642a90f4?w=800&h=600&fit=crop',
-            categories: ['Culture', 'Museum'],
-            description: [
-              'Explore natural and cultural history',
-              'Visit the Bunjilaka Aboriginal Centre',
-              'See the Forest Gallery living ecosystem',
-              'Discover Melbourne\'s story exhibition'
-            ]
-          },
-          { 
-            time: '7:00 pm', 
-            activity: 'Rooftop Bar Experience', 
-            location: 'Naked for Satan',
-            address: '285 Brunswick Street, Fitzroy VIC 3065',
-            image: 'https://images.unsplash.com/photo-1514933651103-005eec06c04b?w=800&h=600&fit=crop',
-            categories: ['Drinks', 'Food'],
-            description: [
-              'Enjoy sunset views from the rooftop',
-              'Try Spanish-style pintxos',
-              'Sample craft cocktails and local beers',
-              'Experience Melbourne\'s bar culture'
-            ]
-          }
-        ]
-      },
-      {
-        day: 3,
-        title: "Coastal Adventure",
-        activities: [
-          { 
-            time: '8:00 am', 
-            activity: 'St. Kilda Beach', 
-            location: 'St. Kilda Beach',
-            address: 'Jacka Boulevard, St Kilda VIC 3182',
-            image: 'https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&h=600&fit=crop',
-            categories: ['Nature', 'Beach'],
-            description: [
-              'Morning walk along the iconic beach',
-              'Visit the historic St Kilda Pier',
-              'See the little penguins at sunset',
-              'Explore the Sunday Esplanade Market (weekends)'
-            ]
-          },
-          { 
-            time: '10:00 am', 
-            activity: 'Acland Street Cafes', 
-            location: 'Acland Street',
-            address: 'Acland Street, St Kilda VIC 3182',
-            image: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=800&h=600&fit=crop',
-            categories: ['Food', 'Drinks'],
-            description: [
-              'Brunch at famous cake shops',
-              'Try traditional European pastries',
-              'Visit Lentil as Anything (pay-as-you-feel)',
-              'Browse vintage shops and bookstores'
-            ]
-          },
-          { 
-            time: '12:00 pm', 
-            activity: 'Luna Park Melbourne', 
-            location: 'Luna Park Melbourne',
-            address: '18 Lower Esplanade, St Kilda VIC 3182',
-            image: 'https://images.unsplash.com/photo-1513026705753-bc3fffca8bf4?w=800&h=600&fit=crop',
-            categories: ['Entertainment', 'Landmark'],
-            description: [
-              'Visit Melbourne\'s iconic amusement park',
-              'Ride the historic Scenic Railway (1912)',
-              'Take photos at Mr Moon entrance',
-              'Enjoy carnival games and rides'
-            ]
-          },
-          { 
-            time: '2:00 pm', 
-            activity: 'Brighton Beach Boxes', 
-            location: 'Brighton Beach',
-            address: 'Esplanade, Brighton VIC 3186',
-            image: 'https://images.unsplash.com/photo-1520208422220-d12a3c588e6c?w=800&h=600&fit=crop',
-            categories: ['Culture', 'Landmark'],
-            description: [
-              'Photograph the famous colorful bathing boxes',
-              'Walk along the pristine beach',
-              'Learn about the heritage structures',
-              'Relax in the beachside atmosphere'
-            ]
-          },
-          { 
-            time: '4:00 pm', 
-            activity: 'Southbank Promenade', 
-            location: 'Southbank',
-            address: 'Southbank Promenade, Southbank VIC 3006',
-            image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=800&h=600&fit=crop',
-            categories: ['Culture', 'Shopping'],
-            description: [
-              'Stroll along the Yarra River',
-              'Visit arts and craft markets',
-              'Explore restaurants and cafes',
-              'Enjoy river views and street performers'
-            ]
-          },
-          { 
-            time: '7:00 pm', 
-            activity: 'Farewell Dinner at Vue de Monde', 
-            location: 'Vue de Monde',
-            address: 'Level 55, Rialto, 525 Collins Street, Melbourne VIC 3000',
-            image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=800&h=600&fit=crop',
-            categories: ['Food', 'Drinks', 'Luxury'],
-            description: [
-              'Experience fine dining at 55th floor',
-              'Enjoy panoramic Melbourne views',
-              'Taste modern Australian cuisine',
-              'Celebrate the end of your journey'
-            ]
-          }
-        ]
-      }
-    ]
-  };
+  const generatedItinerary = itineraryDetails ?? null;
+  const days = generatedItinerary?.days ?? [];
+  const summaries = generatedItinerary?.summary ?? [];
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  // const toggleFavorite = (activityKey: string) => {
+  //   setFavorites(prev => {
+  //     const newSet = new Set(prev);
+  //     if (newSet.has(activityKey)) {
+  //       newSet.delete(activityKey);
+  //     } else {
+  //       newSet.add(activityKey);
+  //     }
+  //     return newSet;
+  //   });
+  // };
+
+  // ── Loading State ─────────────────────────────────────────────────────────────
+  if (isLoading) {
+    return (
+     <LoadingSpinner/>
+    );
+  }
+  // ─────────────────────────────────────────────────────────────────────────────
 
   return (
     <div className="min-h-screen bg-background">
@@ -422,12 +145,14 @@ export function ItineraryViewPage({
               <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>
+                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pr-3">
+                  {generatedItinerary?.title ?? '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}!
+              Here's your personalized {generatedItinerary?.totalDays}-day adventure in {generatedItinerary?.city}!
             </p>
           </motion.div>
         </div>
@@ -437,6 +162,7 @@ export function ItineraryViewPage({
       <section className="py-8">
         <div className="container mx-auto px-4">
           <div className="max-w-6xl mx-auto space-y-8">
+
             {/* View Toggle */}
             <div className="flex justify-center">
               <div className="bg-muted p-1 rounded-lg">
@@ -459,31 +185,46 @@ export function ItineraryViewPage({
               </div>
             </div>
 
-            {/* Itinerary Overview */}
+            {/* Itinerary Overview Card */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.2 }}
             >
-              <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>
+              {/* Banner Image */}
+              <Card className="overflow-hidden">
+                <div className="relative h-40 md:h-48">
+                  <ImageWithFallback
+                    src={generatedItinerary?.cityBanner}
+                    alt={generatedItinerary?.city}
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
+                  <div className="absolute bottom-4 left-6">
+                    <p className="font-poppins text-xs font-medium text-white/70 uppercase tracking-wider mb-1">Your Trip</p>
+                    <h3 className="font-merchant text-2xl md:text-3xl text-white font-semibold">{generatedItinerary?.city}</h3>
                   </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>
+
+                {/* Stats Row */}
+                <div className="grid grid-cols-3 divide-x divide-gray-100 bg-white">
+                  <div className="flex flex-col items-center py-5">
+                    <span className="font-merchant text-3xl text-primary">{generatedItinerary?.totalDays}</span>
+                    <span className="font-poppins text-xs font-normal text-gray-500 mt-1">Days</span>
                   </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 className="flex flex-col items-center py-5">
+                    <span className="font-merchant text-3xl text-primary">{generatedItinerary?.totalStops}</span>
+                    <span className="font-poppins text-xs font-normal text-gray-500 mt-1">Stops</span>
+                  </div>
+                  <div className="flex flex-col items-center py-5">
+                    <span className="font-merchant text-3xl text-primary">{days[0]?.date}</span>
+                    <span className="font-poppins text-xs font-normal text-gray-500 mt-1">Start Date</span>
                   </div>
                 </div>
               </Card>
             </motion.div>
 
-            {/* Daily Plans - Enhanced View */}
+            {/* ── Daily View ──────────────────────────────────────────────────── */}
             {viewMode === 'daily' && (
               <motion.div
                 initial={{ opacity: 0, y: 20 }}
@@ -491,29 +232,24 @@ export function ItineraryViewPage({
                 transition={{ duration: 0.6, delay: 0.3 }}
                 className="space-y-12"
               >
-                {generatedItinerary.dailyPlans.map((day, dayIndex) => (
+                {days.map((day: any, dayIndex: number) => (
                   <div key={dayIndex} className="space-y-6">
-                    {/* Location Header with Weather - Only show for first day or when location changes */}
-                    {(dayIndex === 0 || 
-                      (dayIndex > 0 && 
-                       generatedItinerary.dailyPlans[dayIndex - 1] && 
-                       (generatedItinerary.dailyPlans[dayIndex - 1] as any).destination?.name !== generatedItinerary.destination.name)) && (
+
+                    {/* City / Weather header — only on first day */}
+                    {dayIndex === 0 && (
                       <motion.div
                         initial={{ opacity: 0, x: -20 }}
                         animate={{ opacity: 1, x: 0 }}
-                        transition={{ duration: 0.6, delay: 0.4 + dayIndex * 0.1 }}
+                        transition={{ duration: 0.6, delay: 0.4 }}
                         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 className="font-poppins text-3xl md:text-4xl leading-tight mb-2">
+                              {generatedItinerary?.city}, Australia
                             </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>
+                          <Sun className="w-10 h-10 text-amber-500" />
                         </div>
                       </motion.div>
                     )}
@@ -526,24 +262,28 @@ export function ItineraryViewPage({
                       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>
+                        <span className="font-merchant text-2xl font-semibold">{day.dayNumber}</span>
                       </div>
                       <div>
-                        <h3 className="font-merchant text-2xl md:text-3xl leading-snug font-semibold">Day {day.day}</h3>
+                        <h3 className="font-merchant text-2xl md:text-3xl leading-snug font-semibold">
+                          Day {day.dayNumber}
+                        </h3>
                         <p className="font-poppins text-base text-muted-foreground font-normal">{day.title}</p>
                       </div>
                     </motion.div>
 
-                    {/* GMT Label */}
+                    {/* Time-zone label */}
                     <div className="pl-2">
-                      <p className="font-poppins text-sm text-gray-500 font-normal">GMT</p>
+                      <p className="font-poppins text-sm text-gray-500 font-normal">
+                        {day.date}
+                      </p>
                     </div>
 
-                    {/* Activity Cards - Desktop Grid Layout */}
+                    {/* Activity Cards */}
                     <div className="space-y-8">
-                      {day.activities.map((activity, actIndex) => {
-                        const activityKey = `day${day.day}-act${actIndex}`;
-                        const isFavorite = favorites.has(activityKey);
+                      {day.items?.map((activity: any, actIndex: number) => {
+                        const activityKey = `day${day.dayNumber}-act${actIndex}`;
+                        // const isFavorite = favorites.has(activityKey);
 
                         return (
                           <motion.div
@@ -555,23 +295,25 @@ export function ItineraryViewPage({
                           >
                             {/* Time Column */}
                             <div className="flex-shrink-0 w-24 pt-2">
-                              <div className="font-poppins text-base font-medium text-gray-700">{activity.time}</div>
+                              <div className="font-poppins text-base font-medium text-gray-700">
+                                {activity.timeSlot}
+                              </div>
                             </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 */}
+                                  {/* Hero Image */}
                                   <div className="relative h-64 md:h-72 bg-gray-200">
                                     <ImageWithFallback
-                                      src={activity.image}
-                                      alt={activity.activity}
+                                      src={activity.imageUrl}
+                                      alt={activity.title}
                                       className="w-full h-full object-cover"
                                     />
-                                    
-                                    {/* Favorite Heart Button - Top Right */}
-                                    <div className="absolute top-4 right-4">
+
+                                    {/* Favourite Button */}
+                                    {/* <div className="absolute top-4 right-4">
                                       <Button
                                         size="icon"
                                         variant="secondary"
@@ -580,12 +322,18 @@ export function ItineraryViewPage({
                                       >
                                         <Heart className={`w-5 h-5 ${isFavorite ? 'fill-primary text-primary' : 'text-gray-700'}`} />
                                       </Button>
-                                    </div>
+                                    </div> */}
 
-                                    {/* Get Directions Button - Bottom Left */}
+                                    {/* Get Directions — links to Google Maps via lat/lng */}
                                     <div className="absolute bottom-4 left-4">
-                                      <Button 
+                                      <Button
                                         className="bg-primary hover:bg-primary/90 text-white font-poppins font-semibold shadow-lg px-6 py-3 rounded-xl"
+                                        onClick={() =>
+                                          window.open(
+                                            `https://www.google.com/maps?q=${activity.latitude},${activity.longitude}`,
+                                            '_blank'
+                                          )
+                                        }
                                       >
                                         <Navigation className="w-4 h-4 mr-2" />
                                         Get Directions
@@ -593,40 +341,41 @@ export function ItineraryViewPage({
                                     </div>
                                   </div>
 
-                                  {/* Content Section */}
+                                  {/* Content */}
                                   <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}
+                                        {activity.title}
                                       </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>
+                                        <span className="font-poppins text-sm font-normal leading-relaxed">
+                                          {activity.locationName}
+                                        </span>
                                       </div>
                                     </div>
 
                                     {/* Category Badges */}
                                     <div className="flex flex-wrap gap-2">
-                                      {activity.categories.map((category, catIndex) => (
-                                        <Badge 
-                                          key={catIndex} 
+                                      {activity.categories?.map((cat: string, ci: number) => (
+                                        <Badge
+                                          key={ci}
                                           variant="secondary"
                                           className="font-poppins font-normal text-sm bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1"
                                         >
-                                          {category}
+                                          {cat}
                                         </Badge>
                                       ))}
                                     </div>
 
-                                    {/* Activity Details - Bullet Points */}
+                                    {/* Description */}
                                     <div className="space-y-2 pt-2">
-                                      {activity.description.map((detail, detailIndex) => (
-                                        <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 className="flex items-center gap-3">
+                                        <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">
+                                          {activity.description}
+                                        </span>
+                                      </div>
                                     </div>
                                   </div>
                                 </CardContent>
@@ -641,7 +390,7 @@ export function ItineraryViewPage({
               </motion.div>
             )}
 
-            {/* Summary View */}
+            {/* ── Summary View ─────────────────────────────────────────────────── */}
             {viewMode === 'summary' && (
               <motion.div
                 initial={{ opacity: 0, y: 20 }}
@@ -649,32 +398,57 @@ export function ItineraryViewPage({
                 transition={{ duration: 0.6, delay: 0.3 }}
                 className="space-y-4"
               >
-                <h3 className="font-merchant text-2xl md:text-3xl text-center mb-8 leading-tight font-semibold">Trip Summary</h3>
+                <h3 className="font-merchant text-2xl md:text-3xl text-center mb-8 leading-tight font-semibold">
+                  Trip Summary
+                </h3>
                 <Card className="p-6">
                   <div className="space-y-6">
-                    {generatedItinerary.dailyPlans.map((day, index) => (
-                      <div key={index} className="border-l-4 border-primary pl-6">
-                        <div className="flex items-center gap-2 mb-3">
-                          <Calendar className="w-5 h-5 text-primary" />
-                          <h4 className="font-merchant text-lg md:text-xl leading-snug font-semibold">Day {day.day}: {day.title}</h4>
-                        </div>
-                        <div className="space-y-2">
-                          {day.activities.map((activity, actIndex) => (
-                            <div key={actIndex} className="flex items-start gap-3 text-sm">
-                              <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
-                              <div className="flex-1">
-                                <span className="font-poppins text-gray-700 font-medium">{activity.activity}</span>
-                                <div className="flex items-center gap-2 mt-1">
-                                  <span className="font-poppins text-gray-500 text-xs font-normal">{activity.time}</span>
-                                  <span className="text-gray-400">•</span>
-                                  <span className="font-poppins text-gray-500 text-xs font-normal">{activity.location}</span>
+                    {days.map((day: any, dayIndex: number) => {
+                      // ✅ Match summary to the correct day by dayNumber
+                      const daySummary = summaries.find((s: any) => s.dayNumber === day.dayNumber);
+
+                      const dayDate = days[0]?.date
+                        ? new Date(
+                            new Date(days[0].date).setDate(
+                              new Date(days[0].date).getDate() + dayIndex
+                            )
+                          ).toLocaleDateString('en-AU', {
+                            day: '2-digit',
+                            month: '2-digit',
+                            year: 'numeric',
+                          })
+                        : '';
+
+                      return (
+                        <div key={dayIndex} className="border-l-4 border-primary pl-6">
+                          <div className="flex items-center justify-between mb-3">
+                            <div className="flex items-center gap-2">
+                              <Calendar className="w-5 h-5 text-primary" />
+                              <h4 className="font-merchant text-lg md:text-xl leading-snug font-semibold">
+                                Day {day.dayNumber}: {daySummary?.title ?? day.title}
+                              </h4>
+                            </div>
+                            <span className="font-poppins text-sm text-primary font-medium">{dayDate}</span>
+                          </div>
+
+                          <div className="space-y-2">
+                            {daySummary?.items?.map((item: any, actIndex: number) => (
+                              <div key={actIndex} className="flex items-start gap-3 text-sm">
+                                <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
+                                <div className="flex-1">
+                                  <span className="font-poppins text-gray-700 font-medium">{item.title}</span>
+                                  <div className="flex items-center gap-2 mt-1">
+                                    <span className="font-poppins text-gray-500 text-xs font-normal">{item.timeSlot}</span>
+                                    <span className="text-gray-400">•</span>
+                                    <span className="font-poppins text-gray-500 text-xs font-normal">{item.locationName}</span>
+                                  </div>
                                 </div>
                               </div>
-                            </div>
-                          ))}
+                            ))}
+                          </div>
                         </div>
-                      </div>
-                    ))}
+                      );
+                    })}
                   </div>
                 </Card>
               </motion.div>
@@ -695,16 +469,11 @@ export function ItineraryViewPage({
                 <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"
-              >
+              <Button className="bg-primary hover:bg-primary/90 font-poppins font-semibold px-8 py-3 text-lg">
                 <Download className="w-5 h-5 mr-2" />
                 Save Itinerary
               </Button>
-              <Button
-                variant="outline"
-                className="font-poppins font-medium px-8 py-3 text-lg"
-              >
+              <Button variant="outline" className="font-poppins font-medium px-8 py-3 text-lg">
                 <Share2 className="w-5 h-5 mr-2" />
                 Share Trip
               </Button>
@@ -714,7 +483,7 @@ export function ItineraryViewPage({
       </section>
 
       {/* Footer */}
-      <Footer 
+      <Footer
         onHomeClick={onHomeClick}
         onMelbourneClick={onMelbourneClick}
         onPassesClick={onPassesClick}
diff --git a/src/pages/ItineraryViewPageDesign.tsx b/src/pages/ItineraryViewPageDesign.tsx
deleted file mode 100644
index 6ce81a9..0000000
--- a/src/pages/ItineraryViewPageDesign.tsx
+++ /dev/null
@@ -1,501 +0,0 @@
-import React, { useState } from 'react';
-import { motion } from 'motion/react';
-import { ArrowLeft, Calendar, Clock, MapPin, Users, Star, Heart, Share2, Download, CheckCircle, Navigation, Cloud, Sun } from 'lucide-react';
-import { Button } from '../components/ui/button';
-import { Card, CardContent } from '../components/ui/card';
-import { Badge } from '../components/ui/badge';
-import Navbar from '../components/Navbar';
-import { Footer } from '../components/Footer';
-import { ImageWithFallback } from '../components/figma/ImageWithFallback';
-import { useGetItineraryDetailsByIdQuery } from '../Redux/services/itinerary.service';
-import { useParams } from 'react-router-dom';
-import LoadingSpinner from '../components/LoadingSpinner';
-
-interface ItineraryViewPageDesignProps {
-  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;
-  onCreateItineraryClick: () => void;
-  onContactUsClick?: () => void;
-  onEsimsClick?: () => void;
-  onHotelDiscountsClick?: () => void;
-  currentPage: string;
-  user?: { email: string; name: string; } | null;
-}
-
-export function ItineraryViewPageDesign({
-  onBackClick,
-  onHomeClick,
-  onMelbourneClick,
-  onPassesClick,
-  onCheckoutClick,
-  onSignInClick,
-  onSignOutClick,
-  onAttractionsClick,
-  onBlogsClick,
-  onHowItWorksClick,
-  onFAQClick,
-  onPrivacyPolicyClick,
-  onAboutUsClick,
-  onProfileClick,
-  onCityCardsClick,
-  onMagicItineraryClick,
-  onPostCardsClick,
-  onOffersClick,
-  onCreateItineraryClick,
-  onContactUsClick,
-  onEsimsClick,
-  onHotelDiscountsClick,
-  currentPage,
-  user
-}: ItineraryViewPageDesignProps) {
-  const [viewMode, setViewMode] = useState<'daily' | 'summary'>('daily');
-  // const [favorites, setFavorites] = useState<Set<string>>(new Set());
-
-  // ── API Integration ──────────────────────────────────────────────────────────
-  const { itineraryId } = useParams();
-  const { data: itineraryDetails, isLoading } = useGetItineraryDetailsByIdQuery(itineraryId);
-
-  const generatedItinerary = itineraryDetails ?? null;
-  const days = generatedItinerary?.days ?? [];
-  const summaries = generatedItinerary?.summary ?? [];
-  // ─────────────────────────────────────────────────────────────────────────────
-
-  // const toggleFavorite = (activityKey: string) => {
-  //   setFavorites(prev => {
-  //     const newSet = new Set(prev);
-  //     if (newSet.has(activityKey)) {
-  //       newSet.delete(activityKey);
-  //     } else {
-  //       newSet.add(activityKey);
-  //     }
-  //     return newSet;
-  //   });
-  // };
-
-  // ── Loading State ─────────────────────────────────────────────────────────────
-  if (isLoading) {
-    return (
-     <LoadingSpinner/>
-    );
-  }
-  // ─────────────────────────────────────────────────────────────────────────────
-
-  return (
-    <div className="min-h-screen bg-background">
-      {/* Navbar */}
-      <Navbar
-        activeCity=""
-        onCityChange={() => {}}
-        onSignInClick={onSignInClick}
-        onPassesClick={onPassesClick}
-        onCheckoutClick={onCheckoutClick}
-        onHomeClick={onHomeClick}
-        onMelbourneClick={onMelbourneClick}
-        onAttractionsClick={onAttractionsClick}
-        onBlogsClick={onBlogsClick}
-        onHowItWorksClick={onHowItWorksClick}
-        onFAQClick={onFAQClick}
-        onPrivacyPolicyClick={onPrivacyPolicyClick}
-        onAboutUsClick={onAboutUsClick}
-        onProfileClick={onProfileClick}
-        onCityCardsClick={onCityCardsClick}
-        onMagicItineraryClick={onMagicItineraryClick}
-        onPostCardsClick={onPostCardsClick}
-        onOffersClick={onOffersClick}
-        currentPage="itinerary-view"
-        isUserSignedIn={!!user}
-        user={user}
-      />
-
-      {/* Header Section */}
-      <section className="pt-32 pb-8 bg-gradient-to-br from-primary/5 to-secondary/5">
-        <div className="container mx-auto px-4 pt-32">
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-            className="text-center"
-          >
-            <Button
-              variant="ghost"
-              onClick={onBackClick}
-              className="mb-6 hover:bg-primary/5 font-poppins font-medium"
-            >
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              Back to Magic Itinerary
-            </Button>
-
-            <div className="flex items-center justify-center gap-2 text-primary mb-4">
-              <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 pr-3">
-                  {generatedItinerary?.title ?? '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?.city}!
-            </p>
-          </motion.div>
-        </div>
-      </section>
-
-      {/* Main Content */}
-      <section className="py-8">
-        <div className="container mx-auto px-4">
-          <div className="max-w-6xl mx-auto space-y-8">
-
-            {/* 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>
-
-            {/* Itinerary Overview Card */}
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, delay: 0.2 }}
-            >
-              {/* Banner Image */}
-              <Card className="overflow-hidden">
-                <div className="relative h-40 md:h-48">
-                  <ImageWithFallback
-                    src={generatedItinerary?.cityBanner}
-                    alt={generatedItinerary?.city}
-                    className="w-full h-full object-cover"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
-                  <div className="absolute bottom-4 left-6">
-                    <p className="font-poppins text-xs font-medium text-white/70 uppercase tracking-wider mb-1">Your Trip</p>
-                    <h3 className="font-merchant text-2xl md:text-3xl text-white font-semibold">{generatedItinerary?.city}</h3>
-                  </div>
-                </div>
-
-                {/* Stats Row */}
-                <div className="grid grid-cols-3 divide-x divide-gray-100 bg-white">
-                  <div className="flex flex-col items-center py-5">
-                    <span className="font-merchant text-3xl text-primary">{generatedItinerary?.totalDays}</span>
-                    <span className="font-poppins text-xs font-normal text-gray-500 mt-1">Days</span>
-                  </div>
-                  <div className="flex flex-col items-center py-5">
-                    <span className="font-merchant text-3xl text-primary">{generatedItinerary?.totalStops}</span>
-                    <span className="font-poppins text-xs font-normal text-gray-500 mt-1">Stops</span>
-                  </div>
-                  <div className="flex flex-col items-center py-5">
-                    <span className="font-merchant text-3xl text-primary">{days[0]?.date}</span>
-                    <span className="font-poppins text-xs font-normal text-gray-500 mt-1">Start Date</span>
-                  </div>
-                </div>
-              </Card>
-            </motion.div>
-
-            {/* ── Daily View ──────────────────────────────────────────────────── */}
-            {viewMode === 'daily' && (
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.3 }}
-                className="space-y-12"
-              >
-                {days.map((day: any, dayIndex: number) => (
-                  <div key={dayIndex} className="space-y-6">
-
-                    {/* City / Weather header — only on first day */}
-                    {dayIndex === 0 && (
-                      <motion.div
-                        initial={{ opacity: 0, x: -20 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        transition={{ duration: 0.6, delay: 0.4 }}
-                        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-poppins text-3xl md:text-4xl leading-tight mb-2">
-                              {generatedItinerary?.city}, Australia
-                            </h2>
-                          </div>
-                          <Sun className="w-10 h-10 text-amber-500" />
-                        </div>
-                      </motion.div>
-                    )}
-
-                    {/* Day Header */}
-                    <motion.div
-                      initial={{ opacity: 0, x: -20 }}
-                      animate={{ opacity: 1, x: 0 }}
-                      transition={{ duration: 0.6, delay: 0.5 + 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.dayNumber}</span>
-                      </div>
-                      <div>
-                        <h3 className="font-merchant text-2xl md:text-3xl leading-snug font-semibold">
-                          Day {day.dayNumber}
-                        </h3>
-                        <p className="font-poppins text-base text-muted-foreground font-normal">{day.title}</p>
-                      </div>
-                    </motion.div>
-
-                    {/* Time-zone label */}
-                    <div className="pl-2">
-                      <p className="font-poppins text-sm text-gray-500 font-normal">
-                        {day.date}
-                      </p>
-                    </div>
-
-                    {/* Activity Cards */}
-                    <div className="space-y-8">
-                      {day.items?.map((activity: any, actIndex: number) => {
-                        const activityKey = `day${day.dayNumber}-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.6 + dayIndex * 0.1 + actIndex * 0.05 }}
-                            className="flex gap-6"
-                          >
-                            {/* Time Column */}
-                            <div className="flex-shrink-0 w-24 pt-2">
-                              <div className="font-poppins text-base font-medium text-gray-700">
-                                {activity.timeSlot}
-                              </div>
-                            </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 */}
-                                  <div className="relative h-64 md:h-72 bg-gray-200">
-                                    <ImageWithFallback
-                                      src={activity.imageUrl}
-                                      alt={activity.title}
-                                      className="w-full h-full object-cover"
-                                    />
-
-                                    {/* Favourite Button */}
-                                    {/* <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 — links to Google Maps via lat/lng */}
-                                    <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"
-                                        onClick={() =>
-                                          window.open(
-                                            `https://www.google.com/maps?q=${activity.latitude},${activity.longitude}`,
-                                            '_blank'
-                                          )
-                                        }
-                                      >
-                                        <Navigation className="w-4 h-4 mr-2" />
-                                        Get Directions
-                                      </Button>
-                                    </div>
-                                  </div>
-
-                                  {/* Content */}
-                                  <div className="p-6 space-y-4">
-                                    <div className="space-y-2">
-                                      <h4 className="font-merchant text-xl md:text-2xl leading-snug font-semibold text-gray-900">
-                                        {activity.title}
-                                      </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.locationName}
-                                        </span>
-                                      </div>
-                                    </div>
-
-                                    {/* Category Badges */}
-                                    <div className="flex flex-wrap gap-2">
-                                      {activity.categories?.map((cat: string, ci: number) => (
-                                        <Badge
-                                          key={ci}
-                                          variant="secondary"
-                                          className="font-poppins font-normal text-sm bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1"
-                                        >
-                                          {cat}
-                                        </Badge>
-                                      ))}
-                                    </div>
-
-                                    {/* Description */}
-                                    <div className="space-y-2 pt-2">
-                                      <div className="flex items-center gap-3">
-                                        <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">
-                                          {activity.description}
-                                        </span>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </CardContent>
-                              </Card>
-                            </div>
-                          </motion.div>
-                        );
-                      })}
-                    </div>
-                  </div>
-                ))}
-              </motion.div>
-            )}
-
-            {/* ── Summary View ─────────────────────────────────────────────────── */}
-            {viewMode === 'summary' && (
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.3 }}
-                className="space-y-4"
-              >
-                <h3 className="font-merchant text-2xl md:text-3xl text-center mb-8 leading-tight font-semibold">
-                  Trip Summary
-                </h3>
-                <Card className="p-6">
-                  <div className="space-y-6">
-                    {days.map((day: any, dayIndex: number) => {
-                      // ✅ Match summary to the correct day by dayNumber
-                      const daySummary = summaries.find((s: any) => s.dayNumber === day.dayNumber);
-
-                      const dayDate = days[0]?.date
-                        ? new Date(
-                            new Date(days[0].date).setDate(
-                              new Date(days[0].date).getDate() + dayIndex
-                            )
-                          ).toLocaleDateString('en-AU', {
-                            day: '2-digit',
-                            month: '2-digit',
-                            year: 'numeric',
-                          })
-                        : '';
-
-                      return (
-                        <div key={dayIndex} className="border-l-4 border-primary pl-6">
-                          <div className="flex items-center justify-between mb-3">
-                            <div className="flex items-center gap-2">
-                              <Calendar className="w-5 h-5 text-primary" />
-                              <h4 className="font-merchant text-lg md:text-xl leading-snug font-semibold">
-                                Day {day.dayNumber}: {daySummary?.title ?? day.title}
-                              </h4>
-                            </div>
-                            <span className="font-poppins text-sm text-primary font-medium">{dayDate}</span>
-                          </div>
-
-                          <div className="space-y-2">
-                            {daySummary?.items?.map((item: any, actIndex: number) => (
-                              <div key={actIndex} className="flex items-start gap-3 text-sm">
-                                <CheckCircle className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
-                                <div className="flex-1">
-                                  <span className="font-poppins text-gray-700 font-medium">{item.title}</span>
-                                  <div className="flex items-center gap-2 mt-1">
-                                    <span className="font-poppins text-gray-500 text-xs font-normal">{item.timeSlot}</span>
-                                    <span className="text-gray-400">•</span>
-                                    <span className="font-poppins text-gray-500 text-xs font-normal">{item.locationName}</span>
-                                  </div>
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </Card>
-              </motion.div>
-            )}
-
-            {/* Action Buttons */}
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, delay: 0.5 }}
-              className="flex flex-col sm:flex-row gap-4 justify-center pt-8"
-            >
-              <Button
-                variant="outline"
-                onClick={onCreateItineraryClick}
-                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">
-                <Download className="w-5 h-5 mr-2" />
-                Save Itinerary
-              </Button>
-              <Button variant="outline" className="font-poppins font-medium px-8 py-3 text-lg">
-                <Share2 className="w-5 h-5 mr-2" />
-                Share Trip
-              </Button>
-            </motion.div>
-          </div>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <Footer
-        onHomeClick={onHomeClick}
-        onMelbourneClick={onMelbourneClick}
-        onPassesClick={onPassesClick}
-        onSignInClick={onSignInClick}
-        onAttractionsClick={onAttractionsClick}
-        onBlogsClick={onBlogsClick}
-        onHowItWorksClick={onHowItWorksClick}
-        onFAQClick={onFAQClick}
-        onPrivacyPolicyClick={onPrivacyPolicyClick}
-        onContactUsClick={onContactUsClick}
-        currentPage={currentPage}
-      />
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 1183b9b..7b1550f 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -622,7 +622,7 @@ export function ProfilePage({
                     <Card key={card.id} className="overflow-hidden">
                       <div
                         className="flex cursor-pointer hover:bg-gray-50 transition-colors duration-200 rounded-lg p-2 -m-2"
-                        onClick={() => navigate(`/view-card-design/${card.id}`)}
+                        onClick={() => navigate(`/view-card-details/${card.id}`)}
                       >
                         <div className="w-32 h-32 flex-shrink-0">
                           <ImageWithFallback
@@ -765,7 +765,7 @@ export function ProfilePage({
                   <h2 className="font-poppins text-2xl font-normal">My Itineraries</h2>
                   <Button
                     className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-normal"
-                    onClick={() => navigate("/create-itinerary-design")}
+                    onClick={() => navigate("/create-itinerary")}
                   >
                     <Plus className="w-4 h-4 mr-2" />
                     Create Itinerary
@@ -805,7 +805,7 @@ export function ProfilePage({
                           <Button
                             variant="outline"
                             className="w-full mt-4 font-poppins font-normal"
-                            onClick={()=>navigate(`/itinerary-view-design/${itinerary.id}`)}
+                            onClick={()=>navigate(`/view-itinerary/${itinerary.id}`)}
                           >
                             View Itinerary
                           </Button>
diff --git a/src/pages/ViewCardDetailsPageDesign.tsx b/src/pages/ViewCardDetailsPage.tsx
similarity index 97%
rename from src/pages/ViewCardDetailsPageDesign.tsx
rename to src/pages/ViewCardDetailsPage.tsx
index 819604f..4677616 100644
--- a/src/pages/ViewCardDetailsPageDesign.tsx
+++ b/src/pages/ViewCardDetailsPage.tsx
@@ -1,6 +1,5 @@
-import { useState } from 'react';
 import { motion } from 'motion/react';
-import { ArrowLeft, ChevronRight, QrCode, CreditCard, Calendar, MapPin, Star, CheckCircle, Sparkles, Users, Clock, Gift, Ticket } from 'lucide-react';
+import { ArrowLeft, ChevronRight, Calendar, MapPin, Star, CheckCircle, Sparkles, Users, Clock, Gift, Ticket } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { Card, CardContent } from '../components/ui/card';
 import { Badge } from '../components/ui/badge';
@@ -62,13 +61,10 @@ export function ViewCardDetailsPage({
   onPostCardsClick,
   onOffersClick,
   onContactUsClick,
-  onEsimsClick,
-  onHotelDiscountsClick,
   currentPage,
   user
 }: ViewCardDetailsPageProps) {
   // Card type state
-  const [cardType, setCardType] = useState<'unlimited' | 'flexi'>('unlimited');
   const { cardId } = useParams()
   const { data, isLoading } = useGetUserCardDetailsQuery(cardId)
   const navigate = useNavigate()
@@ -86,16 +82,6 @@ export function ViewCardDetailsPage({
     )
   }
 
-  // Mock data for the current pass
-  const currentPass = {
-    name: 'Melbourne- Unlimited Card',
-    status: 'Active',
-    date: '22/12/2024',
-    duration: '2 Days',
-    adults: 3,
-    kids: 3
-  };
-
   // Generate QR code pattern
   const generateQRPattern = () => {
     const size = 17;

From 4c15fa597d5cb3f6ca8d6b630672cff0cf45cfa7 Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Wed, 22 Apr 2026 23:52:06 +0530
Subject: [PATCH 03/11] remove the unused secure checkout file

---
 src/AppRouter.tsx                |   7 -
 src/pages/SecureCheckoutPage.tsx | 527 -------------------------------
 2 files changed, 534 deletions(-)
 delete mode 100644 src/pages/SecureCheckoutPage.tsx

diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index f875fdb..da7f45d 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -6,7 +6,6 @@ import { MelbournePage } from './pages/MelbournePage';
 import { PassesPage } from './pages/PassesPage';
 import { AttractionsPage } from './pages/AttractionsPage';
 import { AttractionDetailsPage } from './pages/AttractionDetailsPage';
-import { SecureCheckoutPage } from './pages/SecureCheckoutPage';
 import { BlogsPage } from './pages/BlogsPage';
 import { BlogDetailsPage } from './pages/BlogDetailsPage';
 import { FAQPage } from './components/FAQPage';
@@ -128,12 +127,6 @@ export function AppRouter({
                         </motion.div>
                     } />
 
-                    <Route path="/secure-checkout" element={
-                        <motion.div key="secure-checkout" {...pageTransition}>
-                            <SecureCheckoutPage {...commonNavHandlers} />
-                        </motion.div>
-                    } />
-
                     {/* Blog Routes */}
                     <Route path="/blogs" element={
                         <motion.div key="blogs" {...pageTransition}>
diff --git a/src/pages/SecureCheckoutPage.tsx b/src/pages/SecureCheckoutPage.tsx
deleted file mode 100644
index e987298..0000000
--- a/src/pages/SecureCheckoutPage.tsx
+++ /dev/null
@@ -1,527 +0,0 @@
-import { useState } from 'react';
-import { motion } from 'motion/react';
-import { ArrowLeft, Lock, Shield, CreditCard, Check, X, Tag } from 'lucide-react';
-import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
-import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
-import { Separator } from '../components/ui/separator';
-import { Badge } from '../components/ui/badge';
-import Navbar from '../components/Navbar';
-import { Footer } from '../components/Footer';
-
-interface User {
-  email: string;
-  name: string;
-}
-
-interface SecureCheckoutPageProps {
-  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;
-}
-
-export function SecureCheckoutPage({
-  onBackClick,
-  onHomeClick,
-  onMelbourneClick,
-  onPassesClick,
-  onCheckoutClick,
-  onSignInClick,
-  onSignOutClick,
-  onAttractionsClick,
-  onBlogsClick,
-  onHowItWorksClick,
-  onFAQClick,
-  onPrivacyPolicyClick,
-  onAboutUsClick,
-  onProfileClick,
-  onCityCardsClick,
-  onMagicItineraryClick,
-  onPostCardsClick,
-  onOffersClick,
-  onContactUsClick,
-  onEsimsClick,
-  onHotelDiscountsClick,
-  currentPage,
-  user
-}: SecureCheckoutPageProps) {
-  const [selectedTab, setSelectedTab] = useState('myself');
-  const [formData, setFormData] = useState({
-    firstName: 'Frank',
-    lastName: 'Adam S',
-    email: 'frank2023@mail.com',
-    phone: '',
-    travelDate: '',
-    billingAddress: '',
-    city: '',
-    country: 'England',
-    state: '',
-    zipCode: '000000'
-  });
-  const [discountCode, setDiscountCode] = useState('');
-  const [isEmailVerified, setIsEmailVerified] = useState(false);
-  const [showPaymentSuccess, setShowPaymentSuccess] = useState(false);
-
-  const orderSummary = {
-    item: 'Melbourne - Unlimited Card',
-    duration: '2 Days',
-    adults: 3,
-    kids: 3,
-    quantity: 1,
-    price: 49.80,
-    discount: 7.20,
-    tax: 2.24
-  };
-
-  const subtotal = orderSummary.price;
-  const discount = orderSummary.discount;
-  const total = subtotal - discount;
-
-  const handleInputChange = (field: string, value: string) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-  };
-
-  const handlePayment = () => {
-    setShowPaymentSuccess(true);
-    setTimeout(() => {
-      setShowPaymentSuccess(false);
-      onHomeClick();
-    }, 2000);
-  };
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Navbar 
-        onHomeClick={onHomeClick}
-        onMelbourneClick={onMelbourneClick}
-        onPassesClick={onPassesClick}
-        onCheckoutClick={onCheckoutClick}
-        onSignInClick={onSignInClick}
-        onSignOutClick={onSignOutClick}
-        onAttractionsClick={onAttractionsClick}
-        onBlogsClick={onBlogsClick}
-        onHowItWorksClick={onHowItWorksClick}
-        onFAQClick={onFAQClick}
-        onPrivacyPolicyClick={onPrivacyPolicyClick}
-        onAboutUsClick={onAboutUsClick}
-        onProfileClick={onProfileClick}
-        onCityCardsClick={onCityCardsClick}
-        onMagicItineraryClick={onMagicItineraryClick}
-        onPostCardsClick={onPostCardsClick}
-        onOffersClick={onOffersClick}
-        currentPage={currentPage}
-        isUserSignedIn={!!user}
-        user={user}
-      />
-
-      <div className="container mx-auto px-4 py-12">
-        {/* Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="mb-8"
-        >
-          <Button
-            variant="ghost"
-            onClick={onBackClick}
-            className="mb-6 p-0 hover:bg-transparent"
-          >
-            <ArrowLeft className="w-5 h-5 mr-2" />
-            Back
-          </Button>
-          
-          <div className="flex items-center gap-4 mb-2">
-            <h1 className="font-merchant text-3xl md:text-4xl leading-tight">
-              Secure <span className="text-primary">Checkout</span>
-            </h1>
-            <div className="flex items-center gap-2 text-green-600">
-              <Shield className="w-5 h-5" />
-              <span className="font-poppins text-sm font-medium">SSL Secured</span>
-            </div>
-          </div>
-          
-          <p className="text-muted-foreground">
-            Complete your purchase securely. Your payment information is protected.
-          </p>
-        </motion.div>
-
-        <div className="grid lg:grid-cols-3 gap-8">
-          {/* Checkout Form */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            animate={{ opacity: 1, x: 0 }}
-            className="lg:col-span-2"
-          >
-            <Card className="shadow-lg border-0">
-              <CardHeader className="pb-6">
-                <Tabs value={selectedTab} onValueChange={setSelectedTab} className="w-full">
-                  <TabsList className="grid w-fit grid-cols-2 bg-muted/50">
-                    <TabsTrigger value="myself" className="px-6">For myself</TabsTrigger>
-                    <TabsTrigger value="gift" className="px-6">To gift Someone</TabsTrigger>
-                  </TabsList>
-                </Tabs>
-              </CardHeader>
-
-              <CardContent className="space-y-8">
-                {/* Personal Information */}
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ delay: 0.1 }}
-                  className="space-y-6"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-medium">
-                      1
-                    </div>
-                    <h2 className="font-merchant text-xl font-medium leading-snug">Personal Information</h2>
-                  </div>
-
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="firstName">First Name</Label>
-                      <Input
-                        id="firstName"
-                        value={formData.firstName}
-                        onChange={(e) => handleInputChange('firstName', e.target.value)}
-                        className="h-12"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="lastName">Last Name</Label>
-                      <Input
-                        id="lastName"
-                        value={formData.lastName}
-                        onChange={(e) => handleInputChange('lastName', e.target.value)}
-                        className="h-12"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label htmlFor="email">Email Address</Label>
-                    <div className="relative">
-                      <Input
-                        id="email"
-                        type="email"
-                        value={formData.email}
-                        onChange={(e) => handleInputChange('email', e.target.value)}
-                        className="h-12 pr-20"
-                      />
-                      <Button
-                        size="sm"
-                        variant={isEmailVerified ? "default" : "outline"}
-                        className="absolute right-2 top-1/2 -translate-y-1/2 h-8"
-                        onClick={() => setIsEmailVerified(!isEmailVerified)}
-                      >
-                        {isEmailVerified ? (
-                          <>
-                            <Check className="w-3 h-3 mr-1" />
-                            Verified
-                          </>
-                        ) : (
-                          'Verify'
-                        )}
-                      </Button>
-                    </div>
-                  </div>
-
-                  <div className="grid md:grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="phone">Phone Number</Label>
-                      <Input
-                        id="phone"
-                        type="tel"
-                        placeholder="Enter mobile number"
-                        value={formData.phone}
-                        onChange={(e) => handleInputChange('phone', e.target.value)}
-                        className="h-12"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="travelDate">Select Travel Date</Label>
-                      <Input
-                        id="travelDate"
-                        type="date"
-                        value={formData.travelDate}
-                        onChange={(e) => handleInputChange('travelDate', e.target.value)}
-                        className="h-12"
-                      />
-                    </div>
-                  </div>
-                </motion.div>
-
-                <Separator />
-
-                {/* Billing Information */}
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ delay: 0.2 }}
-                  className="space-y-6"
-                >
-                  <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 bg-primary text-primary-foreground rounded-full flex items-center justify-center font-medium">
-                      2
-                    </div>
-                    <h2 className="font-merchant text-xl font-medium leading-snug">Billing Information</h2>
-                  </div>
-
-                  <div className="space-y-4">
-                    <div className="space-y-2">
-                      <Label htmlFor="billingAddress">Billing Address</Label>
-                      <Input
-                        id="billingAddress"
-                        placeholder="Enter Address"
-                        value={formData.billingAddress}
-                        onChange={(e) => handleInputChange('billingAddress', e.target.value)}
-                        className="h-12"
-                      />
-                    </div>
-
-                    <div className="grid md:grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <Label htmlFor="city">City</Label>
-                        <Input
-                          id="city"
-                          placeholder="Enter City"
-                          value={formData.city}
-                          onChange={(e) => handleInputChange('city', e.target.value)}
-                          className="h-12"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label htmlFor="country">Country</Label>
-                        <Input
-                          id="country"
-                          value={formData.country}
-                          onChange={(e) => handleInputChange('country', e.target.value)}
-                          className="h-12"
-                        />
-                      </div>
-                    </div>
-
-                    <div className="grid md:grid-cols-2 gap-4">
-                      <div className="space-y-2">
-                        <Label htmlFor="state">State</Label>
-                        <Input
-                          id="state"
-                          placeholder="State"
-                          value={formData.state}
-                          onChange={(e) => handleInputChange('state', e.target.value)}
-                          className="h-12"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label htmlFor="zipCode">Zip Code</Label>
-                        <Input
-                          id="zipCode"
-                          value={formData.zipCode}
-                          onChange={(e) => handleInputChange('zipCode', e.target.value)}
-                          className="h-12"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-              </CardContent>
-            </Card>
-          </motion.div>
-
-          {/* Order Summary */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            className="lg:col-span-1"
-          >
-            <Card className="shadow-lg border-0 sticky top-6">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <CreditCard className="w-5 h-5" />
-                  Order Summary
-                </CardTitle>
-              </CardHeader>
-
-              <CardContent className="space-y-6">
-                {/* Item Details */}
-                <div className="space-y-4">
-                  <div className="flex justify-between items-start">
-                    <div className="space-y-2">
-                      <h3 className="font-poppins font-medium">{orderSummary.item}</h3>
-                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                        <span>{orderSummary.duration}</span>
-                        <span>•</span>
-                        <span>Adults-{orderSummary.adults}</span>
-                        <span>•</span>
-                        <span>Kids-{orderSummary.kids}</span>
-                      </div>
-                      <div className="text-sm text-muted-foreground">
-                        Qty: {orderSummary.quantity}
-                      </div>
-                    </div>
-                    <div className="font-poppins text-lg font-medium">
-                      ${orderSummary.price.toFixed(2)}
-                    </div>
-                  </div>
-                </div>
-
-                <Separator />
-
-                {/* Discount Code */}
-                <div className="space-y-3">
-                  <div className="flex gap-2">
-                    <Input
-                      placeholder="Gift or discount code"
-                      value={discountCode}
-                      onChange={(e) => setDiscountCode(e.target.value)}
-                      className="flex-1"
-                    />
-                    <Button variant="outline" className="px-6">
-                      Apply
-                    </Button>
-                  </div>
-                </div>
-
-                <Separator />
-
-                {/* Price Breakdown */}
-                <div className="space-y-3">
-                  <div className="flex justify-between">
-                    <span>Subtotal</span>
-                    <span>${subtotal.toFixed(2)}</span>
-                  </div>
-                  <div className="flex justify-between text-green-600">
-                    <span>Discount</span>
-                    <span>-${discount.toFixed(2)}</span>
-                  </div>
-                </div>
-
-                <Separator />
-
-                {/* Total */}
-                <div className="space-y-2">
-                  <div className="flex justify-between items-center">
-                    <div>
-                      <div className="font-medium">Total</div>
-                      <div className="text-sm text-muted-foreground">
-                        Including ${orderSummary.tax.toFixed(2)} in taxes
-                      </div>
-                    </div>
-                    <div className="text-2xl font-bold text-primary">
-                      ${total.toFixed(2)}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Payment Button */}
-                <Button
-                  onClick={handlePayment}
-                  className="w-full h-14 text-lg bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary/80 relative overflow-hidden group"
-                  disabled={showPaymentSuccess}
-                >
-                  {showPaymentSuccess ? (
-                    <motion.div
-                      initial={{ scale: 0 }}
-                      animate={{ scale: 1 }}
-                      className="flex items-center gap-2"
-                    >
-                      <Check className="w-5 h-5" />
-                      Payment Successful!
-                    </motion.div>
-                  ) : (
-                    <>
-                      <Lock className="w-5 h-5 mr-2" />
-                      Pay ${total.toFixed(2)}
-                      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
-                    </>
-                  )}
-                </Button>
-
-                {/* Security Notice */}
-                <div className="text-xs text-muted-foreground leading-relaxed">
-                  Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our privacy policy.
-                </div>
-
-                {/* Trust Badges */}
-                <div className="flex items-center justify-center gap-4 pt-4">
-                  <div className="flex items-center gap-2 text-green-600">
-                    <Shield className="w-4 h-4" />
-                    <span className="text-xs">256-bit SSL</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-blue-600">
-                    <Lock className="w-4 h-4" />
-                    <span className="text-xs">Secure Payment</span>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </motion.div>
-        </div>
-      </div>
-
-      <Footer 
-        onHomeClick={onHomeClick}
-        onMelbourneClick={onMelbourneClick}
-        onPassesClick={onPassesClick}
-        onCheckoutClick={onCheckoutClick}
-        onSignInClick={onSignInClick}
-        onAttractionsClick={onAttractionsClick}
-        onBlogsClick={onBlogsClick}
-        onHowItWorksClick={onHowItWorksClick}
-        onFAQClick={onFAQClick}
-        onPrivacyPolicyClick={onPrivacyPolicyClick}
-        onAboutUsClick={onAboutUsClick}
-        onProfileClick={onProfileClick}
-        onCityCardsClick={onCityCardsClick}
-        onMagicItineraryClick={onMagicItineraryClick}
-        onPostCardsClick={onPostCardsClick}
-        onOffersClick={onOffersClick}
-      />
-
-      {/* Success Overlay */}
-      {showPaymentSuccess && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center"
-        >
-          <motion.div
-            initial={{ scale: 0, rotate: 180 }}
-            animate={{ scale: 1, rotate: 0 }}
-            className="bg-white p-8 rounded-2xl shadow-2xl text-center max-w-sm mx-4"
-          >
-            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-              <Check className="w-8 h-8 text-green-600" />
-            </div>
-            <h3 className="text-xl font-medium mb-2">Payment Successful!</h3>
-            <p className="text-muted-foreground">
-              Your Melbourne CityCard has been purchased successfully.
-            </p>
-          </motion.div>
-        </motion.div>
-      )}
-    </div>
-  );
-}
\ No newline at end of file

From 0c7667bf26b1a810ef7adbeaeb77c7ba79b72016 Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 00:13:37 +0530
Subject: [PATCH 04/11] remove console logs from checkout page

---
 src/pages/CheckoutPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/CheckoutPage.tsx b/src/pages/CheckoutPage.tsx
index 8ee3100..f74b099 100644
--- a/src/pages/CheckoutPage.tsx
+++ b/src/pages/CheckoutPage.tsx
@@ -241,9 +241,7 @@ function CheckoutConfigCard({
 
     const handleProceedToPayment = async () => {
         try {
-            console.log("Adding card to cart", cardBookingDetails);
             const response = await addCardToCart(cardBookingDetails);
-            console.log(response)
             const bookingId = response?.data?.id
             navigate(`/payment/${bookingId}`)
         } catch (error) {

From 0cb3d6c3266973ab4c4ef5eb5384c3b27af84441 Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 12:38:39 +0530
Subject: [PATCH 05/11] replace the registration modal with the registration
 page

---
 package-lock.json                |  15 +-
 src/AppRouter.tsx                |   6 +
 src/components/LoginModal.tsx    |  20 +-
 src/components/RegisterModal.tsx | 391 -------------------------------
 src/components/RegisterPage.tsx  | 226 ++++++++++++++++++
 src/pages/ProfilePage.tsx        |  80 -------
 6 files changed, 253 insertions(+), 485 deletions(-)
 delete mode 100644 src/components/RegisterModal.tsx
 create mode 100644 src/components/RegisterPage.tsx

diff --git a/package-lock.json b/package-lock.json
index abfa862..af5b3cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2257,6 +2257,7 @@
                   "version": "9.2.0",
                   "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-9.2.0.tgz",
                   "integrity": "sha512-YSzLC0t6VS9MDdPTynSMqU8IxrItFUjkDORALFT6sSMR/XZ5Vgm3RDp/Gk7z727MC4A9s4MFVel0gF0c7+kdrg==",
+                  "peer": true,
                   "engines": {
                         "node": ">=12.16"
                   }
@@ -3097,6 +3098,7 @@
                   "integrity": "sha512-yCAeZl7a0DxgNVteXFHt9+uyFbqXGy/ShC4BlcHkoE0AfGXYv/BUiplV72DjMYXHDBXFjhvr6DD1NiRVfB4j8g==",
                   "devOptional": true,
                   "license": "MIT",
+                  "peer": true,
                   "dependencies": {
                         "undici-types": "~6.21.0"
                   }
@@ -3107,6 +3109,7 @@
                   "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
                   "devOptional": true,
                   "license": "MIT",
+                  "peer": true,
                   "dependencies": {
                         "csstype": "^3.0.2"
                   }
@@ -3117,6 +3120,7 @@
                   "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
                   "devOptional": true,
                   "license": "MIT",
+                  "peer": true,
                   "peerDependencies": {
                         "@types/react": "^19.0.0"
                   }
@@ -3386,7 +3390,8 @@
                   "version": "8.6.0",
                   "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
                   "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-                  "license": "MIT"
+                  "license": "MIT",
+                  "peer": true
             },
             "node_modules/embla-carousel-react": {
                   "version": "8.6.0",
@@ -3981,6 +3986,7 @@
                   "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
                   "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
                   "license": "MIT",
+                  "peer": true,
                   "engines": {
                         "node": ">=12"
                   },
@@ -4038,6 +4044,7 @@
                   "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
                   "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
                   "license": "MIT",
+                  "peer": true,
                   "dependencies": {
                         "loose-envify": "^1.1.0"
                   },
@@ -4064,6 +4071,7 @@
                   "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
                   "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
                   "license": "MIT",
+                  "peer": true,
                   "dependencies": {
                         "loose-envify": "^1.1.0",
                         "scheduler": "^0.23.2"
@@ -4099,6 +4107,7 @@
                   "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
                   "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
                   "license": "MIT",
+                  "peer": true,
                   "dependencies": {
                         "@types/use-sync-external-store": "^0.0.6",
                         "use-sync-external-store": "^1.4.0"
@@ -4301,7 +4310,8 @@
                   "version": "5.0.1",
                   "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
                   "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-                  "license": "MIT"
+                  "license": "MIT",
+                  "peer": true
             },
             "node_modules/redux-thunk": {
                   "version": "3.1.0",
@@ -4564,6 +4574,7 @@
                   "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
                   "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
                   "license": "MIT",
+                  "peer": true,
                   "dependencies": {
                         "esbuild": "^0.25.0",
                         "fdir": "^6.4.4",
diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
index da7f45d..ed1dd57 100644
--- a/src/AppRouter.tsx
+++ b/src/AppRouter.tsx
@@ -36,6 +36,7 @@ import { PaymentCancelPage } from './pages/PaymentCancelPage';
 import { ItineraryViewPage } from './pages/ItineraryViewPage';
 import { CheckoutPage } from './pages/CheckoutPage';
 import { CreateMagicItineraryPage } from './pages/CreateMagicIternaryPage';
+import RegisterPage from './components/RegisterPage';
 
 // User type definition
 interface User {
@@ -283,6 +284,11 @@ export function AppRouter({
                             <CheckoutPage {...commonNavHandlers} />
                         </motion.div>
                     } />
+                    <Route path="/register" element={
+                        <motion.div key="register" {...pageTransition}>
+                            <RegisterPage {...commonNavHandlers} />
+                        </motion.div>
+                    } />
                  
                     <Route path="/payment/:bookingId" element={
                         <motion.div key="super-savings" {...pageTransition}>
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index b15cdc6..0fa4523 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -7,7 +7,7 @@ import { Label } from './ui/label';
 import { useAuth } from '../context/AuthContext';
 import { useLoginMutation, useVerifyOtpMutation } from '../Redux/services/auth.service';
 import { toast } from 'sonner';
-import { RegisterModal } from './RegisterModal';
+import { useNavigate } from 'react-router-dom';
 
 interface LoginModalProps {
   isOpen: boolean;
@@ -24,6 +24,7 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
   const [showRegisterModal, setShowRegisterModal] = useState(false);
 
   const { login } = useAuth();
+  const navigate = useNavigate()
 
   const [sendOtp, { isLoading: isSendingOtp }] = useLoginMutation();
   const [verifyOtp, { isLoading: isVerifying }] = useVerifyOtpMutation();
@@ -155,7 +156,11 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
       };
 
       login(userData);
-      toast.success("User Logged in successfully")
+      if (!response?.data?.userExists) {
+        navigate("/register")
+      } else {
+        toast.success("User Logged in successfully")
+      }
       onClose();
     } catch (err: any) {
       setError(err?.data?.message || 'Invalid OTP. Please try again.');
@@ -234,7 +239,7 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
                       </Button>
                       <div className="text-center">
                         <button
-                          onClick={() => setShowRegisterModal(true)}
+                          onClick={() => navigate("/register")}
                           className="font-poppins text-sm text-gray-600 hover:text-gray-800 transition-colors cursor-pointer"
                         >
                           Don't have an account? <span className="text-primary font-semibold">Register</span>
@@ -314,15 +319,6 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
         )
         }
       </AnimatePresence >
-      <RegisterModal
-        isOpen={showRegisterModal}
-        onClose={() => setShowRegisterModal(false)}
-        onLoginClick={() => {
-          setShowRegisterModal(false);
-          setStep('email');
-          setEmail('');
-        }}
-      />
     </>
   );
 }
\ No newline at end of file
diff --git a/src/components/RegisterModal.tsx b/src/components/RegisterModal.tsx
deleted file mode 100644
index e690a89..0000000
--- a/src/components/RegisterModal.tsx
+++ /dev/null
@@ -1,391 +0,0 @@
-import { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { X } from 'lucide-react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { useRegisterMutation } from '../Redux/services/auth.service';
-import { toast } from 'sonner';
-
-interface RegisterModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onLoginClick: () => void;
-}
-
-export function RegisterModal({ isOpen, onClose, onLoginClick }: RegisterModalProps) {
-    const [formData, setFormData] = useState({
-        firstName: '',
-        lastName: '',
-        emailAddress: '',
-        isdCode: '+91',
-        mobileNumber: '',
-        address1: '',
-        address2: '',
-        city: '',
-        state: '',
-        country: 'Australia',
-        postalCode: ''
-    });
-    const [helperText, setHelperText] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-
-    const [register, { isLoading: isRegistering }] = useRegisterMutation();
-
-    useEffect(() => {
-        if (!isOpen) {
-            setFormData({
-                firstName: '',
-                lastName: '',
-                emailAddress: '',
-                isdCode: '+91',
-                mobileNumber: '',
-                address1: '',
-                address2: '',
-                city: '',
-                state: '',
-                country: 'Australia',
-                postalCode: ''
-            });
-            setHelperText('');
-        }
-    }, [isOpen]);
-
-    const handleInputChange = (field: string, value: string) => {
-        setFormData(prev => ({ ...prev, [field]: value }));
-    };
-
-    const validateForm = () => {
-        if (!formData.firstName.trim()) {
-            toast.error('First name is required');
-            return false;
-        }
-        if (!formData.lastName.trim()) {
-            toast.error('Last name is required');
-            return false;
-        }
-        if (!formData.emailAddress.trim() || !formData.emailAddress.includes('@')) {
-            toast.error('Please enter a valid email address');
-            return false;
-        }
-        if (!formData.mobileNumber.trim()) {
-            toast.error('Mobile number is required');
-            return false;
-        }
-        if (!/^\d+$/.test(formData.mobileNumber.trim())) {
-            toast.error('Mobile number must contain only digits');
-            return false;
-        }
-        if (!formData.address1.trim()) {
-            toast.error('Address is required');
-            return false;
-        }
-        if (!formData.city.trim()) {
-            toast.error('City is required');
-            return false;
-        }
-        if (!formData.state.trim()) {
-            toast.error('State is required');
-            return false;
-        }
-        if (!formData.postalCode.trim()) {
-            toast.error('Postal code is required');
-            return false;
-        }
-        if (!/^\d+$/.test(formData.postalCode.trim())) {
-            toast.error('Postal code must contain only digits');
-            return false;
-        }
-        return true;
-    };
-
-
-    const handleRegister = async () => {
-        if (!validateForm()) {
-            return;
-        }
-
-        setHelperText('');
-        setIsLoading(true);
-
-        try {
-            const response = await register(formData).unwrap();
-            console.log('Registration response:', response);
-
-            toast.success('Registration successful! Please login.');
-            setTimeout(() => {
-                onLoginClick();
-                onClose();
-            }, 2000);
-        } catch (error: any) {
-            console.error('Registration error:', error);
-            const errorMessage = error?.data?.message || 'Registration failed. Please try again.';
-            toast.error(errorMessage);
-            setHelperText(errorMessage);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            handleRegister();
-        }
-    };
-
-    return (
-        <AnimatePresence>
-            {isOpen && (
-                <>
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{ duration: 0.2 }}
-                        className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
-                        onClick={onClose}
-                    />
-
-                    <motion.div
-                        initial={{ opacity: 0, scale: 0.95, y: 20 }}
-                        animate={{ opacity: 1, scale: 1, y: 0 }}
-                        exit={{ opacity: 0, scale: 0.95, y: 20 }}
-                        transition={{ duration: 0.3, ease: "easeOut" }}
-                        className="fixed inset-0 flex items-center justify-center z-50 p-4 overflow-y-auto"
-                    >
-                        <div className="bg-white rounded-3xl shadow-2xl w-full max-w-2xl mx-auto overflow-hidden max-h-[90vh] overflow-y-auto">
-                            <div className="relative px-8 pt-8 pb-4 top-0 bg-white z-10">
-                                <button
-                                    onClick={onClose}
-                                    className="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors cursor-pointer"
-                                >
-                                    <X className="w-4 h-4 text-gray-600" />
-                                </button>
-
-                                <h2 className="font-merchant text-2xl font-semibold text-gray-900 mb-2">
-                                    Create Account
-                                </h2>
-                                <p className="font-poppins text-sm text-gray-600">
-                                    Register to get started with City Cards
-                                </p>
-                            </div>
-
-                            <div className="px-8 pb-8">
-                                <div className="space-y-6">
-                                    {/* Personal Information */}
-                                    <div className="space-y-4">
-                                        <h3 className="font-poppins text-base font-semibold text-gray-800">Personal Information</h3>
-                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                            <div className="space-y-2">
-                                                <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                    First Name <span className="text-red-500">*</span>
-                                                </Label>
-                                                <Input
-                                                    placeholder="Enter your first name"
-                                                    value={formData.firstName}
-                                                    onChange={(e) => handleInputChange('firstName', e.target.value)}
-                                                    className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                                />
-                                            </div>
-
-                                            <div className="space-y-2">
-                                                <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                    Last Name <span className="text-red-500">*</span>
-                                                </Label>
-                                                <Input
-                                                    placeholder="Enter your last name"
-                                                    value={formData.lastName}
-                                                    onChange={(e) => handleInputChange('lastName', e.target.value)}
-                                                    className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div className="space-y-2">
-                                            <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                Email Address <span className="text-red-500">*</span>
-                                            </Label>
-                                            <Input
-                                                type="email"
-                                                placeholder="Enter your email address"
-                                                value={formData.emailAddress}
-                                                onChange={(e) => handleInputChange('emailAddress', e.target.value)}
-                                                className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                            />
-                                        </div>
-
-                                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                                            <div className="space-y-2">
-                                                <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                    ISD Code
-                                                </Label>
-                                                <Select value={formData.isdCode} onValueChange={(value: any) => handleInputChange('isdCode', value)}>
-                                                    <SelectTrigger className="h-12 bg-gray-50 border-0 rounded-xl cursor-pointer">
-                                                        <SelectValue placeholder="Select code" />
-                                                    </SelectTrigger>
-                                                    <SelectContent>
-                                                        <SelectItem value="+1">+1 (USA)</SelectItem>
-                                                        <SelectItem value="+44">+44 (UK)</SelectItem>
-                                                        <SelectItem value="+61">+61 (Australia)</SelectItem>
-                                                        <SelectItem value="+91">+91 (India)</SelectItem>
-                                                        <SelectItem value="+86">+86 (China)</SelectItem>
-                                                        <SelectItem value="+81">+81 (Japan)</SelectItem>
-                                                        <SelectItem value="+49">+49 (Germany)</SelectItem>
-                                                        <SelectItem value="+33">+33 (France)</SelectItem>
-                                                    </SelectContent>
-                                                </Select>
-                                            </div>
-
-                                            <div className="md:col-span-2 space-y-2">
-                                                <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                    Mobile Number <span className="text-red-500">*</span>
-                                                </Label>
-                                                <Input
-                                                    type="tel"
-                                                    placeholder="Enter your mobile number"
-                                                    value={formData.mobileNumber}
-                                                    onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
-                                                    className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    {/* Address Information */}
-                                    <div className="space-y-4">
-                                        <h3 className="font-poppins text-base font-semibold text-gray-800">Address Information</h3>
-
-                                        <div className="space-y-2">
-                                            <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                Address Line 1 <span className="text-red-500">*</span>
-                                            </Label>
-                                            <Input
-                                                placeholder="Enter street address"
-                                                value={formData.address1}
-                                                onChange={(e) => handleInputChange('address1', e.target.value)}
-                                                className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                            />
-                                        </div>
-
-                                        <div className="space-y-2">
-                                            <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                Address Line 2
-                                            </Label>
-                                            <Input
-                                                placeholder="Enter apartment, suite, unit (optional)"
-                                                value={formData.address2}
-                                                onChange={(e) => handleInputChange('address2', e.target.value)}
-                                                className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                            />
-                                        </div>
-
-                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                            <div className="space-y-2">
-                                                <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                    City <span className="text-red-500">*</span>
-                                                </Label>
-                                                <Input
-                                                    placeholder="Enter city name"
-                                                    value={formData.city}
-                                                    onChange={(e) => handleInputChange('city', e.target.value)}
-                                                    className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                                />
-                                            </div>
-
-                                            <div className="space-y-2">
-                                                <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                    State <span className="text-red-500">*</span>
-                                                </Label>
-                                                <Input
-                                                    placeholder="Enter state name"
-                                                    value={formData.state}
-                                                    onChange={(e) => handleInputChange('state', e.target.value)}
-                                                    className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                            <div className="space-y-2">
-                                                <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                    Country <span className="text-red-500">*</span>
-                                                </Label>
-                                                <Select value={formData.country} onValueChange={(value: any) => handleInputChange('country', value)}>
-                                                    <SelectTrigger className="h-12 bg-gray-50 border-0 rounded-xl cursor-pointer">
-                                                        <SelectValue placeholder="Select country" />
-                                                    </SelectTrigger>
-                                                    <SelectContent>
-                                                        <SelectItem value="Australia">Australia</SelectItem>
-                                                        <SelectItem value="United States">United States</SelectItem>
-                                                        <SelectItem value="United Kingdom">United Kingdom</SelectItem>
-                                                        <SelectItem value="Canada">Canada</SelectItem>
-                                                        <SelectItem value="India">India</SelectItem>
-                                                        <SelectItem value="Germany">Germany</SelectItem>
-                                                        <SelectItem value="France">France</SelectItem>
-                                                        <SelectItem value="Japan">Japan</SelectItem>
-                                                    </SelectContent>
-                                                </Select>
-                                            </div>
-
-                                            <div className="space-y-2">
-                                                <Label className="font-poppins text-sm font-medium text-gray-700">
-                                                    Postal Code <span className="text-red-500">*</span>
-                                                </Label>
-                                                <Input
-                                                    placeholder="Enter postal code"
-                                                    value={formData.postalCode}
-                                                    onChange={(e) => handleInputChange('postalCode', e.target.value)}
-                                                    className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
-                                                />
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    {helperText && (
-                                        <p className={`font-poppins text-xs ${helperText.includes('successful') ? 'text-green-600' : 'text-red-500'}`}>
-                                            {helperText}
-                                        </p>
-                                    )}
-
-                                    <Button
-                                        onClick={handleRegister}
-                                        disabled={isLoading || isRegistering}
-                                        className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl transition-colors cursor-pointer"
-                                    >
-                                        {isLoading || isRegistering ? (
-                                            <div className="flex items-center gap-2">
-                                                <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
-                                                Creating Account...
-                                            </div>
-                                        ) : (
-                                            <>
-                                                Register
-                                                <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                                                </svg>
-                                            </>
-                                        )}
-                                    </Button>
-
-                                    <div className="text-center">
-                                        <button
-                                            onClick={() => {
-                                                onLoginClick();
-                                                onClose();
-                                            }}
-                                            className="font-poppins text-sm text-gray-600 hover:text-gray-800 transition-colors cursor-pointer"
-                                        >
-                                            Already have an account? <span className="text-primary font-semibold">Login</span>
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </motion.div>
-                </>
-            )}
-        </AnimatePresence>
-    );
-}
diff --git a/src/components/RegisterPage.tsx b/src/components/RegisterPage.tsx
new file mode 100644
index 0000000..9908650
--- /dev/null
+++ b/src/components/RegisterPage.tsx
@@ -0,0 +1,226 @@
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { useRegisterMutation } from '../Redux/services/auth.service';
+import { toast } from 'sonner';
+import { useAuth } from '../context/AuthContext';
+import Navbar from './Navbar';
+import { Footer } from './Footer';
+import { useNavigate } from 'react-router-dom';
+
+export default function RegisterPage() {
+    const { login, user } = useAuth();
+
+    const [formData, setFormData] = useState({
+        firstName: '',
+        lastName: '',
+        emailAddress: user?.email ?? "",
+        isdCode: '',
+        mobileNumber: '',
+        address1: '',
+        address2: '',
+        city: '',
+        state: '',
+        country: '',
+        postalCode: ''
+    });
+
+    const [helperText, setHelperText] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+
+    const navigate = useNavigate()
+
+    const [register, { isLoading: isRegistering }] = useRegisterMutation();
+
+    const emailAddress = user?.email
+
+
+    const handleInputChange = (field: string, value: string) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    };
+
+    const validateForm = () => {
+        if (!formData.firstName.trim()) return toast.error('First name is required'), false;
+        if (!formData.lastName.trim()) return toast.error('Last name is required'), false;
+        if (!formData.emailAddress.includes('@')) return toast.error('Invalid email address'), false;
+        if (!formData.isdCode.startsWith("+")) toast.error("ISD code must start with '+'"), false;
+        if (!/^\+\d+$/.test(formData.isdCode)) toast.error("ISD code must contain only numbers after '+'"), false;
+        if (!/^\d+$/.test(formData.mobileNumber)) return toast.error('Invalid mobile number'), false;
+        if (!formData.address1.trim()) return toast.error('Address required'), false;
+        if (!formData.city.trim()) return toast.error('City required'), false;
+        if (!formData.state.trim()) return toast.error('State required'), false;
+        if (!/^\d+$/.test(formData.postalCode)) return toast.error('Postal code should only contain numbers'), false;
+        return true;
+    };
+
+    const handleRegister = async () => {
+        if (!validateForm()) return;
+
+        setIsLoading(true);
+        setHelperText('');
+
+        try {
+            const response = await register(formData).unwrap();
+            toast.success('Registration successful!');
+            const userData = {
+                userId: response?.user?.id,
+                email: response?.email || formData.emailAddress,
+                name: response?.name || formData.emailAddress.split('@')[0].charAt(0).toUpperCase() + formData.emailAddress.split('@')[0].slice(1),
+                accessToken: response?.accessToken,
+            };
+
+            login(userData);
+            navigate("/")
+        } catch (err: any) {
+            const msg = err?.data?.message || 'Registration failed';
+            toast.error(msg);
+            setHelperText(msg);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex flex-col bg-gray-50 w-full">
+            {/* Navbar */}
+            <Navbar activeCity="" />
+            {/* Main Content */}
+            <div className="flex-grow w-full px-6 md:px-10 py-10 mt-20">
+
+                <div className="w-full max-w-5xl mx-auto">
+
+                    {/* Header */}
+                    <div className="mb-8">
+                        <h2 className="font-merchant text-3xl font-semibold text-gray-900 mb-2">
+                            Create Account
+                        </h2>
+                        <p className="font-poppins text-gray-600">
+                            Register to get started with City Cards
+                        </p>
+                    </div>
+
+                    {/* Form Container */}
+                    <div className="bg-white rounded-2xl border border-gray-200 p-8 space-y-8">
+
+                        {/* Personal Info */}
+                        <div className="space-y-4">
+                            <h3 className="font-poppins font-semibold text-gray-800 text-lg">
+                                Personal Information
+                            </h3>
+
+                            <div className="grid md:grid-cols-2 gap-6">
+                                <Input
+                                    placeholder="First Name"
+                                    value={formData.firstName}
+                                    onChange={(e) => handleInputChange('firstName', e.target.value)}
+                                    className="h-12 bg-gray-50 border-0 rounded-xl"
+                                />
+                                <Input
+                                    placeholder="Last Name"
+                                    value={formData.lastName}
+                                    onChange={(e) => handleInputChange('lastName', e.target.value)}
+                                    className="h-12 bg-gray-50 border-0 rounded-xl"
+                                />
+                            </div>
+
+                            <Input
+                                type="email"
+                                placeholder="Email Address"
+                                value={emailAddress}
+                                onChange={(e) => handleInputChange('emailAddress', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl"
+                            />
+
+                            <div className="grid md:grid-cols-3 gap-6">
+                                <Input
+                                    placeholder="ISD Code"
+                                    value={formData.isdCode}
+                                    onChange={(e) => handleInputChange('isdCode', e.target.value)}
+                                    className="h-12 bg-gray-50 border-0 rounded-xl"
+                                />
+                                <div className="md:col-span-2">
+                                    <Input
+                                        placeholder="Mobile Number"
+                                        value={formData.mobileNumber}
+                                        onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
+                                        className="h-12 bg-gray-50 border-0 rounded-xl"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Address */}
+                        <div className="space-y-4">
+                            <h3 className="font-poppins font-semibold text-gray-800 text-lg">
+                                Address Information
+                            </h3>
+
+                            <Input
+                                placeholder="Address Line 1"
+                                value={formData.address1}
+                                onChange={(e) => handleInputChange('address1', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl"
+                            />
+
+                            <Input
+                                placeholder="Address Line 2"
+                                value={formData.address2}
+                                onChange={(e) => handleInputChange('address2', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl"
+                            />
+
+                            <div className="grid md:grid-cols-2 gap-6">
+                                <Input
+                                    placeholder="City"
+                                    value={formData.city}
+                                    onChange={(e) => handleInputChange('city', e.target.value)}
+                                    className="h-12 bg-gray-50 border-0 rounded-xl"
+                                />
+                                <Input
+                                    placeholder="State"
+                                    value={formData.state}
+                                    onChange={(e) => handleInputChange('state', e.target.value)}
+                                    className="h-12 bg-gray-50 border-0 rounded-xl"
+                                />
+                            </div>
+
+                            <div className="grid md:grid-cols-2 gap-6">
+                                <Input
+                                    placeholder="Country"
+                                    value={formData.country}
+                                    onChange={(e) => handleInputChange('country', e.target.value)}
+                                    className="h-12 bg-gray-50 border-0 rounded-xl"
+                                />
+                                <Input
+                                    placeholder="Postal Code"
+                                    value={formData.postalCode}
+                                    onChange={(e) => handleInputChange('postalCode', e.target.value)}
+                                    className="h-12 bg-gray-50 border-0 rounded-xl"
+                                />
+                            </div>
+                        </div>
+
+                        {helperText && (
+                            <p className="text-sm text-red-500">{helperText}</p>
+                        )}
+
+                        <Button
+                            onClick={handleRegister}
+                            disabled={isLoading || isRegistering}
+                            className="w-full cursor-pointer bg-gray-800 hover:bg-gray-900 md:px-10 h-12 text-white rounded-xl"
+                        >
+                            {isLoading || isRegistering ? 'Registering...' : 'Register'}
+                        </Button>
+
+                    </div>
+                </div>
+            </div>
+
+            {/* Footer */}
+            <div className="mt-auto">
+                <Footer />
+            </div>
+
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 7b1550f..9cf0d70 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -60,71 +60,6 @@ interface ProfilePageProps {
   currentPage: string;
 }
 
-// Mock passes data
-const mockPasses = [
-  {
-    id: '1',
-    name: 'Melbourne Unlimited Card',
-    city: 'Melbourne',
-    type: 'Unlimited Pass',
-    status: 'active',
-    price: 149.00,
-    originalPrice: 249.00,
-    discount: 40,
-    attractions: 25,
-    validFrom: '2024-01-15',
-    validUntil: '2024-01-22',
-    daysRemaining: 3,
-    image: 'https://images.unsplash.com/photo-1514395462725-fb4566210144?w=400',
-    usedAttractions: 8
-  },
-  {
-    id: '2',
-    name: 'Melbourne Selective Card',
-    city: 'Melbourne',
-    type: 'Flexi Pass',
-    status: 'active',
-    price: 89.00,
-    originalPrice: 149.00,
-    discount: 40,
-    attractions: 12,
-    validFrom: '2024-02-01',
-    validUntil: '2024-02-08',
-    daysRemaining: 12,
-    image: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?w=400',
-    usedAttractions: 3
-  },
-  {
-    id: '3',
-    name: 'Sydney Explorer Pass',
-    city: 'Sydney',
-    type: 'Standard Pass',
-    status: 'expired',
-    price: 89.00,
-    originalPrice: 149.00,
-    discount: 40,
-    attractions: 15,
-    validFrom: '2023-12-01',
-    validUntil: '2023-12-08',
-    daysRemaining: 0,
-    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400',
-    usedAttractions: 12
-  }
-];
-
-// Mock itineraries data
-const mockItineraries = [
-  {
-    id: '1',
-    name: 'Melbourne Unlimited Card',
-    city: 'Melbourne',
-    duration: '7 days',
-    attractions: 25,
-    createdDate: '2024-01-15',
-    status: 'active'
-  }
-];
-
 export function ProfilePage({
   onBackClick,
   onHomeClick,
@@ -342,21 +277,6 @@ export function ProfilePage({
 
                         <div>
                           <Label htmlFor="country" className="font-poppins font-light">Country</Label>
-                          {/* <Select value={formData.country} onValueChange={(value) => handleInputChange('country', value)}>
-                            <SelectTrigger className="mt-1">
-                              <SelectValue placeholder="Select country" />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="us">United States</SelectItem>
-                              <SelectItem value="au">Australia</SelectItem>
-                              <SelectItem value="uk">United Kingdom</SelectItem>
-                              <SelectItem value="ca">Canada</SelectItem>
-                              <SelectItem value="de">Germany</SelectItem>
-                              <SelectItem value="fr">France</SelectItem>
-                              <SelectItem value="in">India</SelectItem>
-                              <SelectItem value="jp">Japan</SelectItem>
-                            </SelectContent>
-                          </Select> */}
                           <Input
                             id="country"
                             value={formData.country}

From 0d83118938d70b4c92120a69ca7deacbf0f2c1af Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 13:31:46 +0530
Subject: [PATCH 06/11] remove from local and session storage when signing out

---
 src/components/LoginModal.tsx   |  21 +--
 src/components/RegisterPage.tsx | 296 ++++++++++++++++++--------------
 src/context/AuthContext.tsx     |   2 +
 3 files changed, 178 insertions(+), 141 deletions(-)

diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index 0fa4523..11413ff 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -21,7 +21,6 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
   const [countdown, setCountdown] = useState(0);
   const [helperText, setHelperText] = useState('');
   const [error, setError] = useState('');
-  const [showRegisterModal, setShowRegisterModal] = useState(false);
 
   const { login } = useAuth();
   const navigate = useNavigate()
@@ -148,17 +147,19 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
         otp: otpString
       }).unwrap();
 
-      const userData = {
-        userId: response?.user?.id,
-        email: response?.email || email,
-        name: response?.name || email.split('@')[0].charAt(0).toUpperCase() + email.split('@')[0].slice(1),
-        accessToken: response?.accessToken,
-      };
-
-      login(userData);
-      if (!response?.data?.userExists) {
+      
+      if (!response?.userExists) {
+        localStorage.setItem("userEmail",email)
         navigate("/register")
       } else {
+        const userData = {
+          userId: response?.user?.id,
+          email: response?.email || email,
+          name: response?.name || email.split('@')[0].charAt(0).toUpperCase() + email.split('@')[0].slice(1),
+          accessToken: response?.accessToken,
+        };
+
+        login(userData);
         toast.success("User Logged in successfully")
       }
       onClose();
diff --git a/src/components/RegisterPage.tsx b/src/components/RegisterPage.tsx
index 9908650..f6ea833 100644
--- a/src/components/RegisterPage.tsx
+++ b/src/components/RegisterPage.tsx
@@ -7,14 +7,15 @@ import { useAuth } from '../context/AuthContext';
 import Navbar from './Navbar';
 import { Footer } from './Footer';
 import { useNavigate } from 'react-router-dom';
+import { Label } from './ui/label';
 
 export default function RegisterPage() {
-    const { login, user } = useAuth();
-
+    const { login } = useAuth();
+    const email = localStorage.getItem("userEmail")
     const [formData, setFormData] = useState({
         firstName: '',
         lastName: '',
-        emailAddress: user?.email ?? "",
+        emailAddress: email ?? "",
         isdCode: '',
         mobileNumber: '',
         address1: '',
@@ -32,9 +33,6 @@ export default function RegisterPage() {
 
     const [register, { isLoading: isRegistering }] = useRegisterMutation();
 
-    const emailAddress = user?.email
-
-
     const handleInputChange = (field: string, value: string) => {
         setFormData(prev => ({ ...prev, [field]: value }));
     };
@@ -68,8 +66,8 @@ export default function RegisterPage() {
                 name: response?.name || formData.emailAddress.split('@')[0].charAt(0).toUpperCase() + formData.emailAddress.split('@')[0].slice(1),
                 accessToken: response?.accessToken,
             };
-
             login(userData);
+            localStorage.removeItem("userEmail")
             navigate("/")
         } catch (err: any) {
             const msg = err?.data?.message || 'Registration failed';
@@ -81,146 +79,182 @@ export default function RegisterPage() {
     };
 
     return (
-        <div className="min-h-screen flex flex-col bg-gray-50 w-full">
-            {/* Navbar */}
-            <Navbar activeCity="" />
-            {/* Main Content */}
-            <div className="flex-grow w-full px-6 md:px-10 py-10 mt-20">
+       <div className="min-h-screen flex flex-col bg-gray-50 w-full">
+    {/* Navbar */}
+    <Navbar activeCity="" />
 
-                <div className="w-full max-w-5xl mx-auto">
+    {/* Main Content */}
+    <div className="flex-grow w-full px-6 md:px-10 py-10 mt-20">
+        <div className="w-full max-w-5xl mx-auto">
 
-                    {/* Header */}
-                    <div className="mb-8">
-                        <h2 className="font-merchant text-3xl font-semibold text-gray-900 mb-2">
-                            Create Account
-                        </h2>
-                        <p className="font-poppins text-gray-600">
-                            Register to get started with City Cards
-                        </p>
+            {/* Header */}
+            <div className="mb-8">
+                <h2 className="font-merchant text-3xl font-semibold text-gray-900 mb-2">
+                    Create Account
+                </h2>
+                <p className="font-poppins text-gray-600">
+                    Register to get started with City Cards
+                </p>
+            </div>
+
+            {/* Form Container */}
+            <div className="bg-white rounded-2xl border border-gray-200 p-8 space-y-8">
+
+                {/* Personal Info */}
+                <div className="space-y-4">
+                    <h3 className="font-poppins font-semibold text-gray-800 text-lg">
+                        Personal Information
+                    </h3>
+
+                    <div className="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <Label htmlFor="firstName" className="font-poppins font-light">First Name</Label>
+                            <Input
+                                id="firstName"
+                                value={formData.firstName}
+                                onChange={(e) => handleInputChange('firstName', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                            />
+                        </div>
+
+                        <div>
+                            <Label htmlFor="lastName" className="font-poppins font-light">Last Name</Label>
+                            <Input
+                                id="lastName"
+                                value={formData.lastName}
+                                onChange={(e) => handleInputChange('lastName', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                            />
+                        </div>
                     </div>
 
-                    {/* Form Container */}
-                    <div className="bg-white rounded-2xl border border-gray-200 p-8 space-y-8">
-
-                        {/* Personal Info */}
-                        <div className="space-y-4">
-                            <h3 className="font-poppins font-semibold text-gray-800 text-lg">
-                                Personal Information
-                            </h3>
-
-                            <div className="grid md:grid-cols-2 gap-6">
-                                <Input
-                                    placeholder="First Name"
-                                    value={formData.firstName}
-                                    onChange={(e) => handleInputChange('firstName', e.target.value)}
-                                    className="h-12 bg-gray-50 border-0 rounded-xl"
-                                />
-                                <Input
-                                    placeholder="Last Name"
-                                    value={formData.lastName}
-                                    onChange={(e) => handleInputChange('lastName', e.target.value)}
-                                    className="h-12 bg-gray-50 border-0 rounded-xl"
-                                />
-                            </div>
+                    <div>
+                        <Label htmlFor="emailAddress" className="font-poppins font-light">Email Address</Label>
+                        <Input
+                            id="emailAddress"
+                            type="email"
+                            value={formData.emailAddress}
+                            disabled
+                            onChange={(e) => handleInputChange('emailAddress', e.target.value)}
+                            className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                        />
+                    </div>
 
+                    <div className="grid md:grid-cols-3 gap-6">
+                        <div>
+                            <Label htmlFor="isdCode" className="font-poppins font-light">ISD Code</Label>
                             <Input
-                                type="email"
-                                placeholder="Email Address"
-                                value={emailAddress}
-                                onChange={(e) => handleInputChange('emailAddress', e.target.value)}
-                                className="h-12 bg-gray-50 border-0 rounded-xl"
+                                id="isdCode"
+                                placeholder="example: +91"
+                                value={formData.isdCode}
+                                onChange={(e) => handleInputChange('isdCode', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
                             />
-
-                            <div className="grid md:grid-cols-3 gap-6">
-                                <Input
-                                    placeholder="ISD Code"
-                                    value={formData.isdCode}
-                                    onChange={(e) => handleInputChange('isdCode', e.target.value)}
-                                    className="h-12 bg-gray-50 border-0 rounded-xl"
-                                />
-                                <div className="md:col-span-2">
-                                    <Input
-                                        placeholder="Mobile Number"
-                                        value={formData.mobileNumber}
-                                        onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
-                                        className="h-12 bg-gray-50 border-0 rounded-xl"
-                                    />
-                                </div>
-                            </div>
                         </div>
 
-                        {/* Address */}
-                        <div className="space-y-4">
-                            <h3 className="font-poppins font-semibold text-gray-800 text-lg">
-                                Address Information
-                            </h3>
-
+                        <div className="md:col-span-2">
+                            <Label htmlFor="mobileNumber" className="font-poppins font-light">Mobile Number</Label>
                             <Input
-                                placeholder="Address Line 1"
-                                value={formData.address1}
-                                onChange={(e) => handleInputChange('address1', e.target.value)}
-                                className="h-12 bg-gray-50 border-0 rounded-xl"
+                                id="mobileNumber"
+                                value={formData.mobileNumber}
+                                onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
                             />
-
-                            <Input
-                                placeholder="Address Line 2"
-                                value={formData.address2}
-                                onChange={(e) => handleInputChange('address2', e.target.value)}
-                                className="h-12 bg-gray-50 border-0 rounded-xl"
-                            />
-
-                            <div className="grid md:grid-cols-2 gap-6">
-                                <Input
-                                    placeholder="City"
-                                    value={formData.city}
-                                    onChange={(e) => handleInputChange('city', e.target.value)}
-                                    className="h-12 bg-gray-50 border-0 rounded-xl"
-                                />
-                                <Input
-                                    placeholder="State"
-                                    value={formData.state}
-                                    onChange={(e) => handleInputChange('state', e.target.value)}
-                                    className="h-12 bg-gray-50 border-0 rounded-xl"
-                                />
-                            </div>
-
-                            <div className="grid md:grid-cols-2 gap-6">
-                                <Input
-                                    placeholder="Country"
-                                    value={formData.country}
-                                    onChange={(e) => handleInputChange('country', e.target.value)}
-                                    className="h-12 bg-gray-50 border-0 rounded-xl"
-                                />
-                                <Input
-                                    placeholder="Postal Code"
-                                    value={formData.postalCode}
-                                    onChange={(e) => handleInputChange('postalCode', e.target.value)}
-                                    className="h-12 bg-gray-50 border-0 rounded-xl"
-                                />
-                            </div>
                         </div>
-
-                        {helperText && (
-                            <p className="text-sm text-red-500">{helperText}</p>
-                        )}
-
-                        <Button
-                            onClick={handleRegister}
-                            disabled={isLoading || isRegistering}
-                            className="w-full cursor-pointer bg-gray-800 hover:bg-gray-900 md:px-10 h-12 text-white rounded-xl"
-                        >
-                            {isLoading || isRegistering ? 'Registering...' : 'Register'}
-                        </Button>
-
                     </div>
                 </div>
-            </div>
 
-            {/* Footer */}
-            <div className="mt-auto">
-                <Footer />
-            </div>
+                {/* Address */}
+                <div className="space-y-4">
+                    <h3 className="font-poppins font-semibold text-gray-800 text-lg">
+                        Address Information
+                    </h3>
 
+                    <div>
+                        <Label htmlFor="address1" className="font-poppins font-light">Address Line 1</Label>
+                        <Input
+                            id="address1"
+                            value={formData.address1}
+                            onChange={(e) => handleInputChange('address1', e.target.value)}
+                            className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                        />
+                    </div>
+
+                    <div>
+                        <Label htmlFor="address2" className="font-poppins font-light">Address Line 2</Label>
+                        <Input
+                            id="address2"
+                            value={formData.address2}
+                            onChange={(e) => handleInputChange('address2', e.target.value)}
+                            className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                        />
+                    </div>
+
+                    <div className="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <Label htmlFor="city" className="font-poppins font-light">City</Label>
+                            <Input
+                                id="city"
+                                value={formData.city}
+                                onChange={(e) => handleInputChange('city', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                            />
+                        </div>
+
+                        <div>
+                            <Label htmlFor="state" className="font-poppins font-light">State</Label>
+                            <Input
+                                id="state"
+                                value={formData.state}
+                                onChange={(e) => handleInputChange('state', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <Label htmlFor="country" className="font-poppins font-light">Country</Label>
+                            <Input
+                                id="country"
+                                value={formData.country}
+                                onChange={(e) => handleInputChange('country', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                            />
+                        </div>
+
+                        <div>
+                            <Label htmlFor="postalCode" className="font-poppins font-light">Postal Code</Label>
+                            <Input
+                                id="postalCode"
+                                value={formData.postalCode}
+                                onChange={(e) => handleInputChange('postalCode', e.target.value)}
+                                className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                {helperText && (
+                    <p className="text-sm text-red-500">{helperText}</p>
+                )}
+
+                <Button
+                    onClick={handleRegister}
+                    disabled={isLoading || isRegistering}
+                    className="w-full cursor-pointer bg-gray-800 hover:bg-gray-900 md:px-10 h-12 text-white rounded-xl"
+                >
+                    {isLoading || isRegistering ? 'Registering...' : 'Register'}
+                </Button>
+
+            </div>
         </div>
+    </div>
+
+    {/* Footer */}
+    <div className="mt-auto">
+        <Footer />
+    </div>
+</div>
     );
 }
\ No newline at end of file
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 50dba2a..b3cdda3 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -40,6 +40,8 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         localStorage.removeItem("user")
         localStorage.removeItem("accessToken")
         localStorage.removeItem("userId")
+        localStorage.removeItem("userEmail")
+        sessionStorage.removeItem("citySelected")
         navigate("/")
     }
 

From 517a7c044619bae239ffbdb136aaa1dd7d75e44f Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 13:34:58 +0530
Subject: [PATCH 07/11] remove the register button from logout modal

---
 src/components/LoginModal.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index 11413ff..be1c4e5 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -238,14 +238,7 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
                       >
                         {isSendingOtp ? 'Sending OTP...' : 'Send OTP'}
                       </Button>
-                      <div className="text-center">
-                        <button
-                          onClick={() => navigate("/register")}
-                          className="font-poppins text-sm text-gray-600 hover:text-gray-800 transition-colors cursor-pointer"
-                        >
-                          Don't have an account? <span className="text-primary font-semibold">Register</span>
-                        </button>
-                      </div>
+                     
                     </div>
                   ) : (
                     <div className="space-y-6">

From cee671cf3221e0e322f0d21d9a1fa2e52be4271b Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 13:56:30 +0530
Subject: [PATCH 08/11] replace passes with cards in profile page

---
 src/pages/ProfilePage.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 9cf0d70..a05d5a9 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -193,7 +193,7 @@ export function ProfilePage({
               <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pr-2">Profile</span>
             </h1>
             <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600">
-              Manage your account, passes, and travel itineraries
+              Manage your account, cards, and travel itineraries
             </p>
           </motion.div>
         </div>
@@ -206,7 +206,7 @@ export function ProfilePage({
             {/* Tab Navigation */}
             <TabsList className="grid w-full grid-cols-3 lg:w-[400px]">
               <TabsTrigger value="profile" className="font-poppins font-light">My Profile</TabsTrigger>
-              <TabsTrigger value="passes" className="font-poppins font-light">My Passes</TabsTrigger>
+              <TabsTrigger value="passes" className="font-poppins font-light">My Cards</TabsTrigger>
               <TabsTrigger value="itineraries" className="font-poppins font-light">My Itineraries</TabsTrigger>
             </TabsList>
 
@@ -536,7 +536,7 @@ export function ProfilePage({
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.5, delay: 0.2 }}
               >
-                <h2 className="font-poppins text-2xl mb-6 font-normal">Active Passes</h2>
+                <h2 className="font-poppins text-2xl mb-6 font-normal">Active Cards</h2>
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                   {activeCards.map((card: any) => (
                     <Card key={card.id} className="overflow-hidden">
@@ -613,14 +613,14 @@ export function ProfilePage({
                 </div>
               </motion.div>
 
-              {/* Expired Passes */}
+              {/* Expired Cards */}
               {expiredCards.length > 0 && (
                 <motion.div
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: 0.4 }}
                 >
-                  <h2 className="font-poppins text-2xl mb-6 font-normal">Expired Passes</h2>
+                  <h2 className="font-poppins text-2xl mb-6 font-normal">Expired Cards</h2>
                   <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     {expiredCards.map((card: any) => (
                       <Card key={card.id} className="overflow-hidden opacity-60">

From 23d1eaa43a167d5de8bbdefe96f6a1886a3a8b7c Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 14:02:57 +0530
Subject: [PATCH 09/11] add favicon to the app

---
 index.html                            |  27 +++++++++++++-------------
 src/assets/citycards customer app.png | Bin 0 -> 12905 bytes
 2 files changed, 14 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/citycards customer app.png

diff --git a/index.html b/index.html
index daa01f8..7ce70fd 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
 
-  <!DOCTYPE html>
-  <html lang="en">
-    <head>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>CityCards Customer-web</title>
-    </head>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/png" href="/src/assets/citycards customer app.png" />
+  <title>CityCards Customer-web</title>
+</head>
 
-    <body>
-      <div id="root"></div>
-      <script type="module" src="/src/main.tsx"></script>
-    </body>
-  </html>
-  
\ No newline at end of file
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/assets/citycards customer app.png b/src/assets/citycards customer app.png
new file mode 100644
index 0000000000000000000000000000000000000000..7caa18fcfc9ae19968c7b7a0e2fe25d0328c69f8
GIT binary patch
literal 12905
zcmX}TcQ~Bi^FM4i8(BfD6<t_e^cF;2y+?~qL`w*Q=zWRkH98SBLSh9`g6K7(3!*1l
z^b%c^-`V%)`96Q_b?x5goH=u5=FC0wn%PM02g<}ZX>Q`-;SsB<DCpwhK@xBuI6ioS
zX%^|j!$aVyD#$+chHPeQmg?(g9#h`fX4f`%h6)x=c|Byaor}BWzN>p!goW+jV#)l0
zj(*?(6)O+n*JWN?N0%`3cF^FlDZb~RdzhantDKZSV$MGlTqKdXTI`6;kQ<qW9=A2R
ztX<5{1k|PZNgs8a_yue-Sh@{N`eC0+Z5-1b1<5#I8?^?BPTl?;ZS6dr=KH*5QMn~k
z8QYA&;K5J{BEeUE_3zy-FE<Zw$g{K^kR$YaYl6OUUOuh4kgvI5nGU1rjoYV$;$|<f
z?_QJ=ivMBw{wPK4&A>tK&S_9A#^$<3ALoT>%{TN>n*|)*LI8=8L*0S~<<y-zt4}2~
zHvaQU0h0nV?qq%wxvTx(Bs@S5lgQS`Z6A8~lABP)6P*zr_A$!(s~m0w4`zTo31`Lj
z94|v(Zw;Lo*eoRe8<hEv;UQi~WQ4G_57K-g@Af-$Q9I)Q7FaQ(uwp##{nRJJ*;EfQ
za1UElptn~ggL7=A_5z44rG|ZO<Ka$>7yJQsq>lE~$13{3(O^5=92NAX)*pc?V$2Z=
z4+8Jd`gH?|(2VGqC-((E!6YYS&-KE7e0xG1-&)Wrr$me(B6@}Y`hTP5j2MhN>&O8a
zZqybEkFd=x$tnoK@p}^rSCI`d{BNUT1w2SeXmlIyxj!lVlR1p#Yx*xz97`N<6iO$Q
zfSnO+7pja0A>d>4UJAoA0KdP(5Qy(+fg50_TrL<Qp-dq&5GSQ_jod1X(Q`_-|HOj0
z4}r1##aoaD)F2jMiN%sVCG;JEHUesiM5Ehc2p`FUMew(HP^5o^3j%P8PKVW_P?oQ|
zxp3SilA+N|B&cn9Fl$#453;BD){}AQI`lxm9vorh_q+f0nIT1^XDT`caXc3ipir{m
zlz(s%3sna^i;8&T11?c^V8PJu*89K~C?QjKH1QzR{SnCjX)hcPI&$M?18xoau`mQ?
zBh0M!gAsiPEb{@&{xTj-w@!ba=sVB3e7rL7MsOmIUc@l|YjX4Yep@%gnMd3>BVMo)
z%s2L#9yRnDeCGUo)Qr1ndS6J$Ydt;V>erjP({IWv<CHnepUxyD+&auAuij)x2v}3_
z1xU0Y8^Gcym<d-LrYfwSmiX?Xwx{csA>SV>fe#bWY0U!rl!I9g#!m!;exDaF(1qi{
zpiCGH>~_pg^F;3@xddBU{eMi184~xc%bMM4p6T}jVZ8;Kd)xAU+>w#Kw&}7`XX5$S
ze>GmD_CFw;^11RrU$?GL+Zv|a7bcHylZot+6S2_sUm*vYNCKL8VwV3`?PH1X-RGlg
zb!5u1l{8r*6~Lx`vOcyzZ=Qu$!{KH!ZoTzs$avbF=BKl~_`o3ifOh@3CG1tddr<N<
z7>77Wd|b1^tO~>EfTHQzwnFUF)SXja&73cM=6zf>ro4&H)d!;e_+`|=agXonca>hI
zh3gbv7m&pi;BRWRxR|JQy!WH5u(QS4lOe_<+^K+Wxu7l6&tT6j8ceWqu_Lu~PsQ$;
z<==#%%7GahLtE87pwTur#`1KoK?#6WAa6dIHeYj^9rsMCO5=uzQ!oRA>?*##uwNgW
z^~P^x`bEyZh#fGlVqo4S-LWRr!5*Wu{o>v1Cv!*tKBt}#0xMDhRwTeV7Vy`=x}79w
zsmf{MC|f+<70&Vi527mBQq~}PxtJsFAV)nAc7xvi2}3)uVj*xgp}_1<Sfaezv3|+U
zpY8E9kt%-}ub~{FcaCmB)?9X-JOUQJJ$1}5sbT(|?%mroyNvIB4FVTt!(fD!B7*ns
z#8cZciKuEkS!lh<ouvRY@DIrNpN53J>-y=nqB-qx6EiXiuZ+EHtx~BLdSI&@U{mei
z96K6&bRSM-E?VtIt;ft|(w?PzHS$dNbs5gvaWnNkVe{Id9>3iU?g|=MNiZxwh89VD
z(K9l}%$KoqblztcuuS=6`$vU;!_mjI{XxScnWrlc`qDeqp9dCLr{}zi_;F`oq<rj0
z)3x@@UsN#E<3zNc9$ZB)gl8<x1z2`z-DN{<AC|E>vBLY5Rw!uiYu(?4&yPY25u^mN
zlZ-qBag}M2>^aXP+4{i^7XdtoaEMpsm0BOI{x%akXj0QdzIHIKS+KTKm)FUP&mIV`
z7S3TzTy?4&ygmI>K0f_h&W=D<{QTX5Mg21+V{o5kAh3=gB79#|YXTm(|KH&j!Gc>H
z%){D-WV8iSRGwyS{MCNWye!CQt1M~n9u3JRF3M!f!<W)wZirPeU=Y9fT4tQJXiO*D
zXCez8ttdjfq8)$^<$*ZmF=ZbHEySEDcrS-DeQbq33x#7R+YvZ_77vA<Tf&}yb@TlB
z+oU_WUnTvSei0JqgZ#jmj`0Y77d-eIoi@weo*i^$1~>1x0aOG5G%>Qtm@h9j#x0tJ
zMZ>wTd5-aVwliTw5#_RYkP6x1eByq6qK3hCB|VznO3NFxfRkEa_`#i5<Ay<=+rtYJ
z7UIq?@xeX^;IW4lolkbB`n<y2wHe?V<WLw)DB=~l^lDc#IfD-{Uo^@H?D;rv&1rIF
zhWWxMX<rHHh|Vz0;At%j|H0}{5CN{dHvf{EvjZV?M2>b{ebuz-F=G~q$;pX)LAd^-
zpg*M<Qoy;~k$NLDdD3t(NaJ*M(RU>}RrdAd&E3x>juj<M^sEK!9N)KRGW2{*pXtT_
zN+Zd0Ym<Q!0Y^o|v}oT9vzbl(_ok-okKTPJ6#rr`jeA?FiVDhIZenq_dhKGfFY(+m
zMRYD;n%hjw`FY@9olAJebXxPhsZ4j}!|HWSt_>Tn%a?BdM|^529Hzv?W}*LHwc*Dr
zG%au#A{>T})|<bTxyCsx%-RiU>AlPSU-hW1M?GSHY`(Vf!Giq{m+?w2Sq=RwzTly6
z#>;YRnf{4dNUF$m|CHPwuS3}YogDx3E_IHWU1klOmRvKuXJ!ZM)ZVZ#K|C8$)q8oP
z`sCUb#n;whrCb5#hZ{>~-(B!hmKx4-n~Js0V$-<(<$MqS>Hhg{2ojwjz72&Ue^H{z
z*2r!Jl9{y$?EMge9DVt!E?%<!%*=3k-q!8*|3`6|r_=bw-e1vE#I%`+p&q<<CX%|~
zG+E5=2kWQN4K66sPQxRA$EjL^QZOS@d2sJMitr7R*p`}Rz&OKlW?+TGtco(Jzf(i|
zFT<^WW8ak=h2!%#75a#RP`}dgpbJzk=KH-AMI>~BzE}rq+s4T3hL}KVm*u8}`3=|?
zUEyR~J27^foPd99PcoHtJVVk?;*><El+n<*{j;s(Kg~-M!eoiw8rySZE?PTZipYK;
zhQH`V1gVp8bS$Zf{OIO4w0FE+iU$4@@4NCa8&m$K?X%-YLeyWp?am*$(TEQx+W)*t
zRZWk!EaRGF`5N{m9aB447fnH$0MDPBuIzV|_MFn#l6cI*QDBzpV%KE7zc<=?%XF>K
zz=pP-L5?f7%K72E*jx-|MMJpb9f7wkD_m9RZFY%NZUMXpkDqayets`~@?a|KROEDD
zN-4)fFIS{-g036*JAPyw@H90dK~_nx6y!v|Cp!HsG#N~-L=r?&uyb&gJbh(i4&1E*
zRe&ucS^Q3~5RxEF#Fkxe(j}!sfm+3Gc7%UyGqT`Rjd7NnospowyX>r>lfcKIQuynb
z{;h)saR{tXT<F<D6zca7d0AKq@Dder{mD^X!)eREc|uv@FxP*vLXl{MuDj(sm(`o1
zozg{9?4c}UJyScBP^%pK_dM&vOp0B>E*%&89HC3=-<$b0YP#>J8_sp3P-SOv=Fu?W
z_lbO+0ekmfx){M|F(sx!rz3Wi+4`ms7&AX5BB2F}%#uLHS?Q;wE_AKPT&A+;>YEx`
z__T7&Ej#E4g1Aqmci3a5*8lC|G9}T+4|Fe&>@VNec(mqvZ-gmGg<QUE_ur%f=dgy<
z4$r3S(?v@T4dIWhI@$#;t#dW=6FDeSihsPtj52U7a^`OKlaz4fA507^{eGa`ZZZ+~
z)rLa)v{=KnmqiH=;z~2*9z$sy{#O5;WsJM8l2#^CTSU<Bpu8?{CHZ&5aPkwgL(+sV
z3(K9RmACkQ7C0Pq-S|VK9#}wV${bFbpmZ`)rZJxA>2H4UU@{{0Jgi*zyW&-OT_zs1
zGV?}GDtz^~ZzhXvnKc2NF9mM*E|u*k^~i@%p87VpiaVp*M)_s?Mi^SkOlxPhChRbo
zz%C@45u42HNCbWD>Cbh@%TVcidOc|#VN}BQig73h6INB$^cVWE>TEGGkPnIsfN#0y
zQdKTA-I9>3c#(z?ob*o_mw39fy=0CA4u+-eXDM0cu1(JeYWZjJY`H$9JcoD8EB9IR
zA;5yjIRC}1_iAemj0HLV8?S%|SHr4)7*0ks`8mW_vWoyMIFf!|au%3x<>XRF3+QEH
zwoN8xHzb*wgexBtGND?-y0Wc(;g2pE#D@PE)iH<Ln!-|>U#2xx+ae|C!TW?h_n)I~
z(sD%jAbiME7R^=lcZZ2d7Ztfp4vFNoIlME@teVdKX)r$XhycZOlu={vip5k-iaS*+
zp}DXJsE%=(LPmHp3nn5NM*dg;#?q4e(^GY!RgG)<Va3xVJSMB8Cw?`Egd-zAdxE|4
zmjSZ}N~6;+=7%(GX==vT)?Y=GcZk0I1c4&8N;&<ayp!eGEUElfNrjsB353A4d-7}^
z@_DUVw0~vsegE;?S>x%)&sT3id|bXYS4nFT(5}JYeXsWZ-qNU&Q|WwQv#cF{_jOY0
zKDG{KxJrah#V@jjVTSw%zmQRKEbb#|92yLgHbtI0_rR?bT$G>};$*ihajP`EGd8>1
z&X7?N&d~4lK>9F7hZf0JU1CU}!N}c+JwEjM^3t!mBTZs_5$>-GMc#OE{D_I(i+Y2F
zw{_@Sy_l;y$IZl{Z<o*4j^<QzmrNPCap8sF+xex*!Jl!>_sl78^N1=dO#PD{cOrn4
zsPhi_np2Vx$OT#rgypkPA#V|c9jzJVT7I8hcbZInDl_`;R%U-jE{FPXLZ<&9q5CF-
z)RBT|cl{lGFVckKwtF*^ywTwgDrr(jT#^;!<#qB1yLRm|{i!rBw1Y$#nv=4Na|+f^
z?{63B+cJtapY+ALmWuor{ZWNM-kqD9e)wpKB8HG>ba{(-kv7;7or#c7sxq=!-=SF<
zX{YpgKA!6wHh%$+u(&iZnJ6sS=C8HlhBDXRoQQlVFPRzoKwlXDm7J9>k=xx3WW21c
z-p^0AjUa%DeWbUlr4|74FN5f%5C4Y+L_BfgJ9ubro;N0fP*sc!Wos8@ka1$6FUb-9
z9%d`~y}m<!+9)+88B1w;-<)Ok*Nu`8LRu)&Or=+XWv_=pDQ#EJgO!e^=(UTT;Mdw$
z%Vif$jL097T;EpIbjgvL#e8Nb*3H|W2gyLNM&?c1KQKTiaQ6zf)iGeM)Hd8{`JsM3
zelFFC%@(9GZX-rHBqfAdzW9*H19g6{m1G?ghLV5sv*Tk`q1G>s>9?oo)t>FP%Bi@s
z`>P!%+tJ%>FAcZe`J?g?+*AYCX?u-$+Z>R0-LZxkgYZ9f(AiG1xm!CWrDyel_pF{^
zou9LyRjF+w%|Im-&KwKwSL|-Jh4DVUrBrI;{g+m6<v)H%4iK)5c;!c+vFYFD=zF1=
z)O#MWO`>}5TC=DpV~`SBE^a`oNmWwVK5%fmSVoOsr18?BT{8S1|556Sa@9d?TFd9!
zl?MY~!j%Z+L7*nT7wVyHXnt2SQ_HrUlgP08>JF`i$r;z)^JWh}9?olPXWFS!nTOnr
zsKYPSkJRJu8lNl`j8A(EKjzEY7;;J3-f*#G$SNS<piT64h&)&w`JFn{$XMF@my!Y2
z!SHW{$6=K-r8{|b-EbkVJ0Te#E&CKE?9RcsrYK(6`GNbXMXYWZX@YM0Ifa_-oV>gN
zP0&PPokhMncK<cmkhVb|Q@+0O)Zc+!t^bM8&{^ZyuS0rg*t+L~?=RD`JVvbMrwj3`
zv5wTNnvt0q0=6GmOsO3VQUWjSUl5hK`q2^C9Nr;sSW9GFecE3#kt!&E@yse_pXuzb
zSwGqM#{KGbq#cM?vkD(kL%q5@7n?qe3`ML+_|DumVq0oW9{#El!;~M*bJ0wIZ*zlA
z77Zn?EGx32uOG3g6C^Po!;hk>4MRleD6r7`s<kIPckK}bmL#Z6yHd5TW~e9Pcv_zK
z(NHt>pIrl&Q_Zkeq>6^?5B@cfk~v-@cH#!fU@AKF0J;BxD>D3nB;#I3+8HcaHH??3
z_eFJ^R{J{|5$wF_GXqu(<{|6K7ymwa!-()jzHs(^Bx&ck-oAVm5B=$&W{JGOeTko%
z5ZAEJ8NbuR%iKd4_w6XI5*)Z{qFgzoIY+g-1imp}HHN_;dr?6ii@nmqq+fiUPjcL?
zh6&jGwf4#hAe}~9hfY=n_On*TUnuPC1`0}~)<u~?*0=Z+dxZUT<w(KXb?lZ+GdC33
zNdqUku8D5u5<D7W*7PscH{7SI*VY-&+bl>W<uqo;V2qSa27hf1GaqvLmcHX^8Dck*
zT2QT7EBQl``6zmDU_>!0Fi)3~6ZzVvRp}@2`<UE*kj_{&{3)pQ$Qm~P4*AvoDwSZB
zrHqlKvEI=nBW!9|F>0g6?1<TR8m@vjJjPt|y`EI=eq{KiwOhCke0X<JUQ6bI$8JJW
z7b^vlIG~$_=>bh^F*yL3$YTy;JJJK}=)QI@s;=LVO3W0mn||{!&BgAme7inPjT%gE
zWEPE<3>U50l)q{X(8%|_Mb=M(%8e!<_=ahJ=k;CbM8?UiULyN$1jd`l!*Mb^RGut@
zK5^I`11owf^Eg@RhpQ%`fbhe2v86S)WScz@i1>4BAmbf@Q?GxLBl&CE1P7I;36byL
zmMp!6Jq2-Sd*zJU&k(K{jQ34dK#%R7U;m1fWMa{z2;7cWp<UZ{YGIGrmZMV#AF_A*
zeR?HHzhAP{eeX8a&kzLFz2tX032Z&=KIcFZm5WfQRk$@Pmw+t;O}*7zfv&fN=@-$*
z9P0Co{jPQ!iJfPsfnv|dA+9jb^hrSJ;yuGSWt{9|*5DL*<IF$WN4=8WYI63C%4n0g
zKmCI;u`6Y6vHEVEKmSs)1g{9^mHiVFHhZ_JFZUW<yDG;3Vg?2dUa#4cUvJd+#~mGh
zS}v5l$4*91BjyYlbL(#L)T6~dXh(nMhK^Xx9QZMa%A6K=Qf!EJrdS7f{s=`I0<XrS
zWYT;*Y~@y+HA4K7CZyO269v*qc6b#dDjUzZD5<vTq*Oy-$M%cmkRRLy52}MeqfKt=
zajSc!`0%^VjiiM<LE%8W!gqLTXp?6jbcD#r8B~Xh1vnen(S!&W0FAi9Yx%L?_Nl@?
z^+-oW?A?UGlL7FUocE)=uU}<Fx<{G@KXV<i3PMa9yOu4wH}SvbNGeGrD!OjM>H%is
zO1I^IvcAE0r*>pUa#GnX%m{;?0G!7$)3;~;v0;d7hNXW}#HjrSNFZG|N7y&FN|J61
zXrDYv2UuKtOBcWYyM}?fo%Y{pc%ujvT*AZug^(d=b?6K}%1RQy<y~r{8ihj{jR53l
z+~2<b{#6UZn_~9uIH~jEF==ZefVJKNo<yhAdGL`?-e6G7j(?lZjsRis1F}_(Kcood
zym1oc`+`pW+>_z=lBq(_?7*AHwb7rQhX)>ne{)lA?dFDw%YmcZUL6YmB==U*>o&3v
zfT5{iUTSdf4E9sAFu?J~rXP!jeF`Baj*~^v0N!6}tD@=BtDoo|2k!cfdAUAoZO7q@
z2hoXl9V^b=TV~<AymZhpNm=xVJx+b`lT(t^ZQky^u75ijAk)0(_C79ycBd)3qsHa;
z`HL$69i;(y=!QGxXGZQDPp}y?yDcxr9XlOW7F;j9oT+V50>{_p8Gl9NL9H^r(pw<^
zp5OTRX&Ywds@vuIC#gC}02cfJI7#ksiG$O4Vj_!W(usKgM4u&&lN-=#aFXib!%tN8
z7!bS#1$9f*h#rV}aMQVq>Oy4+R0@d<>#$tY`V!Ey+!RBawwpbyX2EzcCJ@XR-FnnR
zwi?kr`?!69mvBxtmls$QZ=Lj^a8Vg{Fc0O4eR??dg02dQtvzg79{dWHeE_QdAVh1l
z2=ESiZ|=}*eL*v^Az}OfrLc_+X<opDfxA&5H(~A#lNR`1-oK8grY+idSrq*J8Lxi`
z+87KP>$ZPiR+ewRV)l9+WI(#=H2FlN=`8GY&a`>Z;;^aT>BaG!{^c$NDu6q*64w$@
zVfWwJyu@+sRKY|M(Q2Q??9cKS3n-Wz?hr8#dbrAcO>2!e?-peuhdR5enfdmpQi@Re
zIsLT2c#yu>rjaM#-gpSn?9@KL{jwU4qOUI3xr+vRewVvCsg|m7U*IK1tkq<aV?l?S
znjDIwdUIgQ!H~ze(pkxRYwFDOiL)szGa@_;6=`Xjn4et<LYc}!rR33XmI|cK;oqdc
z=2<*9nvbt{qeqfpiG)UJ)3)~Tp^V_law{?}oswi@xIM^(?!kW|;^!!~Gd~4OpKw-4
zL|}}f9{0GRHpEViqF#6iMJRhb`4IsSZ>zfojPnXA_*Qp&$oo<B<iR?U;y`fjj32jM
zDxtb}6dmp%;>Wc|6O_RrSWje0ECo)V-R)iOL(wmb>2L;ur&y|iN1tuK)n|K*W|dBN
zJPv|JC<pOwYQ~}G7-1~kL+3f=hL#l}?|nj*P0^A{Liq|N;80Zys?L(6Xi3T7_r{-q
z%@Ur-zrA`4ot48Vrx!ERzf$c~7A1I*qbwUbkq$h8fFhyAOJ<BWj1o!rED<2}OpXki
zuC^O-;tRjycv2Tpi1!#+m&g*qL5nu);;n^54URRHYv3f;ycNe1aym>;dOk`)Bf_Op
zjiRyu*5!4++hhxV+h>UNztRBM?tSqSirbJ5=3<v$8hC&|ybuf_a5s`|@uc)MS^$%4
z@t^Jb8-KH6h>p#K4dY!!^kyX=_&6gtxy-$15UX4^L_GT1OH)~(i4gcp33j>5Y@}CX
zjWzXNdAk4|m$wzz)+&qR=rs!C%|faq{u_8HD+s?EiUNgi1KopjP<=syszZmIx7^!n
z6(_mMgoSOQ!QP<^%#uVvQOF0}Z+zMc40`hvC3{`-Z~w1+lmC08p6B<a-RPFX?@JRa
z`OWbU%=F{hRz25)(N0XLVEnEk)7qz>ri9bp@N_WOC5+^y0%4}2H^PItGb*1ev8!w-
zkqK~!;Bxrqg9d{mx7`AXI1~Axv&Ep$Qu4~l>0LsQSHZwHS0@tdxzTyAjsh9VBe`5|
zaDTZ=NSEav^?p|?t!|ChkrX-KRd$dVd8+07?;_x+k`M}VP*iGq*qh*Vns%Yoa+p1v
z(jKB`kKyVeA9HPFw^uB;JSZoiw3X0~RY_lCJ!nPor<Jq$UwV|;c6Tt1-zTv}C22_s
zCI9@f-N?2Yosl=^#t(Anh<6d#`O9Y9jR|8cmC&%Jh?kJ!f3ooHeLp~>i)uX%D_tX_
z*$%qBq;+mDlS2n^Y#_q@MeEsyDft2%O5VF>MjA+-{rV3v^53k&p+-vi6{ja_=lV<|
z@5LHWzhZ!D2%MZZMATDf((4Wnb7raHTArybR3MMf94pQ8TNB3AIKMiBI*C=HXOCBb
z*I~tWNmO{}C!Qjdb{2X8s+*;bjjCrV)vtJ^7HttUDaU1b59pGd<g02tSR_!yNMb#E
zz91AWMLd6dfiy5?mmhbPI;qO$FDEFlllR`G7-eeII^5H6h)||-ZH>mEycE`7rGLHq
zx?c34)K}9-kHNZeka_vbP^~a-Y?0<KBDLOUe_!kH^=6ni3$2Mb1qU!EtH<tq5!ES1
z6c?NtvufV-usx3aJ}%f42sMqKU_DM#HBE%xCpkv#qt+?g4aS?;z`G4sR<nP&e6wtx
zemhB<m0o-@bwiczU6t75qgBhmLFPD@&IQ)MR2J}thw0b+JYxv`r@?*5SnY%0(JFIG
zDqQ(^K!w;|7_SW>h8_ZYJN!aiO8x?$>Ahaojf`fON3$QQ80k}7bf}=$0PEL=e@Ns;
z9waC#7;e(^ewb)@Q7y;&$~%<qj(>D4c$1^7Hq<X)ym?uqo>A&H_Ncc!Tn@Qe+0R68
ztEzJgx(w(qi|KQc|5fAmSX$|3SZ9sYj2Gb>CG996V(snF%AKW0p>BCQd;gNXVX&2<
zVNc}%5aNE0Rwc>J0Izaba0<BXDZ<>16Xj|>KnhRP+KonUkYo^($mBoAPO|Wp)|k9}
zbq7%nUhWkkuGqw(KeD<sU9TTIOS*7e=}TV}ehjOwQWdMxH~P>ZlCTNhUHG8dg`aQl
ziI(T;=l+7t9^p5TRh#Srb_@`bVE@rS3sj##IW_=jJfNsfk=SyrSL_P0DkC}<#HT&z
z0xG!?!5Do=WL~?|DaT$yMAg`%Y|j-LF~j#X9=P)465yEbWmb@g<c}b$2~CGF?0T3S
zv910mRbpJdv<sZK`TC;FWr_TTr^dYZpVB+>Mtd5V6~-ZHU=fUN#MZB*6F(9uWJJgl
zrHA3ckRaa?yXCmrZgkce1N%QLU|l+CEx!enO&@~c8OD{(d8)7q;fx0q3!7XROE?Rt
ztGd!nfoClAHjHu2@bqwW2w;pNgr=RJ!dQjS0+zX|g=riH!Z3knhgBp;Rt-JeV(XE6
zR#3nM69>!f84r*ol?fE+Q5Xz0#0h)~>rAiQjIiw>r*Q=E)FEg}pj{qC<KvecWcDR>
zQ~msuy0mx58Herz3yo%+DCjbEEHlvSl`FeCdWfxm7y_b3_r_*0Hje=wCWE6gA^K13
zwze}Vu_lQANO7zXWp-FQc3bn*7&YI0o2Z|2=N{t_E|B=1c<Um(=q6n+`uUf@8NXqw
zPv1z5z8*Ne2*{Ur0A}itAvRm^&E4q%ZH0}QF`ON$&M#rJawhS#KZP>qp6~L%B+p-@
z2$H>Q?{#VttbwyG*}5Bhyul}x*a0M<6FaOX4f(RSJ-srOnAUgxYX7W<f&#)dhe8?f
z8wlkSDVSE91gZ%oFNgb;VmUX4UMc^+T3B}OoB2lVW_#rp=2)2fdVmYMa5uF=qll11
z-Z;NSBnl%K`zktU(^Nw)-x6C#CInZtkaOKuKudNy`FC3v)gDS~VGSJ&43pi6Y_TC-
z;bQ;{ct;pJ<~I?T+3X$Y6KJ!gbJPJq+dZm^NcP2aLQ*DTTYGQ0ok^4nA0$AOf-lX&
z=iMnOvBO=5x(SM$MexG&j?vdJj^JODX$(~W^Ry8Oa3Y#|&fWvRvGQ><5t$eFvh1D)
z7Bb}R9-opX?ABGSSc3Vv{9!yd9j^yh${Q-427Ur52RFm`Lc>`6gP;Eph`~J_3gq`F
z?z|EG#mzp;0w2<VCmSNclNroKy+dRCCYcPwl@`w*-%+|-Y7O$yy$DdZfR5opYFjpq
z=)Yg_6<aceGLMJ6S~FYw5_q-Ca_*<_{TmxHs)=rffIt!oj}t^VLB8ltT{mZ4hw0Ws
zuO~6NEM6SPtaO-psLAD@l7>~Ak=9sKLMqxTDpGz{B0P-P6J8NsOk8Y;nP$TN`ow$9
zKY!;&Gd^;`+^d#u=X~Agof0BJ?MsZSz8Q5-#{j!ohSw9Xqa_{si|v@_-eIitneXlV
zZfQ_|nzA+GD&2vB`kG|&tJTCENZrHUl*xkd*sY3PU1GgreJGMRyTeH{)6k=d3P<06
z{=<ly9zDdhy*gDtGF+k1z&1W5ij458L<+yvbyP7XAhJ7qd-l{&?!{q>1=Wi3_U`T}
zA9NupFsJ5T%)8&E(%~U<@5uT9ARzgNW0hmf>-lyq`^)cwX@8XG?wdAS|8N93mwo7<
z=JK~$zga3z$HRe?--NB%c6446KKq~9<1)p)GHb6ZMc)@L?L1d8?bxY#iJ7q_?Q1xk
z-VyCp;FkCib>EhWhW)A7NAj5gS^{&)n|Sr!Ku5N%ozjnHfy8Ho%Em%g<g9#5b{g*_
zN7%(=vNj#Rj{Ni4s<@Ms@hSa<U7QU4yjoY_MT9K_C~g%B=Sf%ZJkFg<aZ^|KubV8V
z`<S4nDw(Xv>;G3r<$3G@>uNVN_CR_7+|(A=Q5)Y<dE@H_v0BVb*JF1rJaW3n(iY!z
z>yFb)|E`i$Ktto-U+URCU~v%*uV*J6PN48Yl5{Rz<gQ?oeL~A0)^ZZrGBolW>tmHp
z!+_5U!!tK*7E1PLSsn8*<=x`TdBdA>HJsOQxjS$VA~nrPd3sak=JM40$|FD1T55B<
z6dtYn|Lb+gHrB;|-4=wvCV$Iu=%^2PI-l|(?B2WpKr3+-@DB#WMduw!TC|lUGQZL2
zbC*vuA6DeL=zR-cG$Od{RH7RqE|iPXchUh&8T9m-Z|<giyWzc$dRSPnr6MB1(j6)x
za(FH~I-S`i_Gz1G+*?94==Ah;r=(5w>z|;uWptW&%mc)2f<ISyzyGBMgV^m0f0b6W
zyh;6Ov|}M^;qu;~c-+@y5@Y+5-hk+BlXU-e>h_@&i6&caW|S?*^@nUJrwJ)4Ndrm-
zo<H{ec;1gIoMQQ;_cvAdSNt-?23MprP21$ifYix+->yHCR>*q4k}Yg%!|Yo``aNKa
zsp<6e{YvlU(|rp>jMN5455K#9!tTE)%*nDvgNKxh&ZLUdwP1tf1iN<>?I!)#9ugUv
zgX$z(m!AYa>EqRBh>WA-8@#BkYmp_LYcD@#K4MB*KYlS$P9gV#FXcrJE1fTV0k~J8
zyF`ZA&1wTP`^oLzfUn1(Ph+pU$@M$vXo%7E(JT`cp(uug7WzLnxT)+&BFjDc{q2fW
zW#qn~?cGt3))(Fx7%)kU0Of?GzCeyJ($}qtLv-Ds)q&cUPUMxfOLSlys7#C<c$-Bs
zoLn<eMB`&3?Q7}l#j1DE8oU!n)d*xZe}g|sBwPEw-+jT~Lv+f|<n@mOWrcSV7v9V_
zUc_t(L6N2%_$MDLEHBt;UBv2U#VyzAk=Ut`(1y3wDQ4{d+*KyS=%w=Y^?lDH#18JJ
z{wM<_SR#Nmhuwy_l2ej+9_Ey)Gck3TRKF`#I2K*9da;tMs;O~v_~iNEU`!>kl&=DH
z#97W+Q7M4F-~MQzcDh0&*vU`K@9{>d$TCqTkql(m3fu?nMADZ-9iEjb&HF)TFL5>d
zdJY;z$$R#5uTC5Dn+2MfPy$L$p@ZfWiBL^mHqccByzHr}ksBM$8G(*=vH%ZZ*X2{U
zpg#}p2oX{aD6<D%zbg7<Vq8ofc8|S3OGNA9HMlUZbFH}8NU5jyYAfot`Yig%?N;9-
zZWDW%OZfg=-J?g66O*m=&Zk_f#M;(8Q%{=j<xReOw|!`%^0C5+A02NxBRy~NRBa^Y
z=Tn-P&b5FWniDGuy={hJFZPq-|91PSJQS|YO{x>g9!jZLW%*R9$W)NjR2gcS)mvP;
zUR(xKt7$Ur<*e#6aI*hvI{8YFgh1Umr$P7m+38CqHwN=H=e`RCv{l?Ag87ulhvbRK
zCrLc{Wc3d=dyU**8;<AC^9`$77`K&c+CDV!cxVV^HLd-|sTO2`t2J3)rS;Vb^ABDp
zMGQjh3Vaj_iF>PtlQF#RU0%||KZp)ZLD*XbpMI(r5utTfB^8C~ke?scSssz0HzdK;
zHOG2PFK&$K`O{M83BtHR2FZQRX_yWqtec3;k(~&;SJA1eVZTVE-Lo(&lJ1tHPB-_C
z=pm7!p4CzlpFe~8LDAZ~V~&$4jpCou5NwUrKtaH^h^YeFaU`b4z<Et)mpd(n!!Gj6
zhfPCc{*TxN5)LRbh{)j>%~T0WZ?R$3&uH_QV4R3mr^bC+k=_ulhXr=IFarXWT<L{W
zYiOp?#L5@yKCd^JN^@I!-z~8yoBDVR3t8`zJ317Vrzg(ol=fkXQ`g`zJKo$^hkf)i
z@Ov2THw~l-Vv8#s8*?LHd#DD7UbK0A8Fr6<mQfbCtKr75c2t=qC6BJBJ`Qe7jo2l^
z278NX2V-EM!oWR>#p9{WhpX5?9KM@hynm|lk!NbHy1*w+^V8K7zwz5gj)q4Z<PhUY
z_Bm6gTt}Pzic!ho3FKf|ddAPX?{*#*@uzW1@^KgzhJ}?oEVT9m<%ASbto2FfFel2k
z>|;{MH-X(j4rrreNVcQR?RRnXgZ1V%cZiH_`Na<?A#2*@PVOm=9r&H@j-`F#!uD?;
z46dqD1Aj)XmTat;+oMz^{JDF-%AjIx<VIy2uVO=x1!=;inaK>Tv)-b*Xn3sayvkSE
z(%*GqB~_A!Zg*_%+{0sgcpak3kuF`I@2GGbYxj*$Zh;xPReiT2eX3EkxxkER<k9!4
z+aR80`O%}WV#vr+F9>3Q%3rZAhHZHb-*6>0UBC0Qh%z^C7(hf}s9T22xm<eKajU>W
znp$o3_^0j3^^Drl>?|yKXOR|xAP5fp!ao1ufh1h@tL4CAnl0VwD?CwH7p+S7TV_-o
zgx#r0;m=>P;fhfub|zbP)(_ep%)ye6;Njiyjxk{<((r5kp#eKvf4m*7^_YRS>yM%2
z6|tt{@g29kokUj{c}_yMEGT6?2x+=YXk7O!n!qbamN!&BX|d1sBwD^d^<{Aw21XjT
zeSa9VYAngM?HX*frbTd(Jp@e)RdF&U_@oJiZPZVnc6rU5R@e7;2PMgzrj>RC()mr6
zKNQel1v$)5=j+ktAnA1HS%4hZrrEOAGmWqFWG{79)*%h8ko@=#W%dzj$4(K;D~?uX
zj@5%E*QnMdf$!e82<C^Z-mIfq7$MMRm+P=`FJ(bku|A>6AIV;{x?j)6iqg);gX(5e
z-!oy$CChyf+N*IOub3n=-_AFSjR-!m^S(K31bJ19MHI86uwRsz5k~5dFOL58cPuvi
z{UdNOHW@Tv;n9grTAdoP-zL3w=yTTcQOP(gRK8u$+$!OT&Ef_*6lu}7>wO)PEu50Q
z%3=bK5=^cLrxy?(F5{qCHYHXqiRZd5Z=8N6d9+)g)LpPi^?)7paj7!JxaXsCldyux
zYcIq9&M)(p4Y6{H6Kr@#u$!N<w9<l}mBdfIyuy3tC(UyFQDuK`LUsTaw!_#0a9nq*
zR6CW2?nr~8{G>_|^KTmpShAW9MdRq+b%iqDn)BD#xzvAuV^o|}ScI1fyBm7K<v0!=
z{agB2NjO%qe9aT}D+FZEA)F#F*>jWXL*>|?WtX$^_L{Kpizli-7G^0j%>GrqW|X06
z8}0Otcv7DhNucSguCjDZj`V!u`i&ci)i)TTUoFq!2dt>PVS-0ll}UnGy%eSv1)HI0
zCh!tafU1h(($Ok_soQ6XZOP_-hOK%(10z3})PnvS!Nr*b!nhVcgbK*zky;9Sw{iWw
z+F(*{Td)wW^L7Cw6&++;lCN;B$GNjjV5rIHCjn?$!-Ez8(=UL#(t$O2urrXpompAF
zH-{R%#DnPqKU_$qe+B~+bFYI7O_*R01@ka`P~K@pwAo0f2(Aq;6r^qhH`2;*;J=G1
zNLf`Wr}xNmZ-6FjkQVfyh3NogFwYWfYw0eA>k`HTu!I;zLh#lLum+4WfeM=fJsQ_p
zhr&VU3(=BWaxDUoKKYh=AfLWxxryscR!PQ#zP5Y3MggcnCIB_r&`Fa2sQs_-`(I--
zzy<))jGt&J^B<`#B>*Z!vS@$7ofahw4q->y%7Eh_5x|H{1P{qY@8Y`ma*4qZZL<9}
zoa}H(HteNZ8ra4HRzJoI9l?5!n&K9X18D*9500Bv3%<`rd95~f$^g<#V7)?Xn?7z9
zBj7+T3cm?_1?|+iN)2!oV!MX`wg3dJ5s0SixHF@)qh%tw?&IM>&T#(`0QZZKHU*ay
zO3UYh$TwlT^9?=j)c-?8NSSeK>XlKqA#3zLzC^gwyZ~D+K{^6(TQ&h^ntDcgVRDQZ
z21GGXLkU6Lv;WqB_Sv;FQOqTd*#8E$pWmCqX={}Y-2N=r_Y=5zG$6>OVea^!2DZ)s
zB5|^;wSgPS2j3NF#c?gss9$M7J88}H<MwxOGWZ|<`w$owY6#Z@l~$lN54w~sV6W{A
zp?~#}Qh8)J3aBBr;43-wREMT1?&k>O?hY~`Nb|kSK_M4xl^u}HZt+7VEY8ig{HISu
zL~KjlT)oG}CD(o?H_OWw@Ye#sFO?!n=29!e)BhcjLeAU%%ftj5zH{8(;EE8jps**(
zclxg@sJ#y8@v`~!{|_+jerN6Hufr5StXVWVI{WUp$Okrz!%JmE2tgvd|9(BK#1t!M
zL~sz^PiQoZdfmADzdt;n9v2eu@#6lYP>Mus_1)wkJI&g>kg=r=0w)9(GYzZiS$7t6
zG8&M)N#_7lxKSBmVVlJ^ekK0z+^Xgq<~E1l#xWljCw2@*59%u(IdGaea$=D|ao+4W
u+H^1Wk_7xu<m!ruBZw7z!N*y_H9T6*fHAuWV>a*vPgU`OLYds-kpBmEN72Xt

literal 0
HcmV?d00001


From ef1408fe2a9534e20226da874b9a26b3963cab5b Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 14:43:07 +0530
Subject: [PATCH 10/11] change the label of passes route to Buy Cards

---
 src/components/Navbar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 905ecfe..193529a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -173,11 +173,11 @@ export default function Navbar({
       },
       // Position 5 - Shared item
       {
-        label: 'Your Card',
+        label: 'Buy Cards',
         path: `/passes`,
         isShared: true,
-        landingLabel: 'Your Card',
-        melbourneLabel: 'Your Card'
+        landingLabel: 'Buy Cards',
+        melbourneLabel: 'Buy Cards'
       },
       {
         label: 'Your Postcard',

From b1fb01a2a6d9dcd2031b6ddc10369a4502594bc5 Mon Sep 17 00:00:00 2001
From: aryabenade <benadearya@gmail.com>
Date: Thu, 23 Apr 2026 15:25:52 +0530
Subject: [PATCH 11/11] refactor the api call by passing cityId when getting
 user city cards

---
 src/Redux/services/profile.service.ts |  4 +-
 src/pages/CheckoutPage.tsx            | 78 ++++-----------------------
 src/pages/ProfilePage.tsx             |  9 ++--
 3 files changed, 18 insertions(+), 73 deletions(-)

diff --git a/src/Redux/services/profile.service.ts b/src/Redux/services/profile.service.ts
index fe266fe..ab343fd 100644
--- a/src/Redux/services/profile.service.ts
+++ b/src/Redux/services/profile.service.ts
@@ -25,9 +25,11 @@ export const profileApi = createApi({
         }),
 
         getUserCards: builder.query({
-            query: (sort) => {
+            query: ({sort,cityId}) => {
                 const params = new URLSearchParams()
 
+                params.append('cityXid', cityId);
+
                 if (sort) params.append('sort', sort);
 
                 return `/website/passes/all?${params.toString()}`
diff --git a/src/pages/CheckoutPage.tsx b/src/pages/CheckoutPage.tsx
index f74b099..3464eca 100644
--- a/src/pages/CheckoutPage.tsx
+++ b/src/pages/CheckoutPage.tsx
@@ -32,65 +32,6 @@ interface Attraction {
     included: boolean;
 }
 
-/* ─── Data (Same as Original) ─── */
-const dayOptions = [3, 6, 12, 18, 24];
-
-const priceTable: Record<string, Record<number, number>> = {
-    Flexi: { 3: 49.5, 6: 69, 12: 99, 18: 129, 24: 159 },
-    Unlimited: { 3: 79, 6: 109, 12: 149, 18: 189, 24: 229 },
-};
-
-const attractionsData: Record<string, Record<string, Attraction[]>> = {
-    Melbourne: {
-        Flexi: [
-            { id: 'mel-1', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-2', name: 'Melbourne Zoo', image: 'https://images.unsplash.com/photo-1730074888490-31239540bacf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NzYzMTk5NzB8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-3', name: 'Royal Botanic Gardens', image: 'https://images.unsplash.com/photo-1585894507208-eeead8cb9a56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBib3RhbmljYWwlMjBnYXJkZW4lMjBncmVlbnxlbnwxfHx8fDE3NzYzMTk5NzF8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Nature', included: true },
-            { id: 'mel-4', name: 'NGV Art Gallery', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-        ],
-        Unlimited: [
-            { id: 'mel-1', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-2', name: 'Melbourne Zoo', image: 'https://images.unsplash.com/photo-1730074888490-31239540bacf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB6b28lMjB3aWxkbGlmZXxlbnwxfHx8fDE3NzYzMTk5NzB8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-3', name: 'Royal Botanic Gardens', image: 'https://images.unsplash.com/photo-1585894507208-eeead8cb9a56?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBib3RhbmljYWwlMjBnYXJkZW4lMjBncmVlbnxlbnwxfHx8fDE3NzYzMTk5NzF8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Nature', included: true },
-            { id: 'mel-4', name: 'NGV Art Gallery', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-            { id: 'mel-5', name: 'Melbourne Star Wheel', image: 'https://images.unsplash.com/photo-1769880659692-fa77e04c5ffa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvYnNlcnZhdGlvbiUyMHdoZWVsJTIwYW11c2VtZW50JTIwbmlnaHR8ZW58MXx8fHwxNzc2MzE5OTc2fDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-            { id: 'mel-6', name: 'Penguin Parade', image: 'https://images.unsplash.com/photo-1670391050251-d1cfbc3891c4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwZW5ndWlucyUyMHdpbGRsaWZlJTIwbmF0dXJlfGVufDF8fHx8MTc3NjMxOTk3Nnww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'mel-7', name: 'Yarra River Cruise', image: 'https://images.unsplash.com/photo-1562003914-018a4a6c2171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyaXZlciUyMGNydWlzZSUyMGJvYXQlMjBjaXR5fGVufDF8fHx8MTc3NjMxOTk3M3ww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-        ],
-    },
-    Sydney: {
-        Flexi: [
-            { id: 'syd-1', name: 'Harbour Bridge Climb', image: 'https://images.unsplash.com/photo-1767974062666-2685a670e353?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwY2xpbWJ8ZW58MXx8fHwxNzc2MzE5OTcxfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Adventure', included: true },
-            { id: 'syd-2', name: 'Taronga Zoo', image: 'https://images.unsplash.com/photo-1704852168456-b70e08441917?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjB0YXJvbmdhJTIwem9vJTIwYW5pbWFsc3xlbnwxfHx8fDE3NzYzMTk5NzJ8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'syd-3', name: 'Art Gallery NSW', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-        ],
-        Unlimited: [
-            { id: 'syd-1', name: 'Harbour Bridge Climb', image: 'https://images.unsplash.com/photo-1767974062666-2685a670e353?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjBoYXJib3VyJTIwYnJpZGdlJTIwY2xpbWJ8ZW58MXx8fHwxNzc2MzE5OTcxfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Adventure', included: true },
-            { id: 'syd-2', name: 'Taronga Zoo', image: 'https://images.unsplash.com/photo-1704852168456-b70e08441917?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxTeWRuZXklMjB0YXJvbmdhJTIwem9vJTIwYW5pbWFsc3xlbnwxfHx8fDE3NzYzMTk5NzJ8MA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-            { id: 'syd-3', name: 'Art Gallery NSW', image: 'https://images.unsplash.com/photo-1752429242469-55ba7ec210d2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnQlMjBnYWxsZXJ5JTIwbXVzZXVtJTIwaW50ZXJpb3J8ZW58MXx8fHwxNzc2MzE5OTczfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Culture', included: true },
-            { id: 'syd-4', name: 'Sydney Harbour Cruise', image: 'https://images.unsplash.com/photo-1562003914-018a4a6c2171?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyaXZlciUyMGNydWlzZSUyMGJvYXQlMjBjaXR5fGVufDF8fHx8MTc3NjMxOTk3M3ww&ixlib=rb-4.1.0&q=80&w=1080', category: 'Experience', included: true },
-            { id: 'syd-5', name: 'SEA LIFE Aquarium', image: 'https://images.unsplash.com/photo-1536845111858-bb269af65cb6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjBhcXVhcml1bSUyMHVuZGVyd2F0ZXJ8ZW58MXx8fHwxNzc2MzE5OTcwfDA&ixlib=rb-4.1.0&q=80&w=1080', category: 'Wildlife', included: true },
-        ],
-    },
-};
-
-const offersData: Record<string, { title: string; description: string; image: string }[]> = {
-    Flexi: [
-        { title: 'Astor Hotels Ultra Deluxe', description: '15% Discount on all treatments for first-time clients', image: 'https://images.unsplash.com/photo-1715191904112-4a5d9c3089fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMHJlc29ydCUyMGV4dGVyaW9yfGVufDF8fHx8MTc3NjMyMTM2MXww&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Green Valley Spa Lux', description: '20% Off on membership plans for new members', image: 'https://images.unsplash.com/photo-1759216853079-831ef8c8b327?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcGElMjB3ZWxsbmVzcyUyMHRyZWF0bWVudCUyMGludGVyaW9yfGVufDF8fHx8MTc3NjMyMTM2M3ww&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Harbour Dining Co.', description: '10% Off your first dining experience at waterfront', image: 'https://images.unsplash.com/photo-1676471932681-45fa972d848a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyZXN0YXVyYW50JTIwZmluZSUyMGRpbmluZ3xlbnwxfHx8fDE3NzYzMTkxNDl8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'National Gallery Exhibition', description: 'Free audio guide with every gallery visit', image: 'https://images.unsplash.com/photo-1569342380852-035f42d9ca41?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtdXNldW0lMjBnYWxsZXJ5JTIwZXhoaWJpdGlvbnxlbnwxfHx8fDE3NzYyNDYwMjh8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Sunset Harbour Cruise', description: 'Complimentary drink on every sunset cruise booking', image: 'https://images.unsplash.com/photo-1765783800962-83d99ff7b158?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjcnVpc2UlMjBib2F0JTIwaGFyYm9yJTIwdG91cnxlbnwxfHx8fDE3NzYzMjE2MDd8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-    ],
-    Unlimited: [
-        { title: 'SkyView Ferris Wheel', description: 'Complimentary second ride for all pass holders', image: 'https://images.unsplash.com/photo-1626209025747-b41ee6ec191f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmZXJyaXMlMjB3aGVlbCUyMGFtdXNlbWVudCUyMHBhcmt8ZW58MXx8fHwxNzc2MzE3NDI2fDA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'City Mall Boutique', description: '15% Off at select boutique stores with your pass', image: 'https://images.unsplash.com/photo-1567966689299-819568579d36?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzaG9wcGluZyUyMG1hbGwlMjBib3V0aXF1ZSUyMHJldGFpbHxlbnwxfHx8fDE3NzYzMjEzNjN8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Adventure Outfitters', description: 'Free gear rental on outdoor adventure bookings', image: 'https://images.unsplash.com/photo-1761131221577-0716baffc6ef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhZHZlbnR1cmUlMjBzcG9ydHMlMjBvdXRkb29yJTIwYWN0aXZpdHl8ZW58MXx8fHwxNzc2MzIxMzYzfDA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Skyline Rooftop Lounge', description: 'Buy one get one free on signature cocktails', image: 'https://images.unsplash.com/photo-1642114955097-8f3d0e141641?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb29mdG9wJTIwYmFyJTIwY2l0eSUyMHNreWxpbmUlMjBuaWdodHxlbnwxfHx8fDE3NzYyNDU2NTl8MA&ixlib=rb-4.1.0&q=80&w=1080' },
-        { title: 'Yarra Valley Wines', description: 'Exclusive wine tasting tour with pass holders discount', image: 'https://images.unsplash.com/photo-1764649841527-c8852b63cc53?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3aW5lJTIwdGFzdGluZyUyMHZpbmV5YXJkJTIwY2VsbGFyfGVufDF8fHx8MTc3NjMyMTYwOHww&ixlib=rb-4.1.0&q=80&w=1080' },
-    ],
-};
-
 /* ─── FIGMA CARD PREVIEWS (Exact Copy) ─── */
 function FlexiCardPreview({ city, adultPrice, childPrice, isSelected, image }: { city: string; adultPrice: number; childPrice: number; isSelected: boolean, image: string; }) {
     return (
@@ -243,10 +184,13 @@ function CheckoutConfigCard({
         try {
             const response = await addCardToCart(cardBookingDetails);
             const bookingId = response?.data?.id
-            navigate(`/payment/${bookingId}`)
-        } catch (error) {
-            console.error("Error adding card to cart:", error);
-            toast.error("Failed to move forward. Please try again.");
+            if (bookingId) {
+                navigate(`/payment/${bookingId}`)
+            } else {
+               throw new Error(response?.error?.data?.message)
+            }
+        } catch (error:any) {
+            toast.error(error.message);
         }
     }
 
@@ -383,11 +327,9 @@ export function CheckoutPage({
         setCheckoutItem(flexiCard)
     }, [cards])
 
-    console.log(checkoutItem)
-
     if (isLoading) {
         return <LoadingSpinner />
-    } 
+    }
 
     const handleCheckoutItemChange = (cardObject: any) => {
         setCheckoutItem(cardObject);
@@ -540,7 +482,7 @@ export function CheckoutPage({
                             <CheckoutConfigCard
                                 item={checkoutItem}
                                 onChange={handleCheckoutItemChange}
-                                // onProceed={() => navigate("/payment")}
+                            // onProceed={() => navigate("/payment")}
                             />
                         </div>
                     </div>
@@ -550,7 +492,7 @@ export function CheckoutPage({
                         <CheckoutConfigCard
                             item={checkoutItem}
                             onChange={handleCheckoutItemChange}
-                            // onProceed={() => navigate("/payment")}
+                        // onProceed={() => navigate("/payment")}
                         />
                     </div>
                 </div>
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index a05d5a9..ceacdd4 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -103,9 +103,10 @@ export function ProfilePage({
   const [sort, setSort] = useState("latest")
   const navigate = useNavigate()
   const userId = localStorage.getItem("userId")
+  const cityId = localStorage.getItem("cityId")
   const { data: userDetails, isLoading } = useGetUserProfileDetailsQuery(userId)
   const [updateUserProfileDetails, { isLoading: savingChanges }] = useUpdateUserProfileDetailsMutation();
-  const { data, isLoading: loadingCards } = useGetUserCardsQuery(sort)
+  const { data, isLoading: loadingCards } = useGetUserCardsQuery({sort,cityId})
   const { data: userItineraries, isLoading: loadingItineraries } = useGetUserItinerariesQuery({})
 
   const cards = data ?? []
@@ -528,9 +529,9 @@ export function ProfilePage({
               </div>
             </TabsContent>
 
-            {/* My Passes Tab */}
+            {/* My Cards Tab */}
             <TabsContent value="passes" className="space-y-8">
-              {/* Active Passes */}
+              {/* Active Cards */}
               <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
@@ -548,7 +549,7 @@ export function ProfilePage({
                           <ImageWithFallback
                             src={card.city.bannerImage}
                             alt={card.city.name}
-                            className="w-full h-full object-cover"
+                            className="w-full object-cover"
                           />
                         </div>
                         <div className="flex-1 p-6">