import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";

export const metadata = { title: "Projects" };

export default function ProjectsIndexPage() {
  return (
    <>
      <SiteHeader />
      <main className="mx-auto max-w-7xl px-6 py-24">
        <span className="mb-6 block font-label text-xs uppercase tracking-[0.4em] text-primary">
          03 // PROJECTS
        </span>
        <h1 className="mb-8 font-headline text-5xl font-bold tracking-tighter md:text-7xl">
          Strategic Verticals
        </h1>
        <p className="max-w-3xl font-body text-xl text-on-surface-variant">
          Content sourced from Payload CMS collection{" "}
          <code className="font-label text-primary">projects</code> — rendered
          here once the bento-grid section component lands in a follow-up PR.
        </p>
      </main>
      <SiteFooter />
    </>
  );
}
