threadcount-community/components/LegalDoc.tsx

import Link from "next/link";
import { CtaBand, SiteNav, body } from "@/components/site";
import { DOCS, DOC_META, type Section } from "@/lib/legal";

/** One legal document as its own page, with the others listed alongside. */
export default function LegalDoc({ name }: { name: keyof typeof DOC_META }) {
  const sections = DOCS[name] as Section[];
  return (
    <>
      <SiteNav />
      <section style={{ borderBottom: "2px solid var(--color-text)", padding: "clamp(36px,5vw,60px) 40px clamp(24px,3vw,34px)" }}>
        <div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--color-accent-700)", fontWeight: 700, display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 26, height: 2, background: "var(--color-accent)" }} />Legal
        </div>
        <h1 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: "clamp(30px,3.6vw,50px)", letterSpacing: "-0.028em", margin: "16px 0 0" }}>{name}</h1>
        <div style={{ fontSize: 12.5, color: "var(--color-neutral-700)", marginTop: 10 }}>Last updated {DOC_META[name].updated} · Applies to the ThreadCount uniform management application</div>
        <div style={{ display: "flex", gap: 8, marginTop: 20, flexWrap: "wrap" }}>
          {Object.entries(DOC_META).map(([k, m]) => (
            <Link key={k} href={m.path} className={"btn " + (k === name ? "btn-primary" : "btn-secondary")} style={{ minHeight: 32 }}>{k}</Link>
          ))}
        </div>
      </section>

      <section style={{ borderBottom: "2px solid var(--color-text)" }}>
        <div style={{ padding: "10px 40px 56px", maxWidth: 860 }}>
          {sections.map((s) => (
            <div key={s.h} style={{ marginTop: 32 }}>
              <h2 style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 19, margin: 0 }}>{s.h}</h2>
              {s.ps.map((p, i) => <p key={i} style={{ ...body, fontSize: 14.5, margin: "10px 0 0", textWrap: "pretty" as never }}>{p}</p>)}
              {s.list && (
                <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 8 }}>
                  {s.list.map((li, i) => (
                    <div key={i} style={{ display: "flex", gap: 12, fontSize: 14.5, lineHeight: 1.6, color: "var(--color-neutral-800)" }}>
                      <span style={{ width: 7, height: 7, background: "var(--color-accent)", flex: "none", marginTop: 7 }} /><span>{li}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
          <div style={{ marginTop: 44, border: "2px solid var(--color-text)", padding: "20px 24px" }}>
            <div style={{ fontFamily: "var(--font-heading)", fontWeight: 800, fontSize: 15 }}>Questions about this document?</div>
            <div style={{ fontSize: 14, lineHeight: 1.6, color: "var(--color-neutral-800)", marginTop: 6 }}>
              Contact your facility&rsquo;s uniform coordinator, or <Link href="/contact" style={{ fontWeight: 700 }}>write to ThreadCount</Link>. Nothing here limits rights you hold under the Privacy Act 1988 (Cth) or the privacy legislation of your state or territory.
            </div>
          </div>
        </div>
      </section>
      <CtaBand />
    </>
  );
}