import { useRef } from 'react'
import { AnimatedSection } from '../../components/AnimatedSection'
import { CallToAction } from './CallToAction'
import { HomeTab } from './HomeTab'
import { HomeMap } from './HomeMap' 
import { HomeAudience } from './HomeAudience'
import { HomeBlinkDark } from './HomeBlinkDark'
import { HomeArchitecture } from './HomeArchitecture';




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

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

      <AnimatedSection>
        <HomeBlinkDark onGetStartedClick={handleScrollToSlider} />
      </AnimatedSection>

      <AnimatedSection>
        <HomeTab />
      </AnimatedSection>

      <AnimatedSection>
        <HomeMap />
      </AnimatedSection>

      <AnimatedSection>
        <HomeAudience />
      </AnimatedSection>

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