import Link from "next/link";
import { Band, CtaBand, PageHead, SiteNav, body, small } from "@/components/site";

export const metadata = {
  title: "Guides",
  description:
    "Notes on running a linen room — hospital, aged care or clinic: stocktakes that produce a usable number, where uniforms actually go, charging spend to the right ward, and entitlements that hold up.",
  alternates: { canonical: "/guides" },
};

/* Written for the person doing the job, not for the person buying software. Each of these is
   useful with a clipboard and no product at all — which is the only reason anyone would link to
   them. */
export const GUIDES: [string, string, string][] = [
  [
    "/guides/uniform-stocktake",
    "How to run a uniform stocktake",
    "What to count, how to split a room into shelves, what to do about garments at the laundry, and how to record a variance so the number still means something a month later.",
  ],
  [
    "/guides/uniform-loss",
    "Where the uniforms actually go",
    "Loss is rarely theft. Leavers nobody closed off, sizes swapped at the shelf, laundry that never came back, damage never written off — and how to tell them apart.",
  ],
  [
    "/guides/cost-centre-reporting",
    "Charging uniforms to the right cost centre",
    "Capturing the cost centre at the counter, valuing an issue defensibly, and producing a journal finance will actually accept.",
  ],
  [
    "/guides/manager-approvals",
    "Entitlements and manager approvals",
    "Writing the entitlement down, prorating part-time hours honestly, recording an approval that carries its own evidence, and what to do when someone asks for more.",
  ],
];

export default function Guides() {
  return (
    <>
      <SiteNav />
      <PageHead
        kicker="Guides"
        title="How the job is actually done."
        lede="Notes from running a hospital linen room. What follows works the same in an aged-care home, a day surgery or a clinic cupboard. No product required — take the method and use a clipboard if that is what you have."
      />

      <Band>
        {GUIDES.map(([href, title, blurb], i) => (
          <Link
            key={href}
            href={href}
            style={{ textDecoration: "none", color: "var(--color-text)", display: "grid", gridTemplateColumns: "44px 1fr", gap: 20, padding: "32px 0", borderBottom: "1px solid var(--color-divider)" }}
          >
            <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, color: "var(--color-neutral-600)" }}>
              {String(i + 1).padStart(2, "0")}
            </div>
            <div>
              <h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(20px,2.2vw,28px)", letterSpacing: "-0.02em", margin: 0 }}>
                {title}
              </h2>
              <p style={{ ...body, margin: "10px 0 0", maxWidth: "64ch" }}>{blurb}</p>
            </div>
          </Link>
        ))}
        <p style={{ ...small, margin: "26px 0 0", maxWidth: "58ch" }}>
          Something missing that you had to work out the hard way?{" "}
          <Link href="/contact" style={{ fontWeight: 700 }}>Tell us</Link> and it will get written up.
        </p>
      </Band>

      <CtaBand />
    </>
  );
}