import { ArrowRight, Hotel, Mail, MapPin, Sparkles, Ticket, Wifi } from 'lucide-react';
import { motion } from 'motion/react';
import { Layout } from '../Layout';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { SmartSaving } from '../components/SmartSaving';
import { Badge } from '../components/ui/badge';
import { Button } from '../components/ui/button';
import { WhatsIncludedHero } from '../components/WhatsIncludedHero';

interface User {
  email: string;
  name: string;
}

interface WhatsIncludedProps {
  onBackClick: () => void;
  onHomeClick: () => void;
  onMelbourneClick: () => void;
  onPassesClick: () => void;
  onCheckoutClick: () => void;
  onSignInClick: () => void;
  onSignOutClick?: () => void;
  onAttractionsClick: () => void;
  onBlogsClick: () => void;
  onHowItWorksClick: () => void;
  onFAQClick: () => void;
  onPrivacyPolicyClick: () => void;
  onAboutUsClick: () => void;
  onProfileClick: () => void;
  onCityCardsClick: () => void;
  onMagicItineraryClick: () => void;
  onPostCardsClick: () => void;
  onOffersClick: () => void;
  onSuperSavingsClick?: () => void;
  onContactUsClick?: () => void;
  onEsimsClick?: () => void;
  onHotelDiscountsClick?: () => void;
  onCreateItineraryClick: () => void;
  onViewItineraryClick: () => void;
  currentPage: string;
  user: User | null;
}

