import type { Metadata } from "next";
import PageHero from "@/components/site/PageHero";
import WorkGrid from "@/components/site/WorkGrid";
import CTABand from "@/components/site/CTABand";

export const metadata: Metadata = {
  title: "Selected Work",
  description:
    "Representative engagements across the Saudi economy — core banking modernization, sovereign cloud migration, NCA ECC security programs, national fleet platforms, and Arabic-first commerce.",
  alternates: { canonical: "/work" },
};

export default function WorkPage() {
  return (
    <>
      <PageHero
        eyebrow="Selected work"
        titleLines={["Representative engagements", "across the Saudi economy."]}
        lede="A sample of the platforms, migrations, and security programs our teams deliver. Client names are withheld under NDA; the numbers are the kind we sign up for."
      />
      <section className="weave-dark py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <WorkGrid />
        </div>
      </section>
      <CTABand
        title="Your sector is here somewhere."
        arabic="قصتك القادمة"
        body="Banking, health, government, retail, logistics — the pattern repeats: a hard constraint, an engineering answer, a number that moved. Tell us yours."
        primaryLabel="Start your case study"
      />
    </>
  );
}