import SiteHeader from "@/components/home/SiteHeader";
import HeroSlider from "@/components/home/HeroSlider";
import CategoryStrip from "@/components/home/CategoryStrip";
import ProductRow from "@/components/home/ProductRow";
import LeatherBanner from "@/components/home/LeatherBanner";
import PartnerCta from "@/components/home/PartnerCta";
import FeaturesBar from "@/components/home/FeaturesBar";
import BlackCollection from "@/components/home/BlackCollection";
import AboutSection from "@/components/home/AboutSection";
import SiteFooter from "@/components/home/SiteFooter";
import { mapHomeSlots } from "@/lib/map-home-slots";
import {
  fetchPublicWebsiteSlots,
  itemsForSlot,
} from "@/lib/website-slots";
import { getStorefrontCatalog } from "@/lib/products-api";
import {
  fetchPublicCategories,
  mapCategoriesToMegaTabs,
  resolveHomeCategoryStrip,
} from "@/lib/categories-api";

export default async function HomePage() {
  const [slotItems, catalog, apiCategories] = await Promise.all([
    fetchPublicWebsiteSlots(),
    getStorefrontCatalog(),
    fetchPublicCategories(),
  ]);
  const home = mapHomeSlots(slotItems);

  const saleProducts = catalog.promo1;
  const discountProducts = catalog.promo2;
  const autumnProducts = catalog.promo3;

  const megaTabs = mapCategoriesToMegaTabs(
    apiCategories,
    home.megaTabs.map((t) => ({
      image: t.image,
      nameFa: t.nameFa,
      href: t.href,
    })),
  );

  const categories = resolveHomeCategoryStrip(
    apiCategories,
    home.categories,
    itemsForSlot(slotItems, "category-strip").length > 0,
  );

  return (
    <main className="home-page min-h-dvh bg-white text-ink">
      <div className="relative">
        <SiteHeader megaTabs={megaTabs.length ? megaTabs : home.megaTabs} />
        <HeroSlider slides={home.heroSlides} />
      </div>

      <CategoryStrip categories={categories} />

      <div className="flex flex-col gap-10 lg:gap-14">
        <ProductRow
          products={saleProducts}
          promo="sale"
          stagger
          promoSlot={home.promoSale}
        />

        <div>
          <LeatherBanner
            image={home.leather.image}
            nameFa={home.leather.nameFa}
            nameEn={home.leather.nameEn}
            linkText={home.leather.linkText}
            link={home.leather.link}
          />
          <PartnerCta />
        </div>

        <ProductRow
          products={discountProducts}
          promo="discount"
          stagger
          promoSlot={home.promoDiscount}
        />
        <FeaturesBar />
        <BlackCollection items={home.blackItems} />
        <ProductRow
          products={autumnProducts}
          promo="autumn"
          stagger
          promoSlot={home.promoAutumn}
        />
      </div>

      <AboutSection
        titleFa={home.about.titleFa}
        titleEn={home.about.titleEn}
        lead={home.about.lead}
        body={home.about.body}
        image={home.about.image}
        imageSecondary={home.about.imageSecondary}
      />
      <SiteFooter paymentBadges={home.paymentBadges} />
    </main>
  );
}