import { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { 
  Search, Wifi, Globe, MapPin, Smartphone, Check, X, ChevronRight, 
  Shield, Zap, Clock, Star, ChevronDown, Filter, SlidersHorizontal,
  Signal, Plane, ArrowRight, Download, QrCode, Users, TrendingUp,
  CheckCircle2, XCircle, AlertCircle, Plus, Minus, Phone, MessageSquare,
  Headphones, ShoppingBag
} from 'lucide-react';
import Navbar from './Navbar';
import { SubNavbar } from './SubNavbar';
import { Footer } from './Footer';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from './ui/card';
import { Badge } from './ui/badge';
import { Separator } from './ui/separator';
import { Slider } from './ui/slider';
import { Checkbox } from './ui/checkbox';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';

interface EsimsPageProps {
  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;
}

// Mock data for eSIM plans
const esimPlans = [
  {
    id: '1',
    country: 'United States',
    region: 'North America',
    flag: '🇺🇸',
    data: '10GB',
    validity: '30 days',
    price: 29,
    originalPrice: 49,
    discount: 41,
    networks: ['AT&T', 'T-Mobile'],
    coverage: '5G',
    popular: true,
    features: ['Instant activation', 'No roaming charges', '24/7 support', 'Data rollover']
  },
  {
    id: '2',
    country: 'Europe (33 Countries)',
    region: 'Europe',
    flag: '🇪🇺',
    data: '20GB',
    validity: '30 days',
    price: 39,
    originalPrice: 69,
    discount: 43,
    networks: ['Vodafone', 'Orange'],
    coverage: '5G',
    popular: true,
    features: ['Multi-country', 'Instant activation', 'No roaming charges', '24/7 support']
  },
  {
    id: '3',
    country: 'Japan',
    region: 'Asia',
    flag: '🇯🇵',
    data: '8GB',
    validity: '15 days',
    price: 24,
    originalPrice: 39,
    discount: 38,
    networks: ['NTT Docomo', 'SoftBank'],
    coverage: '5G',
    popular: false,
    features: ['Instant activation', 'No roaming charges', '24/7 support']
  },
  {
    id: '4',
    country: 'Australia',
    region: 'Oceania',
    flag: '🇦🇺',
    data: '15GB',
    validity: '30 days',
    price: 34,
    originalPrice: 59,
    discount: 42,
    networks: ['Telstra', 'Optus'],
    coverage: '5G',
    popular: true,
    features: ['Instant activation', 'No roaming charges', '24/7 support', 'Hotspot enabled']
  },
  {
    id: '5',
    country: 'Global (150+ Countries)',
    region: 'Global',
    flag: '🌍',
    data: '50GB',
    validity: '90 days',
    price: 89,
    originalPrice: 149,
    discount: 40,
    networks: ['Multiple Partners'],
    coverage: '4G/5G',
    popular: true,
    features: ['Multi-country', 'Instant activation', 'No roaming charges', '24/7 support', 'Data rollover']
  },
  {
    id: '6',
    country: 'United Kingdom',
    region: 'Europe',
    flag: '🇬🇧',
    data: '12GB',
    validity: '30 days',
    price: 32,
    originalPrice: 54,
    discount: 41,
    networks: ['EE', 'Vodafone'],
    coverage: '5G',
    popular: false,
    features: ['Instant activation', 'No roaming charges', '24/7 support']
  },
  {
    id: '7',
    country: 'Canada',
    region: 'North America',
    flag: '🇨🇦',
    data: '12GB',
    validity: '30 days',
    price: 31,
    originalPrice: 52,
    discount: 40,
    networks: ['Rogers', 'Bell'],
    coverage: '5G',
    popular: false,
    features: ['Instant activation', 'No roaming charges', '24/7 support']
  },
  {
    id: '8',
    country: 'Singapore',
    region: 'Asia',
    flag: '🇸🇬',
    data: '10GB',
    validity: '15 days',
    price: 22,
    originalPrice: 38,
    discount: 42,
    networks: ['Singtel', 'StarHub'],
    coverage: '5G',
    popular: false,
    features: ['Instant activation', 'No roaming charges', '24/7 support', 'Hotspot enabled']
  }
];

const regions = ['All', 'Europe', 'North America', 'Asia', 'Oceania', 'Middle East', 'Global'];

const deviceBrands = ['Apple', 'Samsung', 'Google', 'Huawei', 'OnePlus', 'Xiaomi', 'OPPO', 'Other'];

const appleModels = [
  'iPhone 15 Pro Max', 'iPhone 15 Pro', 'iPhone 15 Plus', 'iPhone 15',
  'iPhone 14 Pro Max', 'iPhone 14 Pro', 'iPhone 14 Plus', 'iPhone 14',
  'iPhone 13 Pro Max', 'iPhone 13 Pro', 'iPhone 13', 'iPhone 13 mini',
  'iPhone 12 Pro Max', 'iPhone 12 Pro', 'iPhone 12', 'iPhone 12 mini',
  'iPhone 11 Pro Max', 'iPhone 11 Pro', 'iPhone 11',
  'iPhone XS Max', 'iPhone XS', 'iPhone XR'
];

const samsungModels = [
  'Galaxy S24 Ultra', 'Galaxy S24+', 'Galaxy S24',
  'Galaxy S23 Ultra', 'Galaxy S23+', 'Galaxy S23',
  'Galaxy S22 Ultra', 'Galaxy S22+', 'Galaxy S22',
  'Galaxy S21 Ultra', 'Galaxy S21+', 'Galaxy S21',
  'Galaxy Z Fold 5', 'Galaxy Z Fold 4', 'Galaxy Z Flip 5', 'Galaxy Z Flip 4'
];

const faqs = [
  {
    question: 'What is an eSIM?',
    answer: 'An eSIM is a digital SIM card that allows you to activate a cellular plan without using a physical SIM card. It\'s built into your device and can be activated instantly by scanning a QR code or through your device settings.'
  },
  {
    question: 'How do I know if my device supports eSIM?',
    answer: 'Most modern smartphones from iPhone XS/XR onwards, Google Pixel 3 and later, Samsung Galaxy S20 and newer models support eSIM. Use our compatibility checker above to verify your specific device model.'
  },
  {
    question: 'How quickly can I activate my eSIM?',
    answer: 'Activation is instant! Once you purchase, you\'ll receive a QR code via email within minutes. Simply scan the code with your device, and you\'ll be connected in 2-3 minutes.'
  },
  {
    question: 'Can I use my eSIM in multiple countries?',
    answer: 'Yes! Our regional and global eSIM plans work across multiple countries. Check the plan details to see which countries are included in your selected package.'
  },
  {
    question: 'Will my eSIM work with my existing SIM card?',
    answer: 'Absolutely! Most eSIM-compatible devices support dual SIM functionality, allowing you to keep your primary number active while using the eSIM for data.'
  },
  {
    question: 'What happens if I run out of data?',
    answer: 'You can easily top up your data through our app or website. Additional data packages can be added to your existing eSIM without needing a new QR code.'
  },
  {
    question: 'Do I need to remove my physical SIM?',
    answer: 'No, you don\'t need to remove your physical SIM card. Your device can run both simultaneously, and you can choose which one to use for data, calls, and messages in your settings.'
  },
  {
    question: 'Is there a contract or commitment?',
    answer: 'No contracts! All our eSIM plans are prepaid with no hidden fees or commitments. Pay only for what you need, when you need it.'
  }
];

const testimonials = [
  {
    id: 1,
    name: 'Sarah Johnson',
    location: 'New York, USA',
    rating: 5,
    text: 'Used the Europe eSIM for my 2-week trip. Setup was instant and I had perfect connectivity everywhere!',
    avatar: '👩'
  },
  {
    id: 2,
    name: 'Michael Chen',
    location: 'Toronto, Canada',
    rating: 5,
    text: 'The global plan saved me so much money. No more ridiculous roaming charges!',
    avatar: '👨'
  },
  {
    id: 3,
    name: 'Emma Williams',
    location: 'London, UK',
    rating: 5,
    text: 'Customer support was amazing when I had questions. Highly recommend!',
    avatar: '👩‍🦰'
  }
];

export function EsimsPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: EsimsPageProps) {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedRegion, setSelectedRegion] = useState('All');
  const [showFilters, setShowFilters] = useState(false);
  const [tripDuration, setTripDuration] = useState([30]);
  const [selectedBrand, setSelectedBrand] = useState('');
  const [selectedModel, setSelectedModel] = useState('');
  const [compatibilityResult, setCompatibilityResult] = useState<'compatible' | 'incompatible' | null>(null);
  const [dataUsage, setDataUsage] = useState({ social: 2, maps: 1, video: 1, browsing: 2 });
  const [showComparison, setShowComparison] = useState(false);
  const [comparisonPlans, setComparisonPlans] = useState<string[]>([]);

  const filteredPlans = esimPlans.filter(plan => {
    const matchesSearch = plan.country.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesRegion = selectedRegion === 'All' || plan.region === selectedRegion;
    return matchesSearch && matchesRegion;
  });

  const handleCheckCompatibility = () => {
    if (selectedBrand && selectedModel) {
      // Mock compatibility check - most modern devices are compatible
      const compatible = Math.random() > 0.15; // 85% compatible
      setCompatibilityResult(compatible ? 'compatible' : 'incompatible');
    }
  };

  const calculateRecommendedData = () => {
    const total = (dataUsage.social * 0.5) + (dataUsage.maps * 0.3) + (dataUsage.video * 2) + (dataUsage.browsing * 0.4);
    return Math.ceil(total * tripDuration[0]);
  };

  const toggleComparison = (planId: string) => {
    if (comparisonPlans.includes(planId)) {
      setComparisonPlans(comparisonPlans.filter(id => id !== planId));
    } else if (comparisonPlans.length < 3) {
      setComparisonPlans([...comparisonPlans, planId]);
    }
  };

  const getModelOptions = () => {
    switch (selectedBrand) {
      case 'Apple':
        return appleModels;
      case 'Samsung':
        return samsungModels;
      default:
        return ['Select a brand first'];
    }
  };

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

      {/* SubNavbar for Products */}
      <SubNavbar
        activeTab="esims"
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
      />

      {/* Hero Section */}
      <section className="relative pt-52 pb-20 overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0 z-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1759255260738-7691d52296eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaXR5JTIwc2t5bGluZSUyMGNvbm5lY3Rpdml0eXxlbnwxfHx8fDE3NTkzMjAzOTR8MA&ixlib=rb-4.1.0&q=80&w=1080"
            alt="City Connectivity"
            className="w-full h-full object-cover opacity-5"
          />
        </div>
        
        {/* Decorative gradient overlays */}
        <div className="absolute top-20 right-10 w-72 h-72 bg-gradient-to-br from-primary/20 to-blue-500/20 rounded-full blur-3xl" />
        <div className="absolute bottom-10 left-10 w-96 h-96 bg-gradient-to-tr from-blue-200/30 to-purple-200/30 rounded-full blur-3xl" />

        <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 max-w-4xl mx-auto"
          >
            <Badge className="mb-6 bg-gradient-to-r from-primary to-blue-500 text-white font-poppins font-medium px-4 py-2 min-h-[44px] inline-flex items-center">
              <Wifi className="w-4 h-4 mr-2" />
              Instant Connectivity Worldwide
            </Badge>

            <h1 className="font-merchant mb-6 leading-tight">
              <span className="block text-3xl md:text-4xl lg:text-5xl font-light mb-2">Stay Connected with</span>
              <span className="block text-4xl md:text-5xl lg:text-6xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                CityCards eSIMs
              </span>
            </h1>

            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
              Instant setup • Local rates • 5G coverage
            </p>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
              <Button
                onClick={() => {
                  document.getElementById('plan-finder')?.scrollIntoView({ behavior: 'smooth' });
                }}
                className="bg-gradient-to-r from-primary to-blue-500 hover:from-primary/90 hover:to-blue-500/90 text-white font-poppins font-semibold px-8 py-6 min-h-[44px]"
              >
                Find Your Plan
                <ChevronRight className="w-5 h-5 ml-2" />
              </Button>
              <Button
                onClick={() => {
                  document.getElementById('compatibility')?.scrollIntoView({ behavior: 'smooth' });
                }}
                variant="outline"
                className="border-2 border-primary text-primary hover:bg-primary/10 font-poppins font-medium px-8 py-6 min-h-[44px]"
              >
                <Smartphone className="w-5 h-5 mr-2" />
                Check Compatibility
              </Button>
            </div>

            {/* Trust badges */}
            <div className="flex flex-wrap justify-center gap-8 items-center">
              <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
                <Shield className="w-5 h-5 text-primary" />
                <span>Secure Checkout</span>
              </div>
              <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
                <Zap className="w-5 h-5 text-primary" />
                <span>Instant Delivery</span>
              </div>
              <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
                <Signal className="w-5 h-5 text-primary" />
                <span>150+ Partner Networks</span>
              </div>
              <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
                <Clock className="w-5 h-5 text-primary" />
                <span>24/7 Support</span>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Plan Finder Module */}
      <section id="plan-finder" className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="max-w-6xl mx-auto"
          >
            <div className="text-center mb-12">
              <h2 className="font-merchant mb-4 leading-tight">
                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Find Your</span>{' '}
                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                  Perfect Plan
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600 max-w-2xl mx-auto">
                Choose from our wide selection of eSIM plans for travelers
              </p>
            </div>

            {/* Search Bar */}
            <div className="mb-8">
              <div className="relative max-w-2xl mx-auto">
                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
                <Input
                  type="text"
                  placeholder="Search by country or region..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-12 pr-4 py-6 font-poppins leading-relaxed font-normal border-2 border-gray-200 focus:border-primary rounded-xl min-h-[44px]"
                />
              </div>
            </div>

            {/* Quick Selection Chips */}
            <div className="flex flex-wrap justify-center gap-3 mb-8">
              {regions.map((region) => (
                <button
                  key={region}
                  onClick={() => setSelectedRegion(region)}
                  className={`px-6 py-3 rounded-full font-poppins font-medium transition-all duration-200 min-h-[44px] ${
                    selectedRegion === region
                      ? 'bg-gradient-to-r from-primary to-blue-500 text-white shadow-lg scale-105'
                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  }`}
                >
                  {region}
                </button>
              ))}
            </div>

            {/* Filter Toggle */}
            <div className="flex justify-center mb-8">
              <Button
                onClick={() => setShowFilters(!showFilters)}
                variant="outline"
                className="font-poppins font-medium min-h-[44px]"
              >
                <SlidersHorizontal className="w-4 h-4 mr-2" />
                {showFilters ? 'Hide Filters' : 'Show Filters'}
              </Button>
            </div>

            {/* Advanced Filters */}
            <AnimatePresence>
              {showFilters && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: 'auto' }}
                  exit={{ opacity: 0, height: 0 }}
                  transition={{ duration: 0.3 }}
                  className="mb-8 p-6 bg-gray-50 rounded-xl"
                >
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label className="font-poppins font-medium mb-3 block">
                        Trip Duration (days)
                      </label>
                      <Slider
                        value={tripDuration}
                        onValueChange={setTripDuration}
                        max={90}
                        min={1}
                        step={1}
                        className="mb-2"
                      />
                      <p className="font-poppins leading-relaxed font-normal text-gray-600">{tripDuration[0]} days</p>
                    </div>
                    <div>
                      <label className="font-poppins font-medium mb-3 block">
                        Coverage Type
                      </label>
                      <div className="space-y-2">
                        <div className="flex items-center gap-2">
                          <Checkbox id="5g" />
                          <label htmlFor="5g" className="font-poppins leading-relaxed font-normal">5G Coverage</label>
                        </div>
                        <div className="flex items-center gap-2">
                          <Checkbox id="4g" />
                          <label htmlFor="4g" className="font-poppins leading-relaxed font-normal">4G/LTE Coverage</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>

            {/* Plan Cards Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 pt-4">
              {filteredPlans.map((plan, index) => (
                <motion.div
                  key={plan.id}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.4, delay: index * 0.1 }}
                >
                  <Card className="relative overflow-visible hover:shadow-2xl transition-shadow duration-300 h-full flex flex-col">
                    {plan.popular && (
                      <div className="absolute -top-4 left-1/2 -translate-x-1/2 z-10">
                        <Badge className="bg-gradient-to-r from-orange-500 to-red-500 text-white font-poppins font-semibold shadow-lg px-3 py-1 whitespace-nowrap">
                          <Star className="w-3 h-3 mr-1" />
                          Most Popular
                        </Badge>
                      </div>
                    )}
                    
                    <CardHeader>
                      <div className="flex items-center gap-3 mb-3">
                        <span className="text-4xl">{plan.flag}</span>
                        <div className="flex-1">
                          <CardTitle className="font-merchant font-semibold mb-1">
                            {plan.country}
                          </CardTitle>
                          <CardDescription className="font-poppins leading-relaxed font-normal">
                            {plan.region}
                          </CardDescription>
                        </div>
                      </div>

                      <div className="flex items-baseline gap-2 mb-2">
                        <span className="font-poppins font-semibold text-primary">
                          ${plan.price}
                        </span>
                        <span className="font-poppins leading-relaxed font-normal text-gray-400 line-through">
                          ${plan.originalPrice}
                        </span>
                        <Badge variant="outline" className="ml-auto font-poppins font-normal">
                          -{plan.discount}%
                        </Badge>
                      </div>
                    </CardHeader>

                    <CardContent className="flex-1">
                      <div className="space-y-3">
                        <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                          <Download className="w-4 h-4 text-primary" />
                          <span className="font-medium">{plan.data}</span>
                          <span className="text-gray-500">Data</span>
                        </div>
                        <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                          <Clock className="w-4 h-4 text-primary" />
                          <span className="font-medium">{plan.validity}</span>
                          <span className="text-gray-500">Validity</span>
                        </div>
                        <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                          <Signal className="w-4 h-4 text-primary" />
                          <span className="font-medium">{plan.coverage}</span>
                          <span className="text-gray-500">Coverage</span>
                        </div>
                        <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                          <Wifi className="w-4 h-4 text-primary" />
                          <span className="font-medium">{plan.networks.join(', ')}</span>
                        </div>
                      </div>

                      <Separator className="my-4" />

                      <div className="space-y-2">
                        {plan.features.slice(0, 3).map((feature, idx) => (
                          <div key={idx} className="flex items-center gap-2 font-poppins leading-relaxed font-normal text-gray-600">
                            <Check className="w-3 h-3 text-green-600" />
                            <span>{feature}</span>
                          </div>
                        ))}
                      </div>
                    </CardContent>

                    <CardFooter className="flex flex-col gap-2">
                      <Button
                        onClick={onCheckoutClick}
                        className="w-full bg-gradient-to-r from-primary to-blue-500 hover:from-primary/90 hover:to-blue-500/90 text-white font-poppins font-semibold min-h-[44px]"
                      >
                        Add to Cart
                        <ArrowRight className="w-4 h-4 ml-2" />
                      </Button>
                      <Button
                        onClick={() => toggleComparison(plan.id)}
                        variant="outline"
                        className="w-full font-poppins font-medium min-h-[44px]"
                        disabled={!comparisonPlans.includes(plan.id) && comparisonPlans.length >= 3}
                      >
                        {comparisonPlans.includes(plan.id) ? (
                          <>
                            <Check className="w-4 h-4 mr-2" />
                            Added to Compare
                          </>
                        ) : (
                          'Compare'
                        )}
                      </Button>
                    </CardFooter>
                  </Card>
                </motion.div>
              ))}
            </div>

            {/* Comparison Bar */}
            <AnimatePresence>
              {comparisonPlans.length > 0 && (
                <motion.div
                  initial={{ opacity: 0, y: 50 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: 50 }}
                  className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-40 bg-white shadow-2xl rounded-full px-8 py-4 border border-gray-200"
                >
                  <div className="flex items-center gap-4">
                    <span className="font-poppins font-medium">
                      {comparisonPlans.length} {comparisonPlans.length === 1 ? 'plan' : 'plans'} selected
                    </span>
                    <Button
                      onClick={() => setShowComparison(true)}
                      className="bg-gradient-to-r from-primary to-blue-500 text-white font-poppins font-semibold min-h-[44px]"
                      disabled={comparisonPlans.length < 2}
                    >
                      Compare Plans
                    </Button>
                    <Button
                      onClick={() => setComparisonPlans([])}
                      variant="ghost"
                      className="font-poppins font-medium min-h-[44px]"
                    >
                      Clear
                    </Button>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        </div>
      </section>

      {/* Featured Plans Section */}
      <section className="py-16 bg-gradient-to-br from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <div className="text-center mb-12">
              <h2 className="font-merchant mb-4 leading-tight">
                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Trending</span>{' '}
                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                  This Month
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
                Most popular destinations and bundle deals
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
              {/* Bundle Card 1 */}
              <Card className="bg-gradient-to-br from-blue-600 to-purple-600 text-white border-0 overflow-hidden relative">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
                <CardHeader>
                  <Badge className="w-fit bg-white/20 text-white border-0 mb-3 font-poppins font-normal">
                    <TrendingUp className="w-3 h-3 mr-1" />
                    Multi-Country
                  </Badge>
                  <CardTitle className="font-merchant font-semibold mb-2">
                    Europe Explorer
                  </CardTitle>
                  <CardDescription className="text-white/90 font-poppins leading-relaxed font-normal">
                    Perfect for European adventures
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="mb-4">
                    <span className="font-poppins font-semibold">$89</span>
                    <span className="font-poppins leading-relaxed font-normal text-white/70 line-through ml-2">$149</span>
                  </div>
                  <div className="space-y-2 mb-6">
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>50GB across 33 countries</span>
                    </div>
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>90-day validity</span>
                    </div>
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>5G where available</span>
                    </div>
                  </div>
                  <Button
                    onClick={onCheckoutClick}
                    className="w-full bg-white text-blue-600 hover:bg-gray-100 font-poppins font-semibold min-h-[44px]"
                  >
                    Get Bundle Deal
                  </Button>
                </CardContent>
              </Card>

              {/* Bundle Card 2 */}
              <Card className="bg-gradient-to-br from-orange-500 to-red-500 text-white border-0 overflow-hidden relative">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
                <CardHeader>
                  <Badge className="w-fit bg-white/20 text-white border-0 mb-3 font-poppins font-normal">
                    <Users className="w-3 h-3 mr-1" />
                    Family Plan
                  </Badge>
                  <CardTitle className="font-merchant font-semibold mb-2">
                    Family Share
                  </CardTitle>
                  <CardDescription className="text-white/90 font-poppins leading-relaxed font-normal">
                    Save 30% for 3+ travelers
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="mb-4">
                    <span className="font-poppins font-semibold">$149</span>
                    <span className="font-poppins leading-relaxed font-normal text-white/70 line-through ml-2">$214</span>
                  </div>
                  <div className="space-y-2 mb-6">
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>100GB shared data pool</span>
                    </div>
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>3-5 connected devices</span>
                    </div>
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>Valid for 60 days</span>
                    </div>
                  </div>
                  <Button
                    onClick={onCheckoutClick}
                    className="w-full bg-white text-orange-600 hover:bg-gray-100 font-poppins font-semibold min-h-[44px]"
                  >
                    Get Family Plan
                  </Button>
                </CardContent>
              </Card>

              {/* Bundle Card 3 */}
              <Card className="bg-gradient-to-br from-green-500 to-teal-500 text-white border-0 overflow-hidden relative">
                <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-2xl" />
                <CardHeader>
                  <Badge className="w-fit bg-white/20 text-white border-0 mb-3 font-poppins font-normal">
                    <Plane className="w-3 h-3 mr-1" />
                    Business Travel
                  </Badge>
                  <CardTitle className="font-merchant font-semibold mb-2">
                    Global Professional
                  </CardTitle>
                  <CardDescription className="text-white/90 font-poppins leading-relaxed font-normal">
                    For frequent business travelers
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="mb-4">
                    <span className="font-poppins font-semibold">$199</span>
                    <span className="font-poppins leading-relaxed font-normal text-white/70 line-through ml-2">$299</span>
                  </div>
                  <div className="space-y-2 mb-6">
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>Unlimited data in 80+ countries</span>
                    </div>
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>Priority support</span>
                    </div>
                    <div className="flex items-center gap-2 font-poppins leading-relaxed font-normal">
                      <Check className="w-4 h-4" />
                      <span>90-day validity</span>
                    </div>
                  </div>
                  <Button
                    onClick={onCheckoutClick}
                    className="w-full bg-white text-green-600 hover:bg-gray-100 font-poppins font-semibold min-h-[44px]"
                  >
                    Get Business Plan
                  </Button>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Coverage Map Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="max-w-6xl mx-auto"
          >
            <div className="text-center mb-12">
              <h2 className="font-merchant mb-4 leading-tight">
                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Global</span>{' '}
                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                  Coverage Map
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
                See where our eSIMs work worldwide
              </p>
            </div>

            <Card className="overflow-hidden">
              <CardContent className="p-0">
                <div className="relative">
                  <ImageWithFallback
                    src="https://images.unsplash.com/photo-1589395937920-07cce323acba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3b3JsZCUyMG1hcCUyMHRyYXZlbHxlbnwxfHx8fDE3NTkyNTkyNTN8MA&ixlib=rb-4.1.0&q=80&w=1080"
                    alt="World Coverage Map"
                    className="w-full h-[400px] md:h-[500px] object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                  
                  {/* Legend */}
                  <div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-sm rounded-xl p-6">
                    <h3 className="font-merchant font-semibold mb-4">Coverage Types</h3>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      <div className="flex items-center gap-2">
                        <div className="w-4 h-4 rounded-full bg-green-500" />
                        <span className="font-poppins leading-relaxed font-normal">5G Available</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="w-4 h-4 rounded-full bg-blue-500" />
                        <span className="font-poppins leading-relaxed font-normal">4G/LTE</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="w-4 h-4 rounded-full bg-yellow-500" />
                        <span className="font-poppins leading-relaxed font-normal">3G</span>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="w-4 h-4 rounded-full bg-gray-300" />
                        <span className="font-poppins leading-relaxed font-normal">Not Covered</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Stats Row */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-8">
              <Card>
                <CardContent className="p-6 text-center">
                  <div className="font-merchant font-semibold text-primary mb-2">150+</div>
                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Countries Covered</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-6 text-center">
                  <div className="font-merchant font-semibold text-primary mb-2">500+</div>
                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Network Partners</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-6 text-center">
                  <div className="font-merchant font-semibold text-primary mb-2">99.9%</div>
                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Uptime</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="p-6 text-center">
                  <div className="font-merchant font-semibold text-primary mb-2">24/7</div>
                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Customer Support</p>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Device Compatibility Checker */}
      <section id="compatibility" className="py-16 bg-gradient-to-br from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="max-w-4xl mx-auto"
          >
            <div className="text-center mb-12">
              <h2 className="font-merchant mb-4 leading-tight">
                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Check Device</span>{' '}
                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                  Compatibility
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
                Make sure your device supports eSIM technology
              </p>
            </div>

            <Card className="p-8">
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="font-poppins font-medium mb-3 block">Device Brand</label>
                    <Select value={selectedBrand} onValueChange={setSelectedBrand}>
                      <SelectTrigger className="w-full font-poppins leading-relaxed font-normal min-h-[44px]">
                        <SelectValue placeholder="Select your device brand" />
                      </SelectTrigger>
                      <SelectContent>
                        {deviceBrands.map((brand) => (
                          <SelectItem key={brand} value={brand} className="font-poppins leading-relaxed font-normal">
                            {brand}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  <div>
                    <label className="font-poppins font-medium mb-3 block">Device Model</label>
                    <Select 
                      value={selectedModel} 
                      onValueChange={setSelectedModel}
                      disabled={!selectedBrand}
                    >
                      <SelectTrigger className="w-full font-poppins leading-relaxed font-normal min-h-[44px]">
                        <SelectValue placeholder={selectedBrand ? "Select your device model" : "Select brand first"} />
                      </SelectTrigger>
                      <SelectContent>
                        {getModelOptions().map((model) => (
                          <SelectItem key={model} value={model} className="font-poppins leading-relaxed font-normal">
                            {model}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <Button
                  onClick={handleCheckCompatibility}
                  disabled={!selectedBrand || !selectedModel}
                  className="w-full bg-gradient-to-r from-primary to-blue-500 hover:from-primary/90 hover:to-blue-500/90 text-white font-poppins font-semibold min-h-[44px]"
                >
                  <Smartphone className="w-4 h-4 mr-2" />
                  Check Compatibility
                </Button>

                <AnimatePresence>
                  {compatibilityResult && (
                    <motion.div
                      initial={{ opacity: 0, scale: 0.95 }}
                      animate={{ opacity: 1, scale: 1 }}
                      exit={{ opacity: 0, scale: 0.95 }}
                      className={`p-6 rounded-xl border-2 ${
                        compatibilityResult === 'compatible'
                          ? 'bg-green-50 border-green-500'
                          : 'bg-red-50 border-red-500'
                      }`}
                    >
                      <div className="flex items-start gap-4">
                        {compatibilityResult === 'compatible' ? (
                          <CheckCircle2 className="w-8 h-8 text-green-600 flex-shrink-0" />
                        ) : (
                          <XCircle className="w-8 h-8 text-red-600 flex-shrink-0" />
                        )}
                        <div className="flex-1">
                          <h3 className="font-merchant font-semibold mb-2">
                            {compatibilityResult === 'compatible' 
                              ? '✓ Your device is compatible!' 
                              : '✗ Device not compatible'}
                          </h3>
                          <p className="font-poppins leading-relaxed font-normal text-gray-700 mb-4">
                            {compatibilityResult === 'compatible'
                              ? `Great news! Your ${selectedBrand} ${selectedModel} supports eSIM technology. You can proceed with purchasing any of our eSIM plans.`
                              : `Unfortunately, your ${selectedBrand} ${selectedModel} doesn't support eSIM technology. Please check our list of compatible devices or contact support for alternatives.`}
                          </p>
                          {compatibilityResult === 'compatible' && (
                            <Button
                              onClick={() => {
                                document.getElementById('plan-finder')?.scrollIntoView({ behavior: 'smooth' });
                              }}
                              className="bg-green-600 hover:bg-green-700 text-white font-poppins font-semibold min-h-[44px]"
                            >
                              Browse Plans
                              <ArrowRight className="w-4 h-4 ml-2" />
                            </Button>
                          )}
                        </div>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* How It Works Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="max-w-6xl mx-auto"
          >
            <div className="text-center mb-12">
              <h2 className="font-merchant mb-4 leading-tight">
                <span className="text-2xl md:text-3xl lg:text-4xl font-light">How It</span>{' '}
                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                  Works
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
                Get connected in just 2-3 minutes
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {[
                {
                  step: '01',
                  title: 'Choose Your Plan',
                  description: 'Select the eSIM plan that matches your destination and data needs',
                  icon: <Globe className="w-8 h-8" />
                },
                {
                  step: '02',
                  title: 'Complete Purchase',
                  description: 'Secure checkout with instant email delivery of your QR code',
                  icon: <ShoppingBag className="w-8 h-8" />
                },
                {
                  step: '03',
                  title: 'Scan QR Code',
                  description: 'Open your camera app and scan the QR code to install the eSIM',
                  icon: <QrCode className="w-8 h-8" />
                },
                {
                  step: '04',
                  title: 'Stay Connected',
                  description: 'Activate your eSIM and enjoy seamless connectivity worldwide',
                  icon: <Signal className="w-8 h-8" />
                }
              ].map((step, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.4, delay: index * 0.1 }}
                >
                  <Card className="text-center h-full hover:shadow-lg transition-shadow duration-300">
                    <CardContent className="p-6">
                      <div className="mb-4 inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-r from-primary/20 to-blue-500/20">
                        <div className="text-primary">{step.icon}</div>
                      </div>
                      <div className="font-merchant font-semibold text-primary mb-3">{step.step}</div>
                      <h3 className="font-merchant font-semibold mb-3">{step.title}</h3>
                      <p className="font-poppins leading-relaxed font-normal text-gray-600">{step.description}</p>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>

            {/* Visual Guide */}
            <div className="mt-16 relative">
              <Card className="overflow-hidden">
                <CardContent className="p-0">
                  <div className="grid grid-cols-1 md:grid-cols-2">
                    <div className="p-8 md:p-12 flex flex-col justify-center">
                      <h3 className="font-merchant font-semibold mb-4">Installation Guide</h3>
                      <p className="font-poppins leading-relaxed font-normal text-gray-600 mb-6">
                        Follow our step-by-step setup guide to install your eSIM in minutes. Available for both iOS and Android devices.
                      </p>
                      <div className="space-y-4">
                        <Button
                          variant="outline"
                          className="w-full justify-start font-poppins font-medium min-h-[44px]"
                        >
                          <Phone className="w-4 h-4 mr-2" />
                          iOS Setup Guide
                          <ChevronRight className="w-4 h-4 ml-auto" />
                        </Button>
                        <Button
                          variant="outline"
                          className="w-full justify-start font-poppins font-medium min-h-[44px]"
                        >
                          <Smartphone className="w-4 h-4 mr-2" />
                          Android Setup Guide
                          <ChevronRight className="w-4 h-4 ml-auto" />
                        </Button>
                      </div>
                    </div>
                    <div className="relative h-64 md:h-auto">
                      <ImageWithFallback
                        src="https://images.unsplash.com/photo-1690264695884-f62022341c8f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbWFydHBob25lJTIwUVIlMjBjb2RlfGVufDF8fHx8MTc1OTMyMDM5NXww&ixlib=rb-4.1.0&q=80&w=1080"
                        alt="QR Code Setup"
                        className="w-full h-full object-cover"
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Data Calculator Tool */}
      <section className="py-16 bg-gradient-to-br from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="max-w-4xl mx-auto"
          >
            <div className="text-center mb-12">
              <h2 className="font-merchant mb-4 leading-tight">
                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Data</span>{' '}
                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                  Calculator
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
                Find out how much data you'll need for your trip
              </p>
            </div>

            <Card className="p-8">
              <CardContent className="space-y-8">
                <div className="space-y-6">
                  <div>
                    <label className="font-poppins font-medium mb-3 block">
                      Social Media (hours per day)
                    </label>
                    <div className="flex items-center gap-4">
                      <Slider
                        value={[dataUsage.social]}
                        onValueChange={(value) => setDataUsage({...dataUsage, social: value[0]})}
                        max={10}
                        min={0}
                        step={0.5}
                        className="flex-1"
                      />
                      <span className="font-poppins font-semibold text-primary w-16 text-right">
                        {dataUsage.social}h
                      </span>
                    </div>
                  </div>

                  <div>
                    <label className="font-poppins font-medium mb-3 block">
                      Maps & Navigation (hours per day)
                    </label>
                    <div className="flex items-center gap-4">
                      <Slider
                        value={[dataUsage.maps]}
                        onValueChange={(value) => setDataUsage({...dataUsage, maps: value[0]})}
                        max={5}
                        min={0}
                        step={0.5}
                        className="flex-1"
                      />
                      <span className="font-poppins font-semibold text-primary w-16 text-right">
                        {dataUsage.maps}h
                      </span>
                    </div>
                  </div>

                  <div>
                    <label className="font-poppins font-medium mb-3 block">
                      Video Streaming (hours per day)
                    </label>
                    <div className="flex items-center gap-4">
                      <Slider
                        value={[dataUsage.video]}
                        onValueChange={(value) => setDataUsage({...dataUsage, video: value[0]})}
                        max={10}
                        min={0}
                        step={0.5}
                        className="flex-1"
                      />
                      <span className="font-poppins font-semibold text-primary w-16 text-right">
                        {dataUsage.video}h
                      </span>
                    </div>
                  </div>

                  <div>
                    <label className="font-poppins font-medium mb-3 block">
                      Web Browsing (hours per day)
                    </label>
                    <div className="flex items-center gap-4">
                      <Slider
                        value={[dataUsage.browsing]}
                        onValueChange={(value) => setDataUsage({...dataUsage, browsing: value[0]})}
                        max={10}
                        min={0}
                        step={0.5}
                        className="flex-1"
                      />
                      <span className="font-poppins font-semibold text-primary w-16 text-right">
                        {dataUsage.browsing}h
                      </span>
                    </div>
                  </div>
                </div>

                <Separator />

                <div className="bg-gradient-to-r from-primary/10 to-blue-500/10 p-6 rounded-xl">
                  <div className="text-center">
                    <p className="font-poppins leading-relaxed font-normal text-gray-600 mb-2">
                      Recommended data for your {tripDuration[0]}-day trip:
                    </p>
                    <div className="font-merchant font-semibold text-primary mb-4">
                      {calculateRecommendedData()}GB
                    </div>
                    <Button
                      onClick={() => {
                        document.getElementById('plan-finder')?.scrollIntoView({ behavior: 'smooth' });
                      }}
                      className="bg-gradient-to-r from-primary to-blue-500 hover:from-primary/90 hover:to-blue-500/90 text-white font-poppins font-semibold min-h-[44px]"
                    >
                      Find Matching Plans
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </section>

      {/* Social Proof Block */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="max-w-6xl mx-auto"
          >
            <div className="text-center mb-12">
              <h2 className="font-merchant mb-4 leading-tight">
                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Trusted by</span>{' '}
                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                  Travelers
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
                See what our customers say about their experience
              </p>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
              <Card className="text-center">
                <CardContent className="p-6">
                  <Star className="w-8 h-8 text-yellow-500 mx-auto mb-2" />
                  <div className="font-merchant font-semibold text-primary mb-1">4.9/5</div>
                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Average Rating</p>
                </CardContent>
              </Card>
              <Card className="text-center">
                <CardContent className="p-6">
                  <Users className="w-8 h-8 text-primary mx-auto mb-2" />
                  <div className="font-merchant font-semibold text-primary mb-1">500K+</div>
                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Happy Travelers</p>
                </CardContent>
              </Card>
              <Card className="text-center">
                <CardContent className="p-6">
                  <Globe className="w-8 h-8 text-primary mx-auto mb-2" />
                  <div className="font-merchant font-semibold text-primary mb-1">150+</div>
                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Countries</p>
                </CardContent>
              </Card>
              <Card className="text-center">
                <CardContent className="p-6">
                  <Headphones className="w-8 h-8 text-primary mx-auto mb-2" />
                  <div className="font-merchant font-semibold text-primary mb-1">24/7</div>
                  <p className="font-poppins leading-relaxed font-normal text-gray-600">Support</p>
                </CardContent>
              </Card>
            </div>

            {/* Testimonials */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {testimonials.map((testimonial, index) => (
                <motion.div
                  key={testimonial.id}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.4, delay: index * 0.1 }}
                >
                  <Card className="h-full hover:shadow-lg transition-shadow duration-300">
                    <CardContent className="p-6">
                      <div className="flex items-center gap-3 mb-4">
                        <div className="text-4xl">{testimonial.avatar}</div>
                        <div>
                          <h4 className="font-merchant font-semibold">{testimonial.name}</h4>
                          <p className="font-poppins leading-relaxed font-normal text-gray-500">{testimonial.location}</p>
                        </div>
                      </div>
                      <div className="flex gap-1 mb-3">
                        {Array.from({ length: testimonial.rating }).map((_, i) => (
                          <Star key={i} className="w-4 h-4 fill-yellow-500 text-yellow-500" />
                        ))}
                      </div>
                      <p className="font-poppins leading-relaxed font-normal text-gray-600">"{testimonial.text}"</p>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* FAQ Accordion */}
      <section className="py-16 bg-gradient-to-br from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
            className="max-w-4xl mx-auto"
          >
            <div className="text-center mb-12">
              <h2 className="font-merchant mb-4 leading-tight">
                <span className="text-2xl md:text-3xl lg:text-4xl font-light">Frequently Asked</span>{' '}
                <span className="text-2xl md:text-3xl lg:text-4xl font-semibold italic bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">
                  Questions
                </span>
              </h2>
              <p className="font-poppins text-lg leading-relaxed font-normal text-gray-600">
                Everything you need to know about eSIMs
              </p>
            </div>

            <Card>
              <CardContent className="p-6">
                <Accordion type="single" collapsible className="w-full">
                  {faqs.map((faq, index) => (
                    <AccordionItem key={index} value={`item-${index}`}>
                      <AccordionTrigger className="font-merchant font-medium text-left hover:no-underline">
                        {faq.question}
                      </AccordionTrigger>
                      <AccordionContent className="font-poppins leading-relaxed font-normal text-gray-600">
                        {faq.answer}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </CardContent>
            </Card>

            <div className="mt-8 text-center">
              <p className="font-poppins leading-relaxed font-normal text-gray-600 mb-4">
                Still have questions? We're here to help!
              </p>
              <Button
                variant="outline"
                className="font-poppins font-medium min-h-[44px]"
              >
                <MessageSquare className="w-4 h-4 mr-2" />
                Contact Support
              </Button>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <Footer
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onPassesClick={onPassesClick}
        onSignInClick={onSignInClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onContactUsClick={onContactUsClick}
        currentPage={currentPage}
      />
    </div>
  );
}

export default EsimsPage;