import type { Metadata } from "next";
import { GameCard, GameGrid } from "@/components/game/GameCard";
import { JsonLd } from "@/components/seo/JsonLd";
import { Button } from "@/components/ui/Button";
import { CategoryChipRow } from "@/components/ui/CategoryChip";
import { SearchBar } from "@/components/ui/SearchBar";
import { EmptyState, SectionHeading } from "@/components/ui/Section";
import { getHomeSections } from "@/lib/games";
import type { PublicGame } from "@/lib/games";
import { websiteJsonLd } from "@/lib/seo";
import { SITE } from "@/lib/site";

export const metadata: Metadata = {
  alternates: { canonical: "/" },
};

function CatalogSection({
  eyebrow,
  title,
  description,
  games,
}: {
  eyebrow: string;
  title: string;
  description: string;
  games: PublicGame[];
}) {
  return (
    <section className="shell py-8">
      <SectionHeading
        eyebrow={eyebrow}
        title={title}
        description={description}
        actionHref="/games"
        actionLabel="Explore all games"
      />
      {games.length > 0 ? (
        <GameGrid>
          {games.map((game) => (
            <GameCard key={game.slug} game={game} />
          ))}
        </GameGrid>
      ) : (
        <EmptyState
          title="Nothing here yet"
          message="Curated games for this section are coming soon."
        />
      )}
    </section>
  );
}

/** Home: hero + search + categories + live catalog sections. */
export default async function HomePage() {
  const sections = await getHomeSections();

  return (
    <div>
      <JsonLd data={websiteJsonLd()} />
      {/* Hero */}
      <section className="relative overflow-hidden border-b border-slate-800/80">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 bg-[radial-gradient(60rem_30rem_at_50%_-10rem,rgba(99,102,241,0.25),transparent)]"
        />
        <div className="shell relative py-16 sm:py-24">
          <div className="mx-auto max-w-3xl text-center">
            <p className="mb-3 inline-flex items-center rounded-full border border-brand-500/40 bg-brand-600/15 px-3.5 py-1 text-xs font-semibold tracking-wider text-brand-300 uppercase">
              Curated mini-games hub
            </p>
            <h1 className="text-4xl font-black tracking-tight text-white sm:text-6xl">
              Find and play great browser games.
            </h1>
            <p className="mx-auto mt-4 max-w-xl text-lg text-slate-400">
              {SITE.description}
            </p>
            <div className="mx-auto mt-8 max-w-xl">
              <SearchBar id="hero-search" size="lg" />
            </div>
            <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
              <Button href="/games" size="lg">
                Explore all games
              </Button>
              <Button href="/categories" variant="secondary" size="lg">
                Browse categories
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Popular categories */}
      <section aria-labelledby="home-categories" className="shell py-12">
        <SectionHeading
          eyebrow="Browse"
          title="Popular Categories"
          description="Jump straight into the kind of game you are in the mood for."
          actionHref="/categories"
          actionLabel="All categories"
        />
        <div id="home-categories">
          <CategoryChipRow />
        </div>
      </section>

      <CatalogSection
        eyebrow="Hand-picked"
        title="Featured Games"
        description="Standout titles chosen by our curators."
        games={sections.featured}
      />
      <CatalogSection
        eyebrow="Right now"
        title="Trending Games"
        description="What players are discovering this week."
        games={sections.trending}
      />
      <CatalogSection
        eyebrow="Fresh"
        title="New Games"
        description="The latest additions to the catalog."
        games={sections.newest}
      />
      <CatalogSection
        eyebrow="Just landed"
        title="Recently Added Games"
        description="Newest curated entries, ready to play."
        games={sections.recentlyAdded}
      />
    </div>
  );
}