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

const melbourneAttractions = [
  {
    id: 1,
    name: "Royal Botanic Gardens",
    city: "Melbourne",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1721272962395-a848331ce92d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zfGVufDF8fHx8MTc1NzMzNzc4OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    rating: 4.8,
    reviews: "15,600+",
    category: "Gardens",
    originalPrice: "Free",
    includedValue: "$25",
    perks: [
      { icon: Volume2, label: "Audio garden tour", color: "text-green-600" },
      { icon: MapPin, label: "Garden maps", color: "text-blue-600" },
      { icon: Camera, label: "Photo spots guide", color: "text-purple-600" }
    ]
  },
  {
    id: 2,
    name: "Federation Square",
    city: "Melbourne",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1639655001512-e4b58d4874b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBmZWRlcmF0aW9uJTIwc3F1YXJlfGVufDF8fHx8MTc1NzMzNzc5Mnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    rating: 4.6,
    reviews: "22,400+",
    category: "Landmarks",
    originalPrice: "Free",
    includedValue: "$35",
    perks: [
      { icon: Volume2, label: "Cultural tours", color: "text-orange-600" },
      { icon: Eye, label: "Gallery access", color: "text-blue-600" },
      { icon: Users, label: "Event access", color: "text-purple-600" }
    ]
  },
  {
    id: 3,
    name: "Queen Victoria Market",
    city: "Melbourne",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1676454953709-e0be46f62490?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBxdWVlbiUyMHZpY3RvcmlhJTIwbWFya2V0fGVufDF8fHx8MTc1NzMzNzc5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    rating: 4.7,
    reviews: "18,200+",
    category: "Markets",
    originalPrice: "$45",
    includedValue: "$45",
    perks: [
      { icon: Users, label: "Food tours", color: "text-orange-600" },
      { icon: Coffee, label: "Tastings", color: "text-brown-600" },
      { icon: Volume2, label: "History guide", color: "text-blue-600" }
    ]
  },
  {
    id: 4,
    name: "Eureka Skydeck",
    city: "Melbourne",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1629677713183-29248e1268d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBldXJla2ElMjB0b3dlcnxlbnwxfHx8fDE3NTczMzc4MDB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    rating: 4.9,
    reviews: "11,800+",
    category: "Views",
    originalPrice: "$32",
    includedValue: "$32",
    perks: [
      { icon: Zap, label: "Skip-the-line", color: "text-green-600" },
      { icon: Eye, label: "360° views", color: "text-purple-600" },
      { icon: Camera, label: "Photo experiences", color: "text-blue-600" }
    ]
  },
  {
    id: 5,
    name: "St Kilda Beach & Pier",
    city: "Melbourne",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1674732954456-159835c0a46b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBzdCUyMGtpbGRhJTIwYmVhY2h8ZW58MXx8fHwxNzU3MzM3ODAzfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    rating: 4.5,
    reviews: "14,300+",
    category: "Beach",
    originalPrice: "Free",
    includedValue: "$20",
    perks: [
      { icon: Users, label: "Penguin tours", color: "text-blue-600" },
      { icon: MapPin, label: "Beach activities", color: "text-green-600" },
      { icon: Camera, label: "Sunset spots", color: "text-purple-600" }
    ]
  },
  {
    id: 6,
    name: "Melbourne Laneways",
    city: "Melbourne",
    country: "Australia",
    image: "https://images.unsplash.com/photo-1705120624704-0970afc29fea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBsYW5ld2F5cyUyMHN0cmVldCUyMGFydHxlbnwxfHx8fDE3NTczMzc4MDd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    rating: 4.8,
    reviews: "19,500+",
    category: "Street Art",
    originalPrice: "$55",
    includedValue: "$55",
    perks: [
      { icon: Palette, label: "Art tours", color: "text-pink-600" },
      { icon: Coffee, label: "Café stops", color: "text-brown-600" },
      { icon: Camera, label: "Photo walks", color: "text-purple-600" }
    ]
  },
  {
    id: 7,
    name: "Melbourne Zoo",
    city: "Melbourne", 
    country: "Australia",
    image: "https://images.unsplash.com/photo-1681429477985-30dc7b88dd5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjBhbmltYWxzfGVufDF8fHx8MTc1NzMzNzgxMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    rating: 4.7,
    reviews: "13,900+",
    category: "Wildlife",
    originalPrice: "$42",
    includedValue: "$42",
    perks: [
      { icon: Zap, label: "Skip-the-line", color: "text-green-600" },
      { icon: Users, label: "Animal encounters", color: "text-orange-600" },
      { icon: Volume2, label: "Keeper talks", color: "text-blue-600" }
    ]
  },
  {
    id: 8,
    name: "Royal Exhibition Building",
    city: "Melbourne",
    country: "Australia", 
    image: "https://images.unsplash.com/photo-1720523794299-c3b445d71a51?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjByb3lhbCUyMGV4aGliaXRpb24lMjBidWlsZGluZ3xlbnwxfHx8fDE3NTczMzc4MTR8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
    rating: 4.6,
    reviews: "8,700+",
    category: "Heritage",
    originalPrice: "$25",
    includedValue: "$25",
    perks: [
      { icon: Volume2, label: "Audio tours", color: "text-blue-600" },
      { icon: Eye, label: "Exhibitions", color: "text-purple-600" },
      { icon: MapPin, label: "Heritage walks", color: "text-green-600" }
    ]
  }
];

