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";
import { site } from "@/content/site";

export const metadata: Metadata = {
  title: "Recruitment — For Job Seekers",
  description:
    "Register your CV with Phina Consultants and get matched to roles that fit your skills and goals. Career coaching, interview prep and CV writing available.",
};

const steps = [
  { title: "Register your CV", body: "Send us your CV and tell us the kind of role you are looking for." },
  { title: "Screening call", body: "A consultant reviews your experience and confirms what you want next." },
  { title: "Get matched", body: "We put you forward for roles that fit — and prep you for each interview." },
  { title: "Offer & onboarding", body: "We support you through the offer, references and your first weeks." },
];

const support = [
  "CV writing and review",
  "Interview coaching",
  "LinkedIn optimization",
  "Career coaching",
  "Salary and offer guidance",
];

export default function JobSeekersPage() {
  return (
    <>
      <section className="bg-cream">
        <div className="container-page py-16 lg:py-20">
          <Eyebrow>Recruitment · Job seekers</Eyebrow>
          <h1 className="mt-5 max-w-3xl font-display text-4xl font-bold leading-[1.12] tracking-tight text-ink-900 sm:text-5xl">
            Get matched to roles that fit
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-500">
            Building a successful career starts with the right fit. Register with our
            recruitment desk and we will put your experience in front of employers who are
            hiring — with coaching to help you land the offer.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Button
              href={`mailto:${site.contact.jobsEmail}?subject=CV registration`}
              withArrow
            >
              Register your CV
            </Button>
            <Button href="/jobs" variant="secondary">
              Browse open jobs
            </Button>
          </div>
        </div>
      </section>

      <Section tone="white">
        <SectionHeading eyebrow="How it works" title="Four steps from CV to offer" 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">
          <Reveal>
            <div className="rounded-3xl border border-ink-100 bg-white p-8 shadow-card">
              <h2 className="font-display text-xl font-bold text-ink-900">
                Career support that comes with it
              </h2>
              <ul className="mt-5 space-y-3">
                {support.map((item) => (
                  <li key={item} className="flex items-start gap-2.5 text-sm text-ink-700">
                    <Icon name="check" className="mt-0.5 h-4 w-4 shrink-0 text-brand-600" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
          <div>
            <Eyebrow>Why register with us</Eyebrow>
            <h2 className="mt-4 font-display text-3xl font-bold tracking-tight text-ink-900">
              A recruiter in your corner
            </h2>
            <p className="mt-4 leading-relaxed text-ink-600">
              We only work with a shortlist of employers we trust, so the roles we put you
              forward for are real and well-matched. You get honest feedback, interview
              preparation, and someone to negotiate on your behalf.
            </p>
            <Button href="/contact" variant="secondary" withArrow className="mt-6">
              Talk to a consultant
            </Button>
          </div>
        </div>
      </Section>

      <CtaBand
        title="Ready when you are"
        subtitle="Send your CV to our recruitment desk and we will take it from there."
      />
    </>
  );
}