import { AboutUs } from "@/components/AboutUs";
import { BannerGrid4, BannerRow3 } from "@/components/Banners";
import { BlogCarousel } from "@/components/BlogCarousel";
import { Brands } from "@/components/Brands";
import { Categories } from "@/components/Categories";
import { HeroSlider } from "@/components/HeroSlider";
import { SpecialSale } from "@/components/SpecialSale";
import { TopSelling } from "@/components/TopSelling";
import {
  STATIC_IMAGE_KEYS,
  firstImageForSlot,
  getStaticImageSlots,
  imagesForSlot,
  slotByKey,
} from "@/lib/static-images";

export default async function Home() {
  const slots = await getStaticImageSlots("home");
  const sliderSlot = slotByKey(slots, STATIC_IMAGE_KEYS.slider);
  const sideSlot = slotByKey(slots, STATIC_IMAGE_KEYS.bannersBelowSlider);
  const fourSlot = slotByKey(slots, STATIC_IMAGE_KEYS.fourBannerSection);
  const threeSlot = slotByKey(slots, STATIC_IMAGE_KEYS.threeBannerRow);
  const aboutSlot = slotByKey(slots, STATIC_IMAGE_KEYS.aboutUsImage);

  return (
    <>
      <HeroSlider
        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.slider)}
        aspectRatio={sliderSlot?.aspectRatio}
        sideImages={imagesForSlot(slots, STATIC_IMAGE_KEYS.bannersBelowSlider)}
        sideAspectRatio={sideSlot?.aspectRatio}
      />
      <SpecialSale />
      <Categories images={imagesForSlot(slots, STATIC_IMAGE_KEYS.categories)} />
      <BannerGrid4
        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.fourBannerSection)}
        aspectRatio={fourSlot?.aspectRatio}
      />
      <TopSelling />
      <BannerRow3
        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.threeBannerRow)}
        aspectRatio={threeSlot?.aspectRatio}
      />
      <Brands />
      <AboutUs
        image={firstImageForSlot(slots, STATIC_IMAGE_KEYS.aboutUsImage)}
        aspectRatio={aboutSlot?.aspectRatio}
      />
      <BlogCarousel />
    </>
  );
}