
import { useRef } from 'react'
import { AnimatedSection } from '../../components/AnimatedSection'
import { CallToAction } from './CallToAction'
import { HomeTab } from './HomeTab'
import { HomeWhy} from './HomeWhy'
import { HomeMap } from './HomeMap' 
import { HomeAudience } from './HomeAudience'
import { HomeBlink } from './HomeBlink'



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

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

      <AnimatedSection>
        <HomeWhy />
      </AnimatedSection>

      <AnimatedSection>
        <HomeTab />
      </AnimatedSection>

      <AnimatedSection>
        <HomeMap />
      </AnimatedSection>

      <AnimatedSection>
        <HomeAudience />
      </AnimatedSection>

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