// ToolkitCMMC.jsx — Verigo Global: CMMC 2.0 implementation toolkit page
const { V: TV, MAXW: TMW, FONT: TFT } = window;

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

/* ── HERO ────────────────────────────────────────────────── */
const CkHero = ({ onNav }) => (
  <section style={{ background: TV.g50, padding: '56px 0 64px', borderBottom: `1px solid ${TV.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="grid" color={TV.orangeDark} opacity={0.4} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: TMW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <CkCrumb 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: TV.orangeSubtle, color: TV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="lock" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={TV.orange} bg={TV.orangeSubtle} border={TV.orangeSubtle}>US DoD Mandate</window.Tag>
              <window.Tag color={TV.g600} bg="#fff" border={TV.g200}>CMMC 2.0 · NIST SP 800-171</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 60, fontWeight: 800, letterSpacing: '-0.035em', color: TV.black, margin: '0 0 18px', lineHeight: 1.02, fontFamily: TFT }}>
            The CMMC 2.0 toolkit, <span style={{ color: TV.purple }}>ready to deploy.</span>
          </h1>
          <p style={{ fontSize: 19, color: TV.g600, lineHeight: 1.6, margin: '0 0 24px', maxWidth: 600 }}>
            A complete, practitioner-maintained document set — 18 policies, 16 procedures, and all 110 NIST SP 800-171 practice templates, plus SSP and POA&M — tailored to your scope so you build a certifiable environment without starting from a blank page.
          </p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: TV.orangeSubtle, border: `1px solid ${TV.orange}`, padding: '9px 15px', marginBottom: 28 }}>
            <window.Icon name="zap" size={16} color={TV.orange} />
            <span style={{ fontSize: 13, fontWeight: 600, color: TV.g800 }}>Level 2 third-party assessments are required from <strong style={{ color: TV.orange }}>November 2026</strong> — readiness now is a competitive edge.</span>
          </div>
          <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 ${TV.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: TV.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', '110', 'NIST 800-171 practice templates'], ['clipboard', '140+', 'Documents, SSP, POA&M & checklists']].map(([ic, n, l], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 34, height: 34, background: TV.purpleSubtle, color: TV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={ic} size={18} />
                </div>
                <div style={{ fontSize: 22, fontWeight: 800, color: TV.black, fontFamily: TFT, letterSpacing: '-0.02em', minWidth: 46 }}>{n}</div>
                <div style={{ fontSize: 13.5, color: TV.g600, fontWeight: 500 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── OVERVIEW ────────────────────────────────────────────── */
const CkOverview = () => (
  <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: TV.black, margin: '0 0 20px', lineHeight: 1.12, fontFamily: TFT }}>Everything the assessor checks — pre-built and tailored.</h2>
        <p style={{ fontSize: 16.5, color: TV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          The Verigo CMMC 2.0 toolkit is the document backbone of a certifiable environment for <strong style={{ color: TV.black }}>Federal Contract Information</strong> and <strong style={{ color: TV.black }}>Controlled Unclassified Information</strong>. It pairs the policies and procedures with implementation templates for every one of the 110 NIST SP 800-171 practices.
        </p>
        <p style={{ fontSize: 16.5, color: TV.g600, lineHeight: 1.7, margin: 0 }}>
          Each artefact is maintained by senior practitioners and tailored to your scope and level — then embedded into how you operate, the <strong style={{ color: TV.black }}>Compliance by Design</strong> way, so the evidence a C3PAO assessment needs is produced by the process itself.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          ['compass', 'Tailored to your scope', 'Every policy and practice is shaped to your CUI enclave, systems, and existing tooling — not a one-size-fits-all template dump.'],
          ['clipboard', 'SSP & POA&M ready', 'Ships with System Security Plan and Plan of Action & Milestones templates — the two artefacts every assessment turns on.'],
          ['network', 'Cross-framework ready', 'Practices are mapped so the same evidence supports ISO 27001, SOC 2, and the NIST CSF without duplication.'],
        ].map(([ic, t, d], i) => (
          <div key={i} style={{ display: 'flex', gap: 16, border: `1px solid ${TV.g200}`, padding: '22px 24px', background: '#fff' }}>
            <div style={{ width: 44, height: 44, background: TV.purpleSubtle, color: TV.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: TV.black, margin: '0 0 5px', fontFamily: TFT, letterSpacing: '-0.01em' }}>{t}</h3>
              <p style={{ fontSize: 14, color: TV.g600, lineHeight: 1.6, margin: 0 }}>{d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── COVERAGE ────────────────────────────────────────────── */
const CkCoverage = () => (
  <window.Section bg={TV.g50} pad="80px 0">
    <window.SectionHeader overline="Coverage" align="center"
      title="Built for every level — and all 14 domains"
      sub="The toolkit scales from Level 1 self-assessment to a Level 2 C3PAO assessment, covering all 14 NIST SP 800-171 domains." />
    <div style={{ marginBottom: 16, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: TV.g400 }}>Three certification levels</div>
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 40 }}>
      {window.TK_CMMC.LEVELS.map((lv, i) => {
        const pop = !!lv.popular;
        return (
          <div key={i} style={{ background: '#fff', border: `1px solid ${pop ? TV.orange : TV.g200}`, outline: pop ? `1px solid ${TV.orange}` : 'none', padding: '24px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: pop ? TV.orange : TV.g500 }}>{lv.name.split(' — ')[0]}</span>
              {pop && <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#fff', background: TV.orange, padding: '3px 9px' }}>Most common</span>}
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
              <span style={{ fontSize: 38, fontWeight: 800, color: TV.purple, letterSpacing: '-0.03em', fontFamily: TFT, lineHeight: 1 }}>{lv.practices}</span>
              <span style={{ fontSize: 13.5, color: TV.g500, fontWeight: 600 }}>practices</span>
            </div>
            <div style={{ fontSize: 15, fontWeight: 700, color: TV.black, fontFamily: TFT, marginBottom: 10 }}>{lv.name.split(' — ')[1]}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: TV.g700 }}><window.Icon name="shield" size={15} color={TV.purple} />{lv.scope}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: TV.g700 }}><window.Icon name="award" size={15} color={TV.purple} />{lv.assess}</div>
            </div>
          </div>
        );
      })}
    </div>
    <div style={{ marginBottom: 16, fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: TV.g400 }}>14 NIST SP 800-171 domains · 110 practices (Level 2)</div>
    <div className="vg-grid-7" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 12 }}>
      {window.TK_CMMC.DOMAINS.map((g, i) => (
        <div key={i} style={{ background: '#fff', border: `1px solid ${TV.g200}`, padding: '16px 12px', textAlign: 'center' }}>
          <div style={{ width: 36, height: 36, background: TV.purpleSubtle, color: TV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 10px' }}>
            <window.Icon name={g.icon} size={18} />
          </div>
          <div style={{ fontSize: 16, fontWeight: 800, color: TV.purple, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '-0.01em' }}>{g.code}</div>
          <div style={{ fontSize: 11, fontWeight: 600, color: TV.g500, marginTop: 3 }}>{g.l2} practices</div>
        </div>
      ))}
    </div>
  </window.Section>
);

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

  const renderList = () => {
    if (tab === 'controls') {
      return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {window.TK_CMMC.DOMAINS.map((g, gi) => (
            <div key={gi}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <window.Icon name={g.icon} size={18} color={TV.purple} />
                <span style={{ fontSize: 14, fontWeight: 800, color: TV.black, fontFamily: TFT, letterSpacing: '-0.01em' }}>{g.code} · {g.domain}</span>
                <span style={{ fontSize: 12, fontWeight: 600, color: TV.g400 }}>{g.items.length} practices</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 ${TV.g100}` }}>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11.5, fontWeight: 700, color: TV.orange, flexShrink: 0, minWidth: 42 }}>{code}</span>
                    <span style={{ color: TV.g700 }}>{title}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      );
    }
    const list = tab === 'policies' ? window.TK_CMMC.POLICIES : window.TK_CMMC.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 ${TV.g100}` }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700, color: TV.purple, flexShrink: 0, marginTop: 1 }}>{String(i + 1).padStart(2, '0')}</span>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: TV.black, lineHeight: 1.3, fontFamily: TFT }}>{t}</div>
              <div style={{ fontSize: 13, color: TV.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: TMW, 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 practice 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 ${TV.g200}`, marginBottom: 0 }}>
          {tabs.map(([id, label, count]) => (
            <button key={id} onClick={() => setTab(id)}
              style={{ fontFamily: TFT, fontSize: 14.5, fontWeight: 700, padding: '14px 20px', cursor: 'pointer', background: 'none', border: 'none', borderBottom: tab === id ? `3px solid ${TV.purple}` : '3px solid transparent', color: tab === id ? TV.purple : TV.g500, marginBottom: -1, display: 'flex', alignItems: 'center', gap: 8 }}>
              {label}<span style={{ fontSize: 11, fontWeight: 700, padding: '2px 8px', borderRadius: 9999, background: tab === id ? TV.purpleSubtle : TV.g100, color: tab === id ? TV.purple : TV.g500 }}>{count}</span>
            </button>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', background: TV.g50, border: `1px solid ${TV.g200}`, borderTop: 'none', padding: '20px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 46, height: 46, background: TV.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: TV.black, fontFamily: TFT, letterSpacing: '-0.01em' }}>{meta.label}</div>
              <div style={{ fontSize: 13, color: TV.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 ${TV.g200}`, borderTop: 'none', padding: '32px 28px' }}>
          {renderList()}
        </div>
      </div>
    </section>
  );
};

/* ── SAMPLE DOCUMENTS VIEWER ─────────────────────────────── */
const CkSamples = ({ onDownloadSample }) => {
  const [s, setS] = React.useState('policy');
  const tabs = [['policy', 'Policy', 'doc'], ['procedure', 'Procedure', 'file'], ['control', 'Practice template', 'layers'], ['checklist', 'Checklist', 'clipboard']];
  return (
    <window.Section bg={TV.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 NIST 800-171 practice template, and a Level 2 assessment-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: TFT, fontSize: 14.5, fontWeight: 700, padding: '14px 18px', cursor: 'pointer', background: s === id ? '#fff' : 'transparent', border: `1px solid ${s === id ? TV.purple : TV.g200}`, color: s === id ? TV.purple : TV.g600, transition: 'all 150ms' }}>
              <window.Icon name={icon} size={19} color={s === id ? TV.purple : TV.g400} />{label}
            </button>
          ))}
          <div style={{ background: '#fff', border: `1px solid ${TV.g200}`, padding: '18px', marginTop: 8 }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: TV.black, fontFamily: TFT, marginBottom: 4 }}>Want the full sample?</div>
            <p style={{ fontSize: 12.5, color: TV.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={TV.purple} /> Preview / download sample PDF
            </window.Btn>
          </div>
          <p style={{ fontSize: 12.5, color: TV.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 ${TV.g200}`, boxShadow: '0 8px 32px rgba(0,0,0,0.06)', padding: '0', overflow: 'hidden' }}>
          <CkSamplePaper kind={s} />
        </div>
      </div>
    </window.Section>
  );
};

