import { useState } from 'react';
import { motion } from 'motion/react';
import { Search, Star, Clock, ChevronRight } from 'lucide-react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Card, CardContent } from './ui/card';
import { Badge } from './ui/badge';
import { Checkbox } from './ui/checkbox';
import Navbar from './Navbar';
import { CitySubmenu } from './CitySubmenu';
import { Footer } from './Footer';
import { ImageWithFallback } from './figma/ImageWithFallback';

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

interface Attraction {
  id: string;
  name: string;
  description: string;
  image: string;
  location: string;
  duration: string;
  rating: number;
  price: number;
  category: string;
  hasReservation: boolean;
  reviewCount: number;
  passType: string;
}

const attractions: Attraction[] = [
  {
    id: '1',
    name: 'Centipede Tour - Guided Arizona Desert Tour by ATV',
    description: 'Experience the thrill of off-road adventure through the stunning Arizona desert landscape',
    image: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhdHYlMjBkZXNlcnQlMjB0b3VyfGVufDF8fHx8MTc1ODEwNDg5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'Paris, France',
    duration: '4 days',
    rating: 4.8,
    price: 189.25,
    category: 'adventure',
    hasReservation: true,
    reviewCount: 243,
    passType: 'unlimited'
  },
  {
    id: '2',
    name: 'Molokini and Turtle Town Snorkeling Adventure Aboard',
    description: 'Snorkel in crystal-clear waters and swim alongside sea turtles in this unforgettable marine adventure',
    image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'New York, USA',
    duration: '4 days',
    rating: 4.8,
    price: 225,
    category: 'adventure',
    hasReservation: false,
    reviewCount: 167,
    passType: 'selective'
  },
  {
    id: '3',
    name: 'Westminster Walking Tour & Westminster Abbey Entry',
    description: 'Explore the heart of London with guided tours of historic Westminster and the famous Abbey',
    image: 'https://images.unsplash.com/photo-1533929736458-ca588d08c8be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3ZXN0bWluc3RlciUyMGFiYmV5JTIwbG9uZG9ufGVufDF8fHx8MTc1ODEwNDkwNnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'London, UK',
    duration: '4 days',
    rating: 4.8,
    price: 343,
    category: 'culture',
    hasReservation: true,
    reviewCount: 343,
    passType: 'unlimited'
  },
  {
    id: '4',
    name: 'All Inclusive Ultimate Circle Island Day Tour with Lunch',
    description: 'Comprehensive island tour including all major attractions, lunch, and transportation',
    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc2xhbmQlMjB0b3VyJTIwYWRvJTIwdHJvcGljYWx8ZW58MXx8fHwxNzU4MTA0OTEwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'New York, USA',
    duration: '4 days',
    rating: 4.8,
    price: 225,
    category: 'adventure',
    hasReservation: false,
    reviewCount: 243,
    passType: 'unlimited'
  },
  {
    id: '5',
    name: 'Space Center Houston Admission Ticket',
    description: 'Explore NASA\'s Johnson Space Center and discover the wonders of space exploration',
    image: 'https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzcGFjZSUyMGNlbnRlciUyMG5hc2ElMjBob3VzdG9ufGVufDF8fHx8MTc1ODEwNDkxM3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'Paris, France',
    duration: '4 days',
    rating: 4.8,
    price: 225,
    category: 'family',
    hasReservation: true,
    reviewCount: 243,
    passType: 'selective'
  },
  {
    id: '6',
    name: 'Melbourne Skydeck Observatory',
    description: 'Experience breathtaking 360-degree views from the Southern Hemisphere\'s highest viewing platform',
    image: 'https://images.unsplash.com/photo-1677200922658-d0df5b2ac91e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhdHRyYWN0aW9ucyUyMGZhbW91cyUyMGxhbmRtYXJrc3xlbnwxfHx8fDE3NTc0MDEwODV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'Melbourne CBD',
    duration: '2 hours',
    rating: 4.5,
    price: 25,
    category: 'adventure',
    hasReservation: true,
    reviewCount: 892,
    passType: 'selective'
  },
  {
    id: '7',
    name: 'Royal Botanic Gardens Melbourne',
    description: 'Explore 38 hectares of stunning gardens featuring over 8,500 species of plants',
    image: 'https://images.unsplash.com/photo-1721272962395-a848331ce92d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zfGVufDF8fHx8MTc1NzMzNzc4OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'South Yarra',
    duration: '3 hours',
    rating: 4.7,
    price: 0,
    category: 'nature',
    hasReservation: false,
    reviewCount: 1245,
    passType: 'selective'
  },
  {
    id: '8',
    name: 'Federation Square Cultural Precinct',
    description: 'Melbourne\'s cultural precinct featuring galleries, museums, and unique architecture',
    image: 'https://images.unsplash.com/photo-1580688027085-8220709e3d84?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmZWRlcmF0aW9uJTIwc3F1YXJlJTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NzQwMTA5Mnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'Melbourne CBD',
    duration: '3 hours',
    rating: 4.3,
    price: 0,
    category: 'culture',
    hasReservation: true,
    reviewCount: 672,
    passType: 'unlimited'
  },
  {
    id: '9',
    name: 'St Kilda Pier & Little Penguins',
    description: 'Watch little penguins return home at sunset while enjoying the scenic pier',
    image: 'https://images.unsplash.com/photo-1597889790884-2bb63cfbd4f6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdCUyMGtpbGRhJTIwcGllciUyMG1lbGJvdXJuZXxlbnwxfHx8fDE3NTc0MDEwOTV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'St Kilda',
    duration: '2 hours',
    rating: 4.4,
    price: 0,
    category: 'nature',
    hasReservation: false,
    reviewCount: 543,
    passType: 'unlimited'
  },
  {
    id: '10',
    name: 'Queen Victoria Market Experience',
    description: 'Historic market offering fresh produce, gourmet foods, and unique souvenirs',
    image: 'https://images.unsplash.com/photo-1676454953709-e0be46f62490?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0JTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NzQwMTA5OHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'Melbourne CBD',
    duration: '2 hours',
    rating: 4.6,
    price: 0,
    category: 'culture',
    hasReservation: true,
    reviewCount: 987,
    passType: 'selective'
  },
  {
    id: '11',
    name: 'Melbourne Zoo Adventure',
    description: 'Meet over 320 animal species from around the world in naturalistic habitats',
    image: 'https://images.unsplash.com/photo-1681429477985-30dc7b88dd5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjBhbmltYWxzfGVufDF8fHx8MTc1NzMzNzgxMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'Parkville',
    duration: '4 hours',
    rating: 4.5,
    price: 40,
    category: 'family',
    hasReservation: false,
    reviewCount: 1156,
    passType: 'selective'
  },
  {
    id: '12',
    name: 'Great Ocean Road Day Tour',
    description: 'Scenic coastal drive featuring the famous Twelve Apostles and stunning ocean views',
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTgxMDQ5Mzd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    location: 'Great Ocean Road',
    duration: '12 hours',
    rating: 4.9,
    price: 85,
    category: 'adventure',
    hasReservation: true,
    reviewCount: 678,
    passType: 'unlimited'
  }
];

