import { useState } from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, Search, Filter, Star, MapPin, Clock, Tag, Heart, Share2, Copy, ChevronDown, ChevronRight, Check, Hotel, Plane, Building2, MapPinned, Home } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Separator } from '../components/ui/separator';
import { Checkbox } from '../components/ui/checkbox';
import Navbar from '../components/Navbar';
// import SubNavbar from './SubNavbar';
import { Footer } from '../components/Footer';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { TrustSection } from '../components/TrustSection';
import { MobileAppSection } from '../components/MobileAppSection';
import { ReviewsSection } from '../components/ReviewsSection';
import { TrustedCompanies } from '../components/TrustedCompanies';
import { Layout } from '../Layout';

interface OffersPageProps {
  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;
  fromSource: 'products' | 'passes';
  currentPage: string;
  user?: { email: string; name: string; } | null;
}

// Mock offers data
const offersData = [
  {
    id: '1',
    business: 'Aster Hotels',
    title: '20% Off on dining and drinks on purchase upto $500 T&Cs* apply',
    discountCode: 'AFJIJFJS500',
    rating: 4.5,
    image: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=400',
    category: 'dining'
  },
  {
    id: '2',
    business: 'Melbourne Sports Club',
    title: '30% Off on sports activities and equipment rental',
    discountCode: 'SPORT300',
    rating: 4.8,
    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400',
    category: 'sports'
  },
  {
    id: '3',
    business: 'Luxury Stays Melbourne',
    title: '25% Off on weekend stays at premium hotels',
    discountCode: 'STAY250',
    rating: 4.7,
    image: 'https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400',
    category: 'stays'
  },
  {
    id: '4',
    business: 'Gourmet Food Tours',
    title: '15% Off on food walking tours and tastings',
    discountCode: 'FOOD150',
    rating: 4.6,
    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
    category: 'food'
  },
  {
    id: '5',
    business: 'Craft Drinks Co',
    title: '20% Off on craft beer and cocktail experiences',
    discountCode: 'DRINK200',
    rating: 4.4,
    image: 'https://images.unsplash.com/photo-1436114775196-43267ba1fbb8?w=400',
    category: 'drinks'
  },
  {
    id: '6',
    business: 'Melbourne Museum',
    title: '35% Off on museum entries and special exhibitions',
    discountCode: 'MUSEUM350',
    rating: 4.9,
    image: 'https://images.unsplash.com/photo-1566127992631-137a642a90f4?w=400',
    category: 'museum'
  },
  {
    id: '7',
    business: 'Fine Dining Melbourne',
    title: '40% Off on fine dining experiences at top restaurants',
    discountCode: 'FINE400',
    rating: 4.8,
    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
    category: 'dining'
  },
  {
    id: '8',
    business: 'Adventure Sports',
    title: '30% Off on extreme sports and adventure activities',
    discountCode: 'ADVENTURE',
    rating: 4.7,
    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400',
    category: 'sports'
  },
  {
    id: '9',
    business: 'Boutique Hotels',
    title: '20% Off on boutique accommodation packages',
    discountCode: 'BOUTIQUE20',
    rating: 4.6,
    image: 'https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=400',
    category: 'stays'
  },
  {
    id: '10',
    business: 'Local Food Markets',
    title: '25% Off on local market tours and food tastings',
    discountCode: 'MARKET250',
    rating: 4.5,
    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
    category: 'food'
  },
  {
    id: '11',
    business: 'Wine Bar Melbourne',
    title: '30% Off on wine tastings and sommelier experiences',
    discountCode: 'WINE300',
    rating: 4.7,
    image: 'https://images.unsplash.com/photo-1436114775196-43267ba1fbb8?w=400',
    category: 'drinks'
  },
  {
    id: '12',
    business: 'Art Gallery Melbourne',
    title: '25% Off on art exhibitions and cultural events',
    discountCode: 'ART250',
    rating: 4.8,
    image: 'https://images.unsplash.com/photo-1566127992631-137a642a90f4?w=400',
    category: 'museum'
  },
  {
    id: '13',
    business: 'Rooftop Dining',
    title: '35% Off on rooftop dining and sunset experiences',
    discountCode: 'ROOFTOP35',
    rating: 4.9,
    image: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400',
    category: 'dining'
  }
];

const filterCategories = [
  { value: 'dining', label: 'Dining', count: 3 },
  { value: 'sports', label: 'Sports', count: 3 },
  { value: 'stays', label: 'Stays', count: 3 },
  { value: 'food', label: 'Food', count: 3 },
  { value: 'drinks', label: 'Drinks', count: 3 },
  { value: 'museum', label: 'Museum', count: 3 }
];

