import type { Metadata } from "next";
import PageHero from "@/components/site/PageHero";
import ServiceCard from "@/components/site/ServiceCard";
import CTABand from "@/components/site/CTABand";
import Marquee from "@/components/site/Marquee";
import { Reveal } from "@/components/motion/Reveal";
import { services } from "@/lib/content/services";
import { engagementModels } from "@/lib/content/company";

export const metadata: Metadata = {
  title: "Services",
  description:
    "Six practices, one accountable partner: custom software, cloud & infrastructure, managed hosting, cybersecurity, data & AI, and digital commerce — delivered in-Kingdom.",
  alternates: { canonical: "/services" },
};

export default function ServicesPage() {
  return (
    <>
      <PageHero
        eyebrow="Services"
        titleLines={["Six practices.", "One accountable partner."]}
        lede="Strategy, engineering, and operations under one roof — so nothing falls between vendors. Every practice is delivered by senior, in-Kingdom teams working in Arabic and English, with compliance mapped from day one."
      />

      <section className="weave-light on-light py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
            {services.map((s, i) => (
              <Reveal key={s.slug} delay={(i % 3) * 0.06} as="div">
                <ServiceCard service={s} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <Marquee />

      <section className="weave-panel py-[clamp(4rem,8vw,7rem)]">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <Reveal>
            <p className="eyebrow">Engagement models</p>
            <h2 className="mt-4 max-w-[720px] text-[clamp(1.9rem,3.2vw,2.8rem)] font-semibold text-thi">
              Work with us the way your organization actually buys.
            </h2>
          </Reveal>
          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {engagementModels.map((m, i) => (
              <Reveal
                key={m.title}
                delay={i * 0.07}
                as="div"
                className="rounded-xl border border-white/10 bg-ink-2 p-6"
              >
                <i
                  className="mb-4 block h-3 w-3 bg-azure [clip-path:polygon(50%_0,100%_100%,0_100%)]"
                  aria-hidden
                />
                <h3 className="text-lg font-semibold text-thi">{m.title}</h3>
                <p className="mt-2 text-[0.93rem] leading-relaxed text-tmid">{m.body}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CTABand
        title="Not sure which practice you need?"
        arabic="نحن هنا"
        body="Send us the problem, not the solution. A senior engineer will map it to the right practice — or tell you honestly if you don't need us yet."
        primaryLabel="Talk to an engineer"
      />
    </>
  );
}