import { ArrowRight, Star, Clock, MapPin } from 'lucide-react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { Button } from './ui/button';
import { motion } from 'motion/react';

const otherCities = [
  {
    id: 1,
    name: 'London',
    country: 'United Kingdom',
    rating: 4.8,
    experiences: 180,
    duration: '2-3 days',
    highlight: 'Historic Landmarks',
    image: 'https://images.unsplash.com/photo-1559788591-f5ea2371b915?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25kb24lMjBicmlkZ2UlMjBjaXR5c2NhcGV8ZW58MXx8fHwxNzU2MTIzNTYyfDA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Discover centuries of history, royal palaces, and world-class museums in England\'s capital city.'
  },
  {
    id: 2,
    name: 'Hong Kong',
    country: 'China',
    rating: 4.7,
    experiences: 125,
    duration: '3-4 days',
    highlight: 'Urban Adventure',
    image: 'https://images.unsplash.com/photo-1698416286339-7edbf0922953?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob25nJTIwa29uZyUyMHNreWxpbmUlMjBuaWdodHxlbnwxfHx8fDE3NTYxMjM1NjZ8MA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Experience the perfect blend of East meets West with stunning skylines and incredible cuisine.'
  },
  {
    id: 3,
    name: 'Istanbul',
    country: 'Turkey',
    rating: 4.6,
    experiences: 95,
    duration: '3-5 days',
    highlight: 'Cultural Heritage',
    image: 'https://images.unsplash.com/photo-1669117403979-be8e9448d9b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc3RhbmJ1bCUyMGJvc3Bob3J1cyUyMG1vc3F1ZXxlbnwxfHx8fDE3NTYxMjM1NzB8MA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Immerse yourself in the crossroads of Europe and Asia with stunning architecture and rich history.'
  },
  {
    id: 4,
    name: 'Cairo',
    country: 'Egypt',
    rating: 4.5,
    experiences: 78,
    duration: '4-5 days',
    highlight: 'Ancient Wonders',
    image: 'https://images.unsplash.com/photo-1705874930271-88eeb8f533dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYWlybyUyMHB5cmFtaWRzJTIwYW5jaWVudHxlbnwxfHx8fDE3NTYxMjM1NzR8MA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Journey through millennia of civilization with the Great Pyramids and the treasures of the Nile.'
  },
  {
    id: 5,
    name: 'Vancouver',
    country: 'Canada',
    rating: 4.8,
    experiences: 110,
    duration: '2-3 days',
    highlight: 'Nature & City',
    image: 'https://images.unsplash.com/photo-1730661906876-18bfc6e95f2f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2YW5jb3V2ZXIlMjBtb3VudGFpbnMlMjBjaXR5c2NhcGV8ZW58MXx8fHwxNzU2MTIzNTc4fDA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Where urban sophistication meets breathtaking natural beauty, from mountains to ocean.'
  },
  {
    id: 6,
    name: 'Miami',
    country: 'United States',
    rating: 4.6,
    experiences: 135,
    duration: '3-4 days',
    highlight: 'Beach Culture',
    image: 'https://images.unsplash.com/photo-1735825713164-192ff57874bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtaWFtaSUyMGJlYWNoJTIwYXJ0JTIwZGVjb3xlbnwxfHx8fDE3NTYxMjM1ODR8MA&ixlib=rb-4.1.0&q=80&w=1080',
    description: 'Dive into vibrant Art Deco architecture, world-famous beaches, and electric nightlife.'
  }
];

export function OtherCities() {
  return (
    <section className="py-20 bg-white">
      <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 }}
        >
          <h2 className="heading-dynamic text-4xl md:text-5xl text-gray-900 mb-6">
            <span className="font-light">Explore</span>{' '}
            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              Amazing
            </span>{' '}
            <span className="font-normal">Cities</span>{' '}
            <span className="font-semibold text-emphasis">Worldwide</span>
          </h2>
          <p className="font-poppins text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed font-normal">
            Discover incredible destinations around the world with our comprehensive city guides and curated experiences.
          </p>
        </motion.div>

        {/* Cities Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {otherCities.map((city, index) => (
            <motion.div
              key={city.id}
              className="group relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: index * 0.1 }}
              viewport={{ once: true }}
              whileHover={{ y: -8 }}
            >
              {/* Image */}
              <div className="relative h-64 overflow-hidden">
                <ImageWithFallback
                  src={city.image}
                  alt={city.name}
                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                />
                
                {/* Gradient Overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" />
                
                {/* Rating Badge */}
                <div className="absolute top-4 left-4 bg-white/95 backdrop-blur-sm px-3 py-1 rounded-full flex items-center gap-1">
                  <Star className="w-4 h-4 text-yellow-500 fill-current" />
                  <span className="text-sm font-semibold text-gray-900">{city.rating}</span>
                </div>

                {/* Highlight Badge */}
                <div className="absolute top-4 right-4 bg-primary/90 backdrop-blur-sm px-3 py-1 rounded-full">
                  <span className="text-sm font-medium text-white">{city.highlight}</span>
                </div>
              </div>

              {/* Content */}
              <div className="p-6">
                {/* City Info */}
                <div className="mb-4">
                  <h3 className="text-2xl font-bold text-gray-900 mb-1">{city.name}</h3>
                  <div className="flex items-center text-gray-600 mb-3">
                    <MapPin className="w-4 h-4 mr-1" />
                    <span className="text-sm">{city.country}</span>
                  </div>
                </div>

                {/* Stats */}
                <div className="flex items-center justify-between mb-4 text-sm text-gray-600">
                  <div className="flex items-center gap-1">
                    <span className="font-semibold text-primary">{city.experiences}</span>
                    <span>experiences</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Clock className="w-4 h-4" />
                    <span>{city.duration}</span>
                  </div>
                </div>

                {/* Description */}
                <p className="text-gray-600 mb-6 line-clamp-3">
                  {city.description}
                </p>

                {/* CTA Button */}
                <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"
                >
                  <span>Explore {city.name}</span>
                  <ArrowRight className="w-4 h-4 ml-2 group-hover/btn:translate-x-1 transition-transform duration-300" />
                </Button>
              </div>
            </motion.div>
          ))}
        </div>

        {/* Bottom CTA */}
        <motion.div 
          className="text-center mt-16"
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
        >
          <Button 
            size="lg"
            variant="outline"
            className="px-8 py-4 text-lg border-2 border-primary text-primary hover:bg-primary hover:text-white transition-all duration-300"
          >
            <span>View All Cities</span>
            <ArrowRight className="w-5 h-5 ml-2" />
          </Button>
        </motion.div>
      </div>
    </section>
  );
}