import type { signatureeClasses } from "@/lib/theme";
import type { KolaboraEvent } from "@/types/event";
import { QueueSection } from "@/components/motion/QueueSection";
import { QueueItem } from "@/components/motion/QueueItem";

/**
 * Hero for the Signature Event dedicated page — full-bleed banner, dark
 * overlay for legibility, Signaturee 2026 logo mark, and a couple of the
 * brand's own flower illustrations as a decorative accent. Isolated from
 * the standard (non-signature) event page so future visual changes here
 * can't regress the standard rendering path.
 *
 * Deliberately does NOT use the shared `SIGNATURE_SECTION_MIN_HEIGHT`
 * (`min-h-screen`) below `sm:` — the banner/fallback art is a 16:9 image,
 * and `object-cover` inside a full-100vh portrait box has to zoom in hard
 * to fill it, cropping most of the artwork. `aspect-video` on mobile keeps
 * the container at the image's own ratio so nothing gets cropped; `sm:`
 * and up restores the full-viewport hero.
 */
export function SignatureEventHero({
  event,
}: {
  event: KolaboraEvent;
  accent: ReturnType<typeof signatureeClasses>;
}) {
  // Only `banner` — never falls back to `thumbnail`, so uploading/changing
  // the event's thumbnail (used by SignatureEventCard) never affects Hero.
  const image = event.banner;

  return (
    <QueueSection
      as="div"
      className={`relative w-full aspect-video sm:aspect-auto sm:min-h-screen sm:flex sm:flex-col sm:justify-center ${image ? "" : "bg-signaturee-cream"}`}
    >
      {/* Photo/fallback art layer is the only thing clipped to the box —
          kept in its own `overflow-hidden` wrapper (rather than on the
          section root, like before) so the crossing motifs below can poke
          past this box's bottom edge without getting cut off. */}
      <div className="absolute inset-0 h-full w-full overflow-hidden">
        {image ? (
          <QueueItem as="div" className="absolute inset-0 h-full w-full">
            {/* eslint-disable-next-line @next/next/no-img-element -- organizer-provided path, not on next/image allowlist */}
            <img src={image} alt={event.title} className="h-full w-full object-cover" />
          </QueueItem>
        ) : (
          // "hero coba.svg" — trial hero artwork, shown when no organizer banner is uploaded yet.
          // Temporarily the ONLY thing rendered in this section (no overlay/
          // logo/title) so it can be previewed on its own — see the
          // commented-out block below to bring the rest back.
          <QueueItem as="div" className="absolute inset-0 h-full w-full">
            {/* eslint-disable-next-line @next/next/no-img-element -- static brand asset */}
            {/* This SVG's badge only occupies a small centered fraction of its
                1920x1080 canvas (the rest is transparent, showing the cream
                background through) — sized for a full-bleed desktop hero.
                Below sm, the aspect-video box is much shorter, so the badge
                reads tiny with acres of empty cream around it. Scaling the
                image up (mobile only — verified against the SVG's own
                center-ish badge position, no clipping through 2x) crops that
                margin away without touching the source asset. */}
            <img
              src="/brand/signaturee-hero.svg"
              alt=""
              aria-hidden="true"
              className="h-full w-full scale-[1.75] object-cover sm:scale-100"
            />
          </QueueItem>
        )}

        {/* Bottom blend — softens the hard image→blue cut where About's
            curtain starts covering Hero (see SignatureEventPage.tsx's
            sticky-scroll wrapper). Confined to this clipped layer so it
            never bleeds past Hero's own box. */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-linear-to-t from-[#2A72D3]/60 to-transparent sm:h-32"
        />
      </div>

      {/*
      <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/30 to-transparent" />

      <img
        src="/brand/signaturee-flower-1.svg"
        alt=""
        aria-hidden="true"
        className="pointer-events-none absolute -right-6 -top-8 h-32 w-32 opacity-90 sm:h-44 sm:w-44"
      />
      <img
        src="/brand/signaturee-flower-2.svg"
        alt=""
        aria-hidden="true"
        className="pointer-events-none absolute -left-8 bottom-16 h-24 w-24 opacity-80 sm:h-32 sm:w-32"
      />

      <div className="absolute inset-x-0 top-6 mx-auto max-w-4xl px-6">
        <img src="/brand/signaturee-logo.svg" alt="Signaturee 2026" className="h-16 w-auto sm:h-20" />
      </div>

      <div className="absolute inset-x-0 bottom-0 mx-auto max-w-4xl px-6 pb-8">
        {event.category && (
          <span
            className={`w-fit rounded-full ${accent.bg} px-2.5 py-0.5 text-xs font-medium text-signaturee-cream`}
          >
            {event.category.name}
          </span>
        )}
        <h1 className="mt-3 font-signaturee text-3xl font-semibold text-signaturee-cream sm:text-4xl">
          {event.title}
        </h1>
      </div>
      */}
    </QueueSection>
  );
}