// Compliance.jsx — compliance & accreditation; tech stack
function MsoCompliance() {
  const items = [
    { name: "CLIA", desc: "Clinical Laboratory Improvement Amendments" },
    { name: "CAP-accredited", desc: "College of American Pathologists" },
    { name: "HIPAA", desc: "Privacy, security, breach notification" },
    { name: "OSHA", desc: "Bloodborne pathogen & lab safety" },
    { name: "SOC 2 Type II", desc: "Security, availability, confidentiality" },
    { name: "State licensure", desc: "Per-state laboratory & professional licenses" },
  ];

  const stack = [
    "Proprietary LIS", "Digital pathology imaging", "Pathologist-facing EHR integrations",
    "Microsoft 365 GCC", "Cloudflare Zero Trust", "Splunk", "Auth0",
    "Encrypted off-site backup", "24/7 SOC monitoring",
  ];

  return (
    <section id="compliance" className="section section--bone">
      <div className="bg-hex-tile" />
      <div className="container">
        <div className="section__head">
          <div>
            <span className="eyebrow">Compliance & technology</span>
            <h2 style={{ marginTop: 14 }}>
              Built for inspections.<br />
              <span className="serif" style={{ color: "var(--teal-700)" }}>
                Engineered for scale.
              </span>
            </h2>
          </div>
          <p className="lede">
            Compliance is a posture, not a project. The MSO maintains the
            documentation, training, and infrastructure required across
            every state and accreditor &mdash; so each laboratory inherits
            inspection readiness on day one.
          </p>
        </div>

        <div className="compliance">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Accreditations & standards</div>
            <ul className="compliance__list">
              {items.map((it) => (
                <li key={it.name}>
                  <span className="compliance__name">{it.name}</span>
                  <span className="compliance__desc">{it.desc}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Platform stack</div>
            <p style={{ color: "var(--ink-70)", fontSize: 15.5, lineHeight: 1.6, maxWidth: "60ch" }}>
              The platform standardizes on a single, vetted stack across the
              network &mdash; selected for healthcare-grade security and
              integration depth. Specific vendor selections are finalized as
              each laboratory comes online; the categories below indicate
              the architecture we are building toward.
            </p>
            <div className="stack">
              {stack.map((s) => (<span className="stack__chip" key={s}>{s}</span>))}
            </div>
            <div className="subsidiary-note" style={{ marginTop: 24 }}>
              <strong style={{ color: "var(--teal-900)" }}>BAA & SOC2 reports.</strong>{" "}
              Business Associate Agreements and current SOC 2 Type II reports
              are available to active and prospective laboratory partners
              under NDA.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MsoCompliance });