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-blue-light"}`}
    >
      {/* 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 artwork (2026-08-07) — badge/watermark/bunny layers sourced
          // verbatim from `asset hero section signaturee/` (repo root, not
          // committed), copied to public/brand/signaturee-hero-*.svg. Shown
          // when no organizer banner is uploaded yet. Trial artwork; the
          // watermark/badge/bunny layout is a close match to the reference
          // design, not a pixel-perfect port (unlike SignatureAbout's SVG).
          <QueueItem as="div" className="absolute inset-0 h-full w-full bg-signaturee-blue-light">
            {/* Watermark — source SVG is one "SIGNA/TUREÈ" text block; tiled
                as a CSS background so it reads as the scattered background
                typography from the reference design at every viewport. */}
            <div
              aria-hidden="true"
              className="absolute inset-0 h-full w-full bg-repeat opacity-90 [background-image:url('/brand/signaturee-hero-watermark.svg')] [background-size:420px_auto] sm:[background-size:640px_auto]"
            />

            {/* eslint-disable-next-line @next/next/no-img-element -- static brand asset */}
            <img
              src="/brand/signaturee-hero-bunny-top.svg"
              alt=""
              aria-hidden="true"
              className="pointer-events-none absolute -top-2 right-4 h-24 w-auto sm:right-16 sm:top-10 sm:h-40 lg:h-52"
            />
            {/* eslint-disable-next-line @next/next/no-img-element -- static brand asset */}
            <img
              src="/brand/signaturee-hero-bunny-bottom.svg"
              alt=""
              aria-hidden="true"
              className="pointer-events-none absolute bottom-4 left-4 h-28 w-auto sm:bottom-16 sm:left-16 sm:h-48 lg:h-60"
            />

            {/* eslint-disable-next-line @next/next/no-img-element -- static brand asset */}
            <img
              src="/brand/signaturee-hero-badge.svg"
              alt={event.title}
              className="absolute inset-0 m-auto h-auto w-[78%] max-w-xl sm:w-[55%] sm:max-w-2xl"
            />
          </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>
  );
}