import React from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, Heart, MapPin, Zap, Globe, Users, Camera, Coffee } from 'lucide-react';
// import { Button } from './ui/button';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';
import { MobileAppSection } from '../components/MobileAppSection';
import { EnhancedTestimonials } from '../components/EnhancedTestimonials';
import { ReviewsSection } from '../components/ReviewsSection';

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

interface AboutUsPageProps {
  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;
  currentPage: string;
  user: User | null;
}

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

      {/* Header Section with Floating Elements */}
      <section className="pt-32 pb-16 bg-gradient-to-br from-primary/5 via-secondary/5 to-background relative overflow-hidden">
        {/* Floating Travel Icons */}
        <motion.div
          className="absolute top-20 left-10 text-primary/20"
          animate={{ 
            y: [0, -15, 0],
            rotate: [0, 5, -5, 0]
          }}
          transition={{ 
            duration: 4, 
            repeat: Infinity, 
            ease: "easeInOut" 
          }}
        >
          <MapPin className="w-12 h-12" />
        </motion.div>
        
        <motion.div
          className="absolute top-32 right-16 text-secondary/20"
          animate={{ 
            y: [0, -10, 0],
            x: [0, 5, 0]
          }}
          transition={{ 
            duration: 3, 
            repeat: Infinity, 
            ease: "easeInOut",
            delay: 0.5
          }}
        >
          <Camera className="w-10 h-10" />
        </motion.div>
        
        <motion.div
          className="absolute bottom-20 left-20 text-primary/15"
          animate={{ 
            rotate: [0, 360]
          }}
          transition={{ 
            duration: 8, 
            repeat: Infinity, 
            ease: "linear" 
          }}
        >
          <Globe className="w-8 h-8" />
        </motion.div>

        <div className="container mx-auto px-4 pt-12 relative z-10">
          {/* Back Button */}
          <motion.button
            onClick={onBackClick}
            className="flex items-center gap-2 text-gray-600 hover:text-primary mb-8 transition-all duration-300 hover:scale-105"
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
          >
            <ArrowLeft className="w-5 h-5" />
            <span className="font-medium">Back</span>
          </motion.button>

          {/* Page Title with Fun Typography */}
          <motion.div
            className="max-w-4xl mx-auto text-center"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
          >
            <motion.h1 
              className="heading-dynamic text-4xl md:text-5xl lg:text-6xl mb-6 leading-tight"
              whileInView={{ 
                backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
              }}
              transition={{ duration: 3, repeat: Infinity }}
            >
              <span className="font-merchant font-light" style={{ fontStretch: 'normal', fontVariant: 'normal' }}>Meet the</span>{' '}
              <span className="bg-gradient-to-r from-primary via-secondary to-primary bg-[length:200%_100%] bg-clip-text text-transparent font-bold italic animate-shimmer pr-1">
                Dream Team
              </span>{' '}
              ✈️
            </motion.h1>
            <motion.p 
              className="font-poppins text-lg md:text-xl text-gray-600 leading-relaxed"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.8 }}
            >
              We're a bunch of travel-obsessed humans who got tired of vacation planning stress 
              and decided to fix it for everyone! 🌍✨
            </motion.p>
          </motion.div>
        </div>
      </section>

      {/* Our Story Section */}
      <section className="py-20 bg-gradient-to-b from-background to-muted/20">
        <div className="container mx-auto px-4">
          <div className="max-w-6xl mx-auto">
            
            {/* Story Introduction */}
            <motion.div
              className="grid lg:grid-cols-2 gap-12 items-center mb-20"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <div>
                <motion.div
                  className="flex items-center gap-2 mb-6"
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.2 }}
                >
                  <Heart className="w-6 h-6 text-red-500" />
                  <span className="font-merchant text-sm uppercase tracking-wide text-primary font-medium">Our Story</span>
                </motion.div>
                
                <h2 className="heading-dynamic text-3xl md:text-4xl mb-6 leading-tight">
                  <span className="font-normal">From</span>{' '}
                  <span className="italic font-light text-emphasis">Travel Stress</span>{' '}
                  <span className="font-normal">to</span>{' '}
                  <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-bold">
                    Travel Bliss
                  </span>
                </h2>
                
                <p className="font-poppins text-lg text-gray-600 leading-relaxed mb-6">
                  Picture this: You're on your dream vacation, but instead of exploring that amazing museum, 
                  you're standing in a 2-hour line holding a crumpled paper ticket. Sound familiar? 😅
                </p>
                
                <p className="font-poppins text-lg text-gray-600 leading-relaxed">
                  That's exactly what happened to our founder during a trip to Melbourne. After missing 
                  three attractions because of queues and ticket confusion, they had an idea: 
                  <span className="font-medium text-primary"> "What if we could put all city attractions in one magical card?"</span>
                </p>
              </div>
              
              <motion.div
                className="relative"
                initial={{ opacity: 0, scale: 0.8 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.8, delay: 0.3 }}
              >
                <div className="absolute -inset-4 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-3xl blur-2xl" />
                <ImageWithFallback
                  src="https://images.unsplash.com/photo-1606933988011-8adbb3ee269a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx0cmF2ZWwlMjBhZHZlbnR1cmUlMjB3b3JsZCUyMG1hcCUyMHBsYW5uaW5nfGVufDF8fHx8MTc1NzY3NjczNnww&ixlib=rb-4.1.0&q=80&w=1080"
                  alt="Travel planning inspiration"
                  className="relative rounded-2xl shadow-2xl w-full h-80 object-cover"
                />
                
                {/* Floating emoji reactions */}
                <motion.div
                  className="absolute -top-6 -right-6 text-4xl"
                  animate={{ 
                    rotate: [0, 10, -10, 0],
                    scale: [1, 1.1, 1]
                  }}
                  transition={{ 
                    duration: 2, 
                    repeat: Infinity,
                    ease: "easeInOut"
                  }}
                >
                  💡
                </motion.div>
                
                <motion.div
                  className="absolute -bottom-4 -left-6 text-3xl"
                  animate={{ 
                    y: [0, -10, 0]
                  }}
                  transition={{ 
                    duration: 1.5, 
                    repeat: Infinity,
                    ease: "easeInOut",
                    delay: 0.5
                  }}
                >
                  ✨
                </motion.div>
              </motion.div>
            </motion.div>

            {/* Our Mission Cards */}
            <motion.div
              className="grid md:grid-cols-3 gap-8 mb-20"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              {[
                {
                  icon: <Zap className="w-8 h-8" />,
                  title: "Skip the Lines",
                  description: "Because life's too short to waste on queues! Fast-track entry to all the coolest spots.",
                  color: "from-yellow-400 to-orange-500",
                  emoji: "⚡"
                },
                {
                  icon: <MapPin className="w-8 h-8" />,
                  title: "Discover Hidden Gems",
                  description: "We'll show you secret local spots that even your guidebook doesn't know about!",
                  color: "from-green-400 to-blue-500",
                  emoji: "🗺️"
                },
                {
                  icon: <Heart className="w-8 h-8" />,
                  title: "Create Epic Memories",
                  description: "More time exploring, less time planning. That's what vacation should feel like!",
                  color: "from-pink-400 to-red-500",
                  emoji: "💖"
                }
              ].map((card, index) => (
                <motion.div
                  key={index}
                  className="relative group"
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                  whileHover={{ y: -8, scale: 1.02 }}
                >
                  <div className="bg-white rounded-2xl p-8 shadow-lg border border-gray-100 relative overflow-hidden h-full">
                    {/* Background gradient */}
                    <div className={`absolute top-0 right-0 w-20 h-20 bg-gradient-to-br ${card.color} opacity-10 rounded-bl-3xl`} />
                    
                    {/* Floating emoji */}
                    <motion.div
                      className="absolute top-4 right-4 text-2xl"
                      animate={{ 
                        rotate: [0, 10, -10, 0],
                        scale: [1, 1.1, 1]
                      }}
                      transition={{ 
                        duration: 2, 
                        repeat: Infinity,
                        delay: index * 0.3
                      }}
                    >
                      {card.emoji}
                    </motion.div>
                    
                    <div className={`w-12 h-12 bg-gradient-to-br ${card.color} rounded-xl flex items-center justify-center text-white mb-6`}>
                      {card.icon}
                    </div>
                    
                    <h3 className="font-merchant text-xl mb-4 group-hover:text-primary transition-colors">
                      {card.title}
                    </h3>
                    
                    <p className="font-poppins text-gray-600 leading-relaxed">
                      {card.description}
                    </p>
                  </div>
                </motion.div>
              ))}
            </motion.div>

            {/* Team Stats Section */}
            <motion.div
              className="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-3xl p-8 md:p-12 text-center"
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <h3 className="font-merchant text-2xl md:text-3xl mb-8">
                We're a Small Team with <span className="italic font-light">Big Dreams</span> 🚀
              </h3>
              
              <div className="grid md:grid-cols-4 gap-8">
                {[
                  { number: "15+", label: "Cities Covered", emoji: "🌍" },
                  { number: "500K+", label: "Happy Travelers", emoji: "😊" },
                  { number: "1M+", label: "Lines Skipped", emoji: "⚡" },
                  { number: "∞", label: "Adventures Created", emoji: "🗺️" }
                ].map((stat, index) => (
                  <motion.div
                    key={index}
                    className="text-center"
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <motion.div
                      className="text-4xl mb-2"
                      animate={{ 
                        scale: [1, 1.1, 1] 
                      }}
                      transition={{ 
                        duration: 2, 
                        repeat: Infinity,
                        delay: index * 0.2
                      }}
                    >
                      {stat.emoji}
                    </motion.div>
                    <div className="font-merchant text-3xl font-bold text-primary mb-2">
                      {stat.number}
                    </div>
                    <div className="font-poppins text-gray-600">
                      {stat.label}
                    </div>
                  </motion.div>
                ))}
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Values Section */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center mb-16">
            <motion.h2 
              className="heading-dynamic text-3xl md:text-4xl mb-6"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
            >
              <span className="font-normal">What Makes Us</span>{' '}
              <span className="italic font-light text-emphasis">Tick</span>{' '}
              ⚡
            </motion.h2>
            <motion.p 
              className="font-poppins text-lg text-gray-600"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
            >
              These aren't just buzzwords for us - they're our daily mantras!
            </motion.p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: "Travel Should Be Fun",
                description: "Not stressful, not complicated, just pure joy and discovery!",
                icon: <Coffee className="w-6 h-6" />,
                emoji: "🎉"
              },
              {
                title: "Everyone Deserves Adventure",
                description: "From budget backpackers to luxury travelers - adventure is for all!",
                icon: <Users className="w-6 h-6" />,
                emoji: "🌟"
              },
              {
                title: "Local is Everything",
                description: "The best experiences come from locals who know their city inside out.",
                icon: <MapPin className="w-6 h-6" />,
                emoji: "🏠"
              },
              {
                title: "Innovation Over Tradition",
                description: "Why stick to 'how it's always been' when we can make it better?",
                icon: <Zap className="w-6 h-6" />,
                emoji: "💡"
              },
              {
                title: "Sustainability Matters",
                description: "Protecting the places we love to visit for future generations.",
                icon: <Globe className="w-6 h-6" />,
                emoji: "🌱"
              },
              {
                title: "Memories Over Things",
                description: "The best souvenirs are the stories you'll tell forever.",
                icon: <Camera className="w-6 h-6" />,
                emoji: "📸"
              }
            ].map((value, index) => (
              <motion.div
                key={index}
                className="bg-white rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 group relative overflow-hidden"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                whileHover={{ y: -5 }}
              >
                <motion.div
                  className="absolute top-4 right-4 text-2xl"
                  animate={{ 
                    rotate: [0, 10, -10, 0]
                  }}
                  transition={{ 
                    duration: 2, 
                    repeat: Infinity,
                    delay: index * 0.2
                  }}
                >
                  {value.emoji}
                </motion.div>
                
                <div className="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center text-white mb-4 group-hover:scale-110 transition-transform">
                  {value.icon}
                </div>
                
                <h3 className="font-merchant text-lg mb-3 group-hover:text-primary transition-colors">
                  {value.title}
                </h3>
                
                <p className="font-poppins text-gray-600 text-sm leading-relaxed">
                  {value.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* What Our Travelers Say Section */}
      <EnhancedTestimonials />

      {/* Access All Your City Cards Section */}
      <section className="py-20">
        <MobileAppSection />
      </section>

      {/* Customer Review Section */}
      <section className="py-20">
        <ReviewsSection />
      </section>

      {/* 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>
  );
}