const categories = ["All", "Landmarks", "Gardens", "Markets", "Views", "Beach", "Street Art", "Wildlife", "Heritage"];

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

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

  const AttractionCard = ({ attraction, index }: { attraction: typeof melbourneAttractions[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 cursor-pointer flex-shrink-0 w-[280px] md:w-auto md:flex-shrink h-96 flip-card-container"
    >
      {/* 3D Flip Container */}
      <div className="flip-card-inner group-hover:[transform:rotateY(180deg)] relative w-full h-full">
        
        {/* FRONT FACE */}
        <div className="flip-card-face absolute inset-0 w-full h-full rounded-2xl overflow-hidden shadow-lg">
          {/* Background Image */}
          <ImageWithFallback
            src={attraction.image}
            alt={attraction.name}
            className="w-full h-full object-cover"
          />

          {/* 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 z-10">
            <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> */}

          {/* Front Content - Clean Title & Location */}
          <div className="absolute bottom-0 left-0 right-0">
            <div className="bg-gradient-to-t from-black/80 via-black/50 to-transparent p-6">
              <h3 className="font-bold text-xl text-white mb-1">{attraction.name}</h3>
              <p className="text-white/90 text-sm">
                {attraction.city}, {attraction.country}
              </p>
            </div>
          </div>
        </div>

        {/* BACK FACE */}
        <div className="flip-card-face flip-card-back absolute inset-0 w-full h-full rounded-2xl overflow-hidden shadow-lg bg-gradient-to-br from-gray-900 to-black">
          {/* Back Content Container */}
          <div className="relative w-full h-full p-6 flex flex-col justify-center text-white">
            
            {/* Included Value Section */}
            <div className="mb-4">
              <div className="inline-flex items-center gap-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-3 py-1.5 rounded-full text-sm font-medium mb-3">
                <CheckCircle className="w-4 h-4" />
                <span>Included Value</span>
              </div>
              <div className="text-2xl font-bold mb-1">{attraction.includedValue}</div>
              <p className="text-white/80 text-sm">
                {attraction.originalPrice === "Free"
                  ? "Premium access included"
                  : "Save money with CityCard"}
              </p>
            </div>

            {/* What's Included List */}
            <div className="mb-4">
              <h4 className="font-semibold text-sm mb-3">What's Included:</h4>
              <div className="space-y-2">
                {attraction.perks.slice(0, 3).map((perk, perkIndex) => (
                  <div key={perkIndex} className="flex items-center gap-3 text-white/90">
                    <div className="w-6 h-6 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center">
                      <perk.icon className="w-3 h-3 text-white" />
                    </div>
                    <span className="text-sm">{perk.label}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Duration & Meta Info */}
            <div className="mb-4">
              <div className="flex items-center gap-4 text-white/80 text-sm">
                <div className="flex items-center gap-1">
                  <Clock className="w-4 h-4" />
                  <span>2-3 hours</span>
                </div>
                <div className="flex items-center gap-1">
                  <Users className="w-4 h-4" />
                  <span>All ages</span>
                </div>
              </div>
            </div>

            {/* Footer Features */}
            <div className="border-t border-white/20 pt-4">
              <div className="flex items-center justify-between text-white/80 text-xs">
                <div className="flex items-center gap-2">
                  <MapPin className="w-3 h-3" />
                  <span>Mobile ticket</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-3 h-3" />
                  <span>Instant confirmation</span>
                </div>
              </div>
            </div>

            {/* Decorative Elements */}
            <div className="absolute top-4 right-4 w-16 h-16 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full blur-xl"></div>
            <div className="absolute bottom-4 left-4 w-12 h-12 bg-gradient-to-tr from-secondary/15 to-primary/15 rounded-full blur-lg"></div>
          </div>
        </div>

      </div>
    </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="text-sm font-medium bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              Melbourne Must-Sees
            </span>
          </div>
          <h2 className="heading-dynamic text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4">
            <span className="font-light">Discover</span>{' '}
            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic pr-1">
              Melbourne's
            </span>{' '}
            <span className="font-normal">Best</span>{' '}
            <span className="font-semibold text-emphasis">Experiences</span>
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Discover Melbourne's iconic landmarks, vibrant culture, world-class dining, and hidden gems - all included with your Melbourne 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 Melbourne 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 Melbourne 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>
  );
}