import HeroSection from './components/home/HeroSection';
import WhyChooseUs from './components/home/WhyChooseUs';
import VisaSolutions from './components/home/VisaSolutions';
import VisaCountries from './components/home/VisaCountries';
import Testimonials from './components/home/Testimonials';
import VideoGallery from './components/home/VideoGallery';
import FAQSection from './components/home/FAQSection';
import Achievements from './components/home/Achievements';
import Partners from './components/home/Partners';
import BlogPreview from './components/home/BlogPreview';
import localHomeData from './home.json';
import { getCmsImageUrl } from '@/utils/image';
import { fetchHomeData } from '@/api';

// Force dynamic rendering - không cache
export const dynamic = 'force-dynamic';

export default async function Home() {
  // Fetch home data (blog aggregation is now handled by the backend)
  const apiHomeData = await fetchHomeData();
  
  // Use API home data if available, otherwise fallback to local JSON
  const data = JSON.parse(JSON.stringify(apiHomeData || localHomeData));

  // Process Hero Image URL
  if (data.hero?.backgroundImage) {
    data.hero.backgroundImage = getCmsImageUrl(data.hero.backgroundImage);
  }

  // Process blog images from CMS (thumbnail normalization)
  if (data.blogPreview?.items) {
    data.blogPreview.items = data.blogPreview.items.map((item: any) => ({
      ...item,
      thumbnail: getCmsImageUrl(item.thumbnail) || '/assets/img/home-1/news/01.jpg'
    }));
  }

  return (
    <>
      <HeroSection data={data.hero} />
      <WhyChooseUs data={data.whyChooseUs} />
      <VisaSolutions data={data.visaSolutions} />
      <VisaCountries data={data.visaCountries} />
      <Testimonials data={data.testimonials} />
      <VideoGallery data={data.videoGallery} />
      <FAQSection data={data.faq} />
      <Achievements data={data.achievements} />
      <Partners data={data.partners} />
      <BlogPreview data={data.blogPreview} />
    </>
  );
}