import { Calendar, Users, Compass, Bell, ArrowRight, Sparkles } from 'lucide-react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { Button } from './ui/button';
import { motion } from 'motion/react';

const upcomingDestinations = [
  {
    id: 1,
    name: 'Reykjavik',
    country: 'Iceland',
    launchDate: 'March 2025',
    season: 'Spring',
    expectedAttractions: 45,
    specialFeature: 'Northern Lights',
    status: 'launching-soon',
    image: 'https://images.unsplash.com/photo-1666003415555-1634ff3cd022?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyZXlramF2aWslMjBpY2VsYW5kJTIwbm9ydGhlcm4lMjBsaWdodHN8ZW58MXx8fHwxNzU2MTIzNjI1fDA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Experience the magic of Iceland with geothermal wonders, dramatic landscapes, and the enchanting Northern Lights.',
    earlyBirdDiscount: '25%'
  },
  {
    id: 2,
    name: 'Cape Town',
    country: 'South Africa',
    launchDate: 'June 2025',
    season: 'Winter',
    expectedAttractions: 85,
    specialFeature: 'Wildlife Safari',
    status: 'in-development',
    image: 'https://images.unsplash.com/photo-1635260980154-315c57168b12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYXBlJTIwdG93biUyMHRhYmxlJTIwbW91bnRhaW58ZW58MXx8fHwxNzU2MTIzNjI5fDA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Discover the Mother City with Table Mountain adventures, wine tours, and incredible wildlife experiences.',
    earlyBirdDiscount: '20%'
  },
  {
    id: 3,
    name: 'Oslo',
    country: 'Norway',
    launchDate: 'September 2025',
    season: 'Autumn',
    expectedAttractions: 65,
    specialFeature: 'Fjord Tours',
    status: 'planning',
    image: 'https://images.unsplash.com/photo-1725993486972-f569d8038915?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvc2xvJTIwZmpvcmQlMjBub3J3YXl8ZW58MXx8fHwxNzU2MTIzNjMzfDA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Explore Norwegian culture, stunning fjords, and modern Scandinavian design in this beautiful Nordic capital.',
    earlyBirdDiscount: '15%'
  },
  {
    id: 4,
    name: 'Marrakech',
    country: 'Morocco',
    launchDate: 'December 2025',
    season: 'Winter',
    expectedAttractions: 70,
    specialFeature: 'Desert Adventure',
    status: 'coming-soon',
    image: 'https://images.unsplash.com/photo-1589008207338-a9c80f8a2d23?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYXJyYWtlY2glMjBtb3JvY2NvJTIwbWVkaW5hfGVufDF8fHx8MTc1NjEyMzYzNnww&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Immerse yourself in the imperial city\'s vibrant souks, stunning palaces, and Sahara desert adventures.',
    earlyBirdDiscount: '30%'
  }
];

const getStatusColor = (status: string) => {
  switch (status) {
    case 'launching-soon':
      return 'bg-green-100 text-green-800 border-green-200';
    case 'in-development':
      return 'bg-blue-100 text-blue-800 border-blue-200';
    case 'planning':
      return 'bg-yellow-100 text-yellow-800 border-yellow-200';
    case 'coming-soon':
      return 'bg-purple-100 text-purple-800 border-purple-200';
    default:
      return 'bg-gray-100 text-gray-800 border-gray-200';
  }
};

const getStatusText = (status: string) => {
  switch (status) {
    case 'launching-soon':
      return 'Launching Soon';
    case 'in-development':
      return 'In Development';
    case 'planning':
      return 'Planning Stage';
    case 'coming-soon':
      return 'Coming Soon';
    default:
      return 'Upcoming';
  }
};

