/** بنرهای صفحه اصلی؛ اسلاید افقی با scroll-snap و حرکت خودکار (AutoSlider) */
import Link from "next/link";
import type { Banner } from "@/types/catalog";
import { ProductArt } from "@/components/product/ProductArt";
import { AutoSlider } from "./AutoSlider";
import { imageSrc, imageSrcSet } from "@/lib/media";

const themes = {
  dark: "bg-ink text-paper",
  mist: "bg-mist text-ink",
  light: "bg-fog text-ink",
};

export function HeroCarousel({ banners }: { banners: Banner[] }) {
  return (
    <section aria-label="پیشنهادهای ویژه" className="pt-4 md:pt-6">
      <AutoSlider className="scrollbar-none container-z flex snap-x snap-mandatory gap-3 overflow-x-auto">
        {banners.map((b, i) => (
          <Link
            key={b.id}
            href={b.href}
            className={`relative flex w-[88%] shrink-0 snap-center flex-col overflow-hidden rounded-3xl md:w-[80%] md:flex-row ${themes[b.theme]}`}
          >
            <div className="flex flex-col justify-center gap-3 p-6 pb-2 md:w-1/2 md:p-14">
              <p className={`text-[11px] font-medium tracking-[0.25em] ${b.theme === "dark" ? "text-paper/60" : "text-muted"}`}>{b.eyebrow}</p>
              <h2 className="text-2xl leading-tight font-extrabold md:text-5xl md:leading-tight">{b.title}</h2>
              <p className={`text-sm leading-6 ${b.theme === "dark" ? "text-paper/75" : "text-ink-soft"}`}>{b.subtitle}</p>
              <span className={`mt-2 inline-flex w-fit items-center gap-2 border-b pb-1 text-sm font-bold ${b.theme === "dark" ? "border-paper" : "border-ink"}`}>
                {b.cta}
              </span>
            </div>
            {b.image ? (
              // عکس‌ها مربع با زمینه خاکستری mist هستند؛ همان رنگ پشت کادر، پس کل عکس بدون برش و بی‌مرز دیده می‌شود
              <div className="relative h-64 bg-mist md:h-auto md:min-h-96 md:w-1/2">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={imageSrc(b.image.url, 800)}
                  srcSet={imageSrcSet(b.image.url)}
                  sizes="(min-width: 768px) 40vw, 88vw"
                  alt={b.image.alt}
                  loading={i === 0 ? "eager" : "lazy"}
                  fetchPriority={i === 0 ? "high" : undefined}
                  decoding="async"
                  className="absolute inset-0 size-full object-contain"
                />
              </div>
            ) : (
            <div className="flex h-64 items-end justify-center gap-0 px-4 pb-4 md:h-auto md:w-1/2 md:py-10">
              {b.art.map((a, j) => (
                <ProductArt
                  key={j}
                  shape={a.shape}
                  tone={a.tone}
                  className={`${j === 1 ? "z-10 w-[56%]" : "w-[42%]"} -mx-3 h-auto`}
                  label="ZAHORA"
                  title=""
                />
              ))}
            </div>
            )}
            <span className="sr-only">اسلاید {i + 1} از {banners.length}</span>
          </Link>
        ))}
      </AutoSlider>
    </section>
  );
}