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

export function MelbourneTourOverview() {
  const whatsIncluded = [
    {
      icon: Coffee,
      text: "Food and coffee tours in famous laneways",
      color: "text-amber-600"
    },
    {
      icon: MapPin,
      text: "Transport via trams and walking tours",
      color: "text-blue-600"
    },
    {
      icon: Users,
      text: "Local guides and cultural experiences",
      color: "text-green-600"
    },
    {
      icon: Zap,
      text: "Skip-the-line access to major attractions",
      color: "text-purple-600"
    },
    {
      icon: Volume2,
      text: "Audio guides and mobile app",
      color: "text-indigo-600"
    },
    {
      icon: Clock,
      text: "Flexible timing and self-paced tours",
      color: "text-rose-600"
    }
  ];

  const tourHighlights = [
    {
      icon: Star,
      text: "Experience the cultural capital's vibrant arts scene and hidden laneways",
      color: "text-yellow-600"
    },
    {
      icon: Coffee,
      text: "Discover Melbourne's world-famous coffee culture and rooftop bars",
      color: "text-amber-600"
    },
    {
      icon: Camera,
      text: "Capture stunning views from Eureka Skydeck and Royal Botanic Gardens",
      color: "text-purple-600"
    },
    {
      icon: Users,
      text: "Enjoy food tours through Queen Victoria Market and ethnic quarters",
      color: "text-green-600"
    },
    {
      icon: MapPin,
      text: "Explore sports culture at MCG and cultural sites in Federation Square",
      color: "text-blue-600"
    },
    {
      icon: Calendar,
      text: "Access year-round events, festivals, and seasonal attractions",
      color: "text-rose-600"
    }
  ];

  return (
    <section className="py-20 bg-gradient-to-br from-white via-gray-50/30 to-white relative overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-[0.02]">
        <div className="absolute top-0 left-0 w-full h-full">
          <div className="w-full h-full bg-gradient-to-br from-primary/20 via-secondary/20 to-primary/20 opacity-30"></div>
        </div>
      </div>

      <div className="container mx-auto px-4 relative z-10">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="mb-16"
        >
          <h2 className="heading-dynamic font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-8">
            <span className="font-light">Melbourne</span>{' '}
            <span className="font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent italic pr-2">
              Tour
            </span>{' '}
            <span className="font-normal">Overview</span>
          </h2>
        </motion.div>

        {/* Main Content Grid */}
        <div className="grid lg:grid-cols-2 gap-16 items-start">
          {/* Left Content */}
          <div className="space-y-12">
            {/* Description */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              viewport={{ once: true }}
            >
              <p className="text-lg md:text-xl text-gray-700 leading-relaxed">
                Melbourne is a must-visit cultural epicenter, and this spectacular experience unlocks 
                your access around the city in one easy pass. Save over the cost of visiting Melbourne's 
                landmarks, explore famous laneways and street art, enjoy world-class dining in hidden bars, 
                and immerse yourself in the sports capital's vibrant atmosphere. From Royal Botanic Gardens 
                to Federation Square, hotel pickup and drop-off all included.
              </p>
            </motion.div>

            {/* What's Included */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              viewport={{ once: true }}
              className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100"
            >
              <h3 className="font-merchant text-2xl md:text-3xl font-semibold text-gray-900 mb-6">
                What Will You Experience
              </h3>
              
              <div className="grid md:grid-cols-2 gap-4">
                {whatsIncluded.map((item, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.4, delay: 0.3 + index * 0.1 }}
                    viewport={{ once: true }}
                    className="flex items-start gap-3 group"
                  >
                    <div className={`w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:bg-gray-200 transition-colors duration-200`}>
                      <item.icon className={`w-4 h-4 ${item.color}`} />
                    </div>
                    <span className="text-gray-700 font-medium leading-relaxed group-hover:text-gray-900 transition-colors duration-200">
                      {item.text}
                    </span>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </div>

          {/* Right Image */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            viewport={{ once: true }}
            className="relative"
          >
            <div className="relative rounded-3xl overflow-hidden shadow-2xl">
              <ImageWithFallback
                src="https://images.unsplash.com/photo-1720347247737-9252d85d3027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZSUyMGZsaW5kZXJzJTIwc3RyZWV0fGVufDF8fHx8MTc1NzMzOTAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                alt="Melbourne City Skyline"
                className="w-full h-[400px] md:h-[500px] object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
              
              {/* Floating Badge */}
              <div className="absolute top-6 left-6 bg-white/95 backdrop-blur-sm rounded-full px-4 py-2 shadow-lg">
                <div className="flex items-center gap-2">
                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                  <span className="text-sm font-medium text-gray-900">Live Experience</span>
                </div>
              </div>
            </div>
          </motion.div>
        </div>

        {/* Tour Highlights - Full Width Below */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.4 }}
          viewport={{ once: true }}
          className="mt-20"
        >
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            {/* Left Image for Tour Highlights */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.5 }}
              viewport={{ once: true }}
              className="order-2 lg:order-1"
            >
              <div className="relative rounded-3xl overflow-hidden shadow-2xl">
                <ImageWithFallback
                  src="https://images.unsplash.com/photo-1720347247737-9252d85d3027?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZSUyMGZsaW5kZXJzJTIwc3RyZWV0fGVufDF8fHx8MTc1NzMzOTAyNHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                  alt="Melbourne Tour Highlights"
                  className="w-full h-[400px] md:h-[500px] object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-transparent to-secondary/10"></div>
                
                {/* Floating Stats */}
                <div className="absolute bottom-6 right-6 bg-white/95 backdrop-blur-sm rounded-2xl p-4 shadow-lg">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-gray-900">50+</div>
                    <div className="text-xs text-gray-600">Attractions</div>
                  </div>
                </div>
              </div>
            </motion.div>

            {/* Right Content - Tour Highlights */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.6 }}
              viewport={{ once: true }}
              className="order-1 lg:order-2"
            >
              <div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100">
                <h3 className="font-merchant text-2xl md:text-3xl font-semibold text-gray-900 mb-8">
                  Tour Highlights
                </h3>
                
                <div className="space-y-6">
                  {tourHighlights.map((highlight, index) => (
                    <motion.div
                      key={index}
                      initial={{ opacity: 0, y: 20 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.4, delay: 0.7 + index * 0.1 }}
                      viewport={{ once: true }}
                      className="flex items-start gap-4 group"
                    >
                      <div className={`w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 mt-1 group-hover:bg-gray-200 transition-all duration-200 group-hover:scale-110`}>
                        <highlight.icon className={`w-4 h-4 ${highlight.color}`} />
                      </div>
                      <p className="text-gray-700 font-medium leading-relaxed group-hover:text-gray-900 transition-colors duration-200">
                        {highlight.text}
                      </p>
                    </motion.div>
                  ))}
                </div>

                {/* Call to Action in Tour Highlights */}
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 1.3 }}
                  viewport={{ once: true }}
                  className="mt-8 pt-6 border-t border-gray-100"
                >
                </motion.div>
              </div>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}