threadcount-community/app/(site)/how-it-works/page.tsx

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

export const metadata = {
  title: "How it works",
  description: "Issue, replenish, receive — the three steps a linen room runs on, in a hospital, an aged-care home or a clinic, and what a morning at the counter actually looks like.",
  alternates: { canonical: "/how-it-works" },
};

const STEPS = [
  { n: "1", t: "Issue", b: "Scan the garment, pick the staff member, record it. Their ward or wing, cost centre, allowance route and last-issued sizes are already on the record, so a repeat visit takes seconds.", h: "What happens behind it", d: ["Nobody goes past six sets held without a recorded override", "A manager’s signed approval draws down as sets go over", "A credit slip prints for the rest of what was signed for", "The issue values at unit cost against the ward or clinic"] },
  { n: "2", t: "Replenish", b: "Every shelf issue feeds a draft supplier order, grouped by supplier. Review it, add the supplier’s order number, send. Nothing you issue goes unreplaced.", h: "What you get", d: ["A draft built from real movement, not guesswork", "Reorder flags before a size runs out", "A printable purchase order with your codes", "Order number, invoice and tracking held together"] },
  { n: "3", t: "Receive", b: "Tick lines off the box as they arrive. Price-check against the order, then send each line to the shelf or to a staff pickup.", h: "And when the box is short", d: ["Shorts split to a back order automatically", "Staff lines join the pickup call list", "Shelf lines update on-hand immediately", "The variance against the invoice is recorded"] },
];

const DAY = [
  ["07:40", "Open the dashboard. Three orders open, one overdue at six days, seven sizes at or below reorder."],
  ["08:05", "Two nurses at the counter. Scan, pick, issue — both walk away with their sets and a printed slip."],
  ["09:30", "A box arrives. Receive it line by line, one item short; the back order writes itself."],
  ["11:00", "Work the pickup call list — two wards and the day-surgery unit. Mark contacted, print collection slips for the ones coming down."],
  ["14:15", "Review the draft replenishment order, add the supplier’s reference, send."],
  ["16:20", "Month end approaching: run the cost centre report and the journal CSV, ready for finance."],
];

export default function HowItWorks() {
  return (
    <>
      <SiteNav current="how" />
      <PageHead
        kicker="How it works"
        title="Three steps, and the loop closes."
        lede="Issue, replenish, receive. Nothing leaves the shelf without a replacement drafted, and nothing arrives without a line to tick it against."
      />

      <Band pad="0 40px 0">
        {STEPS.map((s) => (
          <div key={s.n} className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "180px 1fr 1fr", gap: 40, padding: "48px 0", borderBottom: "1px solid var(--color-divider)" }}>
            <div>
              <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(64px,8vw,120px)", lineHeight: 0.9, color: "var(--color-accent)" }}>{s.n}</div>
              <div style={{ width: 60, height: 4, background: "var(--color-text)", marginTop: 14 }} />
            </div>
            <div>
              <h2 style={{ ...h3, margin: 0 }}>{s.t}</h2>
              <p style={{ ...body, margin: "12px 0 0", maxWidth: "44ch" }}>{s.b}</p>
            </div>
            <div style={{ borderLeft: "2px solid var(--color-text)", paddingLeft: 28 }}>
              <div style={{ ...kicker, color: "var(--color-neutral-700)" }}>{s.h}</div>
              <div style={{ marginTop: 12 }}>
                {s.d.map((d) => (
                  <div key={d} style={{ display: "flex", gap: 12, padding: "7px 0", fontSize: 15, lineHeight: 1.6, color: "var(--color-neutral-800)" }}>
                    <span style={{ width: 7, height: 7, background: "var(--color-accent)", flex: "none", marginTop: 8 }} />{d}
                  </div>
                ))}
              </div>
            </div>
          </div>
        ))}
        <div style={{ height: 20 }} />
      </Band>

      {/* Full-bleed photo band */}
      <section style={{ borderBottom: "2px solid var(--color-text)", height: "clamp(300px,34vw,460px)", overflow: "hidden" }}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img className="grayscale" src="/photos/tc-photo-housekeeping.jpg" alt="" aria-hidden="true" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 40%", display: "block" }} />
      </section>

      <Band tone="surface">
        <div style={kicker}>A morning at the counter</div>
        <h2 style={{ ...h2, marginTop: 12 }}>What an ordinary Tuesday looks like.</h2>
        <div style={{ marginTop: 30 }}>
          {DAY.map(([t, w]) => (
            <div key={t} className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "140px 1fr", gap: 24, padding: "16px 0", borderBottom: "1px solid var(--color-divider)" }}>
              <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 19, color: "var(--color-accent-700)" }}>{t}</div>
              <div style={{ fontSize: 15.5, lineHeight: 1.65, color: "var(--color-neutral-800)" }}>{w}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap", alignItems: "center" }}>
          <Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="how-it-works" className="btn btn-primary">Open the working demo</Link>
          <span style={small}>Try the same flow with demonstration data.</span>
        </div>
      </Band>

      <CtaBand />
    </>
  );
}