import { getImageProps, type StaticImageData } from "next/image";
import Link from "next/link";

type Crumb = { readonly label: string; readonly href: string };

/** A bundled static asset, or a remote URL fetched at request time. */
type ImageSource = StaticImageData | string;

function isStaticImage(src: ImageSource): src is StaticImageData {
  return typeof src !== "string";
}

/**
 * Full-bleed opening plate shared by the inner pages: tracked Latin kicker,
 * light Persian title, breadcrumb — set over a darkened image.
 */
export function PageHero({
  image,
  imageMobile,
  caption,
  title,
  breadcrumb,
}: {
  image: ImageSource;
  /** Portrait crop, when one exists. Falls back to the landscape plate. */
  imageMobile?: ImageSource;
  caption: string;
  title: string;
  breadcrumb: readonly Crumb[];
}) {
  const common = { alt: "", fill: true, sizes: "100vw", priority: true } as const;

  const mobileSrc = imageMobile ?? image;

  // Static imports carry a baked-in blur thumbnail; remote API images don't,
  // so only bundled assets get the blur-up placeholder.
  const { props: desktop } = getImageProps({
    ...common,
    src: image,
    quality: 82,
    ...(isStaticImage(image) ? { placeholder: "blur" as const } : {}),
  });
  const { props: mobile } = getImageProps({
    ...common,
    src: mobileSrc,
    quality: 72,
    ...(isStaticImage(mobileSrc) ? { placeholder: "blur" as const } : {}),
  });

  return (
    <section className="relative flex h-[86svh] min-h-[520px] items-end overflow-hidden bg-ink">
      <picture>
        <source media="(min-width: 768px)" srcSet={desktop.srcSet} sizes={desktop.sizes} />
        <source media="(max-width: 767px)" srcSet={mobile.srcSet} sizes={mobile.sizes} />
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img {...mobile} alt="" className="animate-slow-zoom object-cover" />
      </picture>

      <div className="absolute inset-0 bg-gradient-to-b from-black/55 via-black/25 to-black/75" />

      <div className="relative z-10 mx-auto w-full max-w-[1400px] px-6 pb-20 text-center lg:px-12 lg:pb-28">
        <p className="latin animate-fade-up text-xs tracking-[0.4em] text-gold">{caption}</p>

        <h1
          className="mt-6 animate-fade-up text-4xl font-light text-white sm:text-5xl lg:text-6xl"
          style={{ animationDelay: "140ms" }}
        >
          {title}
        </h1>

        <nav
          aria-label="مسیر صفحه"
          className="mt-8 animate-fade-up"
          style={{ animationDelay: "280ms" }}
        >
          <ol className="flex items-center justify-center gap-3 text-sm text-white/60">
            {breadcrumb.map((crumb, i, all) => (
              <li key={crumb.href} className="flex items-center gap-3">
                {i === all.length - 1 ? (
                  <span aria-current="page" className="text-white">
                    {crumb.label}
                  </span>
                ) : (
                  <Link href={crumb.href} className="transition-colors hover:text-white">
                    {crumb.label}
                  </Link>
                )}
                {i < all.length - 1 && (
                  <span aria-hidden="true" className="h-1 w-1 rotate-45 bg-gold" />
                )}
              </li>
            ))}
          </ol>
        </nav>
      </div>
    </section>
  );
}
