import type { KolaboraEvent } from "@/types/event";
import { BrushRevealImage } from "@/components/brush-reveal/BrushRevealImage";
import { QueueSection } from "@/components/motion/QueueSection";
import { QueueItem } from "@/components/motion/QueueItem";
import { SIGNATURE_SECTION_MIN_HEIGHT } from "./section-layout";

/**
 * "Full card event" — thumbnail covers the entire section, unobstructed
 * (same treatment as SignatureEventHero/SignatureProject). Plain div, not a
 * Link — the CTA that used to link through to the detail page was pulled
 * pending a decision (2026-07-29), so this is a static visual only for now.
 * Uses the interactive ink brush reveal effect (Main Event Signaturee
 * thumbnail only — a deliberate, non-admin-configurable product decision —
 * only the "before"/"after" images are admin-managed, not the effect
 * itself). Admin uploads the "before"/"after" pair on the Signature admin
 * page; falls back to bundled static defaults in `public/brand/` until
 * they do, so the thumbnail never disappears.
 */
export function SignatureEventCard({ event }: { event: KolaboraEvent }) {
  return (
    <QueueSection as="div" className="relative">
      {/* Cream top edge — a thin lip in the same cream as About's card
          (`#FFF6DB`/`bg-signaturee-cream`), so whatever precedes this
          section hands off into "still Signaturee" rather than a bare cut
          into a plain documentary photo. Deliberately just a strip, not a
          border around the whole photo — EventCard's full-bleed treatment
          is a separate, deliberate decision (see the comment above) and
          this isn't meant to relitigate it. Self-contained (doesn't
          reference whatever section precedes it), so it's correct
          regardless of the admin's `show_*` toggle combination. */}
      <div aria-hidden="true" className="absolute inset-x-0 top-0 z-20 h-2 bg-signaturee-cream sm:h-3" />

      {/* blur off: this wraps a full-viewport-height live canvas (BrushRevealImage
          already runs its own rAF resize/paint loop) — animating a blur filter
          over it at the same time the entrance transition fires competes for
          compositor budget with that loop and is what reads as stutter. */}
      <QueueItem as="div" blur={false}>
        <div className={`relative block overflow-hidden ${SIGNATURE_SECTION_MIN_HEIGHT} bg-neutral-200`}>
          <BrushRevealImage
            beforeSrc={event.signature_profile?.main_event_before_url || "/brand/signaturee-main-event-before.webp"}
            afterSrc={event.signature_profile?.main_event_after_url || "/brand/signaturee-main-event-after.webp"}
            alt={event.title}
            className="absolute inset-0 h-full w-full"
          />
          {(event.signature_profile?.main_event_show_logo ?? true) && (
            // eslint-disable-next-line @next/next/no-img-element -- static brand asset
            <img
              src="/brand/signaturee-main-event-logo.svg"
              alt=""
              aria-hidden="true"
              className="pointer-events-none absolute inset-0 z-10 m-auto h-52 w-auto max-w-[90%] sm:h-64 lg:h-80 xl:h-96"
            />
          )}
        </div>
      </QueueItem>
    </QueueSection>
  );
}