// jsx/CompliancePage.jsx — "Security and compliance" trust page.
// Frameworks Zarco is WORKING TOWARDS (not yet certified). Each badge loads the
// official logo from assets/compliance/<file>; until that file exists it falls
// back to a clean labelled placeholder. Drop the official artwork in and re-bake.
//
// ⚠️ Honesty: the page states plainly that Zarco is not yet certified. Keep that
// framing whatever logos are shown.

const FRAMEWORKS = [
  { name: "Cyber Essentials",      logo: "cyber-essentials.svg",      blurb: "The UK government-backed baseline for everyday cyber hygiene." },
  { name: "Cyber Essentials Plus", logo: "cyber-essentials-plus.svg", blurb: "The hands-on, independently tested tier of Cyber Essentials." },
  { name: "ISO/IEC 27001",         logo: "iso-27001.svg",             blurb: "The international standard for managing information security." },
  { name: "SOC 2",                 logo: "soc-2.svg",                 blurb: "Independent attestation of our security controls over time." },
];

const APPROACH = [
  { h: "Least privilege by default", d: "People and agents get the minimum access they need, and every integration is scoped to the job." },
  { h: "A human on what matters", d: "Agents draft and prepare; a person approves anything that leaves the building, and every run is logged." },
  { h: "Data minimisation", d: "We collect only what a task needs, keep it only as long as it is useful, and never sell it." },
  { h: "UK-first data handling", d: "Built and run for UK businesses, with providers chosen for appropriate data safeguards." },
];

function CertMark({ logo, name }) {
  const [failed, setFailed] = React.useState(false);
  // Until an official badge file is dropped into assets/compliance/, show a
  // neutral shield emblem. This is deliberately NOT a recreation of the
  // official certified mark (Zarco isn't certified yet) — swap the real file
  // in once each certification is held.
  if (failed) {
    return (
      <span className="cert-emblem" role="img" aria-label={name}>
        <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" aria-hidden="true">
          <path d="M24 4 40 10 40 23C40 33 33 40.5 24 44 15 40.5 8 33 8 23L8 10Z" strokeWidth="2" strokeLinejoin="round" />
          <path d="M16.5 24 21.5 29 31.5 18" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
    );
  }
  return (
    <img className="cert-img" src={"assets/compliance/" + logo} alt={name + " logo"} onError={() => setFailed(true)} />
  );
}

function CompliancePage() {
  return (
    <React.Fragment>
      <TopNav />
      <main className="cmp">
        <div className="shell">
          <header className="cmp-head">
            <p className="cmp-kicker">Security and compliance</p>
            <h1 className="cmp-title">Built to be trusted.</h1>
            <p className="cmp-intro">
              Security is not something we bolt on at the end. We are building Zarco to recognised
              standards from the start, and we are actively working towards the certifications below.
              To be clear: we are not yet certified. We will mark each one as earned the moment it is.
            </p>
          </header>

          <section className="cmp-certs" aria-label="Certifications we are working towards">
            {FRAMEWORKS.map((f) => (
              <div className="cert" key={f.name}>
                <div className="cert-logo"><CertMark logo={f.logo} name={f.name} /></div>
                <h2 className="cert-name">{f.name}</h2>
                <p className="cert-blurb">{f.blurb}</p>
                <span className="cert-status"><span className="cert-status-dot" aria-hidden="true"></span>Working towards</span>
              </div>
            ))}
          </section>

          <section className="cmp-approach">
            <h2 className="cmp-approach-h">How we work in the meantime</h2>
            <div className="cmp-approach-grid">
              {APPROACH.map((a) => (
                <div className="cmp-app" key={a.h}>
                  <h3>{a.h}</h3>
                  <p>{a.d}</p>
                </div>
              ))}
            </div>
          </section>

          <p className="cmp-foot">
            Want our current security posture in writing? Email <a href="mailto:luke@zarco.uk">luke@zarco.uk</a>.
          </p>
        </div>
      </main>
      <Footer />
    </React.Fragment>
  );
}

const complianceCss = `
.cmp{ padding: clamp(120px,18vh,184px) 0 clamp(72px,11vh,128px); }
.cmp-head{ max-width: 60ch; margin-bottom: clamp(44px,6.5vh,76px); }
.cmp-kicker{ font-family:var(--font-sans); font-size:13px; color:var(--magenta); font-weight:500; margin:0 0 14px; }
.cmp-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(40px,6.2vw,76px); letter-spacing:-.03em; line-height:1; margin:0 0 20px; }
.cmp-intro{ font-size:19px; line-height:1.62; color:var(--ink-60); margin:0; }

.cmp-certs{ display:grid; grid-template-columns: repeat(auto-fit, minmax(232px,1fr)); gap:18px; margin-bottom: clamp(56px,9vh,108px); }
.cert{ border:1px solid var(--ink-10); border-radius:18px; padding:26px 24px; background:var(--paper); display:flex; flex-direction:column; gap:14px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.cert:hover{ border-color:var(--ink-20); box-shadow:0 22px 44px -30px rgba(14,14,14,.28); transform:translateY(-2px); }
.cert-logo{ height:60px; display:flex; align-items:center; }
.cert-img{ max-height:60px; max-width:148px; width:auto; object-fit:contain; }
.cert-emblem{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; color:var(--ink); }
.cert-emblem svg{ width:46px; height:46px; }
.cert-name{ font-family:var(--font-display); font-weight:400; font-size:19px; letter-spacing:-.01em; margin:2px 0 0; color:var(--ink); }
.cert-blurb{ font-size:14.5px; line-height:1.55; color:var(--ink-60); margin:0; flex:1; }
.cert-status{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-60); font-weight:500; margin-top:2px; }
.cert-status-dot{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--ink-40); box-sizing:border-box; flex-shrink:0; }

.cmp-approach{ border-top:1px solid var(--ink-10); padding-top: clamp(40px,6vh,64px); }
.cmp-approach-h{ font-family:var(--font-display); font-weight:300; font-size:clamp(26px,3.4vw,40px); letter-spacing:-.02em; line-height:1.05; margin:0 0 clamp(28px,4vh,40px); }
.cmp-approach-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:30px 48px; max-width:1000px; }
.cmp-app h3{ font-family:var(--font-sans); font-weight:600; font-size:17px; margin:0 0 8px; color:var(--ink); }
.cmp-app p{ font-size:15.5px; line-height:1.6; color:var(--ink-60); margin:0; max-width:46ch; }

.cmp-foot{ margin-top:clamp(48px,7vh,72px); padding-top:24px; border-top:1px solid var(--ink-10); font-size:15px; color:var(--ink-60); }
.cmp a{ color:var(--magenta); text-decoration:none; border-bottom:1px solid var(--ink-10); padding-bottom:1px; }
.cmp a:hover{ border-color:var(--magenta); }
@media (max-width:680px){ .cmp-approach-grid{ grid-template-columns:1fr; gap:24px; } }
`;

window.CompliancePage = CompliancePage;
window.complianceCss = complianceCss;