import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import SiteHeader from "@/components/home/SiteHeader";
import SiteFooter from "@/components/home/SiteFooter";
import AboutSection from "@/components/home/AboutSection";
import PartnerCta from "@/components/home/PartnerCta";
import ProductListHero from "@/components/products/ProductListHero";
import BilingualTitle from "@/components/ui/BilingualTitle";
import { ABOUT_PAGE } from "@/data/pages";
import { mapHomeSlots } from "@/lib/map-home-slots";
import { fetchPublicWebsiteSlots } from "@/lib/website-slots";
import {
  fetchPublicCategories,
  mapCategoriesToMegaTabs,
} from "@/lib/categories-api";

export const metadata: Metadata = {
  title: "درباره ما | مانا کالکشن",
  description: ABOUT_PAGE.lead,
};

export default async function AboutPage() {
  const [slotItems, apiCategories] = await Promise.all([
    fetchPublicWebsiteSlots(),
    fetchPublicCategories(),
  ]);
  const home = mapHomeSlots(slotItems);
  const megaTabs = mapCategoriesToMegaTabs(
    apiCategories,
    home.megaTabs.map((t) => ({ image: t.image })),
  );

  return (
    <main className="home-page min-h-dvh bg-background text-ink">
      <div className="relative">
        <SiteHeader megaTabs={megaTabs.length ? megaTabs : home.megaTabs} />
        <ProductListHero
          titleFa={ABOUT_PAGE.titleFa}
          titleEn={ABOUT_PAGE.titleEn}
          heroImage={home.heroSlides[0]?.image || ABOUT_PAGE.heroImage}
          breadcrumbs={ABOUT_PAGE.breadcrumbs}
        />
      </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}
      />

      <section className="mx-auto max-w-[1200px] px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
        <div className="grid gap-10 lg:grid-cols-2 lg:gap-14 lg:items-start">
          <div>
            <BilingualTitle
              titleFa={ABOUT_PAGE.storyTitleFa}
              titleEn={ABOUT_PAGE.storyTitleEn}
              size="md"
              align="end"
            />
            <p className="mt-6 text-sm leading-8 text-ink/80">
              {ABOUT_PAGE.story}
            </p>
            <Link
              href="/contact"
              className="mt-8 inline-flex border border-ink px-5 py-2.5 text-sm transition-colors hover:bg-ink hover:text-white"
            >
              تماس با ما
            </Link>
          </div>
          <ul className="space-y-6">
            {ABOUT_PAGE.values.map((value) => (
              <li
                key={value.titleEn}
                className="border border-line bg-[#f7f7f5] p-5"
              >
                <BilingualTitle
                  titleFa={value.titleFa}
                  titleEn={value.titleEn}
                  as="p"
                  size="md"
                  align="end"
                />
                <p className="mt-3 text-sm leading-7 text-ink/75">
                  {value.body}
                </p>
              </li>
            ))}
          </ul>
        </div>

        <div className="relative mt-12 aspect-[21/9] overflow-hidden bg-[#f3f3f1]">
          <Image
            src={home.about.imageSecondary || ABOUT_PAGE.imageSecondary}
            alt=""
            fill
            sizes="100vw"
            className="object-cover"
          />
        </div>
      </section>

      <PartnerCta />
      <SiteFooter paymentBadges={home.paymentBadges} />
    </main>
  );
}