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 { 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';

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

interface DownloadAppPageProps {
  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 DownloadAppPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: DownloadAppPageProps) {
  // Card type state
  const [cardType, setCardType] = useState<'unlimited' | 'selective'>('unlimited');

  // 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
  };

  // Mock attractions data
  const attractions = [
    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' },
    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' },
    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' },
    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' },
    { name: 'Colosseum', tours: '100+ Tours', image: 'https://images.unsplash.com/photo-1552832230-c0197dd311b5?w=100' }
  ];

  // Mock user profiles
  const userProfiles = [
    'https://images.unsplash.com/photo-1494790108755-2616b332b467?w=60',
    'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60',
    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60',
    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60',
    'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=60'
  ];

  // Generate QR code pattern
  const generateQRPattern = () => {
    const size = 17;
    const pattern = [];
    
    for (let i = 0; i < size * size; i++) {
      const row = Math.floor(i / size);
      const col = i % size;
      
      // Corner squares (5x5 for smaller QR)
      const isCornerSquare = 
        (row < 5 && col < 5) || // Top-left
        (row < 5 && col >= 12) || // Top-right
        (row >= 12 && col < 5); // Bottom-left
      
      // Finder patterns within corner squares
      const isFinderPattern = isCornerSquare && (
        (row === 0 || row === 4 || col === 0 || col === 4) ||
        (row >= 2 && row <= 2 && col >= 2 && col <= 2)
      );
      
      // Timing patterns
      const isTimingPattern = (row === 4 && col >= 6 && col <= 10) || (col === 4 && row >= 6 && row <= 10);
      
      // Random data pattern for other areas
      const isDataPattern = !isCornerSquare && !isTimingPattern && Math.random() > 0.4;
      
      pattern.push(isFinderPattern || isTimingPattern || isDataPattern);
    }
    
    return pattern;
  };

  const qrPattern = generateQRPattern();

  return (
    <div className="min-h-screen bg-[#f8f8f8]">
      <Navbar 
        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}
        currentPage={currentPage}
        isUserSignedIn={!!user}
        user={user}
      />

      <div className="container mx-auto px-4 pt-40 pb-6">
        {/* Back Button */}
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          className="mb-6"
        >
          <Button
            variant="ghost"
            onClick={onBackClick}
            className="p-0 hover:bg-transparent"
          >
            <div className="text-gray-600 hover:text-primary transition-colors duration-200 flex items-center gap-2">
              <ArrowLeft className="w-4 h-4" />
              <span>Back</span>
            </div>
          </Button>
        </motion.div>

        {/* Pass Card - Redesigned */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-8"
        >
          <Card className="border-0 shadow-lg overflow-hidden">
            {/* Gradient Header Bar */}
            <div className="h-2 bg-gradient-to-r from-primary via-secondary to-primary"></div>
            
            <CardContent className="p-6">
              {/* Card Header */}
              <div className="flex items-start justify-between mb-6">
                <div className="flex items-start gap-4">
                  {/* Icon */}
                  <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center flex-shrink-0">
                    <Ticket className="w-7 h-7 text-primary" />
                  </div>
                  
                  {/* Title and Status */}
                  <div>
                    <h2 className="font-merchant text-xl font-semibold text-gray-900 mb-2">
                      {currentPass.name}
                    </h2>
                    <Badge className="bg-gradient-to-r from-green-500 to-green-600 text-white px-3 py-1 rounded-full">
                      <div className="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
                      {currentPass.status}
                    </Badge>
                  </div>
                </div>
                
                {/* Date Badge */}
                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 px-4 py-2 rounded-lg">
                  <div className="flex items-center gap-2 text-primary">
                    <Calendar className="w-4 h-4" />
                    <span className="font-poppins font-medium text-sm">{currentPass.date}</span>
                  </div>
                </div>
              </div>
              
              {/* Stats Grid */}
              <div className="grid grid-cols-3 gap-4">
                {/* Duration */}
                <div className="bg-gray-50 rounded-lg p-4 text-center">
                  <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center mx-auto mb-2">
                    <Clock className="w-5 h-5 text-primary" />
                  </div>
                  <div className="font-poppins text-xs text-gray-500 mb-1">Duration</div>
                  <div className="font-poppins font-semibold text-gray-900">{currentPass.duration}</div>
                </div>
                
                {/* Adults */}
                <div className="bg-gray-50 rounded-lg p-4 text-center">
                  <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center mx-auto mb-2">
                    <Users className="w-5 h-5 text-primary" />
                  </div>
                  <div className="font-poppins text-xs text-gray-500 mb-1">Adults</div>
                  <div className="font-poppins font-semibold text-gray-900">{currentPass.adults}</div>
                </div>
                
                {/* Kids */}
                <div className="bg-gray-50 rounded-lg p-4 text-center">
                  <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center mx-auto mb-2">
                    <Star className="w-5 h-5 text-primary" />
                  </div>
                  <div className="font-poppins text-xs text-gray-500 mb-1">Kids</div>
                  <div className="font-poppins font-semibold text-gray-900">{currentPass.kids}</div>
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div>

        {/* Attractions Section - Redesigned */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="mb-8"
        >
          <Card className="border-0 shadow-lg">
            <CardContent className="p-6">
              {/* Section Header */}
              <div className="flex items-center justify-between mb-5">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                    <MapPin className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <h3 className="font-merchant text-lg font-semibold text-gray-900">
                      Included Attractions
                    </h3>
                    <p className="font-poppins text-xs text-gray-500">
                      Explore amazing places
                    </p>
                  </div>
                </div>
                <Badge className="bg-primary/10 text-primary border-0 px-3 py-1">
                  <span className="font-poppins font-medium">25+ Places</span>
                </Badge>
              </div>

              {/* Attractions Scroll */}
              <div className="flex items-center gap-4 overflow-x-auto pb-2 scrollbar-hide mb-4">
                {attractions.map((attraction, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ delay: 0.1 * index }}
                    className="flex-shrink-0"
                  >
                    <Card className="w-40 hover:shadow-lg transition-all duration-300 border-0 bg-gradient-to-br from-gray-50 to-white cursor-pointer group">
                      <CardContent className="p-3">
                        {/* Image */}
                        <div className="w-full h-24 bg-gray-200 rounded-lg mb-3 overflow-hidden">
                          <ImageWithFallback
                            src={attraction.image}
                            alt={attraction.name}
                            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                          />
                        </div>
                        
                        {/* Info */}
                        <div>
                          <h4 className="font-poppins font-semibold text-sm text-gray-900 mb-1 truncate">
                            {attraction.name}
                          </h4>
                          <div className="flex items-center gap-1 text-xs text-primary">
                            <Ticket className="w-3 h-3" />
                            <span className="font-poppins font-medium">{attraction.tours}</span>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </div>

              {/* View All Button */}
              <Button 
                variant="outline" 
                className="w-full border-2 border-dashed border-primary/30 hover:border-primary hover:bg-primary/5 text-primary font-poppins font-medium transition-all duration-300"
                onClick={onAttractionsClick}
              >
                <span>View All Attractions</span>
                <ChevronRight className="w-4 h-4 ml-2" />
              </Button>
            </CardContent>
          </Card>
        </motion.div>

        {/* Special Benefits & Offers - Redesigned */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="mb-8"
        >
          <Card className="border-0 shadow-lg overflow-hidden bg-gradient-to-br from-primary/5 via-white to-secondary/5">
            <CardContent className="p-6">
              {/* Header */}
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                    <Gift className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-merchant text-xl font-semibold text-gray-900">
                      Exclusive Offers
                    </h3>
                    <p className="font-poppins text-sm text-gray-600 font-normal">
                      50+ special deals for cardholders
                    </p>
                  </div>
                </div>
                <Badge className="bg-gradient-to-r from-green-500 to-green-600 text-white border-0 px-3 py-1">
                  <Sparkles className="w-3 h-3 mr-1" />
                  <span className="font-poppins font-medium">Limited Time</span>
                </Badge>
              </div>

              {/* Featured Offers Grid */}
              <div className="space-y-4 mb-5">
                {/* Offer 1 - Restaurant Discount */}
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 }}
                  className="bg-gradient-to-br from-orange-50 to-red-50 rounded-xl p-4 border border-orange-200 hover:border-orange-300 transition-all duration-300 cursor-pointer group hover:shadow-lg"
                  onClick={onOffersClick}
                >
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-red-500 flex items-center justify-center">
                        <Gift className="w-5 h-5 text-white" />
                      </div>
                      <div>
                        <h4 className="font-poppins font-semibold text-base text-gray-900">
                          Restaurant Discounts
                        </h4>
                        <p className="font-poppins text-xs text-gray-600 font-normal">
                          At partner restaurants
                        </p>
                      </div>
                    </div>
                    <div className="bg-white rounded-lg px-3 py-2 shadow-sm">
                      <span className="font-merchant text-2xl font-semibold text-orange-600">25%</span>
                      <span className="font-poppins text-xs text-gray-600 ml-1">OFF</span>
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
                    <p className="font-poppins text-xs text-gray-700 font-normal">
                      Valid at 30+ dining locations
                    </p>
                    <ChevronRight className="w-4 h-4 text-orange-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </motion.div>

                {/* Offer 2 - Hotel Savings */}
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2 }}
                  className="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-4 border border-blue-200 hover:border-blue-300 transition-all duration-300 cursor-pointer group hover:shadow-lg"
                  onClick={onOffersClick}
                >
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
                        <Star className="w-5 h-5 text-white" />
                      </div>
                      <div>
                        <h4 className="font-poppins font-semibold text-base text-gray-900">
                          Hotel Bookings
                        </h4>
                        <p className="font-poppins text-xs text-gray-600 font-normal">
                          Premium accommodations
                        </p>
                      </div>
                    </div>
                    <div className="bg-white rounded-lg px-3 py-2 shadow-sm">
                      <span className="font-merchant text-2xl font-semibold text-blue-600">15%</span>
                      <span className="font-poppins text-xs text-gray-600 ml-1">OFF</span>
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
                    <p className="font-poppins text-xs text-gray-700 font-normal">
                      Exclusive rates on 100+ hotels
                    </p>
                    <ChevronRight className="w-4 h-4 text-blue-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </motion.div>

                {/* Offer 3 - Shopping Deals */}
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.3 }}
                  className="bg-gradient-to-br from-pink-50 to-purple-50 rounded-xl p-4 border border-pink-200 hover:border-pink-300 transition-all duration-300 cursor-pointer group hover:shadow-lg"
                  onClick={onOffersClick}
                >
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-pink-400 to-purple-500 flex items-center justify-center">
                        <Sparkles className="w-5 h-5 text-white" />
                      </div>
                      <div>
                        <h4 className="font-poppins font-semibold text-base text-gray-900">
                          Shopping Vouchers
                        </h4>
                        <p className="font-poppins text-xs text-gray-600 font-normal">
                          Top retail stores
                        </p>
                      </div>
                    </div>
                    <div className="bg-white rounded-lg px-3 py-2 shadow-sm">
                      <span className="font-merchant text-2xl font-semibold text-pink-600">20%</span>
                      <span className="font-poppins text-xs text-gray-600 ml-1">OFF</span>
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
                    <p className="font-poppins text-xs text-gray-700 font-normal">
                      Redeemable at 50+ stores
                    </p>
                    <ChevronRight className="w-4 h-4 text-pink-600 group-hover:translate-x-1 transition-transform" />
                  </div>
                </motion.div>
              </div>

              {/* View All Offers CTA */}
              <div className="bg-gradient-to-r from-primary/10 via-secondary/10 to-primary/10 rounded-xl p-5 border border-primary/20">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    {/* User Avatars - Social Proof */}
                    <div className="flex items-center -space-x-2">
                      {userProfiles.slice(0, 3).map((profile, index) => (
                        <div 
                          key={index} 
                          className="w-9 h-9 rounded-full border-2 border-white bg-gray-200 overflow-hidden shadow-sm"
                          style={{ zIndex: 10 - index }}
                        >
                          <ImageWithFallback
                            src={profile}
                            alt={`User ${index + 1}`}
                            className="w-full h-full object-cover"
                          />
                        </div>
                      ))}
                      <div className="w-9 h-9 rounded-full border-2 border-white bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-poppins font-semibold text-xs shadow-sm">
                        +10K
                      </div>
                    </div>
                    
                    {/* Text */}
                    <div>
                      <h4 className="font-poppins font-semibold text-sm text-gray-900">
                        10,000+ Users Saved
                      </h4>
                      <p className="font-poppins text-xs text-gray-600 font-normal">
                        Over $2M in total savings
                      </p>
                    </div>
                  </div>

                  {/* View All Offers Button */}
                  <Button
                    size="sm"
                    onClick={onOffersClick}
                    className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
                  >
                    View All 50+ Offers
                    <ChevronRight className="w-4 h-4 ml-1" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </motion.div>

        {/* Main Content Grid */}
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left Content - Dynamic Card Selection */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.4 }}
            className="space-y-8"
          >
            {/* Toggle between Unlimited and Selective */}
            <div className="flex gap-3 mb-6">
              <Button
                variant={cardType === 'unlimited' ? 'default' : 'outline'}
                onClick={() => setCardType('unlimited')}
                className="flex-1 font-poppins font-medium"
              >
                Unlimited Card
              </Button>
              <Button
                variant={cardType === 'selective' ? 'default' : 'outline'}
                onClick={() => setCardType('selective')}
                className="flex-1 font-poppins font-medium"
              >
                Selective Card
              </Button>
            </div>

            {cardType === 'unlimited' ? (
              <>
                <div className="space-y-4">
                  <h1 className="heading-dynamic font-merchant text-4xl lg:text-5xl leading-tight">
                    <span className="font-normal">Get</span>{' '}
                    <span className="font-semibold text-gradient-primary">Melbourne Unlimited Card</span>
                  </h1>
                  
                  <p className="font-poppins text-lg text-gray-600 leading-relaxed font-normal">
                    Unlimited access to 25+ top Melbourne attractions. Visit as many places as you want 
                    with one simple card and save up to 40% compared to individual tickets.
                  </p>
                </div>

                {/* Benefits List */}
                <div className="space-y-4">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
                      <CreditCard className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-merchant text-lg font-medium mb-1">Unlimited Entries</h3>
                      <p className="font-poppins text-sm text-gray-600 font-normal">Visit all 25+ attractions as many times as you want</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
                      <Calendar className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-merchant text-lg font-medium mb-1">7-Day Validity</h3>
                      <p className="font-poppins text-sm text-gray-600 font-normal">Explore at your own pace for 7 consecutive days</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
                      <Star className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-merchant text-lg font-medium mb-1">Skip the Queue</h3>
                      <p className="font-poppins text-sm text-gray-600 font-normal">Fast-track entry at major attractions</p>
                    </div>
                  </div>
                </div>

                {/* CTA Buttons */}
                <div className="flex gap-4">
                  <Button 
                    onClick={onPassesClick}
                    className="flex-1 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-semibold h-12"
                  >
                    Purchase Now
                  </Button>
                  <Button 
                    variant="outline"
                    onClick={onCityCardsClick}
                    className="font-poppins font-medium"
                  >
                    Learn More
                  </Button>
                </div>
              </>
            ) : (
              <>
                <div className="space-y-4">
                  <h1 className="heading-dynamic font-merchant text-4xl lg:text-5xl leading-tight">
                    <span className="font-normal">Get</span>{' '}
                    <span className="font-semibold text-gradient-primary">Selective Card</span>{' '}
                    <span className="font-normal">now</span>
                  </h1>
                  
                  <p className="font-poppins text-lg text-gray-600 leading-relaxed font-normal">
                    Choose your own adventure with 12 hand-picked attractions. Perfect for visitors 
                    who want flexibility and great value for money.
                  </p>
                </div>

                {/* Benefits List */}
                <div className="space-y-4">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
                      <CheckCircle className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-merchant text-lg font-medium mb-1">12 Curated Attractions</h3>
                      <p className="font-poppins text-sm text-gray-600 font-normal">Choose from the best Melbourne has to offer</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
                      <Calendar className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-merchant text-lg font-medium mb-1">Flexible 7-Day Period</h3>
                      <p className="font-poppins text-sm text-gray-600 font-normal">Plan your visits within a week</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center flex-shrink-0">
                      <Sparkles className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h3 className="font-merchant text-lg font-medium mb-1">40% Savings</h3>
                      <p className="font-poppins text-sm text-gray-600 font-normal">Save big on combined ticket prices</p>
                    </div>
                  </div>
                </div>

                {/* CTA Buttons */}
                <div className="flex gap-4">
                  <Button 
                    onClick={onPassesClick}
                    className="flex-1 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-poppins font-semibold h-12"
                  >
                    Purchase Now
                  </Button>
                  <Button 
                    variant="outline"
                    onClick={onAttractionsClick}
                    className="font-poppins font-medium"
                  >
                    View Attractions
                  </Button>
                </div>
              </>
            )}
          </motion.div>

          {/* Right Content - Card Preview */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.5 }}
            className="flex justify-center lg:justify-end"
          >
            <Card className="w-full max-w-md overflow-hidden border-2 border-primary/20 shadow-2xl">
              <div className={`h-3 bg-gradient-to-r ${cardType === 'unlimited' ? 'from-yellow-400 via-primary to-secondary' : 'from-blue-400 via-primary to-purple-500'}`}></div>
              <CardContent className="p-8 space-y-6">
                {/* Card Header */}
                <div className="flex items-start justify-between">
                  <div>
                    <h3 className="font-merchant text-2xl font-semibold mb-2">
                      {cardType === 'unlimited' ? 'Melbourne Unlimited' : 'Melbourne Selective'}
                    </h3>
                    <Badge className="bg-gradient-to-r from-primary to-secondary text-white">
                      {cardType === 'unlimited' ? 'Most Popular' : 'Great Value'}
                    </Badge>
                  </div>
                  <CreditCard className="w-12 h-12 text-primary" />
                </div>

                {/* Pricing */}
                <div className="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-lg p-6 text-center">
                  <div className="text-4xl font-merchant font-semibold text-primary mb-2">
                    ${cardType === 'unlimited' ? '149' : '89'}
                  </div>
                  <div className="text-sm font-poppins text-gray-600 font-normal line-through mb-1">
                    ${cardType === 'unlimited' ? '249' : '149'}
                  </div>
                  <Badge variant="secondary" className="font-poppins font-medium">
                    Save {cardType === 'unlimited' ? '40' : '40'}%
                  </Badge>
                </div>

                {/* Features */}
                <div className="space-y-3">
                  <div className="flex items-center gap-3 text-sm font-poppins font-normal">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                    <span>{cardType === 'unlimited' ? '25+' : '12'} Amazing Attractions</span>
                  </div>
                  <div className="flex items-center gap-3 text-sm font-poppins font-normal">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                    <span>Valid for 7 Days</span>
                  </div>
                  <div className="flex items-center gap-3 text-sm font-poppins font-normal">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                    <span>{cardType === 'unlimited' ? 'Unlimited visits' : 'One visit per attraction'}</span>
                  </div>
                  <div className="flex items-center gap-3 text-sm font-poppins font-normal">
                    <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                    <span>Digital & Physical Card</span>
                  </div>
                </div>

                {/* Visual Decoration */}
                <div className="flex justify-between items-center pt-4 border-t border-gray-200">
                  <MapPin className="w-6 h-6 text-gray-400" />
                  <div className="flex gap-2">
                    <div className="w-8 h-8 rounded-full bg-primary/10"></div>
                    <div className="w-8 h-8 rounded-full bg-secondary/10"></div>
                    <div className="w-8 h-8 rounded-full bg-primary/20"></div>
                  </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}
        onContactUsClick={onContactUsClick}
        currentPage={currentPage}
      />
    </div>
  );
}