import type { Metadata } from "next";
import SiteHeader from "@/components/home/SiteHeader";
import SiteFooter from "@/components/home/SiteFooter";
import PartnerCta from "@/components/home/PartnerCta";
import ProductListHero from "@/components/products/ProductListHero";
import ContactForm from "@/components/contact/ContactForm";
import BilingualTitle from "@/components/ui/BilingualTitle";
import { CONTACT_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: CONTACT_PAGE.lead,
};

export default async function ContactPage() {
  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-white text-ink">
      <div className="relative">
        <SiteHeader megaTabs={megaTabs.length ? megaTabs : home.megaTabs} />
        <ProductListHero
          titleFa={CONTACT_PAGE.titleFa}
          titleEn={CONTACT_PAGE.titleEn}
          heroImage={home.heroSlides[0]?.image || CONTACT_PAGE.heroImage}
          breadcrumbs={CONTACT_PAGE.breadcrumbs}
        />
      </div>

      <div className="mx-auto max-w-[1200px] px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
        <div className="grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)] lg:gap-14">
          <aside className="space-y-6 border border-line bg-[#f7f7f5] p-6 sm:p-8">
            <div>
              <BilingualTitle
                titleFa="اطلاعات تماس"
                titleEn="Get in touch"
                size="md"
                align="end"
              />
            </div>

            <dl className="space-y-4 text-sm leading-7">
              <div>
                <dt className="text-muted">آدرس</dt>
                <dd className="text-ink">{CONTACT_PAGE.address}</dd>
              </div>
              <div>
                <dt className="text-muted">تلفن فروشگاه</dt>
                <dd dir="ltr" className="font-montserrat text-ink">
                  {CONTACT_PAGE.phoneStore}
                </dd>
              </div>
              <div>
                <dt className="text-muted">تلفن همراه</dt>
                <dd dir="ltr" className="font-montserrat text-ink">
                  {CONTACT_PAGE.phoneMobile}
                </dd>
              </div>
              <div>
                <dt className="text-muted">ایمیل</dt>
                <dd dir="ltr" className="font-montserrat text-ink">
                  {CONTACT_PAGE.email}
                </dd>
              </div>
              <div>
                <dt className="text-muted">ساعات پاسخگویی</dt>
                <dd className="text-ink">{CONTACT_PAGE.hours}</dd>
              </div>
            </dl>
          </aside>

          <div>
            <h2 className="font-doran text-2xl font-light text-ink">
              فرم تماس
            </h2>
            <p
              dir="ltr"
              className="mt-1 font-montserrat text-[10px] uppercase tracking-[0.16em] text-muted"
            >
              Send a message
            </p>
            <div className="mt-6">
              <ContactForm />
            </div>
          </div>
        </div>
      </div>

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