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

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

export default function AboutPage() {
  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-tertiary">
          02 // PROFILE
        </span>
        <h1 className="mb-8 font-headline text-5xl font-bold tracking-tighter md:text-7xl">
          About
        </h1>
        <p className="max-w-3xl font-body text-xl text-on-surface-variant">
          Engineering growth through technological mastery and strategic
          leadership. Content sourced from Payload CMS (global:{" "}
          <code className="font-label text-primary">about</code>) — populated on
          first publish.
        </p>
      </main>
      <SiteFooter />
    </>
  );
}