import { useState } from 'react';
import { motion } from 'motion/react';
import { 
  Search, 
  MapPin, 
  Calendar, 
  Users, 
  ChevronRight, 
  ChevronLeft,
  Star,
  Wifi,
  Utensils,
  Car,
  Dumbbell,
  Waves,
  X,
  Check,
  Crown,
  UserPlus,
  Mail,
  Smartphone,
  BadgePercent,
  Clock,
  Shield,
  ChevronDown,
  SlidersHorizontal
} from 'lucide-react';
import { Button } from './ui/button';
import { Card, CardContent } from './ui/card';
import { Input } from './ui/input';
import { Badge } from './ui/badge';
import { Slider } from './ui/slider';
import { Checkbox } from './ui/checkbox';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { ImageWithFallback } from './figma/ImageWithFallback';
import Navbar from './Navbar';
import { SubNavbar } from './SubNavbar';
import { Footer } from './Footer';

interface HotelDiscountsPageProps {
  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?: { email: string; name: string } | null;
}

interface HotelDeal {
  id: string;
  name: string;
  location: string;
  image: string;
  discount: number;
  originalPrice: number;
  salePrice: number;
  rating: number;
  reviews: number;
  features: string[];
  category: string;
}

interface City {
  name: string;
  image: string;
  fromPrice: number;
}

