import type { Metadata } from "next";
import Link from "next/link";
import { Section, Eyebrow, Button } from "@/components/ui";
import { Icon } from "@/components/icons";
import { CtaBand } from "@/components/cta-band";
import { jobs } from "@/content/jobs";
import { site } from "@/content/site";

export const metadata: Metadata = {
  title: "Jobs",
  description:
    "Current vacancies from Phina Consultants Limited. Browse open roles and apply, or register your CV with our recruitment desk.",
};

const dateFmt = new Intl.DateTimeFormat("en-GB", {
  day: "numeric",
  month: "short",
  year: "numeric",
});

export default function JobsPage() {
  return (
    <>
      <section className="bg-cream">
        <div className="container-page py-16 lg:py-20">
          <Eyebrow>Jobs</Eyebrow>
          <h1 className="mt-5 font-display text-4xl font-bold tracking-tight text-ink-900 sm:text-5xl">
            Newest jobs
          </h1>
          <p className="mt-5 max-w-2xl text-lg leading-relaxed text-ink-500">
            We only hire the best to ensure we represent your business with the utmost
            professionalism. Browse current openings below, or send your CV to{" "}
            <a
              href={`mailto:${site.contact.jobsEmail}`}
              className="font-semibold text-brand-700 underline underline-offset-4"
            >
              {site.contact.jobsEmail}
            </a>
            .
          </p>
        </div>
      </section>

      <Section tone="white">
        {jobs.length === 0 ? (
          <div className="rounded-2xl border border-dashed border-ink-200 bg-cream p-12 text-center">
            <span className="mx-auto grid h-12 w-12 place-items-center rounded-full bg-brand-50 text-brand-700">
              <Icon name="recruitment" className="h-6 w-6" />
            </span>
            <h2 className="mt-4 font-display text-xl font-bold text-ink-900">
              No records found
            </h2>
            <p className="mx-auto mt-2 max-w-md text-sm text-ink-600">
              There are no live vacancies right now. Register your CV and we will be in
              touch when a suitable role opens.
            </p>
            <Button href="/recruitment/job-seekers" withArrow className="mt-6">
              Register your CV
            </Button>
          </div>
        ) : (
          <ul className="grid gap-5">
            {jobs.map((job) => (
              <li key={job.slug}>
                <Link
                  href={`/jobs/${job.slug}`}
                  className="group flex flex-col gap-4 rounded-2xl border border-ink-100 bg-white p-6 shadow-card transition-colors hover:border-brand-300 sm:flex-row sm:items-center sm:justify-between"
                >
                  <div>
                    <div className="flex flex-wrap items-center gap-2 text-xs font-medium text-ink-500">
                      <span className="rounded-full bg-brand-50 px-2.5 py-1 text-brand-700">
                        {job.category}
                      </span>
                      <span className="rounded-full bg-ink-50 px-2.5 py-1">{job.type}</span>
                      <span className="inline-flex items-center gap-1">
                        <Icon name="map-pin" className="h-3.5 w-3.5" />
                        {job.location}
                      </span>
                    </div>
                    <h3 className="mt-3 font-display text-lg font-bold text-ink-900 group-hover:text-brand-700">
                      {job.title}
                    </h3>
                    <p className="mt-1.5 max-w-2xl text-sm text-ink-600">{job.summary}</p>
                  </div>
                  <div className="flex shrink-0 items-center gap-3 text-sm text-ink-500">
                    <span>Posted {dateFmt.format(new Date(job.postedISO))}</span>
                    <Icon
                      name="arrow-right"
                      className="h-5 w-5 text-brand-600 transition-transform group-hover:translate-x-1"
                    />
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        )}

        <p className="mt-8 text-xs text-ink-400">
          Listings shown are representative. Contact the recruitment desk for the live
          vacancy list.
        </p>
      </Section>

      <CtaBand
        title="Hiring? Let us build the shortlist."
        subtitle="Send us a brief and we will come back with vetted, reference-checked candidates."
      />
    </>
  );
}