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

type Props = { game: Game };

/**
 * The home page showcase for the studio's current game.
 *
 * Deliberately NOT the `GameCard` used on /games. A card is a catalogue
 * object — it is right when a visitor is comparing several games, and wrong
 * when there is one game and the whole page exists to sell it.
 *
 * The card also forced the key art into whatever height the text column
 * happened to be, cropping roughly a third of a 16:9 composition. Here the
 * ratio is locked, so the art is shown as it was framed.
 */
export function FeaturedGame({ game }: Props) {
  const artwork = game.keyArt ?? game.banner;

  return (
    <Section>
      {/* The artwork gets the larger column: it is the only thing on the home
          page that shows the game itself. */}
      <div className="grid items-center gap-10 lg:grid-cols-[0.8fr_1.2fr] lg:gap-12">
        {/* Artwork first in the DOM so it also leads on mobile, where the
            layout collapses to a single column. */}
        <Reveal className="lg:order-2" direction="right">
          <div className="relative aspect-video w-full overflow-hidden rounded-2xl border border-border bg-surface-elevated">
            {artwork && (
              <Image
                src={artwork}
                alt={`${game.title} key art`}
                fill
                sizes="(max-width: 1024px) 100vw, 60vw"
                className="object-cover"
              />
            )}
          </div>
        </Reveal>

        <div className="lg:order-1">
          <Reveal>
            <p className="mb-4 font-display text-xs tracking-[0.3em] text-accent sm:text-sm">
              OUR GAMES
            </p>

            <h2 className="font-display text-[clamp(2.5rem,1.5rem+3vw,4.5rem)] leading-[0.95] tracking-wider">
              {game.title.toUpperCase()}
            </h2>

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

            {/* Genres as one quiet line instead of a row of chips — the badge
                already carries the only label that needs a border. */}
            <div className="mt-8 flex flex-wrap items-center gap-x-4 gap-y-3">
              <StatusBadge status={game.status} />
              <p className="text-xs uppercase tracking-[0.2em] text-foreground-muted">
                {game.genres.join(" · ")}
                {game.releaseWindow && ` · ${game.releaseWindow}`}
              </p>
            </div>

            <div className="mt-10 flex flex-col gap-4 sm:flex-row">
              <ButtonLink href={`/games/${game.slug}`} block>
                DISCOVER {game.title.toUpperCase()}
              </ButtonLink>
              {game.steamUrl && (
                <ButtonLink href={game.steamUrl} variant="outline" block>
                  WISHLIST ON STEAM
                </ButtonLink>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}