CityCards-Website/src/components/WhatsIncludedHero.tsx

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';

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

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

export function WhatsIncludedHero({ onCreateItineraryClick }: WhatsIncludedHeroProps) {
  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);

  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">
        {/* Background Image with White Opacity */}
        <div className="absolute inset-0 z-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1635398039910-53f913ce7847?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBhdXN0cmFsaWElMjBhcmNoaXRlY3R1cmV8ZW58MXx8fHwxNzYyNDkyNjI0fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
            alt="Melbourne cityscape"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-white/85" />
        </div>

        <div className="max-w-7xl mx-auto relative z-10">
          <div className="flex items-center justify-center min-h-[60vh]">
            {/* Centered Content */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="text-center max-w-4xl"
            >
              {/* Main Heading */}
              <h1 className="font-poppins text-4xl sm:text-5xl md:text-6xl w-full leading-tight mb-6">
                <span className="font-light">One CityCard</span>{' '}
                <span className="font-bold italic pr-2 bg-gradient-to-r from-primary via-orange-500 to-rose-500 bg-clip-text text-transparent">
                  Everything you
                </span>{' '}
                <span className="font-bold italic pr-2 bg-gradient-to-r from-primary via-orange-500 to-rose-500 bg-clip-text text-transparent">
                  need
                </span>{' '}
                <span className="font-light">to explore.</span>
              </h1>

              <p className="font-poppins text-lg md:text-xl font-normal leading-relaxed text-gray-600">
                Your CityCard unlocks access to best attractions, experiences, and travel essentials — all in one pass.
              </p>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  );
}