Smooth Scroll Parallax Effect

import { SmoothScrollContainer, Navigation, ParallaxHero, ParallaxImage, ScheduleSection } from "@/components/ui/smooth-scroll-parallax-effect";
import { SiSpacex } from "react-icons/si";

const SmoothScrollHeroDemo = () => {
  const scheduleItems = [
    { title: "NG-21", date: "Dec 9th", location: "Florida" },
    { title: "Starlink", date: "Dec 20th", location: "Texas" },
    { title: "Starlink", date: "Jan 13th", location: "Florida" },
    { title: "Turksat 6A", date: "Feb 22nd", location: "Florida" },
    { title: "NROL-186", date: "Mar 1st", location: "California" },
    { title: "GOES-U", date: "Mar 8th", location: "California" },
    { title: "ASTRA 1P", date: "Apr 8th", location: "Texas" },
  ];

  const parallaxImages = [
    {
      src: "https://images.unsplash.com/photo-1484600899469-230e8d1d59c0?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      alt: "Space launch example",
      start: -200,
      end: 200,
      className: "w-1/3"
    },
    {
      src: "https://images.unsplash.com/photo-1446776709462-d6b525c57bd3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      alt: "Space launch example",
      start: 200,
      end: -250,
      className: "mx-auto w-2/3"
    },
    {
      src: "https://images.unsplash.com/photo-1541185933-ef5d8ed016c2?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      alt: "Orbiting satellite",
      start: -200,
      end: 200,
      className: "ml-auto w-1/3"
    },
    {
      src: "https://images.unsplash.com/photo-1494022299300-899b96e49893?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      alt: "Orbiting satellite",
      start: 0,
      end: -500,
      className: "ml-24 w-5/12"
    }
  ];

  const handleCtaClick = () => {
    document.getElementById("launch-schedule")?.scrollIntoView({
      behavior: "smooth",
    });
  };

  return (
    <SmoothScrollContainer className="bg-background">
      <Navigation
        logo={<SiSpacex className="text-3xl" />}
        ctaText="LAUNCH SCHEDULE"
        onCtaClick={handleCtaClick}
      />
      
      <ParallaxHero
        backgroundImage="https://images.unsplash.com/photo-1460186136353-977e9d6085a1?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      >
        <div className="mx-auto max-w-5xl px-4 pt-[200px]">
          {parallaxImages.map((img, index) => (
            <ParallaxImage key={index} {...img} />
          ))}
        </div>
      </ParallaxHero>

      <ScheduleSection
        title="Launch Schedule"
        items={scheduleItems}
        id="launch-schedule"
      />
    </SmoothScrollContainer>
  );
};

export default SmoothScrollHeroDemo