import { HomeHero } from "./components/home/HomeHero";
import { Statement } from "./components/home/Statement";
import { FeaturedGame } from "./components/home/FeaturedGame";
import { StudioIntro } from "./components/home/StudioIntro";
import { Dispatch } from "./components/home/Dispatch";
import { featuredGame } from "@/lib/games";
import { getAllPosts } from "@/lib/devblog";

/**
 * Home page.
 *
 * Read top to bottom it answers four questions in order: what is this
 * (hero), why should I care (statement), what are you making (featured game),
 * who are you (studio), how do I follow it (dispatch). Each band changes
 * rhythm — full-bleed, quiet, card, split, conversion — so the page never
 * reads as one long column of identical text blocks.
 *
 * Game data reads from `lib/games.ts`, so the home page can never advertise
 * something the game page doesn't show. Screenshots deliberately live only on
 * /games/[slug] — the home page teases the game, the game page shows it.
 */
export default function Home() {
  const latest = getAllPosts()[0] ?? null;

  return (
    <>
      <HomeHero />

      <Statement />

      {featuredGame && <FeaturedGame game={featuredGame} />}

      <StudioIntro />

      <Dispatch latest={latest} />
    </>
  );
}