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

import Link from "next/link";
import { CtaBand, PageHead, SiteNav, body, h3, kicker, small } from "@/components/site";
import JsonLd from "@/components/JsonLd";
import { faqPage, graph } from "@/lib/schema";
import { PRICES } from "@/lib/plan";
import { plansLive } from "@/lib/plans-live";

export const metadata = {
  title: "Questions",
  description: "Is it really free, is it only for hospitals, what does it run on, do we need scanners, how do nursing entitlements work, where is our data, and what if we stop using it.",
  alternates: { canonical: "/faq" },
};

/* [number, question, answer, plainAnswer?]
   The fourth slot exists only for the answer whose JSX can’t be serialised into
   structured data. Everything else marks up exactly the string on the page. */
const faqs = (live: boolean): [string, string, React.ReactNode, string?][] => [
  live
    ? ["01", "Is it really free?", `The software is. Run it on your own server and it costs nothing, with every feature. Hosted on threadcount.tech it is free for a room under ${PRICES.freeStaff} staff records, and $${PRICES.hostedAnnual.toLocaleString("en-AU")} a year for a facility past that — which pays for the hosting, the backups and a person who answers. It was built by a hospital uniform coordinator for their own room, and there’s no sales process attached to it.`]
    : ["01", "Is it really free?", "Yes. No licence fee, no per-device charge, no per-user charge. It was built by a hospital uniform coordinator for their own room, and there’s no sales process attached to it."],
  ["02", "Is it only for hospitals?", "No. It was built in a hospital linen room, and that is the setting it knows best, but the loop is the same anywhere uniforms go out from a shelf: an aged-care home, a day surgery, a dental or GP practice, allied health, pathology, community and home care. One thing to know up front — the screens say ward and linen room, because that is the vocabulary it was written in."],
  ["03", "What does it run on?", "Any browser, on the phones, tablets and computers the room already has, and nothing needs installing to start. Camera scanning is the one part that depends on which browser: Chrome and Edge read a barcode straight from the camera, on Android and on a computer. Safari on an iPhone or iPad, and Firefox anywhere, cannot — there you type the code or use a USB scanner."],
  ["04", "Do we need barcode scanners?", "No, though a USB scanner is the fastest thing at a counter. It works with the supplier barcodes already printed on the garment, read by that scanner or by the phone camera in a browser that supports it. If a code isn’t recognised, tell it once what the garment is and it stays bound."],
  ["05", "Can more than one person use it at a time?", "Yes. Access is per person, not per device, so the counter and the ward, wing or clinic can all be working without anyone waiting for a licence to free up."],
  ["06", "How does it handle nursing entitlements?", "Through the FTE table on the signed order form. The hours someone works propose their starting kit, and their manager can sign for more than it proposes. Nobody holds more than six sets at a time — or whatever ceiling you set — nurses included — past that it takes a hand-in or a coordinator’s recorded override. You choose which staff groups use the table; the others start on a fixed kit, or have a manager approve each set."],
  ["07", "What happens when the box arrives short?", "Receive the lines that came, and the shortfall splits automatically to a back order against the same supplier reference. Nothing has to be re-keyed."],
  ["08", "Will finance accept the export?", "The journal comes out as one debit line per cost centre against your GL account, in CSV. Most finance teams upload it directly; if yours needs a different layout, say so."],
  ["09", "Where is our data held, and who can see it?", <>Only the people you invite can see your room&rsquo;s records, and nothing is pooled with another facility. Hosting, backup and retention should be agreed with your information security team before real staff data goes in — there&rsquo;s more in <Link href="/security" style={{ fontWeight: 700 }}>Security &amp; data</Link>.</>,
   "Only the people you invite can see your room’s records, and nothing is pooled with another facility. Hosting, backup and retention should be agreed with your information security team before real staff data goes in."],
  ["10", "What if we want to stop using it?", "Every report and register exports as CSV. An admin can also download the whole facility as one backup file, every issue, order and count included. Take the data and go: there’s nothing to cancel and nothing held back."],
];

export default async function Faq() {
  const FAQS = faqs(await plansLive());
  return (
    <>
      <SiteNav />
      <JsonLd
        data={graph(
          faqPage(
            FAQS.filter(([, , a, plain]) => typeof a === "string" || plain)
              .map(([, q, a, plain]) => ({ q, a: plain ?? (a as string) })),
          ),
        )}
      />
      <PageHead kicker="Questions" title="The ones people actually ask." />

      {/* Deliberately narrower than the rest of the site. */}
      <section style={{ borderBottom: "2px solid var(--color-text)" }}>
        <div style={{ maxWidth: 1040, margin: "0 auto", padding: "clamp(28px,4vw,44px) 40px clamp(48px,6vw,72px)" }}>
          {FAQS.map(([n, q, a]) => (
            <div key={n} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 20, padding: "34px 0", borderBottom: "1px solid var(--color-divider)" }}>
              <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15, color: "var(--color-neutral-600)" }}>{n}</div>
              <div>
                <h2 style={{ ...h3, fontSize: "clamp(19px,2vw,25px)", margin: 0 }}>{q}</h2>
                <p style={{ ...body, margin: "10px 0 0", maxWidth: "66ch" }}>{a}</p>
              </div>
            </div>
          ))}
          <div style={{ marginTop: 40, border: "2px solid var(--color-text)", padding: "26px 30px 30px" }}>
            <div style={kicker}>Something not covered here?</div>
            <h2 style={{ ...h3, fontSize: "clamp(20px,2.2vw,27px)", marginTop: 10 }}>Ask it directly.</h2>
            <div style={{ ...small, marginTop: 8, maxWidth: "56ch" }}>Replies come from the person who built the thing, so the answer will be straight.</div>
            <Link href="/contact" className="btn btn-primary" style={{ marginTop: 20, display: "inline-block" }}>Ask a question</Link>
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  );
}