import React from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, Star, MapPin, Clock, CreditCard, Users, Shield, Smartphone, Check } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { MobileAppSection } from '../components/MobileAppSection';
import { EnhancedTestimonials } from '../components/EnhancedTestimonials';
import { FAQPage } from './FAQPage';
import { HowItWorks } from '../components/HowItWorks';
import { WhyChooseCityCards } from '../components/WhyChooseCityCards';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { Layout } from '../Layout';

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

interface CityCardsPageProps {
  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 CityCardsPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: CityCardsPageProps) {
  return (
    <div className="min-h-screen bg-background">
      {/* Navbar */}
      <Layout
        activeCity="Landingpage"
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        user={user}
      >

        {/* Sub Navbar */}
        {/* <SubNavbar
        activeTab="citycards"
        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">What Are</span>{' '}
                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  City Cards?
                </span>
              </h1>
              <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
                CityCards are your all-in-one pass to explore cities like never before. Get access to top attractions,
                skip the lines, and save money while discovering amazing experiences.
              </p>
            </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>

        {/* Get Your City Cards 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">Get your City Cards</h2>
              <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
                Choose from our range of passes designed for every type of traveler and every budget
              </p>
            </motion.div>

            <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
              {/* Flexi Pass */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.3 }}
                className="relative flex"
              >
                <Card className="relative transition-all duration-300 cursor-pointer flex flex-col w-full border-gray-200 shadow-md hover:shadow-lg hover:border-primary/30">
                  <CardHeader className="text-center pb-6 pt-8 flex-shrink-0">
                    <CardTitle className="font-poppins text-2xl font-bold mb-2 text-gray-900">
                      Flexi Pass
                    </CardTitle>
                    <CardDescription className="text-gray-600 mb-6 leading-relaxed font-poppins h-[48px] flex items-center justify-center">
                      Perfect for travelers who want to explore selected attractions at their own pace with essential features.
                    </CardDescription>

                    {/* Pricing */}
                    <div className="mb-6">
                      <div className="flex items-baseline justify-center gap-2 mb-2">
                        <span className="text-4xl font-bold text-gray-900">$59.99</span>
                        <span className="text-gray-500 font-poppins">/ per person</span>
                      </div>
                      <div className="text-sm text-gray-500 font-poppins h-[20px]">
                        <span className="line-through mr-2">$89.99</span>
                        <span className="text-green-600 font-medium">Save 33%</span>
                      </div>
                    </div>
                  </CardHeader>

                  <CardContent className="pt-0 flex flex-col flex-1">
                    {/* Features List - Fixed Height */}
                    <div className="space-y-3 mb-8 flex-1 min-h-[200px]">
                      {[
                        'Access to selected attractions',
                        'Limited number of attractions per pass',
                        'Flexible validity period',
                        'Priority entry where available',
                        'Mobile ticket delivery',
                        'Standard customer support'
                      ].map((feature, index) => (
                        <div key={index} className="flex items-start gap-3">
                          <Check className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
                          <span className="text-sm text-gray-700 font-poppins leading-relaxed">{feature}</span>
                        </div>
                      ))}
                    </div>

                    {/* CTA Button - Fixed at bottom */}
                    <div className="mt-auto flex-shrink-0">
                      <Button
                        className="w-full py-4 px-8 rounded-xl font-semibold text-lg transition-all duration-300 bg-gray-900 hover:bg-primary text-white hover:shadow-lg font-poppins"
                        onClick={onCheckoutClick}
                      >
                        PURCHASE NOW
                      </Button>

                      <p className="text-xs text-gray-500 text-center mt-4 font-poppins h-[32px] flex items-center justify-center">
                        ✓ Free cancellation up to 24 hours • Instant delivery
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>

              {/* Unlimited Pass */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.4 }}
                className="relative flex"
              >
                <Card className="relative transition-all duration-300 cursor-pointer flex flex-col w-full ring-2 ring-primary shadow-xl">

                  {/* Popular Badge */}
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 z-10">
                    <Badge className="bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-6 py-2 font-semibold shadow-lg">
                      ⭐ Most Popular
                    </Badge>
                  </div>

                  <CardHeader className="text-center pb-6 pt-8 flex-shrink-0">
                    <CardTitle className="font-poppins text-2xl font-bold mb-2 text-gray-900">
                      UNLIMITED CARD
                    </CardTitle>
                    <CardDescription className="text-gray-600 mb-6 leading-relaxed font-poppins h-[48px] flex items-center justify-center">
                      The ultimate experience for adventure seekers who want unlimited access to all attractions with premium features.
                    </CardDescription>

                    {/* Pricing */}
                    <div className="mb-6">
                      <div className="flex items-baseline justify-center gap-2 mb-2">
                        <span className="text-4xl font-bold text-gray-900">$89.99</span>
                        <span className="text-gray-500 font-poppins">/ per person</span>
                      </div>
                      <div className="text-sm text-gray-500 font-poppins h-[20px]">
                        <span className="line-through mr-2">$149.99</span>
                        <span className="text-green-600 font-medium">Save 40%</span>
                      </div>
                    </div>
                  </CardHeader>

                  <CardContent className="pt-0 flex flex-col flex-1">
                    {/* Features List - Fixed Height */}
                    <div className="space-y-3 mb-8 flex-1 min-h-[200px]">
                      {[
                        'Unlimited access to all attractions',
                        'Time-limited validity (7 days)',
                        'Skip-the-line access',
                        'Expert guide inclusion',
                        'Mobile app access',
                        'Premium customer support'
                      ].map((feature, index) => (
                        <div key={index} className="flex items-start gap-3">
                          <Check className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
                          <span className="text-sm text-gray-700 font-poppins leading-relaxed">{feature}</span>
                        </div>
                      ))}
                    </div>

                    {/* CTA Button - Fixed at bottom */}
                    <div className="mt-auto flex-shrink-0">
                      <Button
                        className="w-full py-4 px-8 rounded-xl font-semibold text-lg transition-all duration-300 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white shadow-lg hover:shadow-xl font-poppins"
                        onClick={onCheckoutClick}
                      >
                        PURCHASE NOW
                      </Button>

                      <p className="text-xs text-gray-500 text-center mt-4 font-poppins h-[32px] flex items-center justify-center">
                        ✓ Free cancellation up to 24 hours • Instant delivery
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            </div>
          </div>
        </section>

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

        {/* Why Choose CityCards Section */}
        <WhyChooseCityCards />

        {/* Benefits Section */}


        {/* Ready to Explore Melbourne Section */}


        {/* FAQ Section */}
        <section className="py-16 bg-gray-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">Frequently Asked Questions</h2>
              <p className="text-gray-600 font-poppins max-w-2xl mx-auto">
                Everything you need to know about CityCards
              </p>
            </motion.div>

            <div className="max-w-3xl mx-auto">
              <div className="space-y-4">
                {[
                  {
                    question: "How do CityCards work?",
                    answer: "CityCards are digital passes that give you access to multiple attractions in a city. Simply download our app, activate your card, and show it at participating attractions for instant entry."
                  },
                  {
                    question: "Can I use my CityCard for multiple days?",
                    answer: "Yes! Depending on the pass you choose, CityCards can be valid for 1, 2, 3, 5, or 7 consecutive days from your first use."
                  },
                  {
                    question: "What's included in an Unlimited Pass?",
                    answer: "The Unlimited Pass includes access to all participating attractions in your chosen city, plus additional perks like discounts at restaurants and shops."
                  },
                  {
                    question: "Do I need to book attractions in advance?",
                    answer: "Most attractions allow walk-in access with your CityCard, but some popular attractions may require advance booking through our app to guarantee entry."
                  },
                  {
                    question: "What if I don't use all my attractions?",
                    answer: "There's no pressure to visit every attraction. Your CityCard gives you the flexibility to explore at your own pace and choose what interests you most."
                  }
                ].map((faq, 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 }}
                  >
                    <Card className="hover:shadow-md transition-shadow duration-300">
                      <CardContent className="p-6">
                        <h3 className="font-merchant text-lg mb-3">{faq.question}</h3>
                        <p className="text-gray-600 font-poppins">{faq.answer}</p>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </div>
          </div>
        </section>

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

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

      </Layout>
    </div>
  );
}