/* Compliance — regulatory framework table */

const FRAMEWORKS = [
  {
    id: "REG / 01",
    name: "EU AI Act",
    desc: "Risk classification, conformity assessment, technical documentation and post-market monitoring for high-risk systems.",
    status: "Active",
  },
  {
    id: "REG / 02",
    name: "ISO/IEC 42001",
    desc: "AI Management System (AIMS). Policy framework, role assignment, risk treatment and continual improvement.",
    status: "Active",
  },
  {
    id: "REG / 03",
    name: "NIST AI RMF 1.0",
    desc: "Govern · Map · Measure · Manage. Functional alignment for trustworthy AI across the system lifecycle.",
    status: "Active",
  },
  {
    id: "REG / 04",
    name: "ISO/IEC 23894",
    desc: "AI-specific risk management guidance. Used in conjunction with ISO 31000 risk frameworks.",
    status: "Active",
  },
  {
    id: "REG / 05",
    name: "GDPR & UK GDPR",
    desc: "DPIA, lawful basis, automated decision-making, data minimisation and Article 22 obligations.",
    status: "Active",
  },
  {
    id: "REG / 06",
    name: "SOC 2 / ISO 27001",
    desc: "Information security controls. Required surface for enterprise procurement and assurance teams.",
    status: "Active",
  },
];

function Compliance() {
  return (
    <section id="compliance">
      <div className="page">
        <div className="section-head">
          <div className="index">
            <span className="dot"></span>06 / Governance &amp; Compliance
          </div>
          <div>
            <h2>
              Regulation is engineered <span className="serif-italic">in</span>.
              <br />
              Not bolted&nbsp;on.
            </h2>
            <p className="lede">
              Every engagement begins with a written compliance map covering
              all applicable frameworks. Documentation, evaluation evidence,
              and risk treatments are produced as deliverables throughout
              the engagement, not retrospectively at audit.
            </p>
          </div>
        </div>

        <div className="compliance-wrap">
          <aside className="compliance-callout">
            <div className="kicker">
              <span>Statement</span>
              <span>R-C / 2026</span>
            </div>
            <h3>
              ROZUMCODE delivers against the highest applicable&nbsp;standard.
            </h3>
            <p>
              ROZUMCODE operates under a written AI policy aligned to ISO/IEC
              42001 and the NIST AI Risk Management Framework. Changes to the
              EU AI Act and to UK regulatory positions are tracked continuously
              and reflected in deliverables as they come into effect.
            </p>
            <div
              style={{
                marginTop: 12,
                borderTop: "1px solid var(--g-15)",
                paddingTop: 18,
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 16,
              }}
            >
              <div>
                <div className="mono-sm" style={{ color: "var(--g-55)" }}>Jurisdiction</div>
                <div className="mono-lg" style={{ marginTop: 6 }}>UK · EU · UAE · US</div>
              </div>
              <div>
                <div className="mono-sm" style={{ color: "var(--g-55)" }}>Re-attestation</div>
                <div className="mono-lg" style={{ marginTop: 6 }}>Quarterly</div>
              </div>
            </div>
            <a
              href="mailto:info@rozumcode.com"
              className="btn"
              style={{ marginTop: 8, alignSelf: "flex-start" }}
            >
              Request compliance pack <span className="arrow"></span>
            </a>
          </aside>

          <div>
            <div
              className="mono-sm"
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginBottom: 10,
                color: "var(--g-55)",
                gap: 12,
                flexWrap: "wrap",
                whiteSpace: "nowrap",
              }}
            >
              <span>Framework register · 06 active</span>
              <span>Last review · 14 May 2026</span>
            </div>

            <div className="framework-table">
              {FRAMEWORKS.map((f) => (
                <div className="framework-row" key={f.id}>
                  <div className="id">{f.id}</div>
                  <div className="name">{f.name}</div>
                  <div className="desc">{f.desc}</div>
                  <div className="status">{f.status}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Compliance });