import { useState } from 'react';
import { ChevronLeft, ChevronRight, Clock, Users, Star, Zap, CheckCircle, MapPin, Volume2, Camera } from 'lucide-react';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { motion } from 'motion/react';

const attractions = [
  {
    id: 1,
    name: "Sydney Opera House",
    city: "Sydney",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1657622884558-cc7525f93638?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzeWRuZXklMjBvcGVyYSUyMGhvdXNlJTIwaGFyYm9yJTIwYnJpZGdlfGVufDF8fHx8MTc1NjExNDMwMHww&ixlib=rb-4.1.0&q=80&w=1080",
    rating: 4.8,
    reviews: "12,500+",
    category: "Landmarks",
    originalPrice: "$89",
    includedValue: "$89",
    perks: [
      { icon: Zap, label: "Skip-the-line", color: "text-green-600" },
      { icon: Volume2, label: "Audio guide", color: "text-blue-600" },
      { icon: Camera, label: "Photo spots", color: "text-purple-600" }
    ]
  },
  {
    id: 2,
    name: "Great Ocean Road",
    city: "Melbourne",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1557544780-585e99807b15?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMHR3ZWx2ZSUyMGFwb3N0bGVzfGVufDF8fHx8MTc1NjExNDMwNHww&ixlib=rb-4.1.0&q=80&w=1080",
    rating: 4.9,
    reviews: "8,200+",
    category: "Nature",
    originalPrice: "$125",
    includedValue: "$125",
    perks: [
      { icon: Users, label: "Guided tour", color: "text-blue-600" },
      { icon: MapPin, label: "Transport", color: "text-green-600" },
      { icon: Camera, label: "Photo stops", color: "text-purple-600" }
    ]
  },
  {
    id: 3,
    name: "Lone Pine Koala Sanctuary",
    city: "Brisbane",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1625476038303-0d3022077d39?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb25lJTIwcGluZSUyMGtvYWxhJTIwc2FuY3R1YXJ5JTIwYnJpc2JhbmV8ZW58MXx8fHwxNzU2MTE0MzA3fDA&ixlib=rb-4.1.0&q=80&w=1080",
    rating: 4.7,
    reviews: "15,800+",
    category: "Wildlife",
    originalPrice: "$65",
    includedValue: "$65",
    perks: [
      { icon: Zap, label: "Skip-the-line", color: "text-green-600" },
      { icon: Users, label: "Animal encounters", color: "text-orange-600" },
      { icon: Camera, label: "Photo opportunities", color: "text-purple-600" }
    ]
  },
  {
    id: 4,
    name: "Kings Park",
    city: "Perth",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1667315682754-852d9e855207?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxraW5ncyUyMHBhcmslMjBwZXJ0aCUyMGJvdGFuaWNhbCUyMGdhcmRlbnxlbnwxfHx8fDE3NTYxMTQzMTJ8MA&ixlib=rb-4.1.0&q=80&w=1080",
    rating: 4.6,
    reviews: "9,400+",
    category: "Parks",
    originalPrice: "Free",
    includedValue: "$35",
    perks: [
      { icon: Users, label: "Walking tours", color: "text-blue-600" },
      { icon: Volume2, label: "Audio guide", color: "text-blue-600" },
      { icon: MapPin, label: "Trail maps", color: "text-green-600" }
    ]
  },
  {
    id: 5,
    name: "Barossa Valley",
    city: "Adelaide",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1578274821879-08e7f9050d83?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxiYXJvc3NhJTIwdmFsbGV5JTIwdmluZXlhcmQlMjB3aW5lcnl8ZW58MXx8fHwxNzU2MTE0MzE3fDA&ixlib=rb-4.1.0&q=80&w=1080",
    rating: 4.8,
    reviews: "6,700+",
    category: "Wine Tours",
    originalPrice: "$98",
    includedValue: "$98",
    perks: [
      { icon: Users, label: "Wine tastings", color: "text-purple-600" },
      { icon: MapPin, label: "Transport", color: "text-green-600" },
      { icon: Volume2, label: "Expert guide", color: "text-blue-600" }
    ]
  },
  {
    id: 6,
    name: "Uluru",
    city: "Northern Territory",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1535960146738-4113294a306c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx1bHVydSUyMGF5ZXJzJTIwcm9jayUyMGF1c3RyYWxpYSUyMGRlc2VydHxlbnwxfHx8fDE3NTYxMTQzMjB8MA&ixlib=rb-4.1.0&q=80&w=1080",
    rating: 4.9,
    reviews: "11,200+",
    category: "Landmarks",
    originalPrice: "$156",
    includedValue: "$156",
    perks: [
      { icon: Users, label: "Cultural tours", color: "text-orange-600" },
      { icon: Camera, label: "Sunrise viewing", color: "text-purple-600" },
      { icon: MapPin, label: "Transport", color: "text-green-600" }
    ]
  },
  {
    id: 7,
    name: "Blue Mountains",
    city: "Sydney",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1603101468073-50894cb31719?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxibHVlJTIwbW91bnRhaW5zJTIwc3lkbmV5JTIwdGhyZWUlMjBzaXN0ZXJzfGVufDF8fHx8MTc1NjExNDMyNXww&ixlib=rb-4.1.0&q=80&w=1080",
    rating: 4.7,
    reviews: "10,300+",
    category: "Nature",
    originalPrice: "$78",
    includedValue: "$78",
    perks: [
      { icon: MapPin, label: "Scenic railway", color: "text-green-600" },
      { icon: Users, label: "Guided walks", color: "text-blue-600" },
      { icon: Camera, label: "Lookout access", color: "text-purple-600" }
    ]
  },
  {
    id: 8,
    name: "Kangaroo Island",
    city: "Adelaide",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1719933564987-6c842ee2084e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxrYW5nYXJvbyUyMGlzbGFuZCUyMGF1c3RyYWxpYSUyMHdpbGRsaWZlfGVufDF8fHx8MTc1NjExNDMyOXww&ixlib=rb-4.1.0&q=80&w=1080",
    rating: 4.8,
    reviews: "7,900+",
    category: "Wildlife",
    originalPrice: "$145",
    includedValue: "$145",
    perks: [
      { icon: Users, label: "Wildlife tours", color: "text-orange-600" },
      { icon: MapPin, label: "Ferry transport", color: "text-green-600" },
      { icon: Volume2, label: "Nature guide", color: "text-blue-600" }
    ]
  }
];

