import dynamic from 'next/dynamic';
import StorageSolutions from '@/app/[locale]/components/StorageSolutions/StorageSolutions.component';
import AboutContent from './components/About/AboutContent/AboutContent.component';
import { useLocale } from 'next-intl';
import testimonials from '@/data/testimonials';
import { Metadata } from 'next';
import { getTranslations } from 'next-intl/server';

const Achievements = dynamic(
  () => import('@/app/[locale]/components/Achievements/Achievements')
);
const DoorToDoorStorage = dynamic(
  () =>
    import(
      '@/app/[locale]/components/DoorToDoorStorage/DoorToDoorStorage.component'
    )
);
const SelfStorage = dynamic(
  () => import('@/app/[locale]/components/SelfStorage/SelfStorage.component')
);
const About = dynamic(
  () => import('@/app/[locale]/components/About/About.component')
);

export async function generateMetadata({ params }): Promise<Metadata> {
  const t = await getTranslations('home.meta_data');
  return {
    title: t('title'),
    keywords:
      'hong kong storage, storage hk, spacebox, self storage, box storage, mini storage',
    description: t('description'),
  };
}

const HomePage = () => {
  const locale = useLocale();

  return (
    <div className="flex flex-col w-full overflow-hidden">
      <StorageSolutions />
      <Achievements
        testimonials={
          locale === 'en'
            ? testimonials.home_page.english
            : testimonials.home_page.chinese
        }
      />
      <DoorToDoorStorage />
      <SelfStorage />
      <About>
        <AboutContent />
      </About>
    </div>
  );
};

export default HomePage;