import { motion } from 'motion/react';
import { ArrowRight, Wifi, Hotel } from 'lucide-react';

interface HotelEsimOffersProps {
  onEsimsClick?: () => void;
  onHotelDiscountsClick?: () => void;
}

export function HotelEsimOffers({ onEsimsClick, onHotelDiscountsClick }: HotelEsimOffersProps) {
  return (
    <div>
      <div className="space-y-0">
        
        {/* e-SIM Offers Section */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="relative overflow-hidden bg-white py-20 md:py-28"
        >
          {/* Subtle Background Elements */}
          <div className="absolute inset-0 overflow-hidden">
            <motion.div 
              className="absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl"
              animate={{
                scale: [1, 1.2, 1],
                opacity: [0.3, 0.5, 0.3],
              }}
              transition={{
                duration: 8,
                repeat: Infinity,
                ease: "easeInOut"
              }}
            />
            <motion.div 
              className="absolute bottom-0 left-0 w-72 h-72 bg-orange-200/20 rounded-full blur-2xl"
              animate={{
                scale: [1, 1.3, 1],
                opacity: [0.2, 0.4, 0.2],
              }}
              transition={{
                duration: 6,
                repeat: Infinity,
                ease: "easeInOut"
              }}
            />
          </div>
          
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto relative z-10">
              {/* Header */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="text-center mb-16"
              >
                <motion.div 
                  className="inline-flex items-center gap-2 bg-primary/10 px-4 py-2 rounded-full mb-6"
                  whileHover={{ scale: 1.05 }}
                  transition={{ duration: 0.2 }}
                >
                  <Wifi className="w-4 h-4 text-primary" />
                  <span className="font-poppins text-sm font-medium text-primary">
                    Stay Connected in Melbourne
                  </span>
                </motion.div>
                <h2 className="font-poppins text-3xl md:text-5xl lg:text-6xl leading-tight text-foreground mb-6">
                  <span className="font-light">Travel </span>
                  <span className="font-bold text-primary italic">Connected</span>
                </h2>
                <p className="font-poppins text-xl leading-relaxed font-normal text-gray-700 max-w-2xl mx-auto">
                  Get instant e-SIM connectivity across Australia. Stay online from the moment you land in Melbourne.
                </p>
              </motion.div>

              {/* Main Card */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.3 }}
                onClick={onEsimsClick}
                className="bg-gradient-to-br from-primary to-orange-500 rounded-3xl p-8 md:p-12 shadow-2xl cursor-pointer group relative overflow-hidden"
                whileHover={{ scale: 1.02 }}
              >
                <motion.div
                  className="absolute top-0 right-0 w-40 h-40 bg-white/20 rounded-full blur-2xl"
                  animate={{
                    scale: [1, 1.5, 1],
                  }}
                  transition={{
                    duration: 4,
                    repeat: Infinity,
                    ease: "easeInOut"
                  }}
                />
                
                <div className="relative z-10 grid md:grid-cols-2 gap-8 items-center">
                  {/* Left Content */}
                  <div>
                    <div className="inline-flex items-center gap-2 bg-white/20 px-3 py-1 rounded-full mb-4">
                      <span className="font-poppins text-xs font-semibold text-white">🇦🇺 AUSTRALIA-WIDE COVERAGE</span>
                    </div>
                    <h3 className="font-poppins text-3xl md:text-4xl font-semibold text-white mb-4 leading-tight">
                      Exclusive e-SIM Offers for Melbourne Visitors
                    </h3>
                    <p className="font-poppins text-base text-white/90 mb-6">
                      No more hunting for local SIM cards at the airport. Activate your e-SIM instantly and explore Melbourne with seamless connectivity.
                    </p>
                    
                    <motion.div 
                      className="inline-flex items-center gap-3 bg-white text-primary py-4 px-8 rounded-full font-poppins font-semibold"
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.98 }}
                    >
                      <span>Explore Plans</span>
                      <motion.div
                        animate={{ x: [0, 5, 0] }}
                        transition={{ duration: 1.5, repeat: Infinity }}
                      >
                        <ArrowRight className="w-5 h-5" />
                      </motion.div>
                    </motion.div>
                  </div>

                  {/* Right Features */}
                  <div className="grid grid-cols-2 gap-4">
                    {[
                      { icon: '🌐', label: 'Australia Coverage', value: '100%', unit: 'nationwide' },
                      { icon: '⚡', label: 'Instant Setup', value: '< 1', unit: 'minute' },
                      { icon: '💰', label: 'Save Up To', value: '85%', unit: 'vs roaming' },
                      { icon: '🔒', label: 'Secure', value: '100%', unit: 'encrypted' }
                    ].map((item, index) => (
                      <motion.div
                        key={index}
                        initial={{ opacity: 0, scale: 0.9 }}
                        whileInView={{ opacity: 1, scale: 1 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.4, delay: 0.4 + index * 0.1 }}
                        className="bg-white/15 backdrop-blur-md rounded-2xl p-4 text-center"
                      >
                        <div className="text-3xl mb-2">{item.icon}</div>
                        <div className="font-poppins text-2xl font-bold text-white mb-1">{item.value}</div>
                        <div className="font-poppins text-xs text-white/80">{item.unit}</div>
                      </motion.div>
                    ))}
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </motion.div>

        {/* Hotel Discounts Section */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="relative overflow-hidden bg-gradient-to-br from-orange-50 via-pink-50 to-red-50 py-20 md:py-28"
        >
          {/* Animated Background Elements */}
          <div className="absolute inset-0 overflow-hidden">
            <motion.div 
              className="absolute top-0 right-0 w-96 h-96 bg-primary/10 rounded-full blur-3xl"
              animate={{
                scale: [1, 1.2, 1],
                opacity: [0.3, 0.5, 0.3],
              }}
              transition={{
                duration: 8,
                repeat: Infinity,
                ease: "easeInOut"
              }}
            />
            <motion.div 
              className="absolute bottom-0 left-0 w-72 h-72 bg-orange-200/30 rounded-full blur-2xl"
              animate={{
                scale: [1, 1.3, 1],
                opacity: [0.2, 0.4, 0.2],
              }}
              transition={{
                duration: 6,
                repeat: Infinity,
                ease: "easeInOut"
              }}
            />
          </div>
          
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto relative z-10">
              {/* Header */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="text-center mb-16"
              >
                <motion.div 
                  className="inline-flex items-center gap-2 bg-primary/10 px-4 py-2 rounded-full mb-6"
                  whileHover={{ scale: 1.05 }}
                  transition={{ duration: 0.2 }}
                >
                  <Hotel className="w-4 h-4 text-primary" />
                  <span className="font-poppins text-sm font-medium text-primary">
                    Premium Melbourne Hotels
                  </span>
                </motion.div>
                <h2 className="font-poppins text-3xl md:text-5xl lg:text-6xl leading-tight text-foreground mb-6">
                  <span className="font-light">Sleep in </span>
                  <span className="font-bold text-primary italic">Luxury</span>
                </h2>
                <p className="font-poppins text-xl leading-relaxed font-normal text-gray-700 max-w-2xl mx-auto">
                  Unlock exclusive rates at Melbourne's finest hotels. Your CityCard membership opens doors to premium CBD and waterfront stays.
                </p>
              </motion.div>

              {/* Main Card */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.3 }}
                onClick={onHotelDiscountsClick}
                className="bg-white rounded-3xl p-8 md:p-12 shadow-2xl cursor-pointer group relative overflow-hidden border border-gray-100"
                whileHover={{ scale: 1.02, y: -5 }}
              >
                <div className="grid md:grid-cols-2 gap-8 items-center mb-8">
                  {/* Left Content */}
                  <div>
                    <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary to-orange-500 px-4 py-2 rounded-full mb-4">
                      <span className="font-poppins text-xs font-semibold text-white">🔥 MARRIOTT BONVOY PARTNER</span>
                    </div>
                    <h3 className="font-poppins text-3xl md:text-4xl font-semibold text-foreground mb-4 leading-tight">
                      Melbourne Premium Stays at <span className="text-primary italic">Unbeatable Prices</span>
                    </h3>
                    <p className="font-poppins text-base text-gray-700 mb-6">
                      Access exclusive member rates at Melbourne's top hotels including Crown Towers, W Melbourne, and premium CBD properties. Enjoy complimentary upgrades and special amenities.
                    </p>
                  </div>

                  {/* Right - Savings Badge */}
                  <div className="flex justify-center">
                    <motion.div 
                      className="relative"
                      whileHover={{ rotate: [0, -5, 5, 0] }}
                      transition={{ duration: 0.3 }}
                    >
                      <div className="bg-gradient-to-br from-primary to-orange-500 rounded-3xl p-8 text-center shadow-xl">
                        <div className="font-poppins text-6xl font-bold text-white mb-2">25%</div>
                        <div className="font-poppins text-lg text-white/90 mb-1">Average Savings</div>
                        <div className="font-poppins text-sm text-white/70">on Melbourne hotels</div>
                      </div>
                      <motion.div
                        className="absolute -top-2 -right-2 bg-yellow-400 rounded-full px-3 py-1"
                        animate={{
                          scale: [1, 1.1, 1],
                        }}
                        transition={{
                          duration: 2,
                          repeat: Infinity,
                        }}
                      >
                        <span className="font-poppins text-xs font-bold text-gray-900">NEW</span>
                      </motion.div>
                    </motion.div>
                  </div>
                </div>

                {/* Features Grid */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                  {[
                    { icon: '🏆', title: 'Premium Locations', desc: 'CBD, Southbank & St Kilda' },
                    { icon: '💎', title: 'Member Perks', desc: 'Free upgrades included' },
                    { icon: '⚡', title: 'Instant Booking', desc: 'Confirm in seconds' }
                  ].map((feature, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      viewport={{ once: true }}
                      transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
                      className="flex items-start gap-3 p-4 rounded-2xl bg-gradient-to-br from-orange-50 to-pink-50"
                    >
                      <div className="text-3xl">{feature.icon}</div>
                      <div>
                        <h4 className="font-poppins font-semibold text-foreground mb-1">{feature.title}</h4>
                        <p className="font-poppins text-sm text-gray-600">{feature.desc}</p>
                      </div>
                    </motion.div>
                  ))}
                </div>

                {/* CTA */}
                <div className="text-center">
                  <motion.div 
                    className="inline-flex items-center gap-3 bg-primary text-white py-4 px-8 rounded-full font-poppins font-semibold shadow-lg"
                    whileHover={{ scale: 1.05, boxShadow: "0 20px 60px rgba(249, 95, 98, 0.4)" }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <span>View Hotel Deals</span>
                    <motion.div
                      animate={{ x: [0, 5, 0] }}
                      transition={{ duration: 1.5, repeat: Infinity }}
                    >
                      <ArrowRight className="w-5 h-5" />
                    </motion.div>
                  </motion.div>
                  <p className="font-poppins text-sm text-gray-500 mt-4">
                    Limited time offer • No booking fees • Best price guarantee
                  </p>
                </div>
              </motion.div>
            </div>
          </div>
        </motion.div>

      </div>
    </div>
  );
}
