import HeroSlider from "@/components/HeroSlider";
import HomeSections from "@/components/HomeSections";
import { homeTherapists, serviceCards, site, slides } from "@/data/site";
import { fetchBlogs, getLocalBlogPosts } from "@/lib/blog";
import { pageMetadata } from "@/lib/seo";
import { fetchStaticImageSlots, overlaySlotImages, pickSlot } from "@/lib/static-images";
import { fetchWorkshops } from "@/lib/workshops";

export const revalidate = 60;

export const metadata = pageMetadata({
  title: "کلینیک مشاوره و روانشناسی ثامن قم",
  description: `${site.description} — مشاوره فردی، خانواده، ازدواج، کودک و کارگاه‌های تخصصی در قم.`,
  path: "/",
});

export default async function HomePage() {
  const [slots, blogResult, workshopResult] = await Promise.all([
    fetchStaticImageSlots("home"),
    fetchBlogs({ pageSize: 8 }),
    fetchWorkshops({ pageSize: 4 }),
  ]);

  const blogPosts =
    blogResult.items.length > 0 && !String(blogResult.items[0]?.id).startsWith("local-")
      ? blogResult.items
      : getLocalBlogPosts();
  const workshops = workshopResult.items;

  const slider = overlaySlotImages(
    pickSlot(slots, "slider"),
    slides.map((slide, index) => {
      const item = slide as { image: string; title: string; english: string; alt: string };
      return {
        id: `slide-${index}`,
        image: item.image,
        title: item.alt || item.title,
        kicker: item.english,
      };
    }),
    "slider",
  );

  const people = overlaySlotImages(
    pickSlot(slots, "4-people-image"),
    homeTherapists.map((person, index) => ({
      id: `person-${index}`,
      image: person.image,
      href: "/ourdr",
      title: person.name,
      text: person.role,
    })),
    "4-people-image",
  );

  const serviceIcons = overlaySlotImages(
    pickSlot(slots, "our-services-icon"),
    serviceCards.map((service, index) => ({
      id: `service-${index}`,
      image: service.image,
      href: service.href,
      title: service.title,
      kicker: service.english,
    })),
    "our-services-icon",
  );

  const banners = overlaySlotImages(
    pickSlot(slots, "two-banner-bg"),
    [
      {
        id: "banner-workshops",
        image: "/images/banners/workshops.jpg",
        href: "/workshops",
        title: "کارگاه عمومی",
      },
      {
        id: "banner-individual",
        image: "/images/banners/individual.jpg",
        href: "/contact",
        title: "مشاوره فردی",
      },
    ],
    "two-banner-bg",
  );

  return (
    <>
      <HeroSlider slides={slider.items} aspectRatio={slider.aspectRatio} />
      <HomeSections
        people={people.items}
        peopleAspectRatio={people.aspectRatio}
        serviceIcons={serviceIcons.items}
        serviceIconsAspectRatio={serviceIcons.aspectRatio}
        banners={banners.items}
        bannersAspectRatio={banners.aspectRatio}
        workshops={workshops}
        articles={blogPosts}
      />
    </>
  );
}