Retro Pixel Template

"use client";

import { NavigationMinimal } from "../../navigation/NavigationMinimal.js";
import { HeroNight } from "../../hero/HeroNight.js";
import { BayerDitherBackground } from "../../backgrounds/BayerDitherBackground.js";
import { PixelCard } from "../../ui/PixelCard.js";
import { StatsCounter } from "../../stats/StatsCounter.js";
import { NotFoundTerminal } from "../../404/NotFoundTerminal.js";
import { FooterMinimal } from "../../footer/FooterMinimal.js";

/**
 * Retro pixel template: the Pax dither language turned all the way up.
 * Night hero, a dithered interlude, pixel-materializing feature cards,
 * one big number, and a terminal 404 as the sign-off.
 */
export default function RetroPixelPage() {
  return (
    <main data-pax-asset="template-retro-pixel">
      <NavigationMinimal />
      <HeroNight
        copy={{
          eyebrow: "Bitforge",
          title: "Tools with teeth, from the 8-bit school.",
          description:
            "Bitforge builds editors and emulators for people who think a 4x4 Bayer matrix is a design system. Every pixel placed on purpose.",
          primaryCta: { label: "Download", href: "#download" },
          secondaryCta: { label: "Changelog", href: "#changelog" },
        }}
      />
      <section
        aria-label="Feature cards"
        style={{ padding: "4rem 1.5rem", background: "var(--pax-night, #0b0d10)" }}
      >
        <div
          style={{
            margin: "0 auto",
            maxWidth: "72rem",
            display: "grid",
            gap: "1rem",
            gridTemplateColumns: "repeat(auto-fit, minmax(16rem, 1fr))",
          }}
        >
          <PixelCard />
          <PixelCard />
          <PixelCard />
        </div>
      </section>
      <BayerDitherBackground className="mx-6 md:mx-10">
        <div style={{ minHeight: "160px" }} aria-hidden="true" />
      </BayerDitherBackground>
      <StatsCounter />
      <NotFoundTerminal />
      <FooterMinimal />
    </main>
  );
}