import { motion } from 'motion/react';
import { Button } from './ui/button';
import Navbar from './Navbar';
import { CitySubmenu } from './CitySubmenu';
import { MelbourneAttractions } from './MelbourneAttractions';
import { MelbourneCardComparison } from './MelbourneCardComparison';
import { MelbourneTourOverview } from './MelbourneTourOverview';
import { MelbourneBlogs } from './MelbourneBlogs';
import { EnhancedTestimonials } from './EnhancedTestimonials';
import { MobileAppPromotion } from './MobileAppPromotion';
import { MelbourneFAQ } from './MelbourneFAQ';
import { Footer } from './Footer';

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

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

export function MelbournePage({ 
  onBackClick, 
  onHomeClick, 
  onAttractionsClick, 
  onPassesClick,
  onCheckoutClick, 
  onSignInClick,
  onSignOutClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onEsimsClick,
  onHotelDiscountsClick,
  onContactUsClick,
  currentPage,
  user
}: MelbournePageProps) {
  return (
    <div className="min-h-screen bg-background">
      {/* Navbar */}
      <Navbar 
        activeCity="Melbourne"
        onCityChange={(city) => {
          if (city === 'Melbourne') {
            // Already on Melbourne page
          }
        }}
        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={currentPage || "melbourne"}
        isUserSignedIn={!!user}
        user={user}
      />

      {/* City Submenu */}
      <CitySubmenu 
        onClose={() => {}} // Empty function since it's always shown
        currentPage="melbourne"
        onHomeClick={onHomeClick}
        onMelbourneClick={() => {}} // Already on Melbourne page
        onAttractionsClick={onAttractionsClick}
        onPassesClick={onPassesClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
      />

      {/* Hero Section - Full Width */}
      <div 
        className="relative w-full h-[85vh] bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), url('https://images.unsplash.com/photo-1573639571368-065819727a52?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx8fDE3NTczOTY3MDd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral')`
        }}
      >
        <div className="absolute inset-x-0 top-0 bottom-0 flex items-center justify-start pl-8 md:pl-16 lg:pl-24">
          <div className="text-left text-white px-4">
            <motion.h1
              className="font-poppins text-5xl md:text-6xl lg:text-7xl leading-tight mb-6"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 1, delay: 0.3 }}
            >
              <span className="font-light">Discover</span>{' '}
              <span className="font-bold italic bg-gradient-to-r from-yellow-300 to-orange-400 bg-clip-text text-transparent">
                Melbourne
              </span>
            </motion.h1>
            
            <motion.p
              className="font-poppins text-xl leading-relaxed font-light mb-4 max-w-3xl"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.5 }}
            >
              Explore Melbourne's vibrant culture, world-class dining, and iconic attractions
            </motion.p>
            
            <motion.p
              className="font-poppins text-xl leading-relaxed font-normal mb-8 text-yellow-300"
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.8, delay: 0.7 }}
            >
              Save up to 50% on all attractions
            </motion.p>
            
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.9 }}
            >
              <Button
                withShine={true}
                className="font-poppins font-semibold h-[70px] min-w-[280px] px-12 py-6 rounded-full text-white text-xl hover:scale-105 transition-transform duration-300"
                style={{ backgroundColor: '#F95F62' }}
                onClick={onCheckoutClick}
              >
                BUY A CARD
              </Button>
            </motion.div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <main>
        <div className="container mx-auto px-4 py-16">
          {/* Features Grid */}
          <motion.section
            className="grid md:grid-cols-3 gap-8 py-16"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            {[
              {
                title: "50+ Attractions",
                description: "Access to Melbourne's top museums, galleries, and experiences",
                icon: "🏛️"
              },
              {
                title: "Instant QR Access",
                description: "Skip the lines with digital tickets on your phone",
                icon: "📱"
              },
              {
                title: "Save up to 50%",
                description: "Exclusive discounts and special offers for cardholders",
                icon: "💰"
              }
            ].map((feature, index) => (
              <motion.div
                key={feature.title}
                className="text-center p-8 bg-white rounded-2xl shadow-lg border border-gray-100"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
                whileHover={{ scale: 1.02, y: -5 }}
              >
                <div className="text-4xl mb-4">{feature.icon}</div>
                <h3 className="font-poppins text-xl font-semibold text-gray-900 mb-3">
                  {feature.title}
                </h3>
                <p className="text-gray-600">
                  {feature.description}
                </p>
              </motion.div>
            ))}
          </motion.section>
        </div>
      </main>

      {/* Melbourne Attractions Section */}
      <MelbourneAttractions />

      {/* Melbourne Card Comparison Section */}
      <MelbourneCardComparison onCheckoutClick={onCheckoutClick} />

      {/* Melbourne Tour Overview Section */}
      <MelbourneTourOverview />

      {/* Melbourne Blogs Section */}
      <MelbourneBlogs />

      {/* Enhanced Testimonials Section */}
      <EnhancedTestimonials />

      {/* Mobile App Promotion Section */}
      <MobileAppPromotion />

      {/* Melbourne FAQ Section */}
      <MelbourneFAQ />

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