import Link from "next/link";
import Laurel from "./Laurel";
import PlayReel from "./PlayReel";
import Reveal from "./Reveal";
import type { Award } from "@/content/site";

// Full-bleed award callout over a still from the nominated work.
export default function AwardBand({ award }: { award: Award }) {
  return (
    <section className="relative overflow-hidden border-y border-line">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={award.image} alt="" className="absolute inset-0 h-full w-full object-cover object-[70%_40%] opacity-60" />
      <div className="absolute inset-0 bg-gradient-to-r from-ink via-ink/75 to-transparent" />
      <div className="relative mx-auto grid max-w-7xl items-center gap-12 px-5 py-20 md:grid-cols-[auto_1fr] md:gap-16 md:px-8 md:py-28">
        <Reveal>
          <div className="relative mx-auto flex h-52 w-52 items-center justify-center text-accent md:h-64 md:w-64">
            <Laurel className="absolute inset-0 h-full w-full" />
            <div className="text-center">
              <p className="font-mono text-[10px] tracking-[0.3em] text-muted uppercase">{award.edition}</p>
              <p className="mt-1 font-display text-4xl font-light tracking-[0.15em] text-fg md:text-5xl">{award.body}</p>
              <p className="mt-1 font-mono text-[10px] tracking-[0.3em] uppercase">{award.result}</p>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <p className="font-mono text-xs tracking-[0.3em] text-accent uppercase">
            {award.result} · {award.year}
          </p>
          <h2 className="mt-5 font-display text-4xl leading-tight font-thin uppercase md:text-6xl">
            {award.category}
          </h2>
          <p className="mt-6 max-w-xl text-base leading-relaxed text-muted md:text-lg">
            Our creature and simulation work on <span className="text-fg">{award.title}</span> was nominated at the{" "}
            {award.longName}.
          </p>
          <div className="mt-10 flex flex-wrap items-center gap-6">
            {award.reel && <PlayReel src={award.reel} poster={award.image} label="Watch the breakdown" />}
            {award.project && (
              <Link
                href={`/work/${award.project}/`}
                className="py-3.5 font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
              >
                See the project →
              </Link>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}