import React from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, Sparkles, MapPin, Clock, Users, Calendar, Star, Zap, Heart, Camera } from 'lucide-react';
import { Button } from './ui/button';
import { Card, CardContent } from './ui/card';
import { Badge } from './ui/badge';
import Navbar from './Navbar';
import SubNavbar from './SubNavbar';
import { Footer } from './Footer';
import { MobileAppSection } from './MobileAppSection';
import { EnhancedTestimonials } from './EnhancedTestimonials';
import { HowItWorks } from './HowItWorks';
import { ImageWithFallback } from './figma/ImageWithFallback';

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

interface MagicItineraryPageProps {
  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;
  onContactUsClick?: () => void;
  onEsimsClick?: () => void;
  onHotelDiscountsClick?: () => void;
  onCreateItineraryClick: () => void;
  onViewItineraryClick: () => void;
  currentPage: string;
  user: User | null;
}

export function MagicItineraryPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  onCreateItineraryClick,
  onViewItineraryClick,
  currentPage,
  user
}: MagicItineraryPageProps) {
  return (
    <div className="min-h-screen bg-background">
      {/* Navbar */}
      <Navbar
        activeCity=""
        onCityChange={() => {}}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onHomeClick={onHomeClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
        currentPage="magic-itinerary"
        isUserSignedIn={!!user}
        user={user}
      />

      {/* Sub Navbar */}
      <SubNavbar
        activeTab="magic-itinerary"
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
      />

      {/* Hero Section */}
      <section className="relative pt-52 pb-20 overflow-hidden">
        {/* Background gradient */}
        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background"></div>
        
        <div className="container mx-auto px-4 relative z-10">
          <motion.div
            className="max-w-4xl mx-auto text-center"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
              <span className="font-light">Plan Your Perfect</span>{' '}
              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                Melbourne Adventure
              </span>
            </h1>
            <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
              Let our AI create a personalized itinerary just for you. Answer a few questions about your preferences, 
              and we'll craft the perfect Melbourne experience tailored to your interests.
            </p>
            <Button 
              onClick={onCreateItineraryClick}
              className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
            >
              Create My Magic Itinerary
            </Button>
          </motion.div>
        </div>

        {/* Decorative elements */}
        <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
        <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
      </section>

      {/* How It Works Section */}
      <HowItWorks />

      {/* Features Section */}
      <section className="py-16 bg-gradient-to-br from-gray-50 to-gray-100">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            {/* Left side - Features */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <h2 className="font-merchant text-3xl mb-6">
                <span className="text-gray-900">Smart Features for</span><br />
                <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">Smart Travelers</span>
              </h2>
              
              <div className="space-y-6">
                {[
                  {
                    icon: <Sparkles className="w-6 h-6 text-purple-600" />,
                    title: 'AI-Powered Recommendations',
                    description: 'Our advanced AI analyzes your preferences to suggest the perfect experiences'
                  },
                  {
                    icon: <Clock className="w-6 h-6 text-pink-600" />,
                    title: 'Optimized Scheduling',
                    description: 'Smart timing that considers opening hours, travel time, and crowd patterns'
                  },
                  {
                    icon: <MapPin className="w-6 h-6 text-purple-600" />,
                    title: 'Location-Based Planning',
                    description: 'Efficiently planned routes that minimize travel time and maximize experiences'
                  },
                  {
                    icon: <Camera className="w-6 h-6 text-pink-600" />,
                    title: 'Instagram-Worthy Spots',
                    description: 'Discover hidden gems and perfect photo opportunities along your journey'
                  }
                ].map((feature, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
                    className="flex items-start space-x-4"
                  >
                    <div className="flex-shrink-0 w-12 h-12 bg-white rounded-lg flex items-center justify-center shadow-md">
                      {feature.icon}
                    </div>
                    <div>
                      <h3 className="font-merchant text-lg mb-2">{feature.title}</h3>
                      <p className="text-gray-600 font-poppins">{feature.description}</p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </motion.div>

            {/* Right side - Visual */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="relative"
            >
              <div className="bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl p-8 text-white">
                <h3 className="font-merchant text-2xl mb-6">Sample Itinerary</h3>
                <div className="space-y-4">
                  {[
                    { time: '9:00 AM', activity: 'Coffee at Degraves Street', duration: '30 min' },
                    { time: '10:00 AM', activity: 'Royal Botanic Gardens', duration: '2 hours' },
                    { time: '1:00 PM', activity: 'Lunch at Queen Victoria Market', duration: '1 hour' },
                    { time: '3:00 PM', activity: 'Street Art Tour in Hosier Lane', duration: '1.5 hours' },
                    { time: '6:00 PM', activity: 'Sunset at Eureka Skydeck', duration: '1 hour' }
                  ].map((item, index) => (
                    <div key={index} className="flex items-center space-x-4 bg-white/10 rounded-lg p-3">
                      <div className="text-sm font-bold bg-white/20 px-2 py-1 rounded">
                        {item.time}
                      </div>
                      <div className="flex-1">
                        <div className="font-medium">{item.activity}</div>
                        <div className="text-xs text-white/80">{item.duration}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-center mb-12"
          >
            <h2 className="font-merchant text-3xl mb-4">Why Use Magic Itinerary?</h2>
            <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
              Save time, discover more, and create unforgettable memories with personalized planning
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                icon: <Clock className="w-12 h-12 text-purple-600" />,
                title: 'Save Planning Time',
                description: 'Skip hours of research. Get a complete itinerary in under 5 minutes.',
                stat: '90% faster than manual planning'
              },
              {
                icon: <Star className="w-12 h-12 text-pink-600" />,
                title: 'Discover Hidden Gems',
                description: 'Find unique experiences and local favorites you might have missed.',
                stat: '50+ curated hidden spots'
              },
              {
                icon: <Heart className="w-12 h-12 text-purple-600" />,
                title: 'Personalized Experience',
                description: 'Every itinerary is unique, tailored specifically to your preferences.',
                stat: '1000+ possible combinations'
              }
            ].map((benefit, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
              >
                <Card className="h-full text-center hover:shadow-lg transition-shadow duration-300">
                  <CardContent className="p-8">
                    <div className="mb-4">
                      {benefit.icon}
                    </div>
                    <h3 className="font-merchant text-xl mb-3">{benefit.title}</h3>
                    <p className="text-gray-600 font-poppins mb-4">{benefit.description}</p>
                    <Badge className="bg-gradient-to-r from-purple-100 to-pink-100 text-purple-700 border-none">
                      {benefit.stat}
                    </Badge>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* What's Included Section */}
      <section className="py-16 bg-gradient-to-br from-purple-50 to-pink-50">
        <div className="container mx-auto px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-center mb-12"
          >
            <h2 className="font-merchant text-3xl mb-4">What's Included</h2>
            <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
              Your Magic Itinerary comes with everything you need for an amazing Melbourne experience
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                title: 'Detailed Timeline',
                description: 'Hour-by-hour schedule with optimal timing'
              },
              {
                title: 'Transportation Tips',
                description: 'Best routes and transport options between locations'
              },
              {
                title: 'Local Recommendations',
                description: 'Insider tips on food, shopping, and experiences'
              },
              {
                title: 'Budget Planning',
                description: 'Estimated costs and money-saving suggestions'
              },
              {
                title: 'Weather Backup Plans',
                description: 'Alternative indoor activities for rainy days'
              },
              {
                title: 'Photo Opportunities',
                description: 'Best spots and times for Instagram-worthy shots'
              },
              {
                title: 'Cultural Insights',
                description: 'Local history and interesting facts about each location'
              },
              {
                title: 'Real-time Updates',
                description: 'Live information on closures, events, and crowds'
              }
            ].map((item, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.3 + index * 0.05 }}
              >
                <Card className="h-full hover:shadow-md transition-shadow duration-300">
                  <CardContent className="p-6 text-center">
                    <h3 className="font-merchant text-lg mb-2">{item.title}</h3>
                    <p className="text-gray-600 font-poppins text-sm">{item.description}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}


      {/* Mobile App Section */}
      <MobileAppSection />

      {/* Customer Reviews */}
      <EnhancedTestimonials />

      {/* Footer */}
      <Footer 
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onPassesClick={onPassesClick}
        onSignInClick={onSignInClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onContactUsClick={onContactUsClick}
        currentPage={currentPage}
      />
    </div>
  );
}