import { useRef } from 'react'
import { AnimatedSection } from '../../components/AnimatedSection'
import { HomeAurora } from './HomeAurora'
import { StackSectionLight } from './StackSection'
import { WorldMap } from './HomeGlobe'
import { HomeBenefits } from './HomeBenefits'
import { CallToAction } from './CallToAction'
import { HomeSlider } from './HomeSlider'
import { HomeHosting } from './HomeHosting'


export default function HomePage() {
  const sliderRef = useRef<HTMLDivElement>(null)

  const handleScrollToSlider = () => {
    sliderRef.current?.scrollIntoView({ behavior: 'smooth' })
  }
  return (
    <div>
      <AnimatedSection>
        <HomeAurora onGetStartedClick={handleScrollToSlider} />
      </AnimatedSection>

      <AnimatedSection id="next-section">
        <WorldMap />
      </AnimatedSection>

      <AnimatedSection>
        <HomeHosting />
      </AnimatedSection>

      <AnimatedSection>
        <StackSectionLight />
      </AnimatedSection>

      <AnimatedSection ref={sliderRef}>
        <HomeSlider />
      </AnimatedSection>

      <AnimatedSection>
       <HomeBenefits />
      </AnimatedSection>

      <AnimatedSection>
        <CallToAction />
      </AnimatedSection>
    </div>
  )
}