export function UpcomingDestinations() {
  return (
    <section className="py-20 bg-gradient-to-br from-gray-50 to-blue-50/30">
      <div className="container mx-auto px-4">
        {/* Header */}
        <motion.div 
          className="text-center mb-16"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
        >
          <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-4 py-2 rounded-full mb-6">
            <Sparkles className="w-4 h-4" />
            <span className="text-sm font-medium">New Destinations Coming</span>
          </div>
          
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            <span className="font-light">Upcoming</span>{' '}
            <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
              Destinations
            </span>
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Be the first to explore these incredible new destinations. Get early access and exclusive discounts when they launch.
          </p>
        </motion.div>

        {/* Destinations Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
          {upcomingDestinations.map((destination, index) => (
            <motion.div
              key={destination.id}
              className="group relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500"
              initial={{ opacity: 0, x: index % 2 === 0 ? -30 : 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: index * 0.2 }}
              viewport={{ once: true }}
              whileHover={{ y: -5 }}
            >
              <div className="flex flex-col lg:flex-row">
                {/* Image Section */}
                <div className="relative lg:w-1/2 h-64 lg:h-auto overflow-hidden">
                  <ImageWithFallback
                    src={destination.image}
                    alt={destination.name}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                  />
                  
                  {/* Overlay */}
                  <div className="absolute inset-0 bg-gradient-to-t lg:bg-gradient-to-r from-black/40 via-transparent to-transparent" />
                  
                  {/* Status Badge */}
                  <div className={`absolute top-4 left-4 px-3 py-1 rounded-full border text-sm font-medium ${getStatusColor(destination.status)}`}>
                    {getStatusText(destination.status)}
                  </div>

                  {/* Discount Badge */}
                  {destination.earlyBirdDiscount && (
                    <div className="absolute top-4 right-4 bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">
                      -{destination.earlyBirdDiscount} Early Bird
                    </div>
                  )}
                </div>

                {/* Content Section */}
                <div className="lg:w-1/2 p-8 flex flex-col">
                  {/* Header */}
                  <div className="mb-6">
                    <h3 className="text-2xl font-bold text-gray-900 mb-2">{destination.name}</h3>
                    <p className="text-gray-600 mb-4">{destination.country}</p>
                    <p className="text-gray-700 text-sm leading-relaxed">
                      {destination.description}
                    </p>
                  </div>

                  {/* Stats */}
                  <div className="space-y-3 mb-6">
                    <div className="flex items-center justify-between text-sm">
                      <div className="flex items-center gap-2 text-gray-600">
                        <Calendar className="w-4 h-4" />
                        <span>Launch Date</span>
                      </div>
                      <span className="font-semibold text-primary">{destination.launchDate}</span>
                    </div>
                    
                    <div className="flex items-center justify-between text-sm">
                      <div className="flex items-center gap-2 text-gray-600">
                        <Compass className="w-4 h-4" />
                        <span>Attractions</span>
                      </div>
                      <span className="font-semibold">{destination.expectedAttractions}+ planned</span>
                    </div>
                    
                    <div className="flex items-center justify-between text-sm">
                      <div className="flex items-center gap-2 text-gray-600">
                        <Sparkles className="w-4 h-4" />
                        <span>Special Feature</span>
                      </div>
                      <span className="font-semibold text-secondary">{destination.specialFeature}</span>
                    </div>
                  </div>

                  {/* CTA Buttons */}
                  <div className="mt-auto space-y-3">
                    <Button 
                      className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-medium py-3 rounded-2xl transition-all duration-300 group/btn"
                    >
                      <Bell className="w-4 h-4 mr-2" />
                      <span>Notify Me</span>
                      <ArrowRight className="w-4 h-4 ml-2 group-hover/btn:translate-x-1 transition-transform duration-300" />
                    </Button>
                    
                    <Button 
                      variant="outline"
                      className="w-full border-primary text-primary hover:bg-primary hover:text-white py-3 rounded-2xl transition-all duration-300"
                    >
                      <Users className="w-4 h-4 mr-2" />
                      <span>Join Waitlist</span>
                    </Button>
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* Newsletter Signup */}
        <motion.div 
          className="bg-gradient-to-r from-primary to-secondary rounded-3xl p-8 lg:p-12 text-center text-white"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
        >
          <h3 className="text-3xl font-bold mb-4">Be the First to Explore</h3>
          <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
            Subscribe to get exclusive early access, special discounts, and be notified the moment new destinations launch.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
            <input
              type="email"
              placeholder="Enter your email"
              className="flex-1 px-4 py-3 rounded-2xl text-gray-900 placeholder-gray-500 border-0 focus:ring-2 focus:ring-white/50 focus:outline-none"
            />
            <Button 
              className="bg-white text-primary hover:bg-gray-100 font-semibold px-8 py-3 rounded-2xl transition-all duration-300"
            >
              Subscribe
            </Button>
          </div>
          
          <p className="text-sm text-white/70 mt-4">
            Join 50,000+ travelers who get first access to new destinations
          </p>
        </motion.div>
      </div>
    </section>
  );
}