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

export const metadata = {
  title: "Security & data",
  description: "ThreadCount records who was issued what, which makes it a staff record. Where it lives, who can see it, and what to agree with information security first.",
  alternates: { canonical: "/security" },
};

const PILLARS = [
  { t: "Your facility’s records", b: "Every issue, count and order belongs to the facility that entered it. Nothing is pooled with another site." },
  { t: "Two roles, clear limits", b: "Admin manages settings, catalogue and pricing. Issuer issues, counts and receives. Prices and history cannot be edited by accident." },
  { t: "History is kept", b: "Issues, receipts and counts are written with the date and the person who recorded them, and stay that way." },
  { t: "Export whenever", b: "Every report and register exports as CSV, the ward request queue included. One backup file takes the whole facility out at once, so the data is never held hostage in the product." },
];

const PLAIN = [
  "Only the people you invite can see your room’s records.",
  "Staff names, the ward or clinic they work on, and cost centres are stored to run the loop, and for nothing else.",
  "No garment data is sold, shared, or used to train anything.",
  "Slips print for a signature on paper. A ward-round handover can be signed on screen instead, and that signature is stored with the delivery, shown only to your facility, and deleted with the record.",
  "Deactivating a staff member removes them from issuing while keeping the historical record intact for finance.",
  "You can export the whole facility to one file and walk away at any point.",
];

export default function Security() {
  return (
    <>
      <SiteNav />
      <PageHead
        kicker="Security and data"
        tone="accent"
        title={<span style={{ maxWidth: "17ch", display: "block" }}>It holds staff names. So it holds them carefully.</span>}
        lede="ThreadCount records who was issued what. That makes it a staff record, and it is built to be treated as one."
      />

      <Band>
        <div className="tcm-pillars tcm-2col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "2px solid var(--color-text)" }}>
          {PILLARS.map((p, i) => (
            <div key={p.t} style={{ padding: "26px 28px 30px", borderRight: i % 2 === 0 ? "1px solid var(--color-divider)" : undefined, borderBottom: i < 2 ? "1px solid var(--color-divider)" : undefined }}>
              <h3 style={{ ...h3, fontSize: 20 }}>{p.t}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--color-neutral-800)", marginTop: 10 }}>{p.b}</p>
            </div>
          ))}
        </div>
      </Band>

      <Band tone="surface">
        <div style={kicker}>In plain English</div>
        <h2 style={{ ...h2, marginTop: 12 }}>The commitments, without the certification language nobody reads.</h2>
        <div style={{ marginTop: 28 }}>
          {PLAIN.map((p) => (
            <div key={p} style={{ display: "flex", gap: 16, padding: "14px 0", borderBottom: "1px solid var(--color-divider)", fontSize: 16, lineHeight: 1.6 }}>
              <span style={{ width: 8, height: 8, background: "var(--color-accent)", flex: "none", marginTop: 8 }} />{p}
            </div>
          ))}
        </div>
      </Band>

      <Band>
        <div style={{ border: "2px solid var(--color-text)", padding: "28px 32px 32px" }}>
          <div style={kicker}>Before you deploy</div>
          <h2 style={{ ...h2, fontSize: "clamp(22px,2.6vw,34px)", marginTop: 10 }}>Take it to your information security team early.</h2>
          <p style={{ ...body, marginTop: 14, maxWidth: "58ch" }}>Hosting location, backup arrangement and retention period should be agreed with your facility before real staff data goes in — with an information security team in a hospital, or with whoever signs off on systems in a smaller practice. Ask, and you&rsquo;ll get the answers in writing.</p>
          <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
            <Link href="/contact" className="btn btn-primary">Ask a security question</Link>
            <Link href="/data-security" className="btn btn-secondary">Read the data security policy</Link>
          </div>
        </div>
      </Band>

      <CtaBand />
    </>
  );
}