import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Sparkles, MapPin, Calendar, Wand2, Clock } from 'lucide-react';
// import { ImageWithFallback } from './figma/ImageWithFallback';
import cityTourVideo from '../assets/citycards-vid.mp4';

interface PersonalizedTourHeroProps {
  onCreateItineraryClick?: () => void;
}

interface AttractionCard {
  id: number;
  name: string;
  image: string;
  time: string;
  category: string;
}

export function PersonalizedTourHero({ onCreateItineraryClick }: PersonalizedTourHeroProps) {
  const attractionCards: AttractionCard[] = [
    {
      id: 1,
      name: 'SEA LIFE Melbourne Aquarium',
      image: 'https://images.unsplash.com/photo-1696693886265-e73512cdf712?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhcXVhcml1bSUyMHNlYSUyMGxpZmV8ZW58MXx8fHwxNzYyMzI2NDk5fDA&ixlib=rb-4.1.0&q=80&w=1080',
      time: '2-3 hours',
      category: 'Marine Life'
    },
    {
      id: 2,
      name: 'Eureka Skydeck 88',
      image: 'https://images.unsplash.com/photo-1720044109127-0aee490512be?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxldXJla2ElMjBza3lkZWNrJTIwbWVsYm91cm5lfGVufDF8fHx8MTc2MjMyNjUwMHww&ixlib=rb-4.1.0&q=80&w=1080',
      time: '1-2 hours',
      category: 'Observation Deck'
    },
    {
      id: 3,
      name: 'Royal Botanic Gardens',
      image: 'https://images.unsplash.com/photo-1721272962395-a848331ce92d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb3lhbCUyMGJvdGFuaWMlMjBnYXJkZW5zJTIwbWVsYm91cm5lfGVufDF8fHx8MTc2MjMyNjUwMHww&ixlib=rb-4.1.0&q=80&w=1080',
      time: '2-4 hours',
      category: 'Nature & Parks'
    },
    {
      id: 4,
      name: 'Melbourne Zoo',
      image: 'https://images.unsplash.com/photo-1681429477985-30dc7b88dd5b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjB6b28lMjBhbmltYWxzfGVufDF8fHx8MTc2MjMyNjUwMXww&ixlib=rb-4.1.0&q=80&w=1080',
      time: '3-5 hours',
      category: 'Wildlife'
    },
    {
      id: 5,
      name: 'National Gallery of Victoria',
      image: 'https://images.unsplash.com/photo-1642888619334-55c0179590a3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxuYXRpb25hbCUyMGdhbGxlcnklMjB2aWN0b3JpYXxlbnwxfHx8fDE3NjIzMjY1MDF8MA&ixlib=rb-4.1.0&q=80&w=1080',
      time: '2-3 hours',
      category: 'Art & Culture'
    }
  ];

  const [currentCardIndex, setCurrentCardIndex] = useState(0);
  const [videoLoaded, setVideoLoaded] = useState(false);
  const handleVideoLoad = () => setVideoLoaded(true);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentCardIndex((prev) => (prev + 1) % attractionCards.length);
    }, 3000);

    return () => clearInterval(timer);
  }, [attractionCards.length]);

  const currentCard = attractionCards[currentCardIndex];
  const nextCard = attractionCards[(currentCardIndex + 1) % attractionCards.length];
  const thirdCard = attractionCards[(currentCardIndex + 2) % attractionCards.length];

  return (
    <div className="relative w-full min-h-[90vh] overflow-hidden flex items-center bg-gradient-to-br from-orange-50 via-white to-rose-50">
      {/* Gradient Background Elements */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-primary/10 to-transparent rounded-full blur-3xl"></div>
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-orange-100/30 to-transparent rounded-full blur-3xl"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-gradient-to-br from-rose-50/50 to-transparent rounded-full blur-3xl"></div>
      </div>

      {/* Main Content */}
      <div className="relative z-10 w-full px-4 pt-32 md:pt-40 pb-16 md:pb-20">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            {/* Left Content */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
              className="text-left"
            >
              {/* Badge */}
              <motion.div
                className="inline-flex items-center gap-2 bg-gradient-to-r from-primary/10 to-orange-100/50 backdrop-blur-sm px-5 py-2 rounded-full border-2 border-primary/30 shadow-lg mb-6"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6 }}
              >
                <motion.div
                  animate={{
                    rotate: [0, 15, -15, 0],
                    scale: [1, 1.15, 1.15, 1],
                  }}
                  transition={{ duration: 2, repeat: Infinity }}
                >
                  <Wand2 className="w-5 h-5 text-primary drop-shadow-lg" />
                </motion.div>
                <span className="font-poppins font-semibold text-gray-800">AI-Powered Planning</span>
                <motion.div
                  className="w-1.5 h-1.5 bg-primary rounded-full"
                  animate={{
                    scale: [1, 1.5, 1],
                    opacity: [1, 0.5, 1],
                  }}
                  transition={{ duration: 1.5, repeat: Infinity }}
                />
              </motion.div>

              {/* Main Heading */}
              <h1 className="font-poppins text-4xl sm:text-5xl md:text-6xl leading-tight mb-6">
                <span className="font-light">Create Your</span>{' '}
                <span className="font-bold italic bg-gradient-to-r from-primary via-orange-500 to-rose-500 
             bg-clip-text text-transparent inline-block overflow-visible whitespace-nowrap pr-2">
                  Magic Itinerary
                </span>
              </h1>

              <p className="font-poppins text-lg md:text-xl font-normal leading-relaxed text-gray-600 mb-8">
                Let AI craft a personalized journey tailored to your interests, timeline, and travel style. Get the perfect itinerary in minutes.
              </p>

              {/* Quick Features */}
              <div className="space-y-3 mb-8">
                {[
                  { icon: <Sparkles className="w-5 h-5" />, text: 'AI-powered smart suggestions' },
                  { icon: <MapPin className="w-5 h-5" />, text: '40+ top Melbourne attractions' },
                  { icon: <Calendar className="w-5 h-5" />, text: 'Flexible & customizable plans' }
                ].map((feature, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
                    className="flex items-center gap-3"
                  >
                    <div className="flex-shrink-0 text-primary">
                      {feature.icon}
                    </div>
                    <span className="font-poppins text-base font-normal text-gray-700">
                      {feature.text}
                    </span>
                  </motion.div>
                ))}
              </div>

              {/* CTA Button */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.5 }}
                className="flex flex-col sm:flex-row gap-4 items-start sm:items-center"
              >
                <button
                  onClick={onCreateItineraryClick}
                  className="group relative px-8 py-4 rounded-lg flex items-center gap-2 overflow-hidden transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl font-poppins font-semibold text-base text-white bg-gradient-to-r from-primary via-orange-500 to-rose-500 hover:from-primary/90 hover:via-orange-500/90 hover:to-rose-500/90"
                >
                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" />
                  <Wand2 className="w-5 h-5 relative z-10 group-hover:rotate-12 transition-transform duration-300" />
                  <span className="relative z-10">Create My Itinerary</span>
                </button>

                <p className="font-poppins text-sm text-gray-600 font-normal flex items-center gap-2">
                  <Sparkles className="w-4 h-4 text-primary" />
                  <span>Free • Takes less than 2 minutes</span>
                </p>
              </motion.div>
            </motion.div>

            {/* Right - Video Section */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="relative hidden lg:block"
            >
              <div className="relative flex justify-center items-center min-h-[500px]">
                {/* Video Wrapper */}
                <div className="relative w-full max-w-md h-full rounded-2xl overflow-hidden shadow-2xl border border-gray-100">
                  <video
                    autoPlay
                    muted
                    loop
                    playsInline
                    onLoadedData={handleVideoLoad}
                    className="w-full h-full object-cover rounded-2xl"
                  >
                    <source src={cityTourVideo} type="video/mp4" />
                    Your browser does not support the video tag.
                  </video>

                  {/* Loading Spinner Overlay */}
                  {!videoLoaded && (
                    <div className="absolute inset-0 flex items-center justify-center bg-gray-900/80 backdrop-blur-sm">
                      <motion.div
                        animate={{ rotate: 360 }}
                        transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                        className="w-12 h-12 border-4 border-primary/30 border-t-primary rounded-full"
                      />
                    </div>
                  )}
                </div>
              </div>
            </motion.div>

          </div>
        </div>
      </div>
    </div>
  );
}