const categories = ["All", "Landmarks", "Nature", "Wildlife", "Parks", "Wine Tours"];

export function BookAttractionSection() {
  const [activeCategory, setActiveCategory] = useState("All");

  const filteredAttractions = activeCategory === "All" 
    ? attractions 
    : attractions.filter(attraction => attraction.category === activeCategory);

  const AttractionCard = ({ attraction, index }: { attraction: typeof attractions[0], index: number }) => (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      viewport={{ once: true }}
      className="group relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 cursor-pointer border border-gray-100/50 hover:border-primary/30 hover:ring-4 hover:ring-primary/10 flex-shrink-0 w-[280px] md:w-auto md:flex-shrink"
    >
      {/* Image Container */}
      <div className="relative h-64 md:h-72 lg:h-80 overflow-hidden">
        <ImageWithFallback
          src={attraction.image}
          alt={attraction.name}
          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent group-hover:from-black/70 group-hover:via-black/30 transition-all duration-500" />
        
        {/* Rating Badge */}
        <div className="absolute top-4 right-4 bg-white/95 backdrop-blur-sm rounded-full px-3 py-1.5 flex items-center gap-1 shadow-lg group-hover:bg-white group-hover:shadow-xl transition-all duration-300">
          <div className="w-4 h-4 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center">
            <span className="text-white text-xs">★</span>
          </div>
          <span className="text-sm font-medium text-gray-900">{attraction.rating}</span>
        </div>

        {/* Value Badge - Shows on hover */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8, y: 10 }}
          whileHover={{ opacity: 1, scale: 1, y: 0 }}
          className="absolute top-4 left-4 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-3 py-1.5 rounded-full text-sm font-medium shadow-lg opacity-0 group-hover:opacity-100 transition-all duration-300"
        >
          Included: {attraction.includedValue}
        </motion.div>

        {/* Overlay Content */}
        <div className="absolute bottom-0 left-0 right-0 p-6 text-white transform group-hover:translate-y-0 transition-transform duration-300">
          <h3 className="font-merchant text-xl leading-snug font-bold mb-1 group-hover:text-white transition-colors transform group-hover:scale-105 transition-transform duration-300">
            {attraction.name}
          </h3>
          <p className="text-white/90 text-sm mb-2 group-hover:text-white transition-colors">
            {attraction.city}, {attraction.country}
          </p>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1 text-white/80 text-xs group-hover:text-white/90 transition-colors">
              <span>{attraction.reviews} reviews</span>
            </div>
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              whileHover={{ opacity: 1, x: 0 }}
              className="opacity-0 group-hover:opacity-100 transition-all duration-500"
            >
              <div className="flex items-center text-white text-sm">
                <span className="mr-1">→</span>
                <span>Explore</span>
              </div>
            </motion.div>
          </div>
        </div>
      </div>

      {/* Hover Overlay - Included Value & Perks */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileHover={{ opacity: 1, y: 0 }}
        className="absolute inset-0 bg-white/95 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-all duration-500 flex flex-col justify-center items-center p-6"
      >
        <div className="text-center">
          {/* Included Value Header */}
          <motion.div
            initial={{ scale: 0.8 }}
            whileHover={{ scale: 1 }}
            className="mb-6"
          >
            <div className="inline-flex items-center gap-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-4 py-2 rounded-full mb-2">
              <CheckCircle className="w-4 h-4" />
              <span className="font-medium text-sm">Included Value</span>
            </div>
            <div className="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              {attraction.includedValue}
            </div>
            <p className="text-sm text-gray-600 mt-1">
              {attraction.originalPrice === "Free" ? "Premium access included" : "Save money with CityCard"}
            </p>
          </motion.div>

          {/* Perks Grid */}
          <div className="space-y-3 mb-6">
            <h4 className="font-merchant text-sm font-semibold text-gray-900">What's Included:</h4>
            <div className="grid gap-2">
              {attraction.perks.map((perk, perkIndex) => (
                <motion.div
                  key={perkIndex}
                  initial={{ opacity: 0, x: -10 }}
                  whileHover={{ opacity: 1, x: 0 }}
                  transition={{ delay: perkIndex * 0.1 }}
                  className="flex items-center gap-3 p-2 bg-white/60 backdrop-blur-sm rounded-lg border border-white/40"
                >
                  <div className={`w-8 h-8 rounded-full bg-white flex items-center justify-center shadow-sm ${perk.color}`}>
                    <perk.icon className="w-4 h-4" />
                  </div>
                  <span className="text-sm font-medium text-gray-800">{perk.label}</span>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Action Button */}
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="font-poppins font-semibold w-full bg-gradient-to-r from-primary to-secondary text-white py-3 px-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
          >
            Add to CityCard
          </motion.button>
        </div>
      </motion.div>

      {/* Enhanced Hover Gradient Overlay */}
      <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 via-transparent to-secondary/10 opacity-0 group-hover:opacity-100 transition-all duration-500 pointer-events-none" />
      
      {/* Border Glow Effect */}
      <div className="absolute inset-0 rounded-3xl bg-gradient-to-r from-primary to-secondary opacity-0 group-hover:opacity-20 transition-opacity duration-500 blur-sm pointer-events-none" />
    </motion.div>
  );

  return (
    <section className="py-20 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <div className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-secondary/10 px-4 py-2 rounded-full mb-6">
            <div className="w-2 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div>
            <span className="font-poppins text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              Must-See Destinations
            </span>
          </div>
          <h2 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight text-gray-900 mb-4">
            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic">
              Top
            </span>{' '}
            <span className="font-light">Attractions</span>{' '}
            <span className="font-semibold text-emphasis">Included</span>
          </h2>
          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
            Discover Australia's most iconic attractions and hidden gems across Sydney, Melbourne, Brisbane, Perth, and Adelaide - all included with your CityCard
          </p>
        </motion.div>

        {/* Category Tabs */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          viewport={{ once: true }}
          className="flex flex-wrap justify-center gap-3 mb-12"
        >
          {categories.map((category, index) => (
            <motion.button
              key={category}
              initial={{ opacity: 0, scale: 0.8 }}
              whileInView={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.3, delay: index * 0.05 }}
              viewport={{ once: true }}
              onClick={() => setActiveCategory(category)}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className={`px-6 py-4 h-14 rounded-2xl font-medium transition-all duration-300 ${
                activeCategory === category
                  ? 'bg-gradient-to-r from-primary to-secondary text-white shadow-xl shadow-primary/25 ring-2 ring-primary/20'
                  : 'bg-white/80 backdrop-blur-sm text-gray-700 hover:text-gray-900 hover:shadow-lg border border-gray-200/50 hover:border-primary/20 hover:bg-white'
              }`}
            >
              {category}
            </motion.button>
          ))}
        </motion.div>

        {/* Mobile Horizontal Carousel */}
        <div className="block md:hidden mb-8">
          <div className="relative">
            {/* Scroll Container */}
            <div className="flex gap-6 overflow-x-auto scrollbar-hide pb-4 px-4 -mx-4">
              {filteredAttractions.map((attraction, index) => (
                <AttractionCard key={attraction.id} attraction={attraction} index={index} />
              ))}
            </div>
            
            {/* Scroll Indicators */}
            <div className="flex justify-center mt-6 gap-2">
              {Array.from({ length: Math.ceil(filteredAttractions.length / 2) }).map((_, index) => (
                <div
                  key={index}
                  className="w-2 h-2 rounded-full bg-gray-300"
                />
              ))}
            </div>
            
            {/* Mobile Hint Text */}
            <div className="text-center mt-4">
              <p className="text-sm text-gray-500">
                Swipe to explore more attractions
              </p>
            </div>
          </div>
        </div>

        {/* Desktop Bento Grid */}
        <div className="hidden md:block w-full">
          {/* Top Row - 3 equal cards */}
          <div className="grid grid-cols-3 gap-6">
            {filteredAttractions.slice(0, 3).map((attraction, index) => (
              <AttractionCard key={attraction.id} attraction={attraction} index={index} />
            ))}
          </div>

          {/* Consistent Vertical Spacing */}
          <div className="h-6"></div>

          {/* Bottom Row - 2 larger cards */}
          <div className="grid grid-cols-2 gap-6">
            {filteredAttractions.slice(3, 5).map((attraction, index) => (
              <AttractionCard key={attraction.id} attraction={attraction} index={index + 3} />
            ))}
          </div>
        </div>

        {/* Call to Action */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3 }}
          viewport={{ once: true }}
          className="text-center mt-12"
        >
          <motion.button
            whileHover={{ scale: 1.05, boxShadow: "0 20px 40px rgba(99,102,241,0.3)" }}
            whileTap={{ scale: 0.95 }}
            className="relative bg-gradient-to-r from-primary to-secondary text-white py-4 px-12 rounded-lg text-lg shadow-xl transition-all duration-300 overflow-hidden group"
          >
            <span className="relative z-10">Get Your City Card</span>
            
            {/* Shine animation */}
            <div className="absolute inset-0 opacity-30">
              <div className="h-full bg-gradient-to-r from-transparent via-white to-transparent animate-shine"></div>
            </div>
          </motion.button>
        </motion.div>
      </div>
    </section>
  );
}