import { AboutPreview } from "@/components/home/AboutPreview";
import { BannerRow } from "@/components/home/BannerRow";
import { BlogCarousel } from "@/components/home/BlogCarousel";
import { Branches } from "@/components/home/Branches";
import { CategoryShowcase } from "@/components/home/CategoryShowcase";
import { Hero } from "@/components/home/Hero";
import { Services } from "@/components/home/Services";
import { Stats } from "@/components/home/Stats";
import { WideBanner } from "@/components/home/WideBanner";
import {
  about,
  bannersBelowSlider,
  branches,
  services,
  showcaseCategories,
  slides,
  threeBannerRow,
  twoBannerRow,
} from "@/lib/data";
import { fetchStaticImageSlots, overlaySlotImages, pickSlot } from "@/lib/static-images";

export const revalidate = 60;

export default async function HomePage() {
  const slots = await fetchStaticImageSlots("home");

  const slider = overlaySlotImages(
    pickSlot(slots, "slider"),
    slides.map((slide) => ({
      id: slide.id,
      image: slide.image,
      href: slide.href,
      title: slide.title,
      kicker: slide.kicker,
    })),
    "slider",
  );

  const icons = overlaySlotImages(
    pickSlot(slots, "three-icon-image"),
    services.map((service) => ({
      id: service.id,
      image: "",
      href: service.href,
      title: service.title,
      text: service.text,
    })),
    "three-icon-image",
  );

  const categories = overlaySlotImages(
    pickSlot(slots, "categories"),
    showcaseCategories.map((item) => ({
      id: item.id,
      image: item.image,
      href: item.href,
      title: item.title,
      text: item.text,
    })),
    "categories",
  );

  const aboutImage = overlaySlotImages(
    pickSlot(slots, "about-us-image"),
    [{ id: "about", image: about.image }],
    "about-us-image",
  );

  const fiveBanners = overlaySlotImages(
    pickSlot(slots, "five-banner-section"),
    [...twoBannerRow, ...threeBannerRow].map((banner) => ({
      id: banner.id,
      image: banner.image,
      href: banner.href,
      title: banner.title,
      kicker: banner.kicker,
      text: banner.text,
    })),
    "five-banner-section",
  );

  const twoBanners = overlaySlotImages(
    pickSlot(slots, "two-banner-row"),
    bannersBelowSlider.map((banner) => ({
      id: banner.id,
      image: banner.image,
      href: banner.href,
      title: banner.title,
      kicker: banner.kicker,
      text: banner.text,
    })),
    "two-banner-row",
  );

  const fullRow = overlaySlotImages(
    pickSlot(slots, "full-row-image"),
    [
      {
        id: "wide",
        image: "/images/banners/wide.jpg",
        href: "/contact",
        title: "اگر به دنبال قطعه ی خاصی هستید، با ما تماس بگیرید.",
        kicker: "Contact us",
      },
    ],
    "full-row-image",
  );

  const branchImages = overlaySlotImages(
    pickSlot(slots, "two-branch-image"),
    branches.map((branch) => ({
      id: branch.id,
      image: branch.image,
      href: "/contact",
      title: branch.title,
      text: branch.address,
    })),
    "two-branch-image",
  );

  return (
    <>
      <Hero slides={slider.items} aspectRatio={slider.aspectRatio} />
      <Services items={icons.items} />
      <CategoryShowcase items={categories.items} aspectRatio={categories.aspectRatio} />
      <AboutPreview image={aboutImage.items[0]} aspectRatio={aboutImage.aspectRatio} />
      <BannerRow banners={fiveBanners.items.slice(0, 2)} columns={2} aspectRatio={fiveBanners.aspectRatio} />
      <BannerRow banners={fiveBanners.items.slice(2, 5)} columns={3} aspectRatio={fiveBanners.aspectRatio} />
      <BlogCarousel />
      <BannerRow banners={twoBanners.items} columns={2} aspectRatio={twoBanners.aspectRatio} />
      <Stats />
      <WideBanner image={fullRow.items[0]} aspectRatio={fullRow.aspectRatio} />
      <Branches images={branchImages.items} aspectRatio={branchImages.aspectRatio} />
    </>
  );
}