import { motion, useScroll, useSpring, useTransform } from 'motion/react';
import { HeroSection } from './HeroSection';
import { WhyChooseCityCards } from './WhyChooseCityCards';
import { VarietyOfAdventures } from './VarietyOfAdventures';

import { MobileAppSection } from './MobileAppSection';
import { MagicItinerary } from './MagicItinerary';
import { ScrollAnimatedJourney } from './ScrollAnimatedJourney';
import { CustomPostcards } from './CustomPostcards';
import { BookAttractionSection } from './BookAttractionSection';
import { UpcomingCities } from './UpcomingCities';
import { TrustSection } from './TrustSection';
import { Footer } from './Footer';
import { SectionWrapper } from './SectionWrapper';
import { sectionsConfig } from '../utils/sections';
import {
  heroVariants,
  staggerContainer,
  backgroundVariants
} from '../utils/animations';

interface HomePageProps {
  isMobile: boolean;
  onSignInClick?: () => void;
  onPassesClick?: () => void;
  currentPage?: string;
}

export function HomePage({ isMobile, onSignInClick, onPassesClick, currentPage }: HomePageProps) {
  // Smooth scroll progress for global effects
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  // Parallax effect for scroll progress
  const progressOpacity = useTransform(scrollYProgress, [0, 0.1], [0, 1]);

  const sectionComponents = [
    WhyChooseCityCards,
    VarietyOfAdventures,
    ScrollAnimatedJourney,
    MagicItinerary,
    BookAttractionSection,
    CustomPostcards,
    UpcomingCities,
    TrustSection,
    MobileAppSection
  ];

  return (
    <>
      {/* Scroll Progress Indicator */}
      <motion.div
        className="fixed top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary to-secondary origin-left z-40"
        style={{ 
          scaleX,
          opacity: progressOpacity
        }}
      />

      {/* Main Content - No padding needed as capsule navbar floats */}
      <main>
        {/* 1. Hero Section - Immediate Load Animation */}
        <motion.section
          id="hero-section"
          initial="hidden"
          animate="visible"
          variants={staggerContainer}
          className="relative overflow-hidden"
        >
          <motion.div variants={backgroundVariants}>
            <motion.div variants={heroVariants}>
              <HeroSection 
                onSignInClick={onSignInClick}
                onPassesClick={onPassesClick}
                currentPage={currentPage}
              />
            </motion.div>
          </motion.div>
        </motion.section>

        {/* 2-10. All Other Sections */}
        {sectionsConfig.map((config, index) => {
          const Component = sectionComponents[index];
          return (
            <SectionWrapper
              key={config.id}
              id={config.id}
              containerType={config.containerType}
              backgroundGradient={config.backgroundGradient}
              className={config.className}
              variantType={config.variantType}
              isMobile={isMobile}
            >
              <Component />
            </SectionWrapper>
          );
        })}
      </main>

      {/* 11. Footer */}
      <Footer />
    </>
  );
}