Recruitment funnel

import { Badge, FunnelChart, MetricMini } from "@nexera-ui/react";

// Q3 2026 hiring at Northwind: every candidate who applied to one of the 14 open roles.
const STAGES = [
  { name: "Applied", value: 1240 },
  { name: "Screened", value: 486 },
  { name: "Interviewed", value: 168 },
  { name: "Offered", value: 26 },
  { name: "Hired", value: 18 },
];

const ROLES = [
  {
    title: "Senior backend engineer",
    team: "Engineering",
    applicants: 214,
    stage: "Final interviews",
    tone: "info",
  },
  {
    title: "Customer success manager",
    team: "Customer",
    applicants: 132,
    stage: "Offer sent",
    tone: "success",
  },
  {
    title: "Payroll specialist",
    team: "People Ops",
    applicants: 58,
    stage: "Screening",
    tone: "neutral",
  },
  { title: "Product designer", team: "Design", applicants: 187, stage: "Paused", tone: "warning" },
] as const;

/** Recruitment funnel: candidates at each hiring stage this quarter, the drop-off between stages and the open roles behind them. */
export default function RecruitmentFunnel() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-6xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Recruitment funnel</h2>
          <p className="text-body-default text-secondary">Q3 2026 · 14 open roles across 6 teams</p>
        </header>

        <div className="grid grid-cols-2 gap-4 rounded-lg border border-default bg-surface p-4 @3xl:grid-cols-4 @3xl:p-6">
          <MetricMini label="Hires" value="18" caption="Target 20 this quarter" />
          <MetricMini label="Time to hire" value="32 days" caption="Median, application to offer" />
          <MetricMini label="Offer acceptance" value="69%" caption="18 of 26 offers" />
          <MetricMini label="Cost per hire" value="$4,850" caption="Agency fees and ads" />
        </div>

        <div className="grid gap-4 @5xl:grid-cols-[3fr_2fr]">
          <FunnelChart
            title="Candidates by stage"
            description="Share shown is the conversion from the stage before"
            summary="1,240 people applied and 18 were hired, 1.5% overall. The biggest drop is from interview to offer, where 85% do not move on."
            stages={STAGES}
            valueLabel="Candidates"
          />
          <section
            aria-labelledby="open-roles"
            className="grid content-start gap-3 rounded-lg border border-default bg-surface p-4 @3xl:p-6"
          >
            <h3 id="open-roles" className="text-heading-h4 text-primary">
              Busiest open roles
            </h3>
            <ul className="grid divide-y divide-subtle">
              {ROLES.map((role) => (
                <li
                  key={role.title}
                  className="flex flex-wrap items-center justify-between gap-2 py-3"
                >
                  <div className="grid min-w-0">
                    <a
                      href="#open-role"
                      className="text-body-strong text-primary underline underline-offset-4"
                    >
                      {role.title}
                    </a>
                    <span className="text-body-small text-muted">
                      {role.team} · {role.applicants} applicants
                    </span>
                  </div>
                  <Badge label={role.stage} tone={role.tone} />
                </li>
              ))}
            </ul>
          </section>
        </div>
      </div>
    </div>
  );
}