import dynamic from 'next/dynamic';
import { HeroSection } from './components/HeroSection';
import { SectionSkeleton } from './components/SectionSkeleton';
import { ProductShowcaseSection } from './components/ProductShowcaseSection';

const ProductSection = dynamic(() => import('./components/ProductSection'), {
  loading: () => <SectionSkeleton />,
});

import { ActivityArticleWrapper } from './components/ActivityArticleWrapper';
import { RecipeMascotWrapper } from './components/RecipeMascotWrapper';
const WhyUsSection = dynamic(() => import('./components/WhyUsSection'), {
  loading: () => <SectionSkeleton />,
});

const EventPromoSection = dynamic(
  () =>
    import('./components/EventPromoSection').then((m) => m.EventPromoSection),
  { loading: () => <SectionSkeleton /> }
);

const ActivityCommunitySection = dynamic(
  () =>
    import('./components/ActivityCommunitySection').then(
      (m) => m.ActivityCommunitySection
    ),
  { loading: () => <SectionSkeleton /> }
);

const ArticleSection = dynamic(
  () => import('./components/ArticleSection').then((m) => m.ArticleSection),
  { loading: () => <SectionSkeleton /> }
);

const RecipeSection = dynamic(() => import('./components/RecipeSection'), {
  loading: () => <SectionSkeleton />,
});

const MascotSection = dynamic(
  () => import('./components/MascotSection').then((m) => m.MascotSection),
  { loading: () => <SectionSkeleton /> }
);

const CTASection = dynamic(() => import('./components/CTASection'), {
  loading: () => <SectionSkeleton />,
});

export default function HomePage() {
  return (
    <div className="bg-[#FFFDF5] min-h-screen text-[#1C1D1F] overflow-x-hidden selection:bg-[#FFD738] selection:text-[#1C1D1F]">
      <HeroSection />
      <ProductSection />
      <WhyUsSection />
      <EventPromoSection />

      <ActivityArticleWrapper>
        <ActivityCommunitySection />
        <ArticleSection />
      </ActivityArticleWrapper>

      <ProductShowcaseSection />
      <RecipeMascotWrapper>
        <RecipeSection />
        <MascotSection />
      </RecipeMascotWrapper>
      <CTASection />
    </div>
  );
}