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

const heroMobileSvg = readBrandSvg("signaturee-hero-mobile.svg");

/**
 * 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.
 *
 * Split into two early-return branches (2026-08-10) rather than one
 * combined ternary — an uploaded banner and the branded fallback need
 * genuinely different DOM/height strategies (see below), and mixing both
 * into one conditional className was getting hard to follow.
 */
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;

  if (!image) {
    return (
      <>
        {/* Mobile: dedicated pixel-perfect mobile artwork (2026-08-10),
            sourced from `herosignaturee.svg` and inlined verbatim (see
            lib/brand-svg.ts) — natural height (the SVG's own aspect ratio),
            not the aspect-video/min-h-screen box the sm:+ composition
            below uses. Deliberately NOT wrapped in the sticky/curtain
            overlap SignatureEventPage.tsx sets up for sm:+ (About sliding
            up over Hero) — that negative-margin math is tuned to the sm:+
            box's own height, and this artwork's proportions are nothing
            like it. SignatureEventPage.tsx skips the sticky pin below sm:
            for exactly this reason, so this and SignatureAbout's mobile
            artwork just stack normally in document flow. */}
        <QueueSection as="div" className="relative w-full bg-signaturee-cream sm:hidden">
          <QueueItem as="div">
            <div
              role="img"
              aria-label={event.title}
              className="[&>svg]:block [&>svg]:h-auto [&>svg]:w-full"
              dangerouslySetInnerHTML={{ __html: heroMobileSvg }}
            />
          </QueueItem>
        </QueueSection>

        {/* sm: and up — curve/badge/avatar composition (2026-08-09),
            unchanged. Badge and avatar sit in a flex row rather than two
            independently absolute-positioned images — sizing the avatar by
            *height* percentage alone let its width grow past the badge's
            box on wide-but-short viewports. A flex row gives each element
            its own non-overlapping share of the width at every viewport,
            and `object-contain` on both images guarantees neither ever
            crops/distorts regardless of the box it lands in. */}
        <QueueSection
          as="div"
          className="relative hidden w-full bg-signaturee-cream sm:flex sm:min-h-screen sm:flex-col sm:justify-center"
        >
          <div className="absolute inset-0 h-full w-full overflow-hidden">
            <QueueItem as="div" className="absolute inset-0 h-full w-full bg-signaturee-cream">
              {/* Background blob — oversized/centered so it bleeds past the
                  box edges, leaving the cream base to show through as the
                  scalloped "petal" cutouts at the corners, like the reference. */}
              {/* eslint-disable-next-line @next/next/no-img-element -- static brand asset */}
              <img
                src="/brand/signaturee-hero-curve.svg"
                alt=""
                aria-hidden="true"
                className="pointer-events-none absolute inset-0 h-[130%] w-[130%] -translate-x-[8%] -translate-y-[12%] object-cover"
              />

              <div className="relative flex h-full w-full items-center justify-between gap-6 px-[8%] py-[8%]">
                {/* eslint-disable-next-line @next/next/no-img-element -- static brand asset */}
                <img
                  src="/brand/signaturee-hero-badge-2026.svg"
                  alt={event.title}
                  className="h-auto w-[32%] max-w-sm shrink-0 object-contain"
                />

                {/* Bottom-aligned within its own flex share of the row, so it
                    can grow tall on portrait screens without ever reaching
                    into the badge's space next to it. */}
                <div className="flex h-full min-w-0 flex-1 items-end justify-end self-stretch">
                  {/* eslint-disable-next-line @next/next/no-img-element -- static brand asset */}
                  <img
                    src="/brand/signaturee-hero-avatar.svg"
                    alt=""
                    aria-hidden="true"
                    className="pointer-events-none h-full max-h-[90%] w-auto max-w-full object-contain object-bottom"
                  />
                </div>
              </div>
            </QueueItem>

            {/* Bottom blend — softens the hard image→blue cut where About's
                curtain starts covering Hero (see SignatureEventPage.tsx's
                sticky-scroll wrapper, sm:+ only). */}
            <div
              aria-hidden="true"
              className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-[#2A72D3]/60 to-transparent"
            />
          </div>
        </QueueSection>
      </>
    );
  }

  return (
    <QueueSection
      as="div"
      className="relative w-full aspect-video sm:aspect-auto sm:flex sm:min-h-screen sm:flex-col sm:justify-center"
    >
      {/* Photo layer is the only thing clipped to the box — kept in its own
          `overflow-hidden` wrapper 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">
        <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>

        {/* Bottom blend — softens the hard image→blue cut where About's
            curtain starts covering Hero (see SignatureEventPage.tsx's
            sticky-scroll wrapper). */}
        <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>
    </QueueSection>
  );
}