import { QueueSection } from "@/components/motion/QueueSection";
import { QueueItem } from "@/components/motion/QueueItem";
import { SIGNATURE_SECTION_MIN_HEIGHT } from "./section-layout";

/**
 * "Full section ini project" — full-bleed prominent block. Thumbnail (when
 * set) covers the entire section as a background, same treatment as
 * SignatureEventHero, with a dark gradient for text legibility.
 */
export function SignatureProject({
  title = "Project",
  description,
  thumbnail,
}: {
  title?: string;
  description?: string;
  thumbnail?: string | null;
}) {
  return (
    <QueueSection
      as="section"
      className={`relative overflow-hidden ${SIGNATURE_SECTION_MIN_HEIGHT} bg-signaturee-red px-6 py-20 text-center text-signaturee-cream`}
    >
      {thumbnail && (
        <>
          {/* eslint-disable-next-line @next/next/no-img-element -- organizer-uploaded file, not on next/image allowlist */}
          <img src={thumbnail} alt="" aria-hidden="true" className="absolute inset-0 h-full w-full object-cover" />
          <div className="absolute inset-0 bg-linear-to-t from-black/80 via-black/30 to-transparent" />
        </>
      )}

      <QueueItem as="div" className="relative mx-auto max-w-2xl">
        <h2 className="font-signaturee text-3xl font-semibold sm:text-4xl">{title}</h2>
        <p className="mt-4 text-lg text-signaturee-cream/85">{description ?? "Coming soon."}</p>
      </QueueItem>
    </QueueSection>
  );
}