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 '../components/ui/button';
import { Card, CardContent } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';
import { MobileAppSection } from '../components/MobileAppSection';
import { EnhancedTestimonials } from '../components/EnhancedTestimonials';
import { HowItWorks } from '../components/HowItWorks';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { PersonalizedTourHero } from '../components/PersonalizedTourHero';
import { Layout } from '../Layout';

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;
    onSuperSavingsClick?: () => 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,
    onSuperSavingsClick,
    onContactUsClick,
    onEsimsClick,
    onHotelDiscountsClick,
    onCreateItineraryClick,
    onViewItineraryClick,
    currentPage,
    user
}: MagicItineraryPageProps) {
    return (

        <Layout activeCity="Landingpage" onSignInClick={onSignInClick} onSignOutClick={onSignOutClick} user={user}>

            <div className="min-h-screen bg-background">

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

                {/* 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">
                        {/* 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">Smart Features for</span>{' '}
                                <span className="font-bold" style={{ color: '#F95F62' }}>Smart Travelers</span>
                            </h2>
                            <p className="font-poppins text-base md:text-lg font-normal text-gray-600 leading-relaxed">
                                Experience intelligent trip planning powered by AI technology
                            </p>
                        </motion.div>

                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
                            {/* Left side - Features */}
                            <motion.div
                                initial={{ opacity: 0, x: -30 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ duration: 0.6, delay: 0.2 }}
                                className="space-y-5"
                            >
                                {[
                                    {
                                        icon: <Sparkles className="w-5 h-5" style={{ color: '#F95F62' }} />,
                                        title: 'AI-Powered Recommendations',
                                        description: 'Our advanced AI analyzes your preferences to suggest the perfect experiences'
                                    },
                                    {
                                        icon: <Clock className="w-5 h-5" style={{ color: '#F95F62' }} />,
                                        title: 'Optimized Scheduling',
                                        description: 'Smart timing that considers opening hours, travel time, and crowd patterns'
                                    },
                                    {
                                        icon: <MapPin className="w-5 h-5" style={{ color: '#F95F62' }} />,
                                        title: 'Location-Based Planning',
                                        description: 'Efficiently planned routes that minimize travel time and maximize experiences'
                                    },
                                    {
                                        icon: <Camera className="w-5 h-5" style={{ color: '#F95F62' }} />,
                                        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="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"
                                    >
                                        {/* Subtle accent line */}
                                        <div
                                            className="absolute top-0 left-0 w-1 h-full rounded-l-2xl transition-all duration-300 group-hover:w-1.5"
                                            style={{ backgroundColor: '#F95F62' }}
                                        />

                                        <div className="flex items-start gap-4 ml-2">
                                            <div
                                                className="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center 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>
                                            <div className="flex-1">
                                                <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>
                                        </div>
                                    </motion.div>
                                ))}
                            </motion.div>

                            {/* Right side - Sample Itinerary */}
                            <motion.div
                                initial={{ opacity: 0, x: 30 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ duration: 0.6, delay: 0.4 }}
                                className="relative"
                            >
                                <div className="bg-white rounded-3xl p-8 shadow-lg border border-gray-100 overflow-hidden">
                                    {/* Header */}
                                    <div className="mb-8">
                                        <div className="flex items-center gap-3 mb-3">
                                            <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}>
                                                <Calendar className="w-5 h-5" style={{ color: '#F95F62' }} />
                                            </div>
                                            <h3 className="font-poppins text-xl md:text-2xl font-semibold leading-snug text-gray-900">
                                                Sample Day Itinerary
                                            </h3>
                                        </div>
                                        <p className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
                                            A perfectly planned Melbourne adventure
                                        </p>
                                    </div>

                                    {/* Timeline */}
                                    <div className="relative space-y-4">
                                        {/* Vertical line */}
                                        <div className="absolute left-[15px] top-3 bottom-3 w-0.5 bg-gray-200" />

                                        {[
                                            { time: '9:00 AM', activity: 'Coffee at Degraves Street', duration: '30 min', emoji: '☕' },
                                            { time: '10:00 AM', activity: 'Royal Botanic Gardens', duration: '2 hours', emoji: '🌿' },
                                            { time: '1:00 PM', activity: 'Lunch at Queen Victoria Market', duration: '1 hour', emoji: '🍽️' },
                                            { time: '3:00 PM', activity: 'Street Art Tour in Hosier Lane', duration: '1.5 hours', emoji: '🎨' },
                                            { time: '6:00 PM', activity: 'Sunset at Eureka Skydeck', duration: '1 hour', emoji: '🌅' }
                                        ].map((item, index) => (
                                            <motion.div
                                                key={index}
                                                initial={{ opacity: 0, x: -10 }}
                                                animate={{ opacity: 1, x: 0 }}
                                                transition={{ duration: 0.4, delay: 0.5 + index * 0.1 }}
                                                className="relative flex items-start gap-4 pl-10"
                                            >
                                                {/* Timeline dot */}
                                                <div
                                                    className="absolute left-0 w-8 h-8 rounded-full border-4 border-white flex items-center justify-center shadow-sm"
                                                    style={{ backgroundColor: index === 0 ? '#F95F62' : '#ffffff', borderColor: '#F95F62' }}
                                                >
                                                    {index === 0 && <div className="w-2 h-2 rounded-full bg-white" />}
                                                </div>

                                                <div className="flex-1 bg-gray-50 rounded-xl p-4 hover:bg-gray-100 transition-colors duration-200">
                                                    <div className="flex items-start justify-between gap-3 mb-2">
                                                        <div className="flex items-center gap-2">
                                                            <span className="text-lg">{item.emoji}</span>
                                                            <span className="font-poppins text-sm font-semibold" style={{ color: '#F95F62' }}>
                                                                {item.time}
                                                            </span>
                                                        </div>
                                                        <span className="font-poppins text-xs font-medium text-gray-500 bg-white px-2 py-1 rounded-full">
                                                            {item.duration}
                                                        </span>
                                                    </div>
                                                    <p className="font-poppins text-sm md:text-base font-medium text-gray-900 leading-snug">
                                                        {item.activity}
                                                    </p>
                                                </div>
                                            </motion.div>
                                        ))}
                                    </div>

                                    {/* Decorative gradient blur */}
                                    <div
                                        className="absolute -bottom-20 -right-20 w-40 h-40 rounded-full blur-3xl opacity-20 pointer-events-none"
                                        style={{ backgroundColor: '#F95F62' }}
                                    />
                                </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-6 h-6" style={{ color: '#F95F62' }} />,
                                    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-6 h-6" style={{ color: '#F95F62' }} />,
                                    title: 'Discover Hidden Gems',
                                    description: 'Find unique experiences and local favorites you might have missed.',
                                    stat: '50+ curated hidden spots'
                                },
                                {
                                    icon: <Heart className="w-6 h-6" style={{ color: '#F95F62' }} />,
                                    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 border-gray-100">
                                        <CardContent className="p-8">
                                            <div className="flex justify-center mb-6">
                                                <div
                                                    className="w-12 h-12 rounded-full flex items-center justify-center"
                                                    style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)' }}
                                                >
                                                    {benefit.icon}
                                                </div>
                                            </div>
                                            <h3 className="font-poppins text-xl md:text-2xl font-semibold leading-snug text-gray-900 mb-3">
                                                {benefit.title}
                                            </h3>
                                            <p className="font-poppins text-base font-normal leading-relaxed text-gray-600 mb-4">
                                                {benefit.description}
                                            </p>
                                            <Badge
                                                className="border-none font-poppins text-sm font-medium"
                                                style={{ backgroundColor: 'rgba(249, 95, 98, 0.1)', color: '#F95F62' }}
                                            >
                                                {benefit.stat}
                                            </Badge>
                                        </CardContent>
                                    </Card>
                                </motion.div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* What's Included Section */}
                <section className="py-20 bg-white">
                    <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-16 max-w-3xl mx-auto"
                        >
                            <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
                                <span className="font-light text-gray-800">Everything You Need,</span>{' '}
                                <span className="font-bold" style={{ color: '#F95F62' }}>All Included</span>
                            </h2>
                            <p className="font-poppins text-base md:text-lg font-normal leading-relaxed text-gray-600">
                                Your Magic Itinerary comes with comprehensive features for an amazing Melbourne experience
                            </p>
                        </motion.div>

                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            {[
                                {
                                    emoji: '⏰',
                                    title: 'Detailed Timeline',
                                    description: 'Hour-by-hour schedule with optimal timing'
                                },
                                {
                                    emoji: '🚇',
                                    title: 'Transportation Tips',
                                    description: 'Best routes and transport options between locations'
                                },
                                {
                                    emoji: '⭐',
                                    title: 'Local Recommendations',
                                    description: 'Insider tips on food, shopping, and experiences'
                                },
                                {
                                    emoji: '💰',
                                    title: 'Budget Planning',
                                    description: 'Estimated costs and money-saving suggestions'
                                },
                                {
                                    emoji: '☔',
                                    title: 'Weather Backup Plans',
                                    description: 'Alternative indoor activities for rainy days'
                                },
                                {
                                    emoji: '📸',
                                    title: 'Photo Opportunities',
                                    description: 'Best spots and times for Instagram-worthy shots'
                                },
                                {
                                    emoji: '🏛️',
                                    title: 'Cultural Insights',
                                    description: 'Local history and interesting facts about each location'
                                },
                                {
                                    emoji: '🔔',
                                    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 }}
                                    className="group"
                                >
                                    <div className="h-full bg-white rounded-2xl p-6 border border-gray-100 hover:border-gray-200 transition-all duration-300 hover:shadow-lg">
                                        <div className="flex flex-col items-center text-center">
                                            <div className="text-5xl mb-4 transition-all duration-300 group-hover:scale-110">
                                                {item.emoji}
                                            </div>
                                            <h3 className="font-poppins text-lg font-semibold leading-snug text-gray-900 mb-2">
                                                {item.title}
                                            </h3>
                                            <p className="font-poppins text-sm font-normal leading-relaxed text-gray-600">
                                                {item.description}
                                            </p>
                                        </div>
                                    </div>
                                </motion.div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* CTA Section */}


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

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

            </div>
        </Layout>
    );
}