import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { QrCode, X, Smartphone, CreditCard, Ticket } from 'lucide-react';
import cityCardsLogo from './assets/cit-logo.png';
import imgRectangle18609 from "./assets/84c8cfb942f3c96e9f5fbb29459a9861138f61d8.png";

import { LoginModal } from './components/LoginModal';
import { CTAButton } from './components/CTAButton';
import { HomePage } from './components/HomePage';
import { PassesPage } from './components/PassesPage';
import { MelbournePage } from './components/MelbournePage';
import { AttractionsPage } from './components/AttractionsPage';
import { AttractionDetailsPage } from './components/AttractionDetailsPage';
import { CheckoutPage } from './components/CheckoutPage';
import { SecureCheckoutPage } from './components/SecureCheckoutPage';
import { BlogsPage } from './components/BlogsPage';
import { BlogDetailsPage } from './components/BlogDetailsPage';
import { HowItWorksPage } from './components/HowItWorksPage';
import { FAQPage } from './components/FAQPage';
import { PrivacyPolicyPage } from './components/PrivacyPolicyPage';
import { AboutUsPage } from './components/AboutUsPage';
import { ProfilePage } from './components/ProfilePage';
import { CreateMagicItineraryPage } from './components/CreateMagicItineraryPage';
import { ItineraryViewPage } from './components/ItineraryViewPage';
import { OffersPage } from './components/OffersPage';
import { CityCardsPage } from './components/CityCardsPage';
import { MagicItineraryPage } from './components/MagicItineraryPage';
import { PostCardsPage } from './components/PostCardsPage';
import { DownloadAppPage } from './components/DownloadAppPage';
import { EsimsPage } from './components/EsimsPage';
import { HotelDiscountsPage } from './components/HotelDiscountsPage';
import { ContactUsPage } from './components/ContactUsPage';

import {
  heroVariants,
  sectionVariants,
  cardVariants,
  staggerContainer,
  fastStaggerContainer,
  headingVariants,
  textVariants,
  ctaVariants,
  iconVariants,
  buttonHoverVariants,
  cardHoverVariants,
  pageTransition,
  easeOutQuart,
  easeOutExpo,
  easeOutCubic
} from './utils/animations';

// User type definition
interface User {
  email: string;
  name: string;
}

