"use client"

import Header from "@/components/features/header/header"
import HeroSlider from "@/components/features/hero/hero-slider"
import CourseGrid from "@/components/features/courses/course-grid"
import VideoSection from "@/components/features/video/video-section"
import PricingSection from "@/components/features/pricing/pricing-section"
import Footer from "@/components/features/footer/footer"
import { useEffect } from "react"
import { getCourses } from "@/services/courses/query"
import { getWebsiteContentsByPageAndSection } from "@/services/website_contents/query"
import { useTranslation } from "react-i18next"

export default function HomePage() {
  const { t, i18n } = useTranslation()

  // Fetch data on component mount
  useEffect(() => {
    // These would typically be used in a data fetching scenario
    // For now, we're just calling them to simulate data fetching
    const courses = getCourses()
    const heroContents = getWebsiteContentsByPageAndSection("home", "hero")
  }, [])

  return (
    <main>
      <Header />
      <HeroSlider />
      <CourseGrid />
      <VideoSection />
      <PricingSection />
      <Footer />
    </main>
  )
}