import { motion } from 'motion/react';
import { Wifi, MapPin, Camera, Users, Smartphone, QrCode, Check, ArrowRight } from 'lucide-react';
import { useState } from 'react';
import Navbar from './Navbar';
// import { SubNavbar } from './SubNavbar';
import { Footer } from './Footer';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { Layout } from '../Layout';

interface EsimsPageProps {
  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?: { email: string; name: string } | null;
}

export function EsimsPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: EsimsPageProps) {

  const benefits = [
    {
      icon: MapPin,
      title: "Navigate the city with ease",
      description: "Access real-time maps and directions wherever you go"
    },
    {
      icon: Smartphone,
      title: "Book rides, access maps, and find attractions in real time",
      description: "Stay connected to all essential travel services"
    },
    {
      icon: Camera,
      title: "Share photos and memories instantly",
      description: "Upload and share your travel moments without delay"
    },
    {
      icon: Users,
      title: "Stay connected with friends, family, and travel plans",
      description: "Never miss important updates or messages while traveling"
    }
  ];

  const qrSteps = [
    { step: "1", label: "Receive QR Code", description: "Get your unique eSIM QR code with your CityCard" },
    { step: "2", label: "Scan Code", description: "Open your phone camera and scan the QR code" },
    { step: "3", label: "Connected", description: "You're online instantly - start exploring!" }
  ];

  return (
    <div className="min-h-screen bg-white">
      {/* Navbar */}
      <Layout
        activeCity="Landingpage"
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        user={user}
      >

        {/* SubNavbar for Products */}
        {/* <SubNavbar
        activeTab="esims"
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
      /> */}

        {/* Hero Section - eSIM Focus */}
        <section className="relative pt-52 pb-20 overflow-hidden" style={{ backgroundColor: '#FFF5F5' }}>
          <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-poppins text-5xl md:text-6xl lg:text-7xl leading-tight mb-6">
                <span className="font-normal" style={{ color: '#1F2937' }}>Stay Connected Instantly</span>
                <br />
                <span className="font-normal" style={{ color: '#1F2937' }}>with Your</span>{' '}
                <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  Complimentary eSIM
                </span>
              </h1>
              <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal text-gray-600 mb-8 max-w-3xl mx-auto">
                Because every unforgettable trip starts with seamless connectivity.
              </p>
            </motion.div>
          </div>
        </section>

        {/* Benefits Section */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              className="text-center mb-16"
            >
              <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
                <span className="font-light" style={{ color: '#1F2937' }}>With your </span>
                <span className="font-bold" style={{ color: '#F95F62' }}>eSIM</span>
                <span className="font-light" style={{ color: '#1F2937' }}>, you can:</span>
              </h2>
            </motion.div>

            <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
              {benefits.map((benefit, index) => {
                const IconComponent = benefit.icon;
                return (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6, delay: index * 0.1 }}
                    className="flex gap-4 p-6 rounded-2xl transition-all duration-300 hover:shadow-lg"
                    style={{ backgroundColor: '#FFF5F5' }}
                  >
                    <div className="flex-shrink-0">
                      <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ backgroundColor: '#F95F62' }}>
                        <IconComponent className="w-6 h-6 text-white" />
                      </div>
                    </div>
                    <div>
                      <h3 className="font-poppins text-lg font-semibold mb-2" style={{ color: '#1F2937' }}>
                        {benefit.title}
                      </h3>
                      <p className="font-poppins text-base" style={{ color: '#4B5563' }}>
                        {benefit.description}
                      </p>
                    </div>
                  </motion.div>
                );
              })}
            </div>
          </div>
        </section>

        {/* QR Code Process Section */}
        <section className="py-20" style={{ backgroundColor: '#FFF5F5' }}>
          <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              className="text-center mb-16"
            >
              <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
                <span className="font-light" style={{ color: '#1F2937' }}>Simple </span>
                <span className="font-bold" style={{ color: '#F95F62' }}>3-Step Process</span>
              </h2>
              <p className="font-poppins text-xl" style={{ color: '#4B5563' }}>
                Get connected in seconds
              </p>
            </motion.div>

            <div className="max-w-5xl mx-auto">
              <div className="grid md:grid-cols-3 gap-8">
                {qrSteps.map((step, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6, delay: index * 0.2 }}
                    className="relative"
                  >
                    {/* Connecting Line */}
                    {index < qrSteps.length - 1 && (
                      <div className="hidden md:block absolute top-16 left-1/2 w-full h-0.5 -z-10" style={{ backgroundColor: '#F95F62', opacity: 0.3 }} />
                    )}

                    <div className="bg-white rounded-2xl p-8 text-center shadow-lg hover:shadow-xl transition-shadow duration-300">
                      {/* Step Number */}
                      <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6" style={{ backgroundColor: '#F95F62' }}>
                        <span className="font-poppins font-bold text-2xl text-white">{step.step}</span>
                      </div>

                      {/* Icon */}
                      <div className="mb-4">
                        {index === 0 && <QrCode className="w-12 h-12 mx-auto" style={{ color: '#F95F62' }} />}
                        {index === 1 && <Smartphone className="w-12 h-12 mx-auto" style={{ color: '#F95F62' }} />}
                        {index === 2 && <Wifi className="w-12 h-12 mx-auto" style={{ color: '#F95F62' }} />}
                      </div>

                      {/* Label */}
                      <h3 className="font-poppins text-xl font-bold mb-3" style={{ color: '#1F2937' }}>
                        {step.label}
                      </h3>

                      {/* Description */}
                      <p className="font-poppins text-base" style={{ color: '#4B5563' }}>
                        {step.description}
                      </p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* CityCard Logo Trust Anchor */}
            <motion.div
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="text-center mt-16"
            >
              <div className="inline-flex items-center gap-3 px-6 py-3 bg-white rounded-full shadow-md">
                <Check className="w-5 h-5" style={{ color: '#F95F62' }} />
                <span className="font-poppins font-semibold text-lg" style={{ color: '#1F2937' }}>
                  Powered by <span style={{ color: '#F95F62' }}>CityCard</span>
                </span>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Closing Statement Section */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              className="max-w-4xl mx-auto text-center"
            >
              <p className="font-poppins text-2xl md:text-3xl leading-relaxed mb-8" style={{ color: '#1F2937' }}>
                It's one more way <span className="font-bold" style={{ color: '#F95F62' }}>CityCard</span> makes your journey <span className="font-semibold" style={{ color: '#F95F62' }}>smarter</span> and more <span className="font-semibold" style={{ color: '#F95F62' }}>effortless</span>.
              </p>

              <button
                onClick={onCheckoutClick}
                className="group px-10 py-5 rounded-full flex items-center gap-3 mx-auto transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl font-poppins font-semibold text-lg text-white"
                style={{ backgroundColor: '#F95F62' }}
              >
                Start Your Journey Today
                <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform duration-300" />
              </button>
            </motion.div>
          </div>
        </section>

      </Layout>
    </div>
  );
}
