import type { Metadata } from "next";
import { PageHeader } from "../components/ui/PageHeader";
import { Section } from "../components/ui/Section";
import { GameCard } from "../components/game/GameCard";
import { Stagger, StaggerItem } from "../components/ui/Stagger";
import { games } from "@/lib/games";

export const metadata: Metadata = {
  title: "Games",
  description: "Games crafted by Highland Games Studio.",
};

export default function GamesPage() {
  return (
    <>
      <PageHeader
        eyebrow="OUR WORLDS"
        title="GAMES"
        lead="Every project we ship is a different summit. Here is what we are climbing right now."
      />

      <Section top="none">
        {games.length === 0 ? (
          <p className="text-foreground-muted">
            Nothing announced yet. Follow the devblog to hear it first.
          </p>
        ) : (
          <Stagger as="ul" step={0.12} className="grid gap-8">
            {games.map((game) => (
              <StaggerItem as="li" key={game.slug}>
                <GameCard game={game} />
              </StaggerItem>
            ))}
          </Stagger>
        )}
      </Section>
    </>
  );
}