const CkDocHeader = ({ docId, title, ver = '2.1', owner }) => (
  <div style={{ borderBottom: `2px solid ${TV.purple}`, padding: '26px 36px 18px', background: TV.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: TV.g500 }}>{docId}</span>
    </div>
    <h3 style={{ fontSize: 22, fontWeight: 800, color: TV.black, margin: '0 0 12px', fontFamily: TFT, letterSpacing: '-0.02em' }}>{title}</h3>
    <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
      {[['Classification', 'CUI'], ['Version', ver], ['Owner', owner], ['Framework', 'CMMC 2.0 · 800-171']].map(([k, v], i) => (
        <div key={i}>
          <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: TV.g400 }}>{k}</div>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: TV.g700, marginTop: 2 }}>{v}</div>
        </div>
      ))}
    </div>
  </div>
);
const CkDocSection = ({ n, h, children }) => (
  <div style={{ marginBottom: 20 }}>
    <div style={{ fontSize: 13.5, fontWeight: 800, color: TV.black, fontFamily: TFT, marginBottom: 7, letterSpacing: '-0.01em' }}>
      <span style={{ color: TV.orange, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, marginRight: 8 }}>{n}</span>{h}
    </div>
    <div style={{ fontSize: 13, color: TV.g600, lineHeight: 1.65 }}>{children}</div>
  </div>
);