export function   WhatsIncluded({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onSuperSavingsClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  onCreateItineraryClick,
  onViewItineraryClick,
  currentPage,
  user
}: WhatsIncludedProps) {
  return (
    <Layout
      activeCity="Landingpage"
      onSignInClick={onSignInClick}
      onSignOutClick={onSignOutClick}
      user={user}
    >
      <div className="min-h-screen bg-background">

        {/* Hero Section */}
        <WhatsIncludedHero
          onCreateItineraryClick={onCreateItineraryClick}
        />

        {/* What's Inside Your CityCard Section */}
        <section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100">
          <div className="container mx-auto px-4">
            {/* Section Header */}
            <motion.div
              className="text-center mb-16 max-w-3xl mx-auto"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
                <span className="font-light text-gray-800">What's Inside Your</span>{' '}
                <span className="font-semibold" style={{ color: '#F95F62' }}>CityCard</span>
              </h2>
              <p className="font-poppins text-base md:text-lg font-normal text-gray-600 leading-relaxed">
                Everything you need for an unforgettable journey in one card
              </p>
            </motion.div>

            {/* Features Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
              {[
                {
                  icon: <Ticket className="w-6 h-6" style={{ color: '#F95F62' }} />,
                  title: 'Access to Top Attractions & Tours',
                  description: 'Skip the lines and explore the best destinations with priority access'
                },
                {
                  icon: <Hotel className="w-6 h-6" style={{ color: '#F95F62' }} />,
                  title: 'Discounts on Select Hotels',
                  description: 'Save on accommodations with exclusive partner hotel deals'
                },
                {
                  icon: <Sparkles className="w-6 h-6" style={{ color: '#F95F62' }} />,
                  title: 'Magic Itinerary',
                  description: 'Your auto-curated travel plan tailored to your preferences'
                },
                {
                  icon: <Mail className="w-6 h-6" style={{ color: '#F95F62' }} />,
                  title: 'Signature Postcard',
                  description: 'Share your journey with a real postcard, mailed worldwide'
                },
                {
                  icon: <Wifi className="w-6 h-6" style={{ color: '#F95F62' }} />,
                  title: 'CityCards eSIM',
                  description: 'Stay connected with seamless data connectivity wherever you go'
                }
              ].map((feature, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
                  className="group relative bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-gray-200"
                >
                  {/* Icon */}
                  <div
                    className="w-14 h-14 rounded-xl flex items-center justify-center mb-4 shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:shadow-md"
                    style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}
                  >
                    {feature.icon}
                  </div>

                  {/* Content */}
                  <div>
                    <h3 className="font-poppins text-lg md:text-xl font-semibold leading-snug text-gray-900 mb-2">
                      {feature.title}
                    </h3>
                    <p className="font-poppins text-sm md:text-base font-normal leading-relaxed text-gray-600">
                      {feature.description}
                    </p>
                  </div>

                  {/* Hover accent */}
                  <div
                    className="absolute bottom-0 left-0 right-0 h-1 rounded-b-2xl transition-all duration-300 opacity-0 group-hover:opacity-100"
                    style={{ backgroundColor: '#F95F62' }}
                  />
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* Benefits Section */}
        {/* Featured City - Melbourne Section */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4">
          {/* Section Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-center mb-12 max-w-4xl mx-auto"
          >
            <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
              <span className="font-semibold text-gray-800">Featured City</span>
              <span className="font-normal text-gray-400 mx-3">—</span>
              <span className="font-semibold" style={{ color: '#F95F62' }}>Melbourne</span>
            </h2>
            <p className="font-poppins text-base md:text-lg font-normal text-gray-600 leading-relaxed max-w-3xl mx-auto">
              Explore Melbourne's iconic landmarks, vibrant culture, world-class dining, and hidden gems – all included with your Melbourne CityCard
            </p>
          </motion.div>

          {/* Featured Attractions Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
            {[
              {
                id: 1,
                name: "Royal Botanic Gardens",
                category: "Gardens",
                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"
              },
              {
                id: 2,
                name: "Federation Square",
                category: "Landmarks",
                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"
              },
              {
                id: 3,
                name: "Queen Victoria Market",
                category: "Markets",
                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"
              },
              {
                id: 4,
                name: "Eureka Skydeck",
                category: "Views",
                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"
              },
              {
                id: 5,
                name: "St Kilda Beach & Pier",
                category: "Beach",
                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"
              },
              {
                id: 6,
                name: "Melbourne Laneways",
                category: "Street Art",
                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"
              },
              {
                id: 7,
                name: "Melbourne Zoo",
                category: "Wildlife",
                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"
              },
              {
                id: 8,
                name: "Royal Exhibition Building",
                category: "Heritage",
                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"
              }
            ].map((attraction, index) => (
              <motion.div
                key={attraction.id}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 + index * 0.05 }}
                className="group cursor-pointer"
              >
                <div className="relative rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300">
                  {/* Image */}
                  <div className="relative h-64 overflow-hidden">
                    <ImageWithFallback
                      src={attraction.image}
                      alt={attraction.name}
                      className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    />
                    {/* Gradient Overlay */}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                    
                    {/* Category Badge */}
                    <div className="absolute top-4 right-4">
                      <Badge 
                        className="border-none font-poppins font-medium text-xs backdrop-blur-sm"
                        style={{ backgroundColor: 'rgba(255, 255, 255, 0.95)', color: '#F95F62' }}
                      >
                        {attraction.category}
                      </Badge>
                    </div>

                    {/* Attraction Name */}
                    <div className="absolute bottom-0 left-0 right-0 p-5">
                      <h3 className="font-poppins text-lg md:text-xl font-semibold leading-snug text-white mb-1">
                        {attraction.name}
                      </h3>
                      <p className="font-poppins text-sm font-normal text-white/90">
                        Melbourne, Australia
                      </p>
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* View Full List CTA */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.5 }}
            className="text-center"
          >
            <Button
              onClick={onMelbourneClick}
              size="lg"
              className="font-poppins font-semibold px-8 py-6 text-base hover:shadow-xl transition-all duration-300"
              style={{ backgroundColor: '#F95F62' }}
            >
              View Full List on Melbourne CityCard
              <MapPin className="ml-2 w-5 h-5" />
            </Button>
            <p className="font-poppins text-sm font-normal text-gray-600 mt-4">
              Over 40+ attractions included with your Melbourne CityCard
            </p>
          </motion.div>
        </div>
        </section>

        {/* How It Works Section - Smart Savings */}
        <SmartSaving />


        {/* CTA Section */}
        <section className="mt-20 py-32 md:py-40 bg-gradient-to-br from-primary to-secondary relative overflow-hidden">
          <div className="absolute inset-0 opacity-10">
            <div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl" />
            <div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl" />
          </div>

          <div className="container mx-auto px-4 relative z-10">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-center max-w-3xl mx-auto"
            >
              <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl font-semibold text-white mb-6">
                Ready to Start Your Adventure?
              </h2>
              <p className="font-poppins text-lg md:text-xl text-white/90 mb-8 font-normal leading-relaxed">
                Join millions of travelers who've discovered the smarter way to explore cities
              </p>

              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Button
                  onClick={onCheckoutClick}
                  className="px-10 py-6 rounded-full font-poppins font-semibold text-lg bg-white text-primary hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-xl"
                >
                  Select Your City
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>
                <Button
                  onClick={onPassesClick}
                  variant="outline"
                  className="px-10 py-6 rounded-full font-poppins font-semibold text-lg border-2 border-white !text-white bg-transparent hover:!bg-white hover:!text-primary transition-all duration-300"
                >
                  View All Passes
                </Button>
              </div>
            </motion.div>
          </div>
        </section>
      </div>
    </Layout>
  );
}