// ToolkitISO42001.jsx — Verigo Global: ISO 42001:2023 implementation toolkit page
const { V: T2V, MAXW: T2MW, FONT: T2FT } = window;

/* ── BREADCRUMB ──────────────────────────────────────────── */
const T2Crumb = ({ onNav }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: T2V.g500, marginBottom: 24, fontFamily: T2FT }}>
    <button onClick={() => onNav('home')} style={t2crumbBtn}>Home</button>
    <span style={{ color: T2V.g300 }}>/</span>
    <button onClick={() => onNav('toolkits')} style={t2crumbBtn}>Toolkits</button>
    <span style={{ color: T2V.g300 }}>/</span>
    <span style={{ color: T2V.purple }}>ISO 42001 Toolkit</span>
  </div>
);
const t2crumbBtn = { background: 'none', border: 'none', cursor: 'pointer', color: '#7A7A8A', fontSize: 13, fontWeight: 600, padding: 0, fontFamily: "'DM Sans', system-ui, sans-serif" };

/* ── HERO ────────────────────────────────────────────────── */
const T2Hero = ({ onNav }) => (
  <section style={{ background: T2V.g50, padding: '56px 0 64px', borderBottom: `1px solid ${T2V.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="nodes" color={T2V.purpleDark} opacity={0.16} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: T2MW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <T2Crumb onNav={onNav} />
      <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 64, alignItems: 'end' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <div style={{ width: 60, height: 60, background: T2V.purpleSubtle, color: T2V.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="layers" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={T2V.purple} bg={T2V.purpleSubtle} border={T2V.purpleSubtle}>Implementation Toolkit</window.Tag>
              <window.Tag color={T2V.g600} bg="#fff" border={T2V.g200}>ISO/IEC 42001:2023</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 60, fontWeight: 800, letterSpacing: '-0.035em', color: T2V.black, margin: '0 0 18px', lineHeight: 1.02, fontFamily: T2FT }}>
            The ISO 42001 toolkit, <span style={{ color: T2V.purple }}>ready to deploy.</span>
          </h1>
          <p style={{ fontSize: 19, color: T2V.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            A complete, practitioner-maintained document set — 18 policies, 16 procedures, and all 38 Annex A control templates — tailored to your AI systems so you build a certifiable AIMS without starting from a blank page.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <window.Btn kind="primary" onClick={() => onNav('evaluation')}>Start the readiness evaluation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
            <window.Btn kind="ghost" onClick={() => document.getElementById('downloads')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>See what's inside</window.Btn>
          </div>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${T2V.g200}`, padding: '26px', boxShadow: '0 8px 32px rgba(91,46,145,0.08)' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: T2V.g400, marginBottom: 16 }}>Inside the toolkit</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[['doc', '18', 'Approval-ready policies'], ['file', '16', 'Operational procedures'], ['layers', '38', 'Annex A control templates'], ['clipboard', '70+', 'Documents, checklists & samples']].map(([ic, n, l], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 34, height: 34, background: T2V.purpleSubtle, color: T2V.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={ic} size={18} />
                </div>
                <div style={{ fontSize: 22, fontWeight: 800, color: T2V.black, fontFamily: T2FT, letterSpacing: '-0.02em', minWidth: 46 }}>{n}</div>
                <div style={{ fontSize: 13.5, color: T2V.g600, fontWeight: 500 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── OVERVIEW ────────────────────────────────────────────── */
const T2Overview = () => (
  <window.Section bg="#fff" pad="80px 0">
    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }}>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>Overview</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: T2V.black, margin: '0 0 20px', lineHeight: 1.12, fontFamily: T2FT }}>Everything the standard asks for — pre-built and tailored.</h2>
        <p style={{ fontSize: 16.5, color: T2V.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          The Verigo ISO 42001 toolkit is the document backbone of a certifiable <strong style={{ color: T2V.black }}>AI Management System</strong>. It pairs the management-system documentation required by Clauses 4–10 with implementation templates for every one of the 38 Annex A:2023 controls.
        </p>
        <p style={{ fontSize: 16.5, color: T2V.g600, lineHeight: 1.7, margin: 0 }}>
          Each artefact is maintained by senior practitioners and tailored to your AI systems, industry, and risk appetite — then embedded into how you build and operate AI, the <strong style={{ color: T2V.black }}>Compliance by Design</strong> way, so evidence is produced by the process itself.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          ['compass', 'Tailored, not generic', 'Every policy and procedure is shaped to your AI use cases, structure, and existing tooling — not a one-size-fits-all template dump.'],
          ['network', 'Cross-framework ready', 'Controls are mapped so ISO 27001 evidence accelerates ISO 42001, and vice versa, without duplication.'],
          ['refresh', 'Maintained for the 2023 edition', 'Aligned to ISO/IEC 42001:2023, including the full nine-objective Annex A structure.'],
        ].map(([ic, t, d], i) => (
          <div key={i} style={{ display: 'flex', gap: 16, border: `1px solid ${T2V.g200}`, padding: '22px 24px', background: '#fff' }}>
            <div style={{ width: 44, height: 44, background: T2V.purpleSubtle, color: T2V.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={ic} size={22} />
            </div>
            <div>
              <h3 style={{ fontSize: 16.5, fontWeight: 700, color: T2V.black, margin: '0 0 5px', fontFamily: T2FT, letterSpacing: '-0.01em' }}>{t}</h3>
              <p style={{ fontSize: 14, color: T2V.g600, lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── COVERAGE ────────────────────────────────────────────── */
const T2CLAUSES = [['4', 'Context'], ['5', 'Leadership'], ['6', 'Planning'], ['7', 'Support'], ['8', 'Operation'], ['9', 'Performance'], ['10', 'Improvement']];
const T2Coverage = () => (
  <window.Section bg={T2V.g50} pad="80px 0">
    <window.SectionHeader overline="Coverage" align="center"
      title="Wall-to-wall across the standard"
      sub="The toolkit covers both halves of ISO 42001 — the management-system clauses and the full Annex A control set." />
    <div style={{ marginBottom: 16, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: T2V.g400 }}>Management system · Clauses 4–10</div>
    <div className="vg-grid-7" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 12, marginBottom: 40 }}>
      {T2CLAUSES.map(([n, t], i) => (
        <div key={i} style={{ background: '#fff', border: `1px solid ${T2V.g200}`, padding: '20px 16px', textAlign: 'center' }}>
          <div style={{ fontSize: 30, fontWeight: 800, color: T2V.purple, fontFamily: T2FT, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
          <div style={{ fontSize: 13, fontWeight: 600, color: T2V.g700, marginTop: 8 }}>{t}</div>
        </div>
      ))}
    </div>
    <div style={{ marginBottom: 16, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: T2V.g400 }}>Annex A:2023 · 38 controls, nine objectives</div>
    <div className="vg-grid-5" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
      {window.TK_ISO42001.ANNEX.map((g, i) => (
        <div key={i} style={{ background: '#fff', border: `1px solid ${T2V.g200}`, padding: '20px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ width: 38, height: 38, background: T2V.purpleSubtle, color: T2V.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <window.Icon name={g.icon} size={19} />
            </div>
            <span style={{ fontSize: 24, fontWeight: 800, color: T2V.purple, letterSpacing: '-0.02em', fontFamily: T2FT }}>{g.items.length}</span>
          </div>
          <h3 style={{ fontSize: 13.5, fontWeight: 700, color: T2V.black, margin: 0, fontFamily: T2FT, letterSpacing: '-0.01em', lineHeight: 1.3 }}>{g.theme}</h3>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── CONTENTS EXPLORER + GATED DOWNLOADS ─────────────────── */
const T2Contents = ({ onDownload, unlocked }) => {
  const [tab, setTab] = React.useState('policies');
  const A = window.TK_ISO42001.ASSETS;
  const tabs = [['policies', 'Policies', A.policies.count], ['procedures', 'Procedures', A.procedures.count], ['controls', 'Annex A Controls', A.controls.count]];
  const meta = A[tab];

  const renderList = () => {
    if (tab === 'controls') {
      return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {window.TK_ISO42001.ANNEX.map((g, gi) => (
            <div key={gi}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <window.Icon name={g.icon} size={18} color={T2V.purple} />
                <span style={{ fontSize: 14, fontWeight: 800, color: T2V.black, fontFamily: T2FT, letterSpacing: '-0.01em' }}>{g.theme}</span>
                <span style={{ fontSize: 12, fontWeight: 600, color: T2V.g400 }}>{g.items.length} controls</span>
              </div>
              <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '8px 24px' }}>
                {g.items.map(([code, title], i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'baseline', fontSize: 13.5, lineHeight: 1.4, paddingBottom: 6, borderBottom: `1px solid ${T2V.g100}` }}>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11.5, fontWeight: 700, color: T2V.orange, flexShrink: 0, minWidth: 54 }}>{code}</span>
                    <span style={{ color: T2V.g700 }}>{title}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      );
    }
    const list = tab === 'policies' ? window.TK_ISO42001.POLICIES : window.TK_ISO42001.PROCEDURES;
    return (
      <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '14px 24px' }}>
        {list.map(([t, d], i) => (
          <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', paddingBottom: 14, borderBottom: `1px solid ${T2V.g100}` }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700, color: T2V.purple, flexShrink: 0, marginTop: 1 }}>{String(i + 1).padStart(2, '0')}</span>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: T2V.black, lineHeight: 1.3, fontFamily: T2FT }}>{t}</div>
              <div style={{ fontSize: 13, color: T2V.g500, lineHeight: 1.5, marginTop: 2 }}>{d}</div>
            </div>
          </div>
        ))}
      </div>
    );
  };

  return (
    <section id="downloads" style={{ background: '#fff', padding: '84px 0', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: T2MW, margin: '0 auto', padding: '0 32px' }}>
        <window.SectionHeader overline="Toolkit contents"
          title="Browse the full set — and take it with you"
          sub="Explore every policy, procedure, and control in the toolkit. Download any list as a branded PDF; we'll ask for a few details so a practitioner can tailor it to you." maxSub={680} />

        <div style={{ display: 'flex', gap: 8, borderBottom: `1px solid ${T2V.g200}`, marginBottom: 0 }}>
          {tabs.map(([id, label, count]) => (
            <button key={id} onClick={() => setTab(id)}
              style={{ fontFamily: T2FT, fontSize: 14.5, fontWeight: 700, padding: '14px 20px', cursor: 'pointer', background: 'none', border: 'none', borderBottom: tab === id ? `3px solid ${T2V.purple}` : '3px solid transparent', color: tab === id ? T2V.purple : T2V.g500, marginBottom: -1, display: 'flex', alignItems: 'center', gap: 8 }}>
              {label}<span style={{ fontSize: 11, fontWeight: 700, padding: '2px 8px', borderRadius: 9999, background: tab === id ? T2V.purpleSubtle : T2V.g100, color: tab === id ? T2V.purple : T2V.g500 }}>{count}</span>
            </button>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', background: T2V.g50, border: `1px solid ${T2V.g200}`, borderTop: 'none', padding: '20px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 46, height: 46, background: T2V.purple, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={meta.icon} size={23} color="#fff" />
            </div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 800, color: T2V.black, fontFamily: T2FT, letterSpacing: '-0.01em' }}>{meta.label}</div>
              <div style={{ fontSize: 13, color: T2V.g500, maxWidth: 520, lineHeight: 1.4 }}>{meta.blurb}</div>
            </div>
          </div>
          <window.Btn kind="primary" onClick={() => onDownload(tab)} style={{ flexShrink: 0 }}>
            <window.Icon name={unlocked ? 'arrow' : 'lock'} size={16} color="#fff" />
            {unlocked ? `Download PDF · ${meta.count} ${meta.unit}` : `Download PDF (${meta.count} ${meta.unit})`}
          </window.Btn>
        </div>

        <div style={{ border: `1px solid ${T2V.g200}`, borderTop: 'none', padding: '32px 28px' }}>
          {renderList()}
        </div>
      </div>
    </section>
  );
};

/* ── SAMPLE DOCUMENTS VIEWER ─────────────────────────────── */
const T2Samples = ({ onDownloadSample }) => {
  const [s, setS] = React.useState('policy');
  const tabs = [['policy', 'Policy', 'doc'], ['procedure', 'Procedure', 'file'], ['control', 'Control template', 'layers'], ['checklist', 'Checklist', 'clipboard']];
  return (
    <window.Section bg={T2V.g50} pad="84px 0">
      <window.SectionHeader overline="Samples" align="center"
        title="See exactly what you'll receive"
        sub="Representative pages from the toolkit — a policy, a procedure, a control template, and an audit-readiness checklist." />
      <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 32, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, position: 'sticky', top: 92 }}>
          {tabs.map(([id, label, icon]) => (
            <button key={id} onClick={() => setS(id)}
              style={{ display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left', fontFamily: T2FT, fontSize: 14.5, fontWeight: 700, padding: '14px 18px', cursor: 'pointer', background: s === id ? '#fff' : 'transparent', border: `1px solid ${s === id ? T2V.purple : T2V.g200}`, color: s === id ? T2V.purple : T2V.g600, transition: 'all 150ms' }}>
              <window.Icon name={icon} size={19} color={s === id ? T2V.purple : T2V.g400} />{label}
            </button>
          ))}
          <div style={{ background: '#fff', border: `1px solid ${T2V.g200}`, padding: '18px', marginTop: 8 }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: T2V.black, fontFamily: T2FT, marginBottom: 4 }}>Want the full sample?</div>
            <p style={{ fontSize: 12.5, color: T2V.g500, lineHeight: 1.55, margin: '0 0 14px' }}>Preview the complete package index as a branded PDF — we'll ask for a few details first.</p>
            <window.Btn kind="ghostBrand" onClick={onDownloadSample} style={{ width: '100%', justifyContent: 'center', fontSize: 13.5, padding: '11px 16px' }}>
              <window.Icon name="doc" size={16} color={T2V.purple} /> Preview / download sample PDF
            </window.Btn>
          </div>
          <p style={{ fontSize: 12.5, color: T2V.g400, lineHeight: 1.55, marginTop: 4, padding: '0 4px' }}>Samples are illustrative. Delivered documents are tailored to your organization and branding.</p>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${T2V.g200}`, boxShadow: '0 8px 32px rgba(0,0,0,0.06)', padding: '0', overflow: 'hidden' }}>
          <T2SamplePaper kind={s} />
        </div>
      </div>
    </window.Section>
  );
};

const T2DocHeader = ({ docId, title, ver = '1.0', owner }) => (
  <div style={{ borderBottom: `2px solid ${T2V.purple}`, padding: '26px 36px 18px', background: T2V.g50 }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
      <window.BrandMark size={30} />
      <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, color: T2V.g500 }}>{docId}</span>
    </div>
    <h3 style={{ fontSize: 22, fontWeight: 800, color: T2V.black, margin: '0 0 12px', fontFamily: T2FT, letterSpacing: '-0.02em' }}>{title}</h3>
    <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
      {[['Classification', 'Internal'], ['Version', ver], ['Owner', owner], ['Framework', 'ISO/IEC 42001:2023']].map(([k, v], i) => (
        <div key={i}>
          <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: T2V.g400 }}>{k}</div>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: T2V.g700, marginTop: 2 }}>{v}</div>
        </div>
      ))}
    </div>
  </div>
);
const T2DocSection = ({ n, h, children }) => (
  <div style={{ marginBottom: 20 }}>
    <div style={{ fontSize: 13.5, fontWeight: 800, color: T2V.black, fontFamily: T2FT, marginBottom: 7, letterSpacing: '-0.01em' }}>
      <span style={{ color: T2V.orange, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, marginRight: 8 }}>{n}</span>{h}
    </div>
    <div style={{ fontSize: 13, color: T2V.g600, lineHeight: 1.65 }}>{children}</div>
  </div>
);

const T2SamplePaper = ({ kind }) => {
  if (kind === 'policy') return (
    <div>
      <T2DocHeader docId="POL-06 · AI Fairness & Bias Policy" title="AI Fairness & Bias Policy" owner="Head of Responsible AI" />
      <div style={{ padding: '28px 36px 36px' }}>
        <T2DocSection n="1.0" h="Purpose">This policy establishes requirements for identifying, measuring, and mitigating bias across training data, models, and outcomes in support of Annex A controls A.7.2–A.7.6 and A.9.2–A.9.4.</T2DocSection>
        <T2DocSection n="2.0" h="Scope">Applies to all AI systems developed, procured, or operated by the organization, across every business unit and region.</T2DocSection>
        <T2DocSection n="3.0" h="Policy statements">
          <ul style={{ margin: '4px 0 0', paddingLeft: 18, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <li>Every AI system undergoes a documented fairness review before production deployment.</li>
            <li>Bias testing is repeated whenever training data or the model materially changes.</li>
            <li>Disparate-impact findings are logged, risk-rated, and remediated before release.</li>
            <li>High-risk AI systems require sign-off from the Responsible AI review board.</li>
          </ul>
        </T2DocSection>
        <T2DocSection n="4.0" h="Roles & responsibilities">Model owners run fairness testing; the Responsible AI review board approves high-risk releases; the Head of Responsible AI owns this policy and its annual review.</T2DocSection>
        <T2DocSection n="5.0" h="Review">Reviewed annually or upon significant change. Next review: 12 months from approval.</T2DocSection>
      </div>
    </div>
  );
  if (kind === 'procedure') return (
    <div>
      <T2DocHeader docId="PRC-03 · AI Impact Assessment Procedure" title="AI System Impact Assessment Procedure" owner="Responsible AI Lead" />
      <div style={{ padding: '28px 36px 36px' }}>
        <T2DocSection n="1.0" h="Objective">Define the repeatable steps for assessing the impact of an AI system on individuals, groups, and society before it is deployed.</T2DocSection>
        <div style={{ fontSize: 13.5, fontWeight: 800, color: T2V.black, fontFamily: T2FT, marginBottom: 10 }}><span style={{ color: T2V.orange, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, marginRight: 8 }}>2.0</span>Process steps</div>
        <div style={{ border: `1px solid ${T2V.g200}` }}>
          {[['1', 'Intake', 'The AI system is registered in the inventory and classified by risk tier.'], ['2', 'Impact screening', 'A structured questionnaire identifies potential effects on people and society.'], ['3', 'Deep assessment', 'High-risk systems undergo a full impact assessment with mitigation plan.'], ['4', 'Review & sign-off', 'The Responsible AI review board approves, conditions, or rejects deployment.'], ['5', 'Monitor', 'Approved systems are re-assessed on a defined cadence or upon material change.']].map(([n, t, d], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', borderTop: i ? `1px solid ${T2V.g200}` : 'none' }}>
              <div style={{ background: T2V.purpleSubtle, color: T2V.purple, fontWeight: 800, fontFamily: "'JetBrains Mono', monospace", fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{n}</div>
              <div style={{ padding: '12px 16px' }}>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: T2V.black }}>{t}</div>
                <div style={{ fontSize: 12.5, color: T2V.g500, marginTop: 2, lineHeight: 1.5 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18 }}><T2DocSection n="3.0" h="Records">Impact assessment forms, review board minutes, and re-assessment schedules are retained for the certification cycle.</T2DocSection></div>
      </div>
    </div>
  );
  if (kind === 'control') return (
    <div>
      <T2DocHeader docId="A.7.4 · Control Template" title="Quality of Data for AI Systems" ver="1.0" owner="Head of Data Governance" />
      <div style={{ padding: '28px 36px 36px' }}>
        <T2DocSection n="—" h="Control objective">Ensure data used to develop, train, and operate AI systems meets defined quality criteria appropriate to the intended use.</T2DocSection>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 20 }}>
          {[['Applicability', 'Applicable — all production AI systems'], ['Implementation status', 'Implemented'], ['Control owner', 'Head of Data Governance'], ['Test frequency', 'Per model release']].map(([k, v], i) => (
            <div key={i} style={{ border: `1px solid ${T2V.g200}`, padding: '12px 14px' }}>
              <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: T2V.g400 }}>{k}</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: T2V.g700, marginTop: 3 }}>{v}</div>
            </div>
          ))}
        </div>
        <T2DocSection n="—" h="Implementation guidance">Data quality criteria (completeness, accuracy, representativeness) are defined per system; automated checks flag drift or degradation before retraining.</T2DocSection>
        <T2DocSection n="—" h="Evidence expected">Data quality reports, sampling records, and a data lineage diagram demonstrating provenance from source to model.</T2DocSection>
      </div>
    </div>
  );
  return (
    <div>
      <T2DocHeader docId="CHK-01 · Stage 2 Audit-Readiness" title="Stage 2 Audit-Readiness Checklist" ver="1.0" owner="AIMS Manager" />
      <div style={{ padding: '20px 36px 36px' }}>
        {[['done', 'Statement of Applicability complete and signed off', 'Clause 6.1 / Annex A'], ['done', 'AI risk assessment & treatment plan current', 'Clause 6.1'], ['done', 'All 38 Annex A controls assessed for applicability', 'Annex A'], ['progress', 'Internal audit completed; findings logged', 'Clause 9.2'], ['progress', 'Management review minutes for the period', 'Clause 9.3'], ['todo', 'Corrective actions closed or with target dates', 'Clause 10.1'], ['todo', 'Awareness training records for AI staff', 'A.3.2']].map(([st, t, ref], i) => {
          const map = { done: [T2V.purple, 'check', 'Complete'], progress: [T2V.orange, 'refresh', 'In progress'], todo: [T2V.g300, 'clipboard', 'Outstanding'] };
          const [c, ic, lab] = map[st];
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: `1px solid ${T2V.g100}` }}>
              <div style={{ width: 26, height: 26, borderRadius: '50%', background: st === 'todo' ? '#fff' : c, border: `1.5px solid ${c}`, color: st === 'todo' ? T2V.g300 : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={ic} size={15} color={st === 'todo' ? T2V.g300 : '#fff'} />
              </div>
              <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: T2V.g800, lineHeight: 1.4 }}>{t}</div>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, fontWeight: 700, color: T2V.g400, flexShrink: 0 }}>{ref}</span>
              <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: c, minWidth: 84, textAlign: 'right' }}>{lab}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

/* ── PAGE ────────────────────────────────────────────────── */
const ToolkitISO42001Page = ({ onNav }) => {
  const [modalAsset, setModalAsset] = React.useState(null);
  const [unlocked, setUnlocked] = React.useState(false);
  const sessionOk = () => { try { return !!sessionStorage.getItem('verigo_dl_ok'); } catch (e) { return false; } };
  React.useEffect(() => { if (sessionOk()) setUnlocked(true); }, []);

  const onDownload = (asset) => {
    if (sessionOk()) { window.TK_ISO42001.generatePDF(asset, window.TK_ISO42001.getUser() || {}); }
    else { setModalAsset(asset); }
  };
  const onModalSubmit = (form) => {
    window.TK_ISO42001.storeLead(form);
    try { sessionStorage.setItem('verigo_dl_ok', '1'); } catch (e) {}
    setUnlocked(true);
    const asset = modalAsset;
    setModalAsset(null);
    setTimeout(() => window.TK_ISO42001.generatePDF(asset, form), 60);
  };

  const A = modalAsset ? window.TK_ISO42001.ASSETS[modalAsset] : null;
  return (
    <div>
      <T2Hero onNav={onNav} />
      <T2Overview />
      <T2Coverage />
      <T2Contents onDownload={onDownload} unlocked={unlocked} />
      <T2Samples onDownloadSample={() => onDownload('standard')} />
      <window.T2Pricing onNav={onNav} />
      <window.T2ActionBand onDownloadStandard={() => onDownload('standard')} onNav={onNav} />
      <window.T2Evaluation onNav={onNav} />
      {A && (
        <window.LeadCaptureModal
          icon={A.icon}
          eyebrow={`Download · ${A.count} ${A.unit}`}
          heading={A.label}
          intro="Tell us where to send it and a senior practitioner can tailor the toolkit to your AI systems. Your PDF downloads immediately."
          cta="Download PDF"
          note="We'll only use your details to share the toolkit and follow up. No spam."
          onClose={() => setModalAsset(null)}
          onSubmit={onModalSubmit} />
      )}
    </div>
  );
};

Object.assign(window, { ToolkitISO42001Page });