import type { Metadata } from "next";
import { Button, Section, SectionHeading, Eyebrow } from "@/components/ui";
import { Icon } from "@/components/icons";
import { Reveal } from "@/components/reveal";
import { CtaBand } from "@/components/cta-band";

export const metadata: Metadata = {
  title: "Recruitment — For Employers",
  description:
    "Hire vetted, reference-checked talent on your terms. Phina Consultants manages sourcing, structured interviews and background checks so you can focus on the decision.",
};

const steps = [
  { title: "Brief", body: "We scope the role, must-have competencies and the outcomes for year one." },
  { title: "Source", body: "Targeted sourcing and headhunting across our network and channels." },
  { title: "Shortlist", body: "Structured interviews and assessments — you see 3–5 strong, checked candidates." },
  { title: "Place", body: "We manage the offer, references and onboarding hand-off." },
];

const outcomes = [
  "Reduced time-to-hire",
  "Improved candidate quality",
  "Cost savings",
  "Increased productivity",
];

export default function EmployersPage() {
  return (
    <>
      <section className="bg-ink-900 text-white">
        <div className="container-page py-16 lg:py-20">
          <Eyebrow tone="invert">Recruitment · Employers</Eyebrow>
          <h1 className="mt-5 max-w-3xl font-display text-4xl font-bold leading-[1.12] tracking-tight sm:text-5xl">
            Hire vetted talent, on your terms
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-300">
            We aim for the best, most cost-effective staff. Phina Consultants manages the
            parts of hiring that slow teams down — sourcing, structured interviews and
            background checks — so you can focus on the decision that matters.
          </p>
          <Button href="/request-quote" variant="light" withArrow className="mt-8">
            Send us a brief
          </Button>
        </div>
      </section>

      <Section tone="white">
        <SectionHeading eyebrow="Our process" title="From brief to placement" align="center" />
        <ol className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {steps.map((s, i) => (
            <li key={s.title} className="rounded-2xl border border-ink-100 bg-cream p-6 shadow-card">
              <span className="font-display text-2xl font-bold text-brand-300">
                {String(i + 1).padStart(2, "0")}
              </span>
              <h3 className="mt-2 font-display text-base font-bold text-ink-900">{s.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-ink-600">{s.body}</p>
            </li>
          ))}
        </ol>
      </Section>

      <Section tone="cream">
        <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
          <div>
            <Eyebrow>Why it works</Eyebrow>
            <h2 className="mt-4 font-display text-3xl font-bold tracking-tight text-ink-900">
              Fewer vendors, better hires
            </h2>
            <p className="mt-4 leading-relaxed text-ink-600">
              Recruitment, background checks and immigration under one roof means a
              candidate can be sourced, screened and — where needed — permitted to work in
              Kenya without you managing three suppliers.
            </p>
            <Button href="/services#recruitment" variant="secondary" withArrow className="mt-6">
              Recruitment service details
            </Button>
          </div>
          <Reveal>
            <div className="rounded-3xl bg-brand-700 p-8 text-white shadow-card">
              <p className="text-sm font-semibold uppercase tracking-[0.14em] text-brand-200">
                What clients see
              </p>
              <div className="mt-5 grid grid-cols-2 gap-5">
                {outcomes.map((o) => (
                  <div key={o}>
                    <Icon name="check" className="h-5 w-5 text-brand-200" />
                    <p className="mt-1.5 text-sm text-brand-50">{o}</p>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </Section>

      <CtaBand
        title="Tell us who you need"
        subtitle="Share the role and we will come back with a plan and timeline."
      />
    </>
  );
}