import Image from "next/image";
import { StatusBadge } from "../ui/StatusBadge";
import { ButtonLink } from "../ui/ButtonLink";
import { Parallax } from "../ui/Parallax";
import type { Game } from "@/lib/games";

type Props = { game: Game };

/**
 * Game page hero: the capture as a background, the title on top of it.
 *
 * The previous version showed the artwork in a bare band and put the title on
 * a solid block underneath, on the grounds that the in-game captures are too
 * bright to carry cream text. That is true of a raw capture — but the fix is a
 * scrim, not a separate block. A flat tint plus a bottom-up gradient give the
 * type a dark bed while the capture still reads, exactly as the home hero does
 * over the video. Without it the page opened on an image that said nothing:
 * no title, no status, no call to action above the fold.
 */
export function GameHero({ game }: Props) {
  const artwork = game.banner ?? game.keyArt;

  /**
   * The spec line. Phrased so it needs no labels: "1-6 players" says what
   * "PLAYERS / 1-6" said in two words and a column. As its own band under the
   * hero this was a lonely row of text floating in a dark gap; belonging to
   * the title block, it reads as part of the pitch.
   */
  const meta = [
    game.players && `${game.players} players`,
    game.platform,
    game.releaseWindow && `Release ${game.releaseWindow}`,
  ].filter((entry): entry is string => Boolean(entry));

  return (
    <section className="relative isolate flex min-h-[70svh] items-end overflow-hidden bg-background px-6 pb-14 pt-32 sm:min-h-[78svh] sm:pb-20 lg:px-10">
      {/* The capture drifts slower than the copy on top of it. Overscanned by
          8% at each end so the drift never exposes the edge of the frame. */}
      {artwork && (
        <Parallax
          distance={70}
          range={600}
          className="absolute -top-[8%] left-0 -z-20 h-[116%] w-full"
        >
          <Image
            src={artwork}
            alt=""
            fill
            priority
            sizes="100vw"
            className="object-cover"
          />
        </Parallax>
      )}

      {/* Scrim: dark bed under the copy, lighter over the artwork, plus a top
          band so the transparent navbar stays legible. */}
      <div
        aria-hidden
        className="absolute inset-0 -z-10 bg-background/45"
        style={{
          backgroundImage:
            "linear-gradient(to top, #0a0a0a 3%, rgba(10,10,10,0.75) 32%, rgba(10,10,10,0.15) 70%, rgba(10,10,10,0.7) 100%)",
        }}
      />

      <div className="mx-auto w-full max-w-6xl">
        <StatusBadge status={game.status} />

        <h1 className="mt-6 font-display text-[clamp(2.75rem,1.5rem+5vw,7rem)] leading-[0.92] tracking-wider">
          {game.title.toUpperCase()}
        </h1>

        <p className="mt-6 max-w-xl text-lg leading-relaxed text-foreground sm:text-xl">
          {game.tagline}
        </p>

        {/* Genres carry their own non-breaking spans: a line may only break
            between them, never inside one ("CO-" / "OP" was a real thing). */}
        <div className="mt-8 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs uppercase tracking-[0.2em] text-foreground-muted">
          {game.genres.map((genre, index) => (
            <span key={genre} className="flex items-center gap-3">
              {index > 0 && (
                <span aria-hidden className="text-foreground-muted/40">
                  ·
                </span>
              )}
              <span className="whitespace-nowrap">{genre}</span>
            </span>
          ))}

          {meta.length > 0 && (
            <span aria-hidden className="mx-1 h-3 w-px bg-foreground-muted/30" />
          )}

          {meta.map((entry, index) => (
            <span key={entry} className="flex items-center gap-3">
              {index > 0 && (
                <span aria-hidden className="text-foreground-muted/40">
                  ·
                </span>
              )}
              <span className="whitespace-nowrap text-foreground">{entry}</span>
            </span>
          ))}
        </div>

        <div className="mt-10 flex flex-col gap-4 sm:flex-row">
          {game.steamUrl && (
            <ButtonLink href={game.steamUrl} block>
              WISHLIST ON STEAM
            </ButtonLink>
          )}
          <ButtonLink
            href="#gallery"
            variant={game.steamUrl ? "outline" : "primary"}
            block
          >
            SEE THE SCREENSHOTS
          </ButtonLink>
        </div>
      </div>
    </section>
  );
}