CityCards-Website/src/pages/landingPage.tsx

import { useState, useEffect } from 'react';
import { motion } from 'motion/react';
import { Link, useLocation } from 'react-router-dom';
import { ChevronDown, MapPin, Star, Shield, Clock, Smartphone } from 'lucide-react';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';
// import { CitySubmenu } from '../components/CitySubmenu';
import heroBannerImage from '../assets/landing-hero.png';
import { Button } from '../components/ui/button';
import { LandingWhyChooseCityCards } from '../components/LandingWhyChooseCityCards';
import { LandingVarietyOfAdventures } from '../components/LandingVarietyOfAdventures';
import { LandingMagicItinerary } from '../components/LandingMagicItinerary';
import { LandingBookAttractionSection } from '../components/LandingBookAttractionSection';
import { LandingCustomPostcards } from '../components/LandingCustomPostcards';
import { LandingUpcomingCities } from '../components/LandingUpcomingCities';
import { LandingTrustSection } from '../components/LandingTrustSection';
import { LandingMobileAppSection } from '../components/LandingMobileAppSection';
import { LandingNewsletterSection } from '../components/LandingNewsletterSection';
import { CustomPostcards } from '../components/CustomPostcards';
import { Layout } from '../Layout';
import { getAutoNavigationSource } from '../utils/getAutoNavigationSource';
import { useGetProductsQuery } from '../Redux/services/fakeapi.service';



const melbourneImage =
  "https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1920&q=80"; // Melbourne

const sydneyImage =
  "https://images.unsplash.com/photo-1506976785307-8732e854ad03?auto=format&fit=crop&w=1920&q=80"; // Sydney Opera House

const brisbaneImage =
  "https://images.unsplash.com/photo-1604644363101-03f3d7cbecb6?auto=format&fit=crop&w=1920&q=80"; // Brisbane skyline

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

interface LandingPageProps {
  onSignInClick: () => void;
  onSignOutClick?: () => void;
  user?: User | null;
}
export function LandingPage({ onSignInClick,
  onSignOutClick,
  user }: LandingPageProps) {
  const [currentCityIndex, setCurrentCityIndex] = useState(0);
  const [isCityDialogOpen, setIsCityDialogOpen] = useState(Boolean)
  const location = useLocation();
  const activeCity = getAutoNavigationSource(location);

  const { data } = useGetProductsQuery()
  console.log(data)

  const cities = [
    {
      id: 'melbourne',
      name: 'Melbourne',
      description: 'Cultural capital with world-class attractions',
      image: melbourneImage,
      attractions: 45,
      savings: '30%',
      path: '/melbourne'
    },
    {
      id: 'sydney',
      name: 'Sydney',
      description: 'Iconic landmarks and harbor views',
      image: sydneyImage,
      attractions: 38,
      savings: '25%',
      path: '/sydney'
    },
    {
      id: 'brisbane',
      name: 'Brisbane',
      description: 'Sunshine, riverside dining, and adventure',
      image: brisbaneImage,
      attractions: 32,
      savings: '28%',
      path: '/brisbane'
    }
  ];

  // Auto-rotate cities
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentCityIndex((prev) => (prev + 1) % cities.length);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  const scrollToCities = () => {
    document.getElementById('cities-section')?.scrollIntoView({
      behavior: 'smooth'
    });
  };

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

        {/* City Submenu */}
        {/* <CitySubmenu
                onClose={() => { }}
            /> */}
        {/* Hero Section */}
        <div
          className="relative z-10 min-h-[90vh] flex items-end justify-start pt-24 pb-16 bg-cover bg-[center_35%] bg-no-repeat"
          style={{ backgroundImage: `url(${heroBannerImage})` }}
        >
          <div className="container mx-auto px-4">
            <motion.div
              className="max-w-4xl lg:max-w-3xl xl:max-w-4xl"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{
                duration: 0.8,
                delay: 0.5,
                ease: [0.25, 0.1, 0.25, 1],
              }}
            >
              {/* Main Headline */}
              <div className="mb-6 text-left">
                <h1 className="font-poppins leading-tight text-white text-5xl md:text-6xl lg:text-7xl drop-shadow-lg">
                  <span className="block font-light">CityCards.</span>
                  <span className="block font-normal">See More, Spend Less.</span>
                </h1>
              </div>

              {/* Subheading */}
              <div className="mb-8 text-left">
                <p className="font-poppins text-xl leading-relaxed font-normal text-white/90 drop-shadow-md">
                  Instant QR access to 40+ attractions,
                  <br className="hidden sm:block" />
                  exclusive perks, and <span className="font-bold text-white border-b-2 border-primary/50 pb-0.5">save up to 50-60%</span>
                </p>
              </div>

              {/* CTA Button */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{
                  duration: 0.8,
                  delay: 0.7,
                  ease: [0.25, 0.1, 0.25, 1],
                }}
              >
                <Button
                  onClick={() => setIsCityDialogOpen(true)}
                  withShine={true}
                  size="xl"
                  className="bg-primary hover:bg-primary/90 py-4 rounded-full font-poppins font-semibold px-8 text-white shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  Explore Cities
                </Button>
              </motion.div>
            </motion.div>
          </div>
        </div>

        {/* Features Section */}
        <LandingWhyChooseCityCards />

        {/* LandingVarietyOfAdventures Section */}
        <LandingVarietyOfAdventures />

        {/* MagicItinerary Section */}
        <LandingMagicItinerary />

        {/* BookAttractionSection Section */}
        <LandingBookAttractionSection />

        {/* CustomPostcards Section */}
        <CustomPostcards />

        {/* UpcomingCities Section */}
        <LandingUpcomingCities />

        {/* TrustSection Section */}
        <LandingTrustSection />

        {/* MobileAppSection Section */}
        <LandingMobileAppSection />

        {/* Newsletter Section */}
        <LandingNewsletterSection />

      </Layout>
    </div>
  );
}