import { motion } from 'motion/react';
import { BadgePercent, Clock, Crown, Check, ArrowRight } from 'lucide-react';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import cityCardsLogo from '../assets/cityLogo.png';
import marriottHotelImage from '../assets/marriott-hotel.png';
import { Layout } from '../Layout';

interface HotelDiscountsPageProps {
  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 HotelDiscountsPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: HotelDiscountsPageProps) {

  const benefits = [
    {
      icon: BadgePercent,
      title: "Access 20% off best available rates",
      description: "Save on your stay at premium Marriott properties"
    },
    {
      icon: Clock,
      title: "Enjoy priority check-in and late checkout",
      description: "Subject to availability for your convenience"
    },
    {
      icon: Crown,
      title: "Receive exclusive seasonal offers",
      description: "Designed specially for CityCard travellers"
    }
  ];

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

        {/* Sub Navbar */}
        {/* <SubNavbar
        activePage="hotel-discounts"
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        onEsimsClick={onEsimsClick}
        onHotelDiscountsClick={onHotelDiscountsClick}
      /> */}

        {/* Hero Section */}
        <section className="relative pt-64 pb-20 overflow-hidden">
          {/* Background Image with Overlay */}
          <div className="absolute inset-0 z-0">
            <ImageWithFallback
              src={marriottHotelImage}
              alt="Marriott Hotel"
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/40 to-background" />
          </div>

          <div className="container mx-auto px-4 relative z-10">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="text-center"
            >
              {/* CityCard Logo */}
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="flex justify-center mb-8"
              >
              </motion.div>

              {/* Heading */}
              <h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-6 font-semibold text-white max-w-4xl mx-auto">
                Enjoy 20% Off Iconic Marriott Hotels — Exclusively with CityCard
              </h1>

              {/* Tagline */}
              <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal text-white/90 max-w-2xl mx-auto">
                Make every stay as unforgettable as the city you're exploring.
              </p>
            </motion.div>
          </div>
        </section>

        {/* Section 1: Partnership Introduction - White Background */}
        <section className="py-20 md:py-28 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, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="max-w-4xl mx-auto text-center"
            >
              <p className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-relaxed font-normal mb-8" style={{ color: '#1F2937' }}>
                Your CityCard unlocks more than just attractions — it also opens doors to exceptional stays.
              </p>
              <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
                Thanks to our exclusive partnership with <span className="font-semibold" style={{ color: '#F95F62' }}>Marriott Hotels</span>, CityCard holders enjoy <span className="font-semibold" style={{ color: '#F95F62' }}>20% off best available rates</span> across a curated selection of properties in the city.
              </p>
            </motion.div>
          </div>
        </section>

        {/* Section 2: Hotel Variety - Pink Background */}
        <section className="py-20 md:py-28" 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, margin: "-100px" }}
              transition={{ duration: 0.8 }}
              className="max-w-4xl mx-auto text-center"
            >
              <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-6">
                <span className="font-light" style={{ color: '#1F2937' }}>Choose from a </span>
                <span className="font-bold" style={{ color: '#F95F62' }}>Wide Variety</span>
              </h2>
              <p className="font-poppins text-xl md:text-2xl leading-relaxed font-normal" style={{ color: '#4B5563' }}>
                Choose from a wide variety of Marriott hotels — from elegant urban hideaways and premium city-centre locations to luxurious five-star experiences — all designed to make your trip <span className="font-semibold" style={{ color: '#F95F62' }}>effortless</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>comfortable</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>memorable</span>.
              </p>
            </motion.div>
          </div>
        </section>

        {/* Section 3: Benefits - White Background with Pink Cards */}
        <section className="py-20 md:py-28 bg-white">
          <div className="container mx-auto px-6 sm:px-8 md:px-12 lg:px-16 xl:px-20">
            {/* Heading */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              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' }}>Simply use your CityCard</span>
                <br />
                <span className="font-bold" style={{ color: '#F95F62' }}>booking link to:</span>
              </h2>
            </motion.div>

            {/* Benefits Grid */}
            <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto mb-16">
              {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 flex-col items-center text-center p-6 rounded-2xl transition-all duration-300 hover:shadow-lg"
                    style={{ backgroundColor: '#FFF5F5' }}
                  >
                    <div className="w-16 h-16 rounded-full flex items-center justify-center mb-6" style={{ backgroundColor: '#F95F62' }}>
                      <IconComponent className="w-8 h-8 text-white" />
                    </div>
                    <h3 className="font-poppins text-lg font-semibold mb-3" style={{ color: '#1F2937' }}>
                      {benefit.title}
                    </h3>
                    <p className="font-poppins text-base font-normal" style={{ color: '#4B5563' }}>
                      {benefit.description}
                    </p>
                  </motion.div>
                );
              })}
            </div>

            {/* Closing Statement */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="text-center"
            >
              <div className="max-w-4xl mx-auto mb-8">
                <p className="font-poppins text-2xl md:text-3xl leading-relaxed font-normal" style={{ color: '#1F2937' }}>
                  It's just one more way <span className="font-bold" style={{ color: '#F95F62' }}>CityCard</span> makes exploring <span className="font-semibold" style={{ color: '#F95F62' }}>smarter</span>, <span className="font-semibold" style={{ color: '#F95F62' }}>simpler</span>, and <span className="font-semibold" style={{ color: '#F95F62' }}>more rewarding</span>.
                </p>
              </div>

              <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' }}
              >
                Get Your CityCard Today
                <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform duration-300" />
              </button>
            </motion.div>
          </div>
        </section>

        {/* Trust Anchor Section with Logo */}
        <section className="py-16 bg-white border-t border-gray-100">
          <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: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="flex flex-col items-center text-center"
            >
              <img
                src={cityCardsLogo}
                alt="CityCard"
                className="h-12 md:h-14 w-auto object-contain mb-6"
              />
              <p className="font-poppins text-lg md:text-xl font-normal max-w-2xl" style={{ color: '#4B5563' }}>
                Your gateway to unforgettable city experiences and exceptional hotel stays
              </p>
            </motion.div>
          </div>
        </section>
      </Layout>
    </div>
  );
}