const filterCategories = [
  { value: 'with-reservation', label: 'With Reservation', count: 3 },
  { value: 'without-reservation', label: 'Without Reservation', count: 3 },
  { value: 'beach', label: 'Beach', count: 3 },
  { value: 'adventure', label: 'Adventure', count: 3 },
  { value: 'mountains', label: 'Mountains', count: 3 },
  { value: 'family', label: 'Family Friendly', count: 3 }
];

const passTypeCategories = [
  { value: 'selective', label: 'Selective Pass', count: 6 },
  { value: 'unlimited', label: 'Unlimited Pass', count: 6 }
];

interface AttractionsPageProps {
  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;
  onAttractionClick?: (attractionId: string) => void;
  currentPage: string;
  user: User | null;
}

export function AttractionsPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  onAttractionClick,
  currentPage,
  user
}: AttractionsPageProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [selectedPassTypes, setSelectedPassTypes] = useState<string[]>([]);

  const filteredAttractions = attractions.filter(attraction => {
    const matchesSearch = attraction.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         attraction.description.toLowerCase().includes(searchQuery.toLowerCase());
    
    const matchesCategory = selectedCategories.length === 0 || 
                           selectedCategories.some(cat => {
                             if (cat === 'with-reservation') return attraction.hasReservation;
                             if (cat === 'without-reservation') return !attraction.hasReservation;
                             return attraction.category === cat;
                           });
    
    const matchesPassType = selectedPassTypes.length === 0 || 
                           selectedPassTypes.includes(attraction.passType);
    
    return matchesSearch && matchesCategory && matchesPassType;
  });

  const toggleCategory = (category: string) => {
    setSelectedCategories(prev => 
      prev.includes(category) 
        ? prev.filter(c => c !== category)
        : [...prev, category]
    );
  };

  const togglePassType = (passType: string) => {
    setSelectedPassTypes(prev => 
      prev.includes(passType) 
        ? prev.filter(p => p !== passType)
        : [...prev, passType]
    );
  };

  const showingFrom = 1;
  const showingTo = Math.min(12, filteredAttractions.length);
  const totalItems = filteredAttractions.length;

  return (
    <div className="min-h-screen bg-background">
      <Navbar
        activeCity="Melbourne"
        onCityChange={(city) => {
          if (city === 'Melbourne') {
            onMelbourneClick();
          }
        }}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onHomeClick={onHomeClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        currentPage="attractions"
        isUserSignedIn={!!user}
        user={user}
      />

      {/* City Submenu */}
      <CitySubmenu 
        currentPage={currentPage}
        onClose={() => {}} // Empty function since submenu always shows on this page
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onAttractionsClick={onAttractionsClick}
        onPassesClick={onPassesClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
      />

      <div className="container mx-auto px-4 pt-56 pb-16">
        {/* Breadcrumb */}


        {/* Page Header */}
        <div className="text-center mb-12">
          <h1 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight text-gray-900 mb-4">
            <span className="font-light">Discover</span>{' '}
            <span className="font-bold italic text-gradient-primary">Melbourne's</span>{' '}
            <span className="font-normal">Best</span>{' '}
            <span className="font-semibold text-emphasis">Attractions</span>
          </h1>
          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
            Skip the lines and explore Melbourne's most iconic destinations with your CityCard pass
          </p>
        </div>

        {/* City Card Promotional Banner */}
        <div className="mb-8">
          <Card className="bg-gradient-to-r from-primary to-primary/80 text-white p-8 rounded-xl border-none shadow-lg overflow-hidden relative">
            <div className="flex flex-col gap-6">
              <h2 className="font-merchant text-2xl leading-tight font-bold text-white">
                Find Your Perfect Adventure
              </h2>
              
              {/* Search Bar and Button Container */}
              <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
                {/* Search Bar */}
                <div className="relative flex-1 max-w-lg">
                  <Input
                    placeholder="Search An Attraction"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-4 pr-12 h-[44px] bg-white/95 backdrop-blur-sm border-0 rounded-lg text-gray-800 placeholder:text-gray-500 font-poppins shadow-lg"
                  />
                  <Search className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500 w-5 h-5" />
                </div>
                
                {/* Call-to-Action Button */}
                <Button 
                  className="bg-white/90 hover:bg-white text-primary border-2 border-primary hover:border-primary/80 px-8 h-[44px] rounded-lg font-semibold transition-all duration-200 hover:scale-105 font-poppins shadow-lg"
                  onClick={onCheckoutClick}
                >
                  Buy Now
                </Button>
              </div>
            </div>
            
            {/* Decorative background elements */}
            <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-16 translate-x-16"></div>
            <div className="absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full translate-y-12 -translate-x-12"></div>
          </Card>
        </div>

        <div className="flex gap-8">
          {/* Left Sidebar */}
          <div className="w-64 flex-shrink-0">
            <Card className="p-8 sticky top-32">
              <div className="space-y-6">
                {/* Search by header */}
                <div className="flex items-center gap-4">
                  <div className="h-0 w-6 border-t-[3px] border-[#2d2d2d] rotate-90"></div>
                  <h3 className="font-merchant text-[22px] text-[#2d2d2d] font-normal">Search by</h3>
                </div>

                {/* Filter categories */}
                <div className="space-y-4">
                  {filterCategories.map(category => (
                    <div key={category.value} className="flex items-center gap-3">
                      <Checkbox
                        id={category.value}
                        checked={selectedCategories.includes(category.value)}
                        onCheckedChange={() => toggleCategory(category.value)}
                        className="border-[#bebebe]"
                      />
                      <label
                        htmlFor={category.value}
                        className="font-poppins text-sm text-[#414141] cursor-pointer flex-1 font-normal"
                      >
                        {category.label} ({category.count})
                      </label>
                    </div>
                  ))}
                </div>

                {/* Divider */}
                <div className="border-t border-[#e5e5e5]"></div>

                {/* Pass Type header */}
                <div className="flex items-center gap-4">
                  <div className="h-0 w-6 border-t-[3px] border-[#2d2d2d] rotate-90"></div>
                  <h3 className="font-merchant text-[22px] text-[#2d2d2d] font-normal">Pass Type</h3>
                </div>

                {/* Pass Type filters */}
                <div className="space-y-4">
                  {passTypeCategories.map(passType => (
                    <div key={passType.value} className="flex items-center gap-3">
                      <Checkbox
                        id={passType.value}
                        checked={selectedPassTypes.includes(passType.value)}
                        onCheckedChange={() => togglePassType(passType.value)}
                        className="border-[#bebebe]"
                      />
                      <label
                        htmlFor={passType.value}
                        className="font-poppins text-sm text-[#414141] cursor-pointer flex-1 font-normal"
                      >
                        {passType.label} ({passType.count})
                      </label>
                    </div>
                  ))}
                </div>
              </div>
            </Card>
          </div>

          {/* Main Content */}
          <div className="flex-1">
            {/* Header */}
            <div className="mb-8">
              <h1 className="text-[48px] font-medium text-[#2d2d2d] mb-6">Attractions in Melbourne</h1>
              
              {/* Results count */}
              <p className="text-[16px] text-[#414141] mb-2">
                Showing {showingFrom}-{showingTo} of {totalItems} Item(s)
              </p>
            </div>

            {/* Attractions Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
              {filteredAttractions.slice(0, 12).map((attraction) => (
                <motion.div
                  key={attraction.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3 }}
                  className="h-full"
                >
                  <Card 
                    className="overflow-hidden hover:shadow-lg transition-all duration-200 cursor-pointer h-full flex flex-col group hover:border-primary/20"
                    onClick={() => onAttractionClick?.(attraction.id)}
                  >
                    <div className="aspect-[4/3] relative bg-gray-200 overflow-hidden">
                      <ImageWithFallback
                        src={attraction.image}
                        alt={attraction.name}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                      />
                      {/* Pass Type Badge */}
                      <div className="absolute top-3 left-3 flex flex-col gap-2">
                        {attraction.price === 0 ? (
                          <Badge className="bg-primary text-white px-3 py-1 font-poppins font-semibold shadow-lg">
                            FREE
                          </Badge>
                        ) : attraction.passType === 'unlimited' ? (
                          <Badge className="bg-gradient-to-r from-amber-500 to-orange-500 text-white px-3 py-1 font-poppins font-semibold shadow-lg border-0">
                            Unlimited Pass Exclusive
                          </Badge>
                        ) : (
                          <Badge className="bg-gradient-to-r from-blue-500 to-cyan-500 text-white px-3 py-1 font-poppins font-semibold shadow-lg border-0">
                            Selective Pass
                          </Badge>
                        )}
                      </div>
                    </div>
                    <CardContent className="p-4 flex-1 flex flex-col">
                      <div className="text-sm text-muted-foreground mb-2 font-medium font-poppins">
                        {attraction.location}
                      </div>
                      <h3 className="font-semibold text-foreground mb-3 line-clamp-2 leading-tight min-h-[2.5rem] font-poppins">
                        {attraction.name}
                      </h3>
                      <div className="flex items-center gap-2 mb-3">
                        <div className="flex items-center gap-1">
                          {[...Array(5)].map((_, i) => (
                            <Star
                              key={i}
                              className={`w-4 h-4 ${
                                i < Math.floor(attraction.rating)
                                  ? 'fill-primary text-primary'
                                  : 'text-gray-300'
                              }`}
                            />
                          ))}
                          <span className="text-sm font-medium ml-1 text-gray-700 font-poppins">
                            {attraction.rating} ({attraction.reviewCount})
                          </span>
                        </div>
                      </div>
                      
                      {/* Pricing and Pass Info */}
                      <div className="mt-auto pt-2 space-y-3">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-1 text-sm text-muted-foreground">
                            <Clock className="w-4 h-4 text-primary" />
                            <span className="font-poppins">{attraction.duration}</span>
                          </div>
                          <div className="text-right">
                            <div className="text-xs text-muted-foreground font-poppins font-normal">Normal visit price</div>
                            <div className="text-lg font-bold text-gray-400 line-through font-poppins">
                              ${attraction.price}
                            </div>
                          </div>
                        </div>
                        
                        {/* Included with Pass CTA */}
                        <div className="bg-gradient-to-r from-primary/10 to-secondary/10 border border-primary/20 rounded-lg p-2.5">
                          <div className="flex items-center justify-between gap-2">
                            <div className="flex-1">
                              <p className="text-xs font-poppins font-semibold text-primary uppercase">
                                ✓ Included with {attraction.passType === 'unlimited' ? 'Unlimited' : 'Selective'} Pass
                              </p>
                              <p className="text-xs font-poppins font-normal text-gray-600 mt-0.5">
                                Save ${attraction.price}
                              </p>
                            </div>
                            <Button
                              className="bg-primary hover:bg-primary/90 text-white font-poppins font-semibold text-xs px-4 min-h-[44px] min-w-[44px] h-[44px] whitespace-nowrap"
                              onClick={(e) => {
                                e.stopPropagation();
                                onCheckoutClick();
                              }}
                            >
                              Get Pass
                            </Button>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <Footer
        onHomeClick={onHomeClick}
        onAboutUsClick={onAboutUsClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onBlogsClick={onBlogsClick}
        onContactUsClick={onContactUsClick}
      />
    </div>
  );
}