import type { signatureeClasses } from "@/lib/theme";
import type { KolaboraEvent } from "@/types/event";
import { SignatureEventHero } from "@/components/events/SignatureEventHero";
import { SignatureAbout } from "./SignatureAbout";
import { SignatureEventCard } from "./SignatureEventCard";
import { SignatureVenueDate } from "./SignatureVenueDate";
import { SignatureLineup } from "./SignatureLineup";
import { SignatureProject } from "./SignatureProject";
import { SignatureBrand } from "./SignatureBrand";
import { SignatureDocumentation } from "./SignatureDocumentation";
import { SignatureCustomCursor } from "./SignatureCustomCursor";
import { SignatureFloatingCta } from "./SignatureFloatingCta";

/**
 * Dedicated page template for Signature Event (FR-SIG-002/003/004) — a
 * distinct template from the standard event page, using Signaturee 2026's
 * own visual key (colors/typography/logo — see `Signaturee visual key/`),
 * not Kolabora's brand palette. Section order: Hero, About, Denah & Tanggal,
 * EventCard, Lineup Artis, Project, Brand, Dokumentasi, (site
 * Footer, rendered globally by the root layout). Each section is its own
 * file so future signature-only visual changes stay isolated from each
 * other and from the standard event page.
 *
 * Every section except Hero can be hidden by the admin (see the
 * `show_*` toggles on signature_profile, managed from
 * `/admin/signature`'s "Visibilitas Section" panel) — Hero always
 * renders since it's structurally pinned to About's slide-up reveal
 * above, not a standalone section.
 */
export function SignatureEventPage({
  event,
  accent,
}: {
  event: KolaboraEvent;
  accent: ReturnType<typeof signatureeClasses>;
}) {
  return (
    <div className="bg-signaturee-cream font-signaturee-body">
      <SignatureCustomCursor />
      <SignatureFloatingCta href={`/events/${event.slug}/detail`} />
      {/* Sticky-scroll hero→about at every breakpoint, same technique as
          the Kolabora homepage (see app/page.tsx's "hero" section): Hero
          pins to the top while About rises up and fully covers it. Below
          sm, Hero is `aspect-video` (not min-h-screen — see
          SignatureEventHero's own comment) — full-bleed width, so its
          rendered height is exactly `56.25vw` (16:9), not 100vh. The
          wrapper's min-height and About's negative margin (in
          SignatureAbout.tsx) both use that value below sm instead of
          100vh, so the reveal distance always matches Hero's *actual*
          height rather than assuming a full screen.

          The pinned-scroll "buffer" (wrapper height minus Hero's own
          height) mirrors the sm+ ratio — Hero's own height again, not a
          flat 100vh — so the dead-scroll gap before About starts sliding
          up stays proportional to Hero's actual (tiny, on a phone) size
          instead of importing a full-screen-tall blank gap under a
          quarter-screen-tall Hero. */}
      <div className="relative min-h-[112.5vw] sm:min-h-[200vh]">
        <div className="sticky top-0 isolate">
          <SignatureEventHero event={event} accent={accent} />
        </div>
      </div>
      {(event.signature_profile?.show_about ?? true) && <SignatureAbout event={event} />}
      {(event.signature_profile?.show_venue_date ?? true) && <SignatureVenueDate event={event} />}
      {(event.signature_profile?.show_event_card ?? true) && <SignatureEventCard event={event} />}
      {(event.signature_profile?.show_lineup ?? true) && <SignatureLineup artists={event.signature_artists} />}
      {(event.signature_profile?.show_project ?? true) && (
        <SignatureProject
          title={event.signature_profile?.project_title ?? undefined}
          description={event.signature_profile?.project_description ?? undefined}
          thumbnail={event.signature_profile?.project_thumbnail_url}
        />
      )}
      {(event.signature_profile?.show_brand ?? true) && (
        <SignatureBrand partners={event.signature_brand_partners} />
      )}
      {(event.signature_profile?.show_documentation ?? true) && <SignatureDocumentation event={event} />}
    </div>
  );
}