// Categories data for the 20+ Categories section
const categoriesData = [
  {
    icon: Hotel,
    title: 'Hotels',
    description: 'Exclusive deals on luxury and boutique hotels',
    offers: '50+ offers',
    color: 'from-blue-500 to-cyan-500'
  },
  {
    icon: Plane,
    title: 'Flights',
    description: 'Save on domestic and international flights',
    offers: '30+ offers',
    color: 'from-purple-500 to-pink-500'
  },
  {
    icon: MapPinned,
    title: 'Destinations',
    description: 'Discover amazing destination packages',
    offers: '40+ offers',
    color: 'from-orange-500 to-red-500'
  },
  {
    icon: Building2,
    title: 'Places',
    description: 'Visit top attractions with special discounts',
    offers: '60+ offers',
    color: 'from-green-500 to-emerald-500'
  },
  {
    icon: Home,
    title: 'Accommodations',
    description: 'From hostels to resorts at best prices',
    offers: '45+ offers',
    color: 'from-indigo-500 to-blue-500'
  }
];

export function OffersPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  fromSource,
  currentPage,
  user
}: OffersPageProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [currentPage_, setCurrentPage_] = useState(1);
  const [showLoadMore, setShowLoadMore] = useState(true);
  const [copiedCode, setCopiedCode] = useState<string | null>(null);

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

  const filteredOffers = offersData.filter(offer => {
    const matchesSearch = offer.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         offer.business.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(offer.category);
    
    return matchesSearch && matchesCategory;
  });

  const itemsPerPage = 12;
  const displayedOffers = filteredOffers.slice(0, currentPage_ * itemsPerPage);
  const hasMoreItems = filteredOffers.length > displayedOffers.length;

  const copyDiscountCode = (code: string) => {
    navigator.clipboard.writeText(code);
    setCopiedCode(code);
    setTimeout(() => setCopiedCode(null), 2000);
  };

  const handleLoadMore = () => {
    setCurrentPage_(prev => prev + 1);
    if (!hasMoreItems) setShowLoadMore(false);
  };

  // Show different layouts based on login state
  if (!user) {
    // Not logged in - show marketing/landing page
    return (
      <div className="min-h-screen bg-background">
        <Layout
              activeCity="Landingpage"
              onSignInClick={onSignInClick}
              onSignOutClick={onSignOutClick}
              user={user}
            >

        {/* Sub Navbar */}
        {/* <SubNavbar
          activeTab="offers"
          onCityCardsClick={onCityCardsClick}
          onMagicItineraryClick={onMagicItineraryClick}
          onPostCardsClick={onPostCardsClick}
          onOffersClick={onOffersClick}
          onEsimsClick={onEsimsClick}
          onHotelDiscountsClick={onHotelDiscountsClick}
        /> */}

        {/* Hero Section */}
        <section className="relative pt-52 pb-20 overflow-hidden">
          {/* Background gradient */}
          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
          
          <div className="container mx-auto px-4 relative z-10">
            <motion.div
              className="max-w-4xl mx-auto text-center"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
                <span className="font-light">Save money on</span>{' '}
                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  various categories
                </span>
              </h1>
              <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
                Unlock exclusive deals and discounts across hotels, flights, dining, and more. Start saving on your next adventure today.
              </p>
              <Button 
                onClick={onSignInClick}
                className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
              >
                Get Started Now
              </Button>
            </motion.div>
          </div>

          {/* Decorative elements */}
          <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
          <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
        </section>

        {/* Trusted By Companies Section */}
        <section className="py-12 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto text-center">
              <div className="mb-10">
                <h2 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-4">
                  <span className="font-normal">Trusted by the </span>
                  <span className="font-semibold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">world's best</span>
                </h2>
                <p className="font-poppins text-base md:text-lg leading-relaxed text-muted-foreground max-w-2xl mx-auto">
                  Join thousands of travelers who trust our partners for unforgettable experiences
                </p>
              </div>
              <TrustedCompanies />
            </div>
          </div>
        </section>

        {/* Featured Offers Section */}
        <section className="py-20">
          <div className="container mx-auto px-4">
            <motion.div
              className="text-center mb-12"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
                <span className="font-light">Featured</span>{' '}
                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  Offers
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
                Check out our top deals and start saving on your favorite experiences
              </p>
            </motion.div>

            {/* Featured offers grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
              {offersData.slice(0, 6).map((offer, index) => (
                <motion.div
                  key={offer.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <Card className="bg-white border border-gray-200 rounded-xl overflow-hidden h-full hover:shadow-lg transition-shadow duration-300">
                    <div className="relative h-48 bg-gray-200">
                      <ImageWithFallback
                        src={offer.image}
                        alt={offer.title}
                        className="w-full h-full object-cover"
                      />
                      <Badge className="absolute top-4 left-4 bg-primary text-white font-normal">
                        Featured
                      </Badge>
                    </div>
                    <CardContent className="p-6">
                      <div className="flex items-center gap-2 mb-3">
                        <div className="w-4 h-4 bg-gray-300 rounded"></div>
                        <span className="font-poppins text-sm text-gray-500 font-normal">{offer.business}</span>
                      </div>
                      <h3 className="font-merchant text-lg font-medium text-gray-900 mb-3 line-clamp-2">
                        {offer.title}
                      </h3>
                      <div className="flex items-center gap-1 mb-4">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`w-4 h-4 ${
                              i < Math.floor(offer.rating)
                                ? 'fill-yellow-400 text-yellow-400'
                                : 'fill-gray-300 text-gray-300'
                            }`}
                          />
                        ))}
                      </div>
                      <Button 
                        onClick={onSignInClick}
                        className="w-full bg-gray-900 hover:bg-gray-800 text-white font-poppins font-medium"
                      >
                        Sign in to View Code
                      </Button>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>

            <div className="text-center">
              <Button 
                onClick={onSignInClick}
                variant="outline"
                className="font-poppins font-medium border-primary text-primary hover:bg-primary hover:text-white"
              >
                View All Offers
              </Button>
            </div>
          </div>
        </section>

        {/* How It Works Section */}
        <section className="py-20 bg-muted/30">
          <div className="container mx-auto px-4">
            <motion.div
              className="text-center mb-16"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
                <span className="font-light">How</span>{' '}
                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  It Works
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
                Get access to exclusive offers in three simple steps
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                {
                  step: '01',
                  title: 'Sign Up',
                  description: 'Create your free CityCards account in seconds',
                  icon: '👤'
                },
                {
                  step: '02',
                  title: 'Browse Offers',
                  description: 'Explore thousands of exclusive deals across categories',
                  icon: '🔍'
                },
                {
                  step: '03',
                  title: 'Save Money',
                  description: 'Redeem discount codes and start saving instantly',
                  icon: '💰'
                }
              ].map((item, index) => (
                <motion.div
                  key={item.step}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.2 }}
                >
                  <Card className="bg-white p-8 rounded-xl hover:shadow-lg transition-shadow duration-300">
                    <div className="text-6xl mb-4">{item.icon}</div>
                    <div className="font-merchant text-5xl font-bold text-primary/20 mb-4">
                      {item.step}
                    </div>
                    <h3 className="font-merchant text-2xl font-semibold text-gray-900 mb-3">
                      {item.title}
                    </h3>
                    <p className="font-poppins text-base leading-relaxed font-normal text-gray-600">
                      {item.description}
                    </p>
                  </Card>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* 20+ Categories Section */}
        <section className="py-20">
          <div className="container mx-auto px-4">
            <motion.div
              className="text-center mb-16"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="font-merchant text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  20+ Categories
                </span>{' '}
                <span className="font-light">to Explore</span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
                From accommodations to flights, discover deals across all your travel needs
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {categoriesData.map((category, index) => (
                <motion.div
                  key={category.title}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <Card className="bg-white p-8 rounded-xl hover:shadow-lg transition-all duration-300 group cursor-pointer">
                    <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${category.color} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
                      <category.icon className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="font-merchant text-2xl font-semibold text-gray-900 mb-3">
                      {category.title}
                    </h3>
                    <p className="font-poppins text-base leading-relaxed font-normal text-gray-600 mb-4">
                      {category.description}
                    </p>
                    <div className="flex items-center justify-between">
                      <span className="font-poppins text-sm font-medium text-primary">
                        {category.offers}
                      </span>
                      <Button 
                        onClick={onSignInClick}
                        variant="ghost" 
                        size="sm"
                        className="text-primary hover:text-primary/80 font-poppins font-medium"
                      >
                        Explore →
                      </Button>
                    </div>
                  </Card>
                </motion.div>
              ))}
            </div>

            <div className="text-center mt-12">
              <Button 
                onClick={onSignInClick}
                className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
              >
                Browse All Categories
              </Button>
            </div>
          </div>
        </section>

        {/* Access Your CityCards Section */}
        <section className="py-20 bg-muted/30">
          <MobileAppSection />
        </section>

        </Layout>
      </div>
    );
  }

  // Logged in - show offers grid with filters
  return (
    <div className="min-h-screen bg-[#f8f8f8]">
      <Navbar 
        activeCity="Paris"
        onCityChange={() => {}}
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
        currentPage={currentPage}
        isUserSignedIn={!!user}
        user={user}
      />

      {/* Sub Navbar */}
      <SubNavbar
        activeTab="offers"
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
      />

      <div className="container mx-auto px-4 pt-51 pb-16">
        <div className="flex gap-8">
          {/* Left Sidebar - Filters */}
          <div className="w-64 flex-shrink-0">
            <Card className="p-8 sticky top-48">
              <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>
              </div>
            </Card>
          </div>

          {/* Main Content */}
          <div className="flex-1">
            {/* Breadcrumb */}
            <div className="mb-8">
              <p className="text-[14.297px] text-[#05073c]">
                {fromSource === 'passes' ? (
                  <>
                    <span>My Profile{'>'}My passes{'>'}</span>
                    <span className="font-bold">Offers</span>
                  </>
                ) : (
                  <>
                    <span>Our Products{'>'}</span>
                    <span className="font-bold">Offers</span>
                  </>
                )}
              </p>
            </div>

            {/* Header Section */}
            <div className="mb-8">
              <h1 className="text-[48px] font-medium text-[#2d3134] tracking-[0.48px] leading-[54px]">
                Offers for you
              </h1>
            </div>

            {/* Offers Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-16">
              {displayedOffers.map((offer, index) => (
                <motion.div
                  key={offer.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <Card className="bg-white border border-[#e7e6e6] rounded-[12px] overflow-hidden h-full">
                    {/* Image */}
                    <div className="relative h-[214px] bg-[#c4c4c4]">
                      <ImageWithFallback
                        src={offer.image}
                        alt={offer.title}
                        className="w-full h-full object-cover"
                      />
                      <Button className="absolute bottom-4 right-3 bg-white rounded-[35px] shadow-lg w-[35px] h-[35px] p-0 hover:bg-gray-100">
                        <Heart className="w-4 h-4 text-black" />
                      </Button>
                    </div>

                    <CardContent className="space-y-4 px-[17px] py-[0px]">
                      {/* Business Name */}
                      <div className="flex items-center gap-2">
                        <div className="w-4 h-4 bg-gray-300 rounded"></div>
                        <span className="text-[12.289px] text-[#717171]">{offer.business}</span>
                      </div>

                      {/* Title */}
                      <h3 className="text-[15.875px] font-medium text-[#05073c] leading-[24px] min-h-[48px] font-bold font-normal">
                        {offer.title}
                      </h3>

                      {/* Rating Stars */}
                      <div className="flex items-center gap-1">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`w-3 h-3 ${
                              i < Math.floor(offer.rating)
                                ? 'fill-[#e2ad64] text-[#e2ad64]'
                                : 'fill-[#bebebe] text-[#bebebe]'
                            }`}
                          />
                        ))}
                      </div>

                      {/* Discount Code */}
                      <div className="bg-[#f4f4f4] h-[41px] flex items-center justify-between pl-4 -mx-5">
                        <span className="text-[15px] font-semibold text-[#2d3134]">
                          {offer.discountCode}
                        </span>
                        <Button
                          onClick={() => copyDiscountCode(offer.discountCode)}
                          className="bg-[#2c2c2c] rounded-br-[5px] rounded-tr-[5px] h-[40px] w-[38px] p-0 hover:bg-[#1c1c1c]"
                        >
                          <Copy className="w-4 h-4 text-white" />
                        </Button>
                      </div>
                    </CardContent>

                    {copiedCode === offer.discountCode && (
                      <div className="absolute top-4 left-4 bg-green-500 text-white px-2 py-1 rounded text-xs">
                        Copied!
                      </div>
                    )}
                  </Card>
                </motion.div>
              ))}
            </div>

            {/* Minimal Pagination */}
            <div className="flex justify-center py-8">
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  className="w-8 h-8 p-0"
                  disabled={currentPage_ === 1}
                >
                  <ChevronRight className="w-4 h-4 rotate-180" />
                </Button>
                
                <div className="flex items-center gap-1">
                  {[1, 2, 3].map((page) => (
                    <Button
                      key={page}
                      variant={currentPage_ === page ? "default" : "ghost"}
                      size="sm"
                      className="w-8 h-8 p-0"
                      onClick={() => setCurrentPage_(page)}
                    >
                      {page}
                    </Button>
                  ))}
                </div>
                
                <Button
                  variant="outline"
                  size="sm"
                  className="w-8 h-8 p-0"
                  disabled={currentPage_ === 3}
                >
                  <ChevronRight className="w-4 h-4" />
                </Button>
              </div>
            </div>
          </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>
  );
}