threadcount-community/app/(site)/features/page.tsx

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

export const metadata = {
  title: "Features",
  description: "Nine things a linen room does every day, in a hospital, an aged-care home or a clinic: scanning, the pickup call list, supplier orders, stocktakes, allowances set per staff group, roles, staff records, catalogue and suppliers.",
  alternates: { canonical: "/features" },
};

const FEATURES = [
  { n: "02", t: "The pickup call list", b: "Staff orders that have arrived queue by days waiting. Ring them, mark them contacted, print the collection slip, tick them off when they take it." },
  { n: "03", t: "Orders you can trace back", b: "Supplier order number, invoice, tracking, what actually turned up on each line, a purchase order you can print, and a back order raised for whatever the box was short." },
  { n: "04", t: "Stocktakes that stay filed", b: "Scan to count, with a blind mode when you would rather not see the system figure while you count. Variances in dollars as you go, and each count kept with the date, who counted, and every line that moved." },
  { n: "05", t: "Three routes, one ceiling", b: "Name your own staff groups and give each one a route. On the FTE table, the hours someone works propose their starting kit and a manager can sign for more. On a starting kit, they get a fixed number of sets on day one and more as they need them. On manager approval, a manager signs for each set. Every route stops at six sets held at any one time, unless you set a different figure. Past it takes a hand-in or a coordinator’s recorded override." },
  { n: "06", t: "Two roles, and only two", b: "Admins look after settings, staff, the catalogue, suppliers and prices. Issuers issue, count and receive. Nobody edits a price or a past issue by accident, because Issuers simply can’t." },
  { n: "07", t: "Staff records with size history", b: "Every staff member carries their ward or clinic, cost centre, staff group and the sizes they were last issued, so the second visit takes seconds." },
  { n: "08", t: "Catalogue and suppliers together", b: "Garments, sizes, unit costs and supplier codes live in one place. Change a price once and every future issue values correctly — past issues keep the price they were recorded at." },
  { n: "09", t: "Nothing to install", b: "It runs in the browser on the devices the room already has. Chrome and Edge — on Android and on a computer — read garment barcodes straight from the camera with nothing extra installed. On an iPhone or iPad, and in Firefox, the code is typed or read with a USB scanner." },
];

export default function Features() {
  return (
    <>
      <SiteNav current="features" />
      <PageHead
        kicker="Features"
        tone="ink"
        title="Built for a busy Monday morning."
        right={<p style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--color-neutral-200)", maxWidth: "42ch", margin: 0 }}>Nine things the room actually does every day, and nothing it doesn&rsquo;t. No modules to buy, and no setting up before you can issue a scrub top.</p>}
      />

      <Band pad="0 40px 0">
        {/* Row 01 is the emphasised one — bigger numeral, its own kicker. */}
        <div className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "110px 1fr 1.1fr", gap: 32, padding: "48px 0 44px", borderBottom: "1px solid var(--color-divider)" }}>
          <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 56, lineHeight: 1, color: "var(--color-accent)" }}>01</div>
          <div>
            <div style={kicker}>The difference</div>
            <h2 style={{ ...h3, fontSize: "clamp(22px,2.4vw,30px)", marginTop: 8 }}>Scan-first, at the counter and out on the floor</h2>
          </div>
          <p style={{ ...body, margin: 0, maxWidth: "52ch" }}>It reads the barcodes already printed on the garment labels, using a USB scanner at the counter, or your phone camera out on a ward, a wing or a clinic room in a browser that can read one — Chrome and Edge can; Safari on an iPhone or iPad cannot. Scan something it doesn&rsquo;t know and you tell it once what it is; after that it just knows. Issuing, counting and receiving are all the same scan.</p>
        </div>

        {FEATURES.map((f) => (
          <div key={f.n} className="tcm-rowgrid" style={{ display: "grid", gridTemplateColumns: "110px 1fr 1.1fr", gap: 32, padding: "34px 0", borderBottom: "1px solid var(--color-divider)" }}>
            <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 40, lineHeight: 1, color: "var(--color-neutral-600)" }}>{f.n}</div>
            <h2 style={{ ...h3, fontSize: "clamp(19px,2vw,25px)", margin: 0 }}>{f.t}</h2>
            <p style={{ ...body, fontSize: 15.5, margin: 0, maxWidth: "52ch" }}>{f.b}</p>
          </div>
        ))}
        <div style={{ height: 24 }} />
      </Band>

      {/* Slips band with the recreated collection slip */}
      <Band tone="surface">
        <div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <h2 style={h2}>Slips come out filled in.</h2>
            <p style={{ ...body, marginTop: 18, maxWidth: "46ch" }}>Collection slips, ward delivery notes and the credit slips against a manager&rsquo;s approval print with the staff member, ward, sets and order reference already on them. Whoever takes the round can sign the paper, or sign on screen when you hand it over; an on-screen signature is kept with that delivery and deleted with it.</p>
          </div>
          <div style={{ border: "2px solid var(--color-text)", background: "var(--color-bg)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 16px", borderBottom: "2px solid var(--color-text)" }}>
              <b style={{ fontSize: 13 }}>Collection slip — 04 Sep 2026</b><span className="tag tag-outline">Print</span>
            </div>
            <div style={{ padding: "14px 16px", fontSize: 13 }}>
              {[["Staff", "M. Whitfield, RN"], ["Ward", "3A · cost centre RGH-3010"], ["Approved sets", "3 of 5 · manager’s approval on file"]].map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "6px 0", borderBottom: "1px solid var(--color-divider)" }}><span style={{ color: "var(--color-neutral-700)" }}>{k}</span><b>{v}</b></div>
              ))}
              <div style={{ marginTop: 12 }}>
                {[["RN Active Scrub Top · M ×2", "From stock", false], ["Elastic Waist Scrub Pant · M ×2", "From stock", false], ["Softshell Jacket · M ×1", "Order in", true]].map(([n, s, red]) => (
                  <div key={String(n)} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "6px 0", borderBottom: "1px solid var(--color-divider)" }}><span>{n}</span><b style={red ? { color: "var(--color-accent-700)" } : undefined}>{s}</b></div>
                ))}
              </div>
              <div style={{ marginTop: 18, color: "var(--color-neutral-700)" }}>Signature ______________________</div>
            </div>
          </div>
        </div>
      </Band>

      <Band>
        <div className="tcm-split" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center" }}>
          <div>
            <h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)" }}>See it running with demonstration data.</h2>
            <div style={{ ...small, marginTop: 10 }}>A stocked shelf, staff on the register, orders open and three months of history behind it.</div>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Link href="/demo" data-umami-event="open-demo" data-umami-event-placement="features" className="btn btn-primary">Open the working demo</Link>
            <Link href="/how-it-works" className="btn btn-secondary">How it works</Link>
          </div>
        </div>
      </Band>

      <CtaBand />
    </>
  );
}