export function HotelDiscountsPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: HotelDiscountsPageProps) {
  const [selectedCategory, setSelectedCategory] = useState<string>('flash-sales');
  const [featuredScrollPosition, setFeaturedScrollPosition] = useState(0);
  const [priceRange, setPriceRange] = useState([50, 500]);
  const [selectedStars, setSelectedStars] = useState<number[]>([]);
  const [selectedAmenities, setSelectedAmenities] = useState<string[]>([]);
  const [selectedFilter, setSelectedFilter] = useState('popular');
  const [showFilters, setShowFilters] = useState(false);

  const hotelDeals: HotelDeal[] = [
    {
      id: '1',
      name: 'The Grand Palace Hotel',
      location: 'Paris, France',
      image: 'https://images.unsplash.com/photo-1694433053047-247d40a5f31b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYXJpcyUyMGhvdGVsJTIwZWlmZmVsfGVufDF8fHx8MTc1OTMyNDY0OHww&ixlib=rb-4.1.0&q=80&w=1080',
      discount: 60,
      originalPrice: 450,
      salePrice: 180,
      rating: 4.8,
      reviews: 1234,
      features: ['Free WiFi', 'Pool', 'Spa', 'Restaurant'],
      category: 'luxury'
    },
    {
      id: '2',
      name: 'Tokyo Skyline Suites',
      location: 'Tokyo, Japan',
      image: 'https://images.unsplash.com/photo-1706985003864-43b6a85103ec?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMGhvdGVsJTIwc2t5bGluZXxlbnwxfHx8fDE3NTkzMjQ2NTF8MA&ixlib=rb-4.1.0&q=80&w=1080',
      discount: 45,
      originalPrice: 320,
      salePrice: 176,
      rating: 4.9,
      reviews: 892,
      features: ['City View', 'Gym', 'WiFi', 'Parking'],
      category: 'business'
    },
    {
      id: '3',
      name: 'Manhattan Luxury Resort',
      location: 'New York, USA',
      image: 'https://images.unsplash.com/photo-1479502806991-251c94be6b15?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuZXclMjB5b3JrJTIwaG90ZWx8ZW58MXx8fHwxNzU5MzI0NjU0fDA&ixlib=rb-4.1.0&q=80&w=1080',
      discount: 35,
      originalPrice: 550,
      salePrice: 358,
      rating: 4.7,
      reviews: 2103,
      features: ['Rooftop Bar', 'Spa', 'Restaurant', 'WiFi'],
      category: 'luxury'
    },
    {
      id: '4',
      name: 'London Thames View Hotel',
      location: 'London, UK',
      image: 'https://images.unsplash.com/photo-1500025188590-2faf31cc956c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBob3RlbCUyMHZpZXd8ZW58MXx8fHwxNzU5MzI0NjU2fDA&ixlib=rb-4.1.0&q=80&w=1080',
      discount: 50,
      originalPrice: 380,
      salePrice: 190,
      rating: 4.6,
      reviews: 1567,
      features: ['River View', 'Breakfast', 'WiFi', 'Bar'],
      category: 'boutique'
    },
    {
      id: '5',
      name: 'Resort Paradise Retreat',
      location: 'Bali, Indonesia',
      image: 'https://images.unsplash.com/photo-1570213489059-0aac6626cade?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3RlbCUyMHBvb2wlMjByZXNvcnR8ZW58MXx8fHwxNzU5MzE0NzM4fDA&ixlib=rb-4.1.0&q=80&w=1080',
      discount: 55,
      originalPrice: 280,
      salePrice: 126,
      rating: 4.9,
      reviews: 3421,
      features: ['Beach Access', 'Pool', 'Spa', 'All-Inclusive'],
      category: 'family'
    },
    {
      id: '6',
      name: 'Boutique Central Hotel',
      location: 'Melbourne, Australia',
      image: 'https://images.unsplash.com/photo-1682221568203-16f33b35e57d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxib3V0aXF1ZSUyMGhvdGVsJTIwbG9iYnl8ZW58MXx8fHwxNzU5MjQ3NDUwfDA&ixlib=rb-4.1.0&q=80&w=1080',
      discount: 40,
      originalPrice: 220,
      salePrice: 132,
      rating: 4.8,
      reviews: 756,
      features: ['City Center', 'WiFi', 'Breakfast', 'Gym'],
      category: 'boutique'
    }
  ];

  const cities: City[] = [
    { name: 'Paris', image: 'https://images.unsplash.com/photo-1694433053047-247d40a5f31b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYXJpcyUyMGhvdGVsJTIwZWlmZmVsfGVufDF8fHx8MTc1OTMyNDY0OHww&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 120 },
    { name: 'Tokyo', image: 'https://images.unsplash.com/photo-1706985003864-43b6a85103ec?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0b2t5byUyMGhvdGVsJTIwc2t5bGluZXxlbnwxfHx8fDE3NTkzMjQ2NTF8MA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 150 },
    { name: 'New York', image: 'https://images.unsplash.com/photo-1479502806991-251c94be6b15?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuZXclMjB5b3JrJTIwaG90ZWx8ZW58MXx8fHwxNzU5MzI0NjU0fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 200 },
    { name: 'London', image: 'https://images.unsplash.com/photo-1500025188590-2faf31cc956c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBob3RlbCUyMHZpZXd8ZW58MXx8fHwxNzU5MzI0NjU2fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 180 },
    { name: 'Bali', image: 'https://images.unsplash.com/photo-1570213489059-0aac6626cade?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3RlbCUyMHBvb2wlMjByZXNvcnR8ZW58MXx8fHwxNzU5MzE0NzM4fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 80 },
    { name: 'Melbourne', image: 'https://images.unsplash.com/photo-1682221568203-16f33b35e57d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxib3V0aXF1ZSUyMGhvdGVsJTIwbG9iYnl8ZW58MXx8fHwxNzU5MjQ3NDUwfDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 110 },
    { name: 'Dubai', image: 'https://images.unsplash.com/photo-1655292912612-bb5b1bda9355?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBob3RlbCUyMGJlZHJvb218ZW58MXx8fHwxNzU5MzIxNDI4fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 220 },
    { name: 'Singapore', image: 'https://images.unsplash.com/photo-1741003089080-eed43492dd54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMGNpdHlzY2FwZXxlbnwxfHx8fDE3NTkzMjQ2NDJ8MA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 160 },
    { name: 'Barcelona', image: 'https://images.unsplash.com/photo-1682221568203-16f33b35e57d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxib3V0aXF1ZSUyMGhvdGVsJTIwbG9iYnl8ZW58MXx8fHwxNzU5MjQ3NDUwfDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 130 },
    { name: 'Rome', image: 'https://images.unsplash.com/photo-1570213489059-0aac6626cade?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3RlbCUyMHBvb2wlMjByZXNvcnR8ZW58MXx8fHwxNzU5MzE0NzM4fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 140 },
    { name: 'Amsterdam', image: 'https://images.unsplash.com/photo-1655292912612-bb5b1bda9355?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBob3RlbCUyMGJlZHJvb218ZW58MXx8fHwxNzU5MzIxNDI4fDA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 170 },
    { name: 'Bangkok', image: 'https://images.unsplash.com/photo-1741003089080-eed43492dd54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMGNpdHlzY2FwZXxlbnwxfHx8fDE3NTkzMjQ2NDJ8MA&ixlib=rb-4.1.0&q=80&w=1080', fromPrice: 70 }
  ];

  const dealCategories = [
    { id: 'flash-sales', name: 'Flash Sales', icon: BadgePercent, count: 45 },
    { id: 'last-minute', name: 'Last Minute', icon: Clock, count: 32 },
    { id: 'early-bird', name: 'Early Bird', icon: Calendar, count: 28 },
    { id: 'weekend', name: 'Weekend Getaways', icon: Star, count: 51 },
    { id: 'member', name: 'Member Exclusive', icon: Crown, count: 19 },
    { id: 'package', name: 'Package Deals', icon: Shield, count: 37 },
    { id: 'long-stay', name: 'Long Stay', icon: Calendar, count: 24 },
    { id: 'group', name: 'Group Bookings', icon: Users, count: 16 }
  ];

  const amenities = [
    { id: 'wifi', name: 'Free WiFi', icon: Wifi },
    { id: 'pool', name: 'Swimming Pool', icon: Waves },
    { id: 'gym', name: 'Fitness Center', icon: Dumbbell },
    { id: 'parking', name: 'Free Parking', icon: Car },
    { id: 'restaurant', name: 'Restaurant', icon: Utensils }
  ];

  const scrollFeatured = (direction: 'left' | 'right') => {
    const container = document.getElementById('featured-deals-container');
    if (container) {
      const scrollAmount = 400;
      const newPosition = direction === 'left' 
        ? Math.max(0, featuredScrollPosition - scrollAmount)
        : Math.min(container.scrollWidth - container.clientWidth, featuredScrollPosition + scrollAmount);
      
      container.scrollTo({ left: newPosition, behavior: 'smooth' });
      setFeaturedScrollPosition(newPosition);
    }
  };

  const toggleAmenity = (amenityId: string) => {
    setSelectedAmenities(prev =>
      prev.includes(amenityId)
        ? prev.filter(id => id !== amenityId)
        : [...prev, amenityId]
    );
  };

  const toggleStar = (stars: number) => {
    setSelectedStars(prev =>
      prev.includes(stars)
        ? prev.filter(s => s !== stars)
        : [...prev, stars]
    );
  };

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

      {/* Sub Navbar */}
      <SubNavbar
        activePage="hotel-discounts"
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
      />

      {/* Hero Section */}
      <section className="relative pt-64 pb-20 overflow-hidden">
        {/* Background Image with Overlay */}
        <div className="absolute inset-0 z-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1741003089080-eed43492dd54?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMGNpdHlzY2FwZXxlbnwxfHx8fDE3NTkzMjQ2NDJ8MA&ixlib=rb-4.1.0&q=80&w=1080"
            alt="Hotel Cityscape"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-background" />
        </div>

        <div className="container mx-auto px-4 relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12"
          >
            <h1 className="font-merchant mb-4">
              <span className="text-white block text-4xl md:text-5xl lg:text-6xl leading-tight">
                Exclusive Hotel Deals in Every City
              </span>
            </h1>
            <p className="font-poppins text-xl text-white/90 max-w-2xl mx-auto font-normal">
              Save up to 60% on handpicked accommodations
            </p>
          </motion.div>

          {/* Search Widget */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <Card className="max-w-4xl mx-auto shadow-2xl">
              <CardContent className="p-6">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                  {/* Destination */}
                  <div className="relative">
                    <label className="font-poppins text-sm mb-2 block font-normal">Destination</label>
                    <div className="relative">
                      <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                      <Select>
                        <SelectTrigger className="pl-10 h-12 font-poppins font-normal">
                          <SelectValue placeholder="Select city" />
                        </SelectTrigger>
                        <SelectContent>
                          {cities.map((city) => (
                            <SelectItem key={city.name} value={city.name.toLowerCase()} className="font-poppins font-normal">
                              {city.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  {/* Check-in Date */}
                  <div>
                    <label className="font-poppins text-sm mb-2 block font-normal">Check-in</label>
                    <div className="relative">
                      <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                      <Input type="date" className="pl-10 h-12 font-poppins font-normal" />
                    </div>
                  </div>

                  {/* Check-out Date */}
                  <div>
                    <label className="font-poppins text-sm mb-2 block font-normal">Check-out</label>
                    <div className="relative">
                      <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                      <Input type="date" className="pl-10 h-12 font-poppins font-normal" />
                    </div>
                  </div>

                  {/* Guests */}
                  <div>
                    <label className="font-poppins text-sm mb-2 block font-normal">Guests</label>
                    <div className="relative">
                      <Users className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                      <Select>
                        <SelectTrigger className="pl-10 h-12 font-poppins font-normal">
                          <SelectValue placeholder="2 adults" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="1" className="font-poppins font-normal">1 adult</SelectItem>
                          <SelectItem value="2" className="font-poppins font-normal">2 adults</SelectItem>
                          <SelectItem value="3" className="font-poppins font-normal">3 adults</SelectItem>
                          <SelectItem value="4" className="font-poppins font-normal">4+ adults</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </div>

                <Button className="w-full mt-6 h-12 font-poppins font-semibold bg-primary hover:bg-primary/90">
                  <Search className="w-5 h-5 mr-2" />
                  Search Deals
                </Button>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* Featured Deals Carousel */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="font-merchant text-3xl md:text-4xl mb-2">
                <span className="font-medium">Featured</span>{' '}
                <span className="font-semibold text-primary">Deals</span>
              </h2>
              <div className="flex gap-2 mt-4">
                {['flash-sales', 'last-minute', 'early-bird', 'weekend'].map((cat) => {
                  const category = dealCategories.find(c => c.id === cat);
                  return (
                    <Button
                      key={cat}
                      variant={selectedCategory === cat ? 'default' : 'outline'}
                      size="sm"
                      onClick={() => setSelectedCategory(cat)}
                      className="font-poppins font-medium"
                    >
                      {category?.name}
                    </Button>
                  );
                })}
              </div>
            </div>

            <div className="flex gap-2">
              <Button
                variant="outline"
                size="icon"
                onClick={() => scrollFeatured('left')}
                className="rounded-full"
              >
                <ChevronLeft className="w-5 h-5" />
              </Button>
              <Button
                variant="outline"
                size="icon"
                onClick={() => scrollFeatured('right')}
                className="rounded-full"
              >
                <ChevronRight className="w-5 h-5" />
              </Button>
            </div>
          </div>

          {/* Carousel */}
          <div
            id="featured-deals-container"
            className="flex gap-6 overflow-x-auto scrollbar-hide scroll-smooth pb-4"
            onScroll={(e) => setFeaturedScrollPosition(e.currentTarget.scrollLeft)}
          >
            {hotelDeals.map((deal, index) => (
              <motion.div
                key={deal.id}
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="flex-shrink-0 w-80"
              >
                <Card className="overflow-hidden h-full hover:shadow-xl transition-shadow duration-300">
                  <div className="relative h-48">
                    <ImageWithFallback
                      src={deal.image}
                      alt={deal.name}
                      className="w-full h-full object-cover"
                    />
                    {/* Discount Badge */}
                    <div className="absolute top-4 right-4">
                      <div className="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center shadow-lg">
                        <div className="text-center">
                          <div className="font-poppins font-bold">{deal.discount}%</div>
                          <div className="font-poppins text-xs">OFF</div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <CardContent className="p-4">
                    <h3 className="font-merchant text-xl mb-1 font-medium font-bold font-normal">{deal.name}</h3>
                    <p className="font-poppins text-sm text-gray-600 mb-3 font-normal flex items-center gap-1">
                      <MapPin className="w-4 h-4" />
                      {deal.location}
                    </p>

                    {/* Rating */}
                    <div className="flex items-center gap-2 mb-3">
                      <div className="flex">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`w-4 h-4 ${i < Math.floor(deal.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
                          />
                        ))}
                      </div>
                      <span className="font-poppins text-sm font-normal text-gray-600">
                        {deal.rating} ({deal.reviews} reviews)
                      </span>
                    </div>

                    {/* Features */}
                    <div className="flex flex-wrap gap-2 mb-4">
                      {deal.features.slice(0, 3).map((feature) => (
                        <Badge key={feature} variant="secondary" className="font-poppins text-xs font-normal">
                          {feature}
                        </Badge>
                      ))}
                    </div>

                    {/* Price */}
                    <div className="flex items-end justify-between">
                      <div>
                        <p className="font-poppins text-sm text-gray-500 line-through font-normal">
                          ${deal.originalPrice}
                        </p>
                        <p className="font-poppins text-2xl font-bold text-primary">
                          ${deal.salePrice}
                          <span className="text-sm font-normal text-gray-600">/night</span>
                        </p>
                      </div>
                      <Button className="font-poppins font-semibold">Book Now</Button>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Deal Categories Grid */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="font-merchant text-3xl md:text-4xl mb-8 text-center">
            <span className="font-medium">Browse by</span>{' '}
            <span className="font-semibold text-primary">Category</span>
          </h2>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto">
            {dealCategories.map((category, index) => (
              <motion.div
                key={category.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.05 }}
              >
                <Card className="cursor-pointer hover:shadow-lg hover:scale-105 transition-all duration-300 h-full">
                  <CardContent className="p-6 text-center">
                    <category.icon className="w-12 h-12 mx-auto mb-3 text-primary" />
                    <h3 className="font-merchant text-lg mb-2 font-medium">{category.name}</h3>
                    <p className="font-poppins text-sm text-gray-600 font-normal">{category.count} deals</p>
                    <Button variant="ghost" className="mt-3 w-full font-poppins font-medium">
                      View Deals
                      <ChevronRight className="w-4 h-4 ml-1" />
                    </Button>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Destination Spotlight */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="font-merchant text-3xl md:text-4xl mb-2 text-center">
            <span className="font-medium">Destination</span>{' '}
            <span className="font-semibold text-primary">Spotlight</span>
          </h2>
          <p className="font-poppins text-center text-gray-600 mb-8 font-normal">
            Discover amazing hotel deals in top destinations worldwide
          </p>

          {/* Filter Chips */}
          <div className="flex flex-wrap justify-center gap-2 mb-8">
            {['popular', 'seasonal', 'hidden-gems', 'city-pass'].map((filter) => (
              <Button
                key={filter}
                variant={selectedFilter === filter ? 'default' : 'outline'}
                size="sm"
                onClick={() => setSelectedFilter(filter)}
                className="font-poppins font-medium capitalize"
              >
                {filter.replace('-', ' ')}
              </Button>
            ))}
          </div>

          {/* Cities Grid */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {cities.map((city, index) => (
              <motion.div
                key={city.name}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-100px" }}
                transition={{ 
                  duration: 0.4, 
                  delay: Math.min(index * 0.05, 0.3),
                  ease: [0.23, 1, 0.32, 1]
                }}
              >
                <Card className="overflow-hidden cursor-pointer group h-full shadow-md hover:shadow-2xl transition-shadow duration-300">
                  <div className="relative h-48 overflow-hidden">
                    <ImageWithFallback
                      src={city.image}
                      alt={city.name}
                      className="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
                    <div className="absolute bottom-0 left-0 right-0 p-4 text-white">
                      <h3 className="font-merchant text-xl mb-1 font-medium">{city.name}</h3>
                      <p className="font-poppins text-sm font-normal">From ${city.fromPrice}/night</p>
                    </div>
                  </div>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Filter & Results Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between mb-8">
            <h2 className="font-merchant text-3xl md:text-4xl">
              <span className="font-medium">All</span>{' '}
              <span className="font-semibold text-primary">Hotel Deals</span>
            </h2>

            {/* Mobile Filter Toggle */}
            <Button
              variant="outline"
              onClick={() => setShowFilters(!showFilters)}
              className="md:hidden font-poppins font-medium"
            >
              <SlidersHorizontal className="w-4 h-4 mr-2" />
              Filters
            </Button>
          </div>

          <div className="grid md:grid-cols-4 gap-8">
            {/* Filters Sidebar */}
            <div className={`${showFilters ? 'block' : 'hidden'} md:block`}>
              <Card className="sticky top-24">
                <CardContent className="p-6 space-y-6">
                  {/* Mobile Close Button */}
                  <div className="flex items-center justify-between md:hidden">
                    <h3 className="font-merchant text-xl font-medium">Filters</h3>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => setShowFilters(false)}
                    >
                      <X className="w-5 h-5" />
                    </Button>
                  </div>

                  {/* Price Range */}
                  <div>
                    <h3 className="font-poppins font-semibold mb-4">Price Range</h3>
                    <Slider
                      value={priceRange}
                      onValueChange={setPriceRange}
                      min={0}
                      max={1000}
                      step={10}
                      className="mb-2"
                    />
                    <div className="flex justify-between font-poppins text-sm font-normal text-gray-600">
                      <span>${priceRange[0]}</span>
                      <span>${priceRange[1]}</span>
                    </div>
                  </div>

                  {/* Star Rating */}
                  <div>
                    <h3 className="font-poppins font-semibold mb-4">Star Rating</h3>
                    <div className="space-y-2">
                      {[5, 4, 3, 2].map((stars) => (
                        <div key={stars} className="flex items-center gap-2">
                          <Checkbox
                            checked={selectedStars.includes(stars)}
                            onCheckedChange={() => toggleStar(stars)}
                          />
                          <div className="flex">
                            {[...Array(stars)].map((_, i) => (
                              <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Amenities */}
                  <div>
                    <h3 className="font-poppins font-semibold mb-4">Amenities</h3>
                    <div className="space-y-3">
                      {amenities.map((amenity) => (
                        <div key={amenity.id} className="flex items-center gap-2">
                          <Checkbox
                            checked={selectedAmenities.includes(amenity.id)}
                            onCheckedChange={() => toggleAmenity(amenity.id)}
                          />
                          <amenity.icon className="w-4 h-4 text-gray-600" />
                          <span className="font-poppins text-sm font-normal">{amenity.name}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  <Button className="w-full font-poppins font-semibold">Apply Filters</Button>
                </CardContent>
              </Card>
            </div>

            {/* Results Grid */}
            <div className="md:col-span-3">
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {hotelDeals.map((deal, index) => (
                  <motion.div
                    key={deal.id}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.5, delay: index * 0.1 }}
                  >
                    <Card className="overflow-hidden h-full hover:shadow-xl transition-all duration-300 group">
                      <div className="relative h-48">
                        <ImageWithFallback
                          src={deal.image}
                          alt={deal.name}
                          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                        />
                        <div className="absolute top-3 right-3">
                          <div className="bg-primary text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg">
                            <div className="text-center">
                              <div className="font-poppins font-bold text-sm">{deal.discount}%</div>
                              <div className="font-poppins text-xs">OFF</div>
                            </div>
                          </div>
                        </div>
                        <Badge className="absolute bottom-3 left-3 bg-green-500 font-poppins text-xs font-normal">
                          Free Cancellation
                        </Badge>
                      </div>

                      <CardContent className="p-4">
                        <h3 className="font-merchant text-lg mb-1 font-medium">{deal.name}</h3>
                        <p className="font-poppins text-sm text-gray-600 mb-2 font-normal flex items-center gap-1">
                          <MapPin className="w-4 h-4" />
                          {deal.location}
                        </p>

                        <div className="flex items-center gap-2 mb-3">
                          <div className="flex">
                            {[...Array(5)].map((_, i) => (
                              <Star
                                key={i}
                                className={`w-3 h-3 ${i < Math.floor(deal.rating) ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
                              />
                            ))}
                          </div>
                          <span className="font-poppins text-xs font-normal text-gray-600">
                            ({deal.reviews})
                          </span>
                        </div>

                        <div className="flex flex-wrap gap-1 mb-3">
                          {deal.features.slice(0, 2).map((feature) => (
                            <Badge key={feature} variant="secondary" className="font-poppins text-xs font-normal">
                              {feature}
                            </Badge>
                          ))}
                        </div>

                        <div className="flex items-end justify-between pt-3 border-t">
                          <div>
                            <p className="font-poppins text-xs text-gray-500 line-through font-normal">
                              ${deal.originalPrice}
                            </p>
                            <p className="font-poppins text-xl font-bold text-primary">
                              ${deal.salePrice}
                              <span className="text-xs font-normal text-gray-600">/night</span>
                            </p>
                          </div>
                          <Button size="sm" className="font-poppins font-semibold">View Deal</Button>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Special Offers Section */}
      <section className="py-16 bg-gradient-to-br from-primary/5 to-secondary/5">
        <div className="container mx-auto px-4">
          <h2 className="font-merchant text-3xl md:text-4xl mb-12 text-center">
            <span className="font-medium">Special</span>{' '}
            <span className="font-semibold text-primary">Offers</span>
          </h2>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
            {[
              { icon: Crown, title: 'Member Exclusive', description: 'Extra 10% off for members', color: 'from-yellow-400 to-orange-500' },
              { icon: UserPlus, title: 'Refer Friends', description: 'Get $50 credit per referral', color: 'from-blue-400 to-purple-500' },
              { icon: Mail, title: 'Newsletter Deals', description: 'Exclusive subscriber offers', color: 'from-green-400 to-emerald-500' },
              { icon: Smartphone, title: 'App-Only Sales', description: 'Flash deals on mobile app', color: 'from-pink-400 to-rose-500' }
            ].map((offer, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="h-full hover:shadow-xl transition-all duration-300 hover:scale-105 cursor-pointer">
                  <CardContent className="p-6 text-center">
                    <div className={`w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br ${offer.color} flex items-center justify-center`}>
                      <offer.icon className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="font-merchant text-xl mb-2 font-medium">{offer.title}</h3>
                    <p className="font-poppins text-sm text-gray-600 mb-4 font-normal">{offer.description}</p>
                    <Button variant="outline" className="w-full font-poppins font-medium">
                      Learn More
                    </Button>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <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>
  );
}
