import Image from "next/image";
import Link from "next/link";
import { GameCard } from "@/components/GameCard";
import { getHomepageData } from "@/lib/queries";

export default async function HomePage() {
  const { featured, rows } = await getHomepageData();

  return (
    <div className="mx-auto max-w-6xl px-4 py-8">
      {/* Hero — today's pick */}
      {featured && (
        <section className="grid gap-6 rounded-xl border border-ink-700/60 bg-ink-900 p-6 sm:grid-cols-[1fr_1.4fr] sm:p-8">
          <div className="relative aspect-[3/4] overflow-hidden rounded-lg bg-ink-800 sm:order-2">
            {featured.cover_image && (
              <Image src={featured.cover_image} alt="" fill sizes="480px" className="object-cover" priority />
            )}
          </div>
          <div className="flex flex-col justify-center sm:order-1">
            <p className="text-xs uppercase tracking-wide text-bone-100/50">Today&rsquo;s pick</p>
            <h1 className="mt-2 font-display text-3xl font-semibold leading-tight sm:text-4xl">
              {featured.title}
            </h1>
            {featured.verdict_short && (
              <p className="mt-3 text-bone-100/80">{featured.verdict_short}</p>
            )}
            <Link
              href={`/games/${featured.slug}`}
              className="mt-5 inline-flex w-fit items-center rounded-md bg-signal px-4 py-2 text-sm font-semibold text-ink-950"
            >
              Read the review
            </Link>
          </div>
        </section>
      )}

      {/* Curated rows */}
      <div className="mt-12 space-y-12">
        {rows.map((row) =>
          row.games.length ? (
            <section key={row.slug}>
              <div className="mb-3 flex items-baseline justify-between">
                <h2 className="font-display text-xl font-semibold">{row.title}</h2>
                <Link href={`/collections/${row.slug}`} className="text-sm text-bone-100/60 hover:text-signal">
                  See all
                </Link>
              </div>
              <div className="flex gap-4 overflow-x-auto pb-2">
                {row.games.map((g: any) => (
                  <GameCard key={g.id} game={g} />
                ))}
              </div>
            </section>
          ) : null
        )}

        {rows.length === 0 && !featured && (
          <p className="text-bone-100/50">
            No published games or curated rows yet — set a featured game and build a
            collection in the admin panel.
          </p>
        )}
      </div>
    </div>
  );
}