function App() {
  const [selectedCity, setSelectedCity] = useState<string>('');
  const [currentPage, setCurrentPage] = useState<'home' | 'melbourne' | 'passes' | 'attractions' | 'attraction-details' | 'checkout' | 'secure-checkout' | 'blogs' | 'blog-details' | 'how-it-works' | 'faq' | 'privacy-policy' | 'about-us' | 'profile' | 'create-itinerary' | 'itinerary-view' | 'offers' | 'citycards' | 'magic-itinerary' | 'postcards' | 'download-app' | 'esims' | 'hotel-discounts' | 'contact-us'>('home');
  const [selectedAttractionId, setSelectedAttractionId] = useState<string>('');
  const [selectedBlogId, setSelectedBlogId] = useState<string>('');
  const [isMobile, setIsMobile] = useState(false);
  const [showQRCard, setShowQRCard] = useState(false);
  const [offersSource, setOffersSource] = useState<'products' | 'passes'>('products');
  const [stickyCardType, setStickyCardType] = useState<'unlimited' | 'selective'>('unlimited');
  
  // Login state management
  const [user, setUser] = useState<User | null>(null);
  const [showLoginModal, setShowLoginModal] = useState(false);

  // Login handlers
  const handleLoginSuccess = (userData: User) => {
    setUser(userData);
    setShowLoginModal(false);
  };

  const handleSignOut = () => {
    setUser(null);
    setCurrentPage('home');
  };

  const handleCTAClick = () => {
    if (user) {
      // If logged in, navigate to profile or passes
      setCurrentPage('profile');
    } else {
      // If not logged in, show login modal
      setShowLoginModal(true);
    }
  };

  // Detect mobile for optimized animations
  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  // Generate a realistic QR code pattern
  const generateQRPattern = () => {
    const size = 27; // Even larger QR code size for the bigger widget
    const pattern = [];
    
    for (let i = 0; i < size * size; i++) {
      const row = Math.floor(i / size);
      const col = i % size;
      
      // Corner squares (7x7 for larger QR)
      const isCornerSquare = 
        (row < 7 && col < 7) || // Top-left
        (row < 7 && col >= 20) || // Top-right
        (row >= 20 && col < 7); // Bottom-left
      
      // Finder patterns within corner squares
      const isFinderPattern = isCornerSquare && (
        (row === 0 || row === 6 || col === 0 || col === 6) ||
        (row >= 2 && row <= 4 && col >= 2 && col <= 4)
      );
      
      // Timing patterns
      const isTimingPattern = (row === 6 && col >= 8 && col <= 18) || (col === 6 && row >= 8 && row <= 18);
      
      // Random data pattern for other areas
      const isDataPattern = !isCornerSquare && !isTimingPattern && Math.random() > 0.38;
      
      pattern.push(isFinderPattern || isTimingPattern || isDataPattern);
    }
    
    return pattern;
  };

  const qrPattern = generateQRPattern();

  const renderPage = () => {
    switch (currentPage) {
      case 'home':
        return (
          <motion.div key="home" {...pageTransition}>
            <MelbournePage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'passes':
        return (
          <motion.div key="passes" {...pageTransition}>
            <PassesPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('passes');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'melbourne':
        return (
          <motion.div key="melbourne" {...pageTransition}>
            <MelbournePage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'attractions':
        return (
          <motion.div key="attractions" {...pageTransition}>
            <AttractionsPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              onAttractionClick={(attractionId: string) => {
                setSelectedAttractionId(attractionId);
                setCurrentPage('attraction-details');
              }}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );
      case 'attraction-details':
        return (
          <motion.div key="attraction-details" {...pageTransition}>
            <AttractionDetailsPage 
              attractionId={selectedAttractionId}
              onBackClick={() => setCurrentPage('attractions')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'checkout':
        return (
          <motion.div key="checkout" {...pageTransition}>
            <CheckoutPage 
              onBackClick={() => setCurrentPage('passes')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              onSecureCheckoutClick={() => setCurrentPage('secure-checkout')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'secure-checkout':
        return (
          <motion.div key="secure-checkout" {...pageTransition}>
            <SecureCheckoutPage 
              onBackClick={() => setCurrentPage('passes')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'blogs':
        return (
          <motion.div key="blogs" {...pageTransition}>
            <BlogsPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              onBlogClick={(blogId: string) => {
                setSelectedBlogId(blogId);
                setCurrentPage('blog-details');
              }}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'blog-details':
        return (
          <motion.div key="blog-details" {...pageTransition}>
            <BlogDetailsPage 
              blogId={selectedBlogId}
              onBackClick={() => setCurrentPage('blogs')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'how-it-works':
        return (
          <motion.div key="how-it-works" {...pageTransition}>
            <HowItWorksPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'faq':
        return (
          <motion.div key="faq" {...pageTransition}>
            <FAQPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'privacy-policy':
        return (
          <motion.div key="privacy-policy" {...pageTransition}>
            <PrivacyPolicyPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'about-us':
        return (
          <motion.div key="about-us" {...pageTransition}>
            <AboutUsPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'profile':
        return (
          <motion.div key="profile" {...pageTransition}>
            <ProfilePage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('passes');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              onCreateItineraryClick={() => setCurrentPage('create-itinerary')}
              onViewItineraryClick={() => setCurrentPage('itinerary-view')}
              onDownloadAppClick={() => setCurrentPage('download-app')}
              currentPage={currentPage}
            />
          </motion.div>
        );

      case 'create-itinerary':
        return (
          <motion.div key="create-itinerary" {...pageTransition}>
            <CreateMagicItineraryPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('home')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'itinerary-view':
        return (
          <motion.div key="itinerary-view" {...pageTransition}>
            <ItineraryViewPage 
              onBackClick={() => setCurrentPage('magic-itinerary')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              onCreateItineraryClick={() => setCurrentPage('create-itinerary')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'offers':
        return (
          <motion.div key="offers" {...pageTransition}>
            <OffersPage 
              onBackClick={() => setCurrentPage('profile')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => setCurrentPage('offers')}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              fromSource={offersSource}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'citycards':
        return (
          <motion.div key="citycards" {...pageTransition}>
            <CityCardsPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'magic-itinerary':
        return (
          <motion.div key="magic-itinerary" {...pageTransition}>
            <MagicItineraryPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              onCreateItineraryClick={() => setCurrentPage('create-itinerary')}
              onViewItineraryClick={() => setCurrentPage('itinerary-view')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'postcards':
        return (
          <motion.div key="postcards" {...pageTransition}>
            <PostCardsPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'download-app':
        return (
          <motion.div key="download-app" {...pageTransition}>
            <DownloadAppPage 
              onBackClick={() => setCurrentPage('profile')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'esims':
        return (
          <motion.div key="esims" {...pageTransition}>
            <EsimsPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'hotel-discounts':
        return (
          <motion.div key="hotel-discounts" {...pageTransition}>
            <HotelDiscountsPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onMelbourneClick={() => setCurrentPage('melbourne')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      case 'contact-us':
        return (
          <motion.div key="contact-us" {...pageTransition}>
            <ContactUsPage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );

      default:
        return (
          <motion.div key="home" {...pageTransition}>
            <MelbournePage 
              onBackClick={() => setCurrentPage('home')}
              onHomeClick={() => setCurrentPage('home')}
              onAttractionsClick={() => setCurrentPage('attractions')}
              onPassesClick={() => setCurrentPage('passes')}
              onCheckoutClick={() => setCurrentPage('checkout')}
              onSignInClick={() => setShowLoginModal(true)}
              onSignOutClick={handleSignOut}
              onBlogsClick={() => setCurrentPage('blogs')}
              onHowItWorksClick={() => setCurrentPage('how-it-works')}
              onFAQClick={() => setCurrentPage('faq')}
              onPrivacyPolicyClick={() => setCurrentPage('privacy-policy')}
              onAboutUsClick={() => setCurrentPage('about-us')}
              onProfileClick={() => setCurrentPage('profile')}
              onCityCardsClick={() => setCurrentPage('citycards')}
              onMagicItineraryClick={() => setCurrentPage('magic-itinerary')}
              onPostCardsClick={() => setCurrentPage('postcards')}
              onOffersClick={() => {
                setOffersSource('products');
                setCurrentPage('offers');
              }}
              onEsimsClick={() => setCurrentPage('esims')}
              onHotelDiscountsClick={() => setCurrentPage('hotel-discounts')}
              onContactUsClick={() => setCurrentPage('contact-us')}
              currentPage={currentPage}
              user={user}
            />
          </motion.div>
        );
    }
  };

  return (
    <div className="min-h-screen bg-background relative">


      {/* Global Animation Context Provider */}
      <motion.div 
        className="relative z-10"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.3, ease: easeOutCubic }}
      >
        <AnimatePresence mode="wait">
          {renderPage()}
        </AnimatePresence>
      </motion.div>

      {/* Login Modal */}
      <LoginModal
        isOpen={showLoginModal}
        onClose={() => setShowLoginModal(false)}
        onLoginSuccess={handleLoginSuccess}
      />

      {/* Sticky Widget - Dynamic based on page */}
      <div className="fixed bottom-6 right-6 z-50">
        <AnimatePresence>
          {!showQRCard && (
            <motion.button
              initial={{ scale: 0, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0, opacity: 0 }}
              transition={{ duration: 0.3, ease: easeOutExpo }}
              whileHover={{ scale: 1.05, y: -2 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => {
                if (currentPage === 'attractions') {
                  setCurrentPage('checkout');
                } else {
                  setShowQRCard(true);
                }
              }}
              className={`relative shadow-2xl flex items-center justify-center rounded-2xl transition-all duration-300 overflow-hidden group ${
                currentPage === 'attractions'
                  ? 'w-[244px] h-36'
                  : 'w-36 h-36 bg-black text-white'
              }`}
              aria-label={currentPage === 'attractions' ? 'Get CityCard' : 'Show QR Code'}
            >
              {currentPage === 'attractions' ? (
                <div className="bg-black relative rounded-[12px] size-full">
                  <div className="overflow-clip relative size-full">
                    {/* Header Image */}
                    <div className="absolute h-[49px] left-0 rounded-tl-[12px] rounded-tr-[12px] top-0 w-full">
                      <div aria-hidden="true" className="absolute inset-0 pointer-events-none rounded-tl-[12px] rounded-tr-[12px]">
                        <img alt="" className="absolute max-w-none object-cover rounded-tl-[12px] rounded-tr-[12px] size-full" style={{ objectPosition: '50% 50%' }} src={imgRectangle18609} />
                        <div className="absolute bg-[rgba(0,0,0,0.42)] inset-0 rounded-tl-[12px] rounded-tr-[12px]" />
                      </div>
                    </div>
                    
                    {/* GET NOW Text */}
                    <p className="absolute font-poppins font-semibold leading-[16px] left-[50%] -translate-x-1/2 not-italic text-[12px] text-nowrap text-white top-[17px] whitespace-pre">GET NOW</p>
                    
                    {/* Dashed Line Separator */}
                    <div className="absolute h-0 left-0 top-[49px] w-full">
                      <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
                        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 244 1">
                          <line stroke="#FFB23F" strokeDasharray="6 6" x2="244" y1="0.5" y2="0.5" />
                        </svg>
                      </div>
                    </div>
                    
                    {/* Card Title in Orange */}
                    <p className="absolute font-poppins font-medium leading-[1.3] left-[50%] text-[#ffb23f] text-[24px] text-center top-[65px] tracking-[-0.96px] translate-x-[-50%] w-[202px]" style={{ fontVariationSettings: "'wdth' 100" }}>
                      {stickyCardType === 'unlimited' ? (
                        <>Melbourne Unlimited Card</>
                      ) : (
                        <>Get Selective Card</>
                      )}
                    </p>
                  </div>
                  
                  {/* Orange Border */}
                  <div aria-hidden="true" className="absolute border-2 border-[#ffb23f] border-solid inset-0 pointer-events-none rounded-[12px]" />
                </div>
              ) : (
                <div className="relative flex flex-col items-center gap-2.5 z-10">
                  {/* QR Icon */}
                  <QrCode className="w-14 h-14" />

                  {/* Text */}
                  <div className="text-center">
                    <div className="font-poppins font-semibold tracking-wide">
                      Scan QR
                    </div>
                    <div className="font-poppins text-xs opacity-70 leading-tight">
                      Download App
                    </div>
                  </div>
                </div>
              )}

              {/* Subtle Hover Effect */}
              <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-white/5 pointer-events-none rounded-2xl"></div>
            </motion.button>
          )}
        </AnimatePresence>

        <AnimatePresence>
          {showQRCard && currentPage !== 'attractions' && (
            <motion.div
              initial={{ scale: 0, opacity: 0, x: 20, y: 20 }}
              animate={{ scale: 1, opacity: 1, x: 0, y: 0 }}
              exit={{ scale: 0, opacity: 0, x: 20, y: 20 }}
              transition={{ duration: 0.4, ease: easeOutExpo }}
              className="bg-black p-14 shadow-2xl border border-gray-800 backdrop-blur-sm relative rounded-[5px]"
            >
              {/* Close Button */}
              <button
                onClick={() => setShowQRCard(false)}
                className="absolute top-6 right-6 w-12 h-12 bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors duration-200 rounded-[5px]"
                aria-label="Close QR Code"
              >
                <X className="w-6 h-6 text-white" />
              </button>

              {/* QR Code - Much Larger */}
              <div className="w-120 h-120 bg-white p-10 mb-10 rounded-[5px]">
                <div className="w-full h-full bg-white relative overflow-hidden rounded-[3px]">
                  {/* QR Code Pattern */}
                  <div className="grid grid-cols-27 gap-0 w-full h-full p-4">
                    {qrPattern.map((filled, index) => (
                      <motion.div
                        key={index}
                        className={`aspect-square ${filled ? 'bg-black' : 'bg-transparent'} rounded-[0.5px]`}
                        initial={{ opacity: 0, scale: 0 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ 
                          duration: 0.01, 
                          delay: index * 0.001,
                          ease: "easeOut"
                        }}
                      />
                    ))}
                  </div>

                  {/* Center Logo - Much Larger */}
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="w-20 h-20 bg-white shadow-2xl border-4 border-gray-200 flex items-center justify-center rounded-[5px]">
                      <img 
                        src={cityCardsLogo} 
                        alt="CityCards" 
                        className="w-16 h-16 object-contain"
                      />
                    </div>
                  </div>
                </div>
              </div>

              {/* Text Content - Larger */}
              <div className="text-center text-white">
                <h3 className="text-4xl font-semibold text-white mb-5">Scan QR for app</h3>
                <p className="text-xl text-gray-300 leading-relaxed max-w-lg mx-auto">
                  Scan to get the Melbourne CityCards mobile app
                </p>
              </div>

              {/* Static Border */}
              <div className="absolute inset-0 border border-primary/20 pointer-events-none rounded-[5px]"></div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      {/* Preload animation optimization */}
      <motion.div
        className="fixed inset-0 bg-background z-50 pointer-events-none"
        initial={{ opacity: 1 }}
        animate={{ opacity: 0 }}
        transition={{ duration: 0.4, delay: 0.1 }}
        onAnimationComplete={() => {
          // Remove from DOM after animation
          const element = document.querySelector('[data-preload]');
          element?.remove();
        }}
        data-preload
      />
    </div>
  );
}

// Export animation variants for use in components
export {
  heroVariants,
  sectionVariants,
  cardVariants,
  staggerContainer,
  fastStaggerContainer,
  headingVariants,
  textVariants,
  ctaVariants,
  iconVariants,
  buttonHoverVariants,
  cardHoverVariants,
  easeOutQuart,
  easeOutExpo,
  easeOutCubic
};

export default App;