import { AboutUs } from "@/components/AboutUs";
import { BannerGrid4, BannerRow } 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,
  getStaticImageSlots,
  imagesForSlot,
  slotByKey,
} from "@/lib/static-images";
import { SITE } from "@/lib/site";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: `${SITE.nameFa} | ${SITE.tagline}`,
  description: SITE.aboutShort,
  alternates: { canonical: "/" },
};

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.twoBannerBelowSlider);
  const categorySlot = slotByKey(slots, STATIC_IMAGE_KEYS.categories);
  const fourSlot = slotByKey(slots, STATIC_IMAGE_KEYS.fourBanner);
  const twoRowSlot = slotByKey(slots, STATIC_IMAGE_KEYS.twoBannerRow);
  const brandsSlot = slotByKey(slots, STATIC_IMAGE_KEYS.brands);
  const aboutSlot = slotByKey(slots, STATIC_IMAGE_KEYS.aboutUsImage);

  return (
    <>
      <h1 className="sr-only">
        {SITE.nameFa}؛ {SITE.tagline}
      </h1>
      <HeroSlider
        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.slider)}
        aspectRatio={sliderSlot?.aspectRatio}
        sideImages={imagesForSlot(slots, STATIC_IMAGE_KEYS.twoBannerBelowSlider)}
        sideAspectRatio={sideSlot?.aspectRatio}
      />
      <SpecialSale />
      <Categories
        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.categories)}
        aspectRatio={categorySlot?.aspectRatio}
      />
      <BannerGrid4
        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.fourBanner)}
        aspectRatio={fourSlot?.aspectRatio}
      />
      <TopSelling />
      <BannerRow
        images={imagesForSlot(slots, STATIC_IMAGE_KEYS.twoBannerRow)}
        aspectRatio={twoRowSlot?.aspectRatio}
      />
      <Brands images={imagesForSlot(slots, STATIC_IMAGE_KEYS.brands)} aspectRatio={brandsSlot?.aspectRatio} />
      <AboutUs images={imagesForSlot(slots, STATIC_IMAGE_KEYS.aboutUsImage)} aspectRatio={aboutSlot?.aspectRatio} />
      <BlogCarousel />
    </>
  );
}