const CkSamplePaper = ({ kind }) => {
  if (kind === 'policy') return (
    <div>
      <CkDocHeader docId="POL-02 · Access Control Policy" title="Access Control Policy" owner="CISO" />
      <div style={{ padding: '28px 36px 36px' }}>
        <CkDocSection n="1.0" h="Purpose">This policy establishes the requirements for limiting access to systems that store, process, or transmit FCI and CUI, on a least-privilege basis, in support of NIST SP 800-171 practices 3.1.1–3.1.5.</CkDocSection>
        <CkDocSection n="2.0" h="Scope">Applies to all users, processes, and devices that access in-scope systems within the assessment boundary and CUI enclave.</CkDocSection>
        <CkDocSection n="3.0" h="Policy statements">
          <ul style={{ margin: '4px 0 0', paddingLeft: 18, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <li>Access is provisioned through a formal request and approval workflow tied to documented roles.</li>
            <li>Least privilege and separation of duties are enforced; privileged accounts are restricted and logged.</li>
            <li>Multifactor authentication is enforced for remote and privileged access (3.5.3).</li>
            <li>Connections to external systems and CUI on public systems are controlled (3.1.20–3.1.22).</li>
          </ul>
        </CkDocSection>
        <CkDocSection n="4.0" h="Roles & responsibilities">System owners approve access; IT operations provisions it; the CISO owns this policy and its annual review.</CkDocSection>
        <CkDocSection n="5.0" h="Review">Reviewed annually or upon significant change. Next review: 12 months from approval.</CkDocSection>
      </div>
    </div>
  );
  if (kind === 'procedure') return (
    <div>
      <CkDocHeader docId="PRC-01 · System Security Plan" title="System Security Plan (SSP) Procedure" owner="Compliance Lead" />
      <div style={{ padding: '28px 36px 36px' }}>
        <CkDocSection n="1.0" h="Objective">Define the repeatable steps to build and maintain the SSP documenting how each of the 110 practices is implemented across the assessment boundary (3.12.4).</CkDocSection>
        <div style={{ fontSize: 13.5, fontWeight: 800, color: TV.black, fontFamily: TFT, marginBottom: 10 }}><span style={{ color: TV.orange, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, marginRight: 8 }}>2.0</span>Process steps</div>
        <div style={{ border: `1px solid ${TV.g200}` }}>
          {[['1', 'Define boundary', 'Identify systems handling FCI/CUI and the assessment scope.'], ['2', 'Map practices', 'Document how each 800-171 practice is met across the boundary.'], ['3', 'Record status', 'Mark each practice met / not met and link supporting evidence.'], ['4', 'Open POA&M', 'Log gaps to the Plan of Action & Milestones with target dates.'], ['5', 'Review & sign', 'Senior owner reviews and approves; SSP versioned and retained.']].map(([n, t, d], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', borderTop: i ? `1px solid ${TV.g200}` : 'none' }}>
              <div style={{ background: TV.purpleSubtle, color: TV.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: TV.black }}>{t}</div>
                <div style={{ fontSize: 12.5, color: TV.g500, marginTop: 2, lineHeight: 1.5 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18 }}><CkDocSection n="3.0" h="Records">The SSP, POA&M, and supporting evidence are versioned and retained through the assessment cycle.</CkDocSection></div>
      </div>
    </div>
  );
  if (kind === 'control') return (
    <div>
      <CkDocHeader docId="3.5.3 · Practice Template" title="Multifactor Authentication" ver="1.0" owner="Head of IT Security" />
      <div style={{ padding: '28px 36px 36px' }}>
        <CkDocSection n="—" h="Practice statement">Use multifactor authentication for local and network access to privileged accounts and for network access to non-privileged accounts.</CkDocSection>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 20 }}>
          {[['Domain', 'IA · Identification & Authentication'], ['Status', 'Met'], ['Control owner', 'Head of IT Security'], ['Assessment', 'Level 2 · C3PAO']].map(([k, v], i) => (
            <div key={i} style={{ border: `1px solid ${TV.g200}`, padding: '12px 14px' }}>
              <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: TV.g400 }}>{k}</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: TV.g700, marginTop: 3 }}>{v}</div>
            </div>
          ))}
        </div>
        <CkDocSection n="—" h="Implementation guidance">MFA is enforced through the identity provider for all remote, privileged, and network access; authenticator types and enrolment are documented in the SSP.</CkDocSection>
        <CkDocSection n="—" h="Assessment evidence">IdP MFA policy export, enrolment report, screenshots of enforced prompts, and a sample of authentication logs.</CkDocSection>
      </div>
    </div>
  );
  return (
    <div>
      <CkDocHeader docId="CHK-02 · Level 2 Readiness" title="CMMC Level 2 Assessment-Readiness Checklist" ver="3.0" owner="Compliance Lead" />
      <div style={{ padding: '20px 36px 36px' }}>
        {[['done', 'Assessment boundary and CUI enclave defined', 'Scope'], ['done', 'System Security Plan (SSP) complete and signed', '3.12.4'], ['done', 'All 110 practices assessed and status recorded', '800-171'], ['progress', 'POA&M open for any not-met practices with dates', '3.12.2'], ['progress', 'MFA enforced for remote & privileged access', '3.5.3'], ['todo', 'FIPS-validated cryptography confirmed for CUI', '3.13.11'], ['todo', 'Incident response plan tested and documented', '3.6.3']].map(([st, t, ref], i) => {
          const map = { done: [TV.purple, 'check', 'Complete'], progress: [TV.orange, 'refresh', 'In progress'], todo: [TV.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 ${TV.g100}` }}>
              <div style={{ width: 26, height: 26, borderRadius: '50%', background: st === 'todo' ? '#fff' : c, border: `1.5px solid ${c}`, color: st === 'todo' ? TV.g300 : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={ic} size={15} color={st === 'todo' ? TV.g300 : '#fff'} />
              </div>
              <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: TV.g800, lineHeight: 1.4 }}>{t}</div>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, fontWeight: 700, color: TV.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>
  );
};

/* ── PRICING ──────────────────────────────────────────────── */
const CkPricing = ({ onNav }) => {
  const TIERS = window.TK_CMMC.TIERS;
  const baseFmt = window.TK_CMMC.fmtPrice(window.TK_CMMC.QUOTE_BASE.price);
  return (
    <section id="pricing" style={{background:'#fff',padding:'84px 0',scrollMarginTop:80}}>
      <div style={{maxWidth:TMW,margin:'0 auto',padding:'0 32px'}}>
        <window.SectionHeader overline="Packages" align="center"
          title="Build without the evaluation"
          sub={'Start from the document toolkit at ' + baseFmt + ' and add exactly what you need — see your custom total update live, then download a quote.'}
          maxSub={600} />
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16,marginBottom:24}}>
          {TIERS.map((t,i)=>{ const pop=!!t.popular; return (
            <div key={t.id} style={{position:'relative',display:'flex',flexDirection:'column',border:`1px solid ${pop?TV.purple:TV.g200}`,padding:'28px 24px',background:pop?TV.g50:'#fff'}}>
              {pop&&<div style={{position:'absolute',top:0,left:'50%',transform:'translate(-50%,-50%)',background:TV.purple,color:'#fff',fontSize:10.5,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',padding:'5px 14px',whiteSpace:'nowrap'}}>Most popular</div>}
              <div style={{fontSize:13,fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',color:pop?TV.purple:TV.g500,marginBottom:8}}>{t.name}</div>
              <p style={{fontSize:14.5,color:TV.g600,lineHeight:1.5,margin:'0 0 16px',minHeight:44}}>{t.tagline}</p>
              <div style={{display:'flex',flexDirection:'column',gap:9,flex:1,marginBottom:20}}>
                {(t.features||[]).slice(0,4).map((f,fi)=>(
                  <div key={fi} style={{display:'flex',gap:8,alignItems:'flex-start',fontSize:13,color:TV.g700,lineHeight:1.4}}>
                    <window.Icon name="check" size={16} color={TV.purple} style={{flexShrink:0,marginTop:2}} />{f}
                  </div>
                ))}
              </div>
            </div>
          ); })}
        </div>
        <div style={{display:'flex',alignItems:'center',justifyContent:'center',gap:16,flexWrap:'wrap'}}>
          <window.Btn kind="primary" onClick={()=>onNav('checkout')}>Build custom package <window.Icon name="arrow" size={16} color="#fff" /></window.Btn>
          <span style={{fontSize:13.5,color:TV.g500}}>Starts from {baseFmt} · add only what you need · live pricing</span>
        </div>
      </div>
    </section>
  );
};

/* ── ONLINE EVALUATION PROMO ─────────────────────────────── */
const CkEvalBand = ({ onNav }) => {
  const steps = [
    ['target', 'Pick your level & scope', 'Choose Level 1, 2, or 3 — your choice tailors the questions to exactly the practices that apply.'],
    ['gauge', 'Get your readiness score', 'An instant maturity score with a gap heat-map across the in-scope 800-171 domains.'],
    ['flag', 'See your next steps', 'A prioritized action plan showing which toolkit documents and practices close each gap.'],
  ];
  return (
    <section style={{ position: 'relative', background: TV.purpleDark, overflow: 'hidden' }}>
      <window.GeoWatermark color={TV.orange} style={{ top: -40, right: 40, width: 360, height: 340, opacity: 0.18 }} />
      <div style={{ position: 'relative', zIndex: 1, maxWidth: TMW, margin: '0 auto', padding: '80px 32px' }}>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.12)', color: '#fff', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '6px 13px', marginBottom: 20 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: TV.orange }}></span> Online evaluation · level-aware
            </div>
            <h2 className="vg-section-title" style={{ fontSize: 40, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1.08, margin: '0 0 16px', fontFamily: TFT }}>
              Know where you stand before the assessor does.
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.66)', lineHeight: 1.65, margin: '0 0 28px', maxWidth: 520 }}>
              Our online CMMC readiness evaluation scores your current state against the 800-171 practices for your chosen level — and maps every gap straight to the toolkit documents that close it.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <window.Btn kind="accent" onClick={() => onNav('evaluation')}>Start the evaluation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
              <window.Btn kind="ghostLight" onClick={() => onNav('evaluation')}>See how it works</window.Btn>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {steps.map(([ic, t, d], i) => (
              <div key={i} style={{ display: 'flex', gap: 16, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', padding: '20px 22px' }}>
                <div style={{ width: 44, height: 44, background: 'rgba(255,255,255,0.1)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={ic} size={22} color="#fff" />
                </div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, color: TV.orange }}>{String(i + 1).padStart(2, '0')}</span>
                    <h3 style={{ fontSize: 16.5, fontWeight: 700, color: '#fff', margin: 0, fontFamily: TFT, letterSpacing: '-0.01em' }}>{t}</h3>
                  </div>
                  <p style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.6)', lineHeight: 1.55, margin: 0 }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── PAGE ────────────────────────────────────────────────── */
const ToolkitCMMCPage = ({ 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_CMMC.generatePDF(asset, window.TK_CMMC.getUser() || {}); }
    else { setModalAsset(asset); }
  };
  const onModalSubmit = (form) => {
    window.TK_CMMC.storeLead(form);
    try { sessionStorage.setItem('verigo_dl_ok', '1'); } catch (e) {}
    setUnlocked(true);
    const asset = modalAsset;
    setModalAsset(null);
    setTimeout(() => window.TK_CMMC.generatePDF(asset, form), 60);
  };

  const A = modalAsset ? window.TK_CMMC.ASSETS[modalAsset] : null;
  return (
    <div>
      <CkHero onNav={onNav} />
      <CkOverview />
      <CkCoverage />
      <CkContents onDownload={onDownload} unlocked={unlocked} />
      <CkSamples onDownloadSample={() => onDownload('standard')} />
      <CkPricing onNav={onNav} />
      <CkEvalBand 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 scope. 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, { ToolkitCMMCPage });
