// CMMC2.jsx — Verigo Global: dedicated CMMC 2.0 certification + support page
const { V: CV, MAXW: CMW, FONT: CFT } = window;

/* ── DATA ─────────────────────────────────────────────────── */
const LEVELS = [
  {
    lvl: 'Level 1', name: 'Foundational', icon: 'lock', controls: '17 practices', protects: 'FCI',
    assess: 'Annual self-assessment & affirmation',
    focus: 'Basic safeguarding of Federal Contract Information — access control, identification, media handling, and physical protection. The entry tier for contractors that handle FCI but not CUI.',
  },
  {
    lvl: 'Level 2', name: 'Advanced', icon: 'shield', controls: '110 controls', protects: 'CUI',
    assess: 'C3PAO assessment every 3 years (self-assessment for select programs)',
    focus: 'Full protection of Controlled Unclassified Information, implementing all 110 NIST SP 800-171 controls across 14 domains. This is the level most of the defense supply chain will need to certify to.',
    highlight: true,
  },
  {
    lvl: 'Level 3', name: 'Expert', icon: 'star', controls: '110 + enhanced', protects: 'CUI (priority)',
    assess: 'Government (DIBCAC) assessment',
    focus: 'The 110 NIST SP 800-171 controls plus a subset of enhanced NIST SP 800-172 requirements, defending the highest-priority programs against advanced persistent threats.',
  },
];

const DOMAINS = [
  ['lock', 'Access Control'],
  ['users', 'Awareness & Training'],
  ['file', 'Audit & Accountability'],
  ['cpu', 'Configuration Management'],
  ['shield', 'Identification & Authentication'],
  ['zap', 'Incident Response'],
  ['refresh', 'Maintenance'],
  ['server', 'Media Protection'],
  ['briefcase', 'Personnel Security'],
  ['building', 'Physical Protection'],
  ['target', 'Risk Assessment'],
  ['clipboard', 'Security Assessment'],
  ['network', 'System & Communications'],
  ['activity', 'System & Information Integrity'],
];

const ROADMAP = [
  ['search', 'Scope & level', '2–3 wks', 'Map FCI and CUI flows; confirm the level your contracts require.'],
  ['target', 'Gap assessment', '3–5 wks', 'Measure your environment against every required practice and control.'],
  ['layers', 'Remediate', '3–9 mo', 'Implement controls, write policies, and stand up the CUI enclave.'],
  ['file', 'SSP & POA&M', '2–4 wks', 'Document the System Security Plan and Plan of Action & Milestones.'],
  ['gauge', 'Score & rehearse', '2–4 wks', 'Submit your SPRS score and run a full mock assessment.'],
  ['award', 'Assess & certify', '4–8 wks', 'C3PAO (or DIBCAC) assessment, findings closure, and certification.'],
];

const SEEKING = [
  ['file', 'Confirm what data you handle', 'Whether your contracts involve Federal Contract Information, Controlled Unclassified Information, or both decides your required level. Get this wrong and you either over-invest or fail to qualify.'],
  ['target', 'Define — and shrink — your scope', 'A tightly bounded CUI enclave is the single biggest lever on cost and timeline. We help you isolate where CUI lives so the assessment covers what it must and nothing more.'],
  ['shield', 'Assess honestly, then remediate', 'A candid gap assessment against NIST SP 800-171 is worth more than an optimistic one. We score every control, prioritize by risk, and close gaps before an assessor ever sees them.'],
];

const PREPARE = [
  'A defined assessment scope and CUI data-flow diagram',
  'A complete System Security Plan (SSP)',
  'A Plan of Action & Milestones (POA&M) for any open items',
  'A current SPRS self-assessment score on record',
  'Evidence mapped to each of the 110 controls',
  'Named control owners ready for assessor interviews',
];

const OUTPUTS = [
  ['file', 'System Security Plan (SSP)', 'The authoritative document describing your environment, scope, and how each required control is implemented — the backbone of any CMMC assessment.'],
  ['clipboard', 'Plan of Action & Milestones', 'A tracked, dated plan for closing any control not yet fully met, with owners and target dates an assessor can review.'],
  ['gauge', 'SPRS score & submission', 'Your NIST SP 800-171 self-assessment score, calculated and submitted to the Supplier Performance Risk System as the rules require.'],
  ['layers', 'Evidence package', 'Policies, procedures, configurations, and artifacts mapped control-by-control — organized so the assessment runs on prepared evidence, not a scramble.'],
  ['search', 'Mock assessment results', 'A full pre-assessment run by a reviewer independent of your implementation team, with an exception log and corrective actions before the real assessment.'],
  ['award', 'Certification & coordination', 'Coordination with your authorized C3PAO (or DIBCAC for Level 3) through assessment, findings closure, and the certification itself.'],
];

const CMMC_FAQ = [
  ['Does CMMC apply to my company?', 'If your organization is part of the Department of Defense supply chain and handles Federal Contract Information or Controlled Unclassified Information — as a prime or at any subcontractor tier — a CMMC requirement will appear in your contracts. Roughly 300,000 companies across the Defense Industrial Base are in scope. If you are unsure whether you handle CUI, that determination is the first thing we help you make.'],
  ['Which level do we need?', 'Your required level is driven by the data your contracts involve. Level 1 covers basic protection of Federal Contract Information. Level 2 — the level most of the supply chain will need — requires all 110 NIST SP 800-171 controls to protect Controlled Unclassified Information. Level 3 adds enhanced NIST SP 800-172 requirements for the highest-priority programs. We confirm your level during scoping so you neither over-build nor under-qualify.'],
  ['What is a C3PAO and when do we need one?', 'A Certified Third-Party Assessment Organization is an authorized firm that performs Level 2 assessments. Most Level 2 contractors must pass a C3PAO assessment every three years, while select programs may self-assess. Level 3 is assessed by the government\u2019s DIBCAC. Verigo prepares you for and coordinates that assessment, but to protect its integrity we are never the assessor for the controls we helped implement.'],
  ['How long does certification take?', 'For a mid-market contractor, expect roughly six to twelve months end to end, driven mostly by remediation. A tightly scoped CUI enclave shortens it considerably; a sprawling environment lengthens it. We give you a firm, scoped timeline after the gap assessment.'],
  ['Why start now if assessments phase in later?', 'Because demand far outstrips supply. With an estimated need for thousands of assessors and only a few hundred authorized today, assessment slots are scarce and remediation takes months. Contractors that certify early protect their eligibility — and can win work that competitors cannot yet bid on.'],
];

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

/* ── HERO ─────────────────────────────────────────────────── */
const CHero = ({ onNav }) => (
  <section style={{ background: CV.g50, padding: '56px 0 64px', borderBottom: `1px solid ${CV.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="nodes" color={CV.purpleDark} opacity={0.4} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: CMW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <CCrumb 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, borderRadius: 0, background: CV.orangeSubtle, color: CV.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={CV.orange} bg={CV.orangeSubtle} border={CV.orangeSubtle}>US DoD Mandate</window.Tag>
              <window.Tag color={CV.g600} bg="#fff" border={CV.g200}>Level 1–3</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 60, fontWeight: 800, letterSpacing: '-0.035em', color: CV.black, margin: '0 0 18px', lineHeight: 1.02, fontFamily: CFT }}>
            CMMC 2.0, <span style={{ color: CV.purple }}>your path to eligibility.</span>
          </h1>
          <p style={{ fontSize: 19, color: CV.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            The Department of Defense now requires verified cybersecurity across its supply chain. Verigo takes defense contractors from scoping and gap assessment to a certification-ready program — and through the C3PAO assessment itself.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <window.Btn kind="primary" onClick={() => onNav('contact')}>Start a Conversation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
            <window.Btn kind="ghost" onClick={() => onNav('toolkit:cmmc')}>Explore the CMMC 2.0 toolkit</window.Btn>
            <window.Btn kind="ghost" onClick={() => document.getElementById('roadmap')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>See the roadmap</window.Btn>
          </div>
        </div>
        <div style={{ background: '#fff', border: `1px solid ${CV.g200}`, borderRadius: 0, padding: '26px 26px', boxShadow: '0 8px 32px rgba(91,46,145,0.08)' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: CV.g400, marginBottom: 16 }}>At a glance</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['building', 'Authority', 'US Department of Defense'],
              ['shield', 'Protects', 'FCI & CUI'],
              ['layers', 'Levels', '1 Foundational · 2 Advanced · 3 Expert'],
              ['gauge', 'Typical timeline', '6–12 months to certified'],
            ].map(([ic, k, val], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ width: 34, height: 34, borderRadius: 0, background: CV.purpleSubtle, color: CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <window.Icon name={ic} size={18} />
                </div>
                <div>
                  <div style={{ fontSize: 11.5, fontWeight: 700, color: CV.g400, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{k}</div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: CV.black, lineHeight: 1.35 }}>{val}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── STATS STRIP ──────────────────────────────────────────── */
const CStats = () => (
  <div style={{ background: '#fff', borderBottom: `1px solid ${CV.g200}` }}>
    <div className="vg-container vg-stats-row" style={{ maxWidth: CMW, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
      {[
        ['300K+', 'DIB contractors in scope'],
        ['Nov 2026', 'Level 2 assessments phase in'],
        ['~600', 'Certified assessors available'],
        ['110', 'NIST 800-171 controls at Level 2'],
      ].map(([v, l], i) => (
        <div key={i} style={{ flex: 1, padding: '34px 24px', borderLeft: i ? `1px solid ${CV.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontSize: 34, fontWeight: 800, color: CV.orange, letterSpacing: '-0.02em', lineHeight: 1, fontFamily: CFT }}>{v}</span>
          <span style={{ fontSize: 13.5, color: CV.g500 }}>{l}</span>
        </div>
      ))}
    </div>
  </div>
);

/* ── THE MANDATE / WHY CMMC ───────────────────────────────── */
const Mandate = () => (
  <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 }}>Why CMMC exists</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: CV.black, margin: '0 0 20px', lineHeight: 1.1, fontFamily: CFT }}>The DoD is replacing &ldquo;trust us&rdquo; with &ldquo;show us.&rdquo;</h2>
        <p style={{ fontSize: 16.5, color: CV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          For years, defense contractors self-attested that they safeguarded sensitive government data. Repeated breaches across the supply chain proved self-attestation was not enough. <strong style={{ color: CV.black }}>CMMC makes verified cybersecurity a condition of doing business with the Department of Defense.</strong>
        </p>
        <p style={{ fontSize: 16.5, color: CV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          The mandate protects two kinds of government information: <strong style={{ color: CV.black }}>Federal Contract Information (FCI)</strong> and <strong style={{ color: CV.black }}>Controlled Unclassified Information (CUI)</strong>. If your contracts touch either, a CMMC requirement will appear in them — and at the required level, no certification means no eligibility to win or keep the award.
        </p>
        <p style={{ fontSize: 16.5, color: CV.g600, lineHeight: 1.7, margin: 0 }}>
          Now codified in federal rule and phasing into DoD contracts, CMMC applies across every tier of the Defense Industrial Base — from primes to the smallest subcontractor.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ background: CV.charcoal, borderRadius: 0, padding: '30px 32px', position: 'relative', overflow: 'hidden' }}>
          <window.HeroWatermark variant="nodes" color="#ffffff" opacity={0.08} style={{ bottom: -40, right: -30, width: 240, height: 220 }} />
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(232,98,42,0.2)', color: CV.orangeLight, fontSize: 11.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '6px 12px', marginBottom: 16 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: CV.orange }}></span> Phase-in has begun
            </div>
            <h3 style={{ fontSize: 22, fontWeight: 800, color: '#fff', margin: '0 0 12px', letterSpacing: '-0.02em', lineHeight: 1.25, fontFamily: CFT }}>Why waiting is the expensive option.</h3>
            <p style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, margin: 0 }}>
              Level 2 third-party assessments phase in from November 2026. With roughly 300,000 contractors in scope and only a few hundred certified assessors available, assessment slots are scarce and remediation takes months. Certifying early protects your eligibility — and opens work competitors cannot yet bid on.
            </p>
          </div>
        </div>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[
            ['file', 'FCI', 'Federal Contract Information — information provided for or generated under a contract, not intended for public release.'],
            ['lock', 'CUI', 'Controlled Unclassified Information — sensitive government information that requires safeguarding under federal law and policy.'],
          ].map(([ic, t, d], i) => (
            <div key={i} style={{ border: `1px solid ${CV.g200}`, borderRadius: 0, padding: '20px 20px', background: '#fff' }}>
              <div style={{ width: 40, height: 40, borderRadius: 0, background: CV.orangeSubtle, color: CV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                <window.Icon name={ic} size={21} />
              </div>
              <h4 style={{ fontSize: 15, fontWeight: 800, color: CV.black, margin: '0 0 6px', fontFamily: CFT }}>{t}</h4>
              <p style={{ fontSize: 12.5, color: CV.g500, lineHeight: 1.5, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </window.Section>
);

/* ── LEVELS ───────────────────────────────────────────────── */
const Levels = () => (
  <window.Section bg={CV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="The three levels"
      title="Three levels. Rising assurance."
      sub="CMMC 2.0 scales the required rigor to the sensitivity of the information you handle. Your contracts determine which level you must reach." maxSub={640} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' }}>
      {LEVELS.map((l) => (
        <div key={l.lvl} style={{ background: '#fff', border: `1px solid ${l.highlight ? CV.orange : CV.g200}`, borderRadius: 0, padding: '30px 28px', display: 'flex', flexDirection: 'column', gap: 16, boxShadow: l.highlight ? '0 8px 32px rgba(232,98,42,0.12)' : 'none', position: 'relative' }}>
          {l.highlight && <span style={{ position: 'absolute', top: 22, right: 24, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em', color: CV.orange, background: CV.orangeSubtle, padding: '4px 10px', textTransform: 'uppercase' }}>Most common</span>}
          <div style={{ width: 52, height: 52, borderRadius: 0, background: l.highlight ? CV.orange : CV.purpleSubtle, color: l.highlight ? '#fff' : CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name={l.icon} size={26} color={l.highlight ? '#fff' : CV.purple} />
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: CV.g400 }}>{l.lvl}</div>
            <h3 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', color: CV.black, margin: '2px 0 0', fontFamily: CFT }}>{l.name}</h3>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: CV.purple, background: CV.purpleSubtle, padding: '5px 11px' }}>{l.controls}</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: CV.g600, background: CV.g100, padding: '5px 11px' }}>Protects {l.protects}</span>
          </div>
          <p style={{ fontSize: 14, color: CV.g600, lineHeight: 1.65, margin: 0, flex: 1 }}>{l.focus}</p>
          <div style={{ borderTop: `1px solid ${CV.g100}`, paddingTop: 14, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="clipboard" size={17} color={CV.g400} /></span>
            <div>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: CV.g400, marginBottom: 2 }}>How it&rsquo;s assessed</div>
              <div style={{ fontSize: 13, color: CV.g700, lineHeight: 1.45, fontWeight: 600 }}>{l.assess}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── COVERAGE ─────────────────────────────────────────────── */
const Coverage = () => (
  <window.Section bg="#fff" pad="84px 0">
    <window.SectionHeader overline="Coverage"
      title="The 14 control domains of NIST SP 800-171."
      sub="Level 2 implements all 110 controls across these fourteen families — the same control set that underpins most US federal compliance. We assess and remediate every domain." maxSub={680} />
    <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {DOMAINS.map(([ic, name], i) => (
        <div key={i} style={{ border: `1px solid ${CV.g200}`, borderRadius: 0, padding: '20px 20px', background: '#fff', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 40, height: 40, borderRadius: 0, background: CV.purpleSubtle, color: CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <window.Icon name={ic} size={20} />
          </div>
          <span style={{ fontSize: 14, fontWeight: 600, color: CV.black, lineHeight: 1.3 }}>{name}</span>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── ROADMAP ──────────────────────────────────────────────── */
const Roadmap = () => (
  <window.Section bg={CV.g50} pad="84px 0">
    <div id="roadmap" style={{ scrollMarginTop: 24 }}>
      <window.SectionHeader align="center" overline="The roadmap to certification"
        title="From scoping to certified."
        sub="A clear, sequenced path to certification — with the remediation phase that, for most contractors, carries the weight. Durations are indicative for a mid-market environment." maxSub={660} />
    </div>
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', top: 33, left: '8.33%', right: '8.33%', height: 2, background: CV.g200, zIndex: 0 }} />
      <div className="vg-grid-6" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', position: 'relative', zIndex: 1 }}>
        {ROADMAP.map(([ic, t, dur, d], i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '0 10px', textAlign: 'center' }}>
            <div style={{ width: 66, height: 66, borderRadius: '50%', background: '#fff', border: `2px solid ${CV.purpleLight}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
              <div style={{ width: 46, height: 46, borderRadius: '50%', background: CV.purpleSubtle, color: CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <window.Icon name={ic} size={23} />
              </div>
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, color: CV.orange, fontFamily: "'JetBrains Mono', monospace", marginBottom: 6 }}>{dur}</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: CV.black, marginBottom: 6, fontFamily: CFT, letterSpacing: '-0.01em' }}>{t}</div>
            <div style={{ fontSize: 12.5, color: CV.g500, lineHeight: 1.45, maxWidth: 160 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── FOR ORGANIZATIONS SEEKING CERTIFICATION ──────────────── */
const Seeking = ({ onNav }) => (
  <window.Section bg="#fff" pad="84px 0">
    <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 56, alignItems: 'start' }}>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>Seeking certification</window.Overline>
        <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.025em', color: CV.black, margin: '0 0 18px', lineHeight: 1.12, fontFamily: CFT }}>If you&rsquo;re pursuing CMMC, start here.</h2>
        <p style={{ fontSize: 16, color: CV.g600, lineHeight: 1.7, margin: '0 0 30px', maxWidth: 620 }}>
          Certification is won or lost in the decisions you make before remediation begins. Get scope and level right, and the path is direct and predictable. Get them wrong, and cost and timeline balloon. These are the three things to get right first.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {SEEKING.map(([ic, t, d], i) => (
            <div key={i} style={{ display: 'flex', gap: 18, border: `1px solid ${CV.g200}`, borderRadius: 0, padding: '22px 24px', background: '#fff' }}>
              <div style={{ width: 44, height: 44, borderRadius: 0, background: CV.orangeSubtle, color: CV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={ic} size={22} />
              </div>
              <div>
                <h3 style={{ fontSize: 17, fontWeight: 700, color: CV.black, margin: '0 0 5px', fontFamily: CFT, letterSpacing: '-0.01em' }}>{t}</h3>
                <p style={{ fontSize: 14, color: CV.g600, lineHeight: 1.6, margin: 0 }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <aside style={{ position: 'sticky', top: 92, display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ border: `1px solid ${CV.g200}`, borderRadius: 0, padding: '26px 26px', background: CV.g50 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: CV.g400, marginBottom: 16 }}>What you&rsquo;ll need in hand</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {PREPARE.map((t, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: CV.g700, lineHeight: 1.45 }}>
                <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={18} color={CV.purple} /></span>{t}
              </div>
            ))}
          </div>
        </div>
        <div style={{ border: `1px solid ${CV.purple}`, borderRadius: 0, padding: '24px 26px', background: CV.purpleSubtle }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: CV.black, marginBottom: 8 }}>Not sure which level you need?</div>
          <p style={{ fontSize: 13.5, color: CV.g600, lineHeight: 1.55, margin: '0 0 16px' }}>The fastest way to clarity is a scoping conversation. We&rsquo;ll help you confirm your data types and required level.</p>
          <window.Btn kind="primary" onClick={() => onNav('contact')} style={{ width: '100%', justifyContent: 'center', fontSize: 14, padding: '12px 20px' }}>Start a Conversation</window.Btn>
        </div>
      </aside>
    </div>
  </window.Section>
);

/* ── OUTPUTS ──────────────────────────────────────────────── */
const Outputs = () => (
  <window.Section bg={CV.g50} pad="84px 0">
    <window.SectionHeader overline="Outputs"
      title="What you walk away with."
      sub="Every CMMC engagement produces the concrete artifacts an assessor expects — and a program that keeps generating them long after certification." maxSub={680} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {OUTPUTS.map(([ic, t, d], i) => (
        <div key={i} style={{ border: `1px solid ${CV.g200}`, borderRadius: 0, padding: '28px 26px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ width: 46, height: 46, borderRadius: 0, background: CV.purpleSubtle, color: CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name={ic} size={23} />
          </div>
          <h3 style={{ fontSize: 17.5, fontWeight: 700, color: CV.black, margin: 0, lineHeight: 1.25, letterSpacing: '-0.01em', fontFamily: CFT }}>{t}</h3>
          <p style={{ fontSize: 14, color: CV.g600, lineHeight: 1.65, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── FAQ ──────────────────────────────────────────────────── */
const CFAQ = ({ onNav }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <window.Section bg="#fff" pad="84px 0">
      <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '360px 1fr', gap: 64, alignItems: 'start' }}>
        <div style={{ position: 'sticky', top: 92 }}>
          <window.Overline style={{ marginBottom: 14 }}>CMMC questions</window.Overline>
          <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', color: CV.black, margin: '0 0 18px', lineHeight: 1.1, fontFamily: CFT }}>Good to know before we start.</h2>
          <p style={{ fontSize: 15.5, color: CV.g600, lineHeight: 1.65, margin: '0 0 24px' }}>Questions on scope, levels, or the C3PAO assessment? A senior practitioner will walk you through it.</p>
          <window.Btn kind="primary" onClick={() => onNav('contact')}>Start a Conversation <window.Icon name="arrow" size={16} color="#fff" /></window.Btn>
        </div>
        <div style={{ border: `1px solid ${CV.g200}`, borderRadius: 0, overflow: 'hidden', background: '#fff' }}>
          {CMMC_FAQ.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i ? `1px solid ${CV.g200}` : 'none' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{ width: '100%', textAlign: 'left', background: 'none', border: 'none', cursor: 'pointer', padding: '22px 26px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, fontFamily: CFT }}>
                  <span style={{ fontSize: 16, fontWeight: 700, color: CV.black, letterSpacing: '-0.01em' }}>{q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: isOpen ? CV.purple : CV.purpleSubtle, color: isOpen ? '#fff' : CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 700 }}>{isOpen ? '\u2013' : '+'}</span>
                </button>
                {isOpen && (
                  <div style={{ padding: '0 26px 24px' }}>
                    <p style={{ fontSize: 14.5, color: CV.g600, lineHeight: 1.7, margin: 0, maxWidth: 680 }}>{a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </window.Section>
  );
};

/* ── PAGE ─────────────────────────────────────────────────── */
const CMMC2Page = ({ onNav }) => (
  <div>
    <CHero onNav={onNav} />
    <CStats />
    <Mandate />
    <Levels />
    <Coverage />
    <Roadmap />
    <Seeking onNav={onNav} />
    <Outputs />
    <CFAQ onNav={onNav} />
    <window.Section bg="#fff" pad="0">
      <window.CTABand
        overline="Eligibility is on the line"
        title="Get certification-ready before the assessment slots run out."
        body="Tell us what you build and which contracts you hold. We'll confirm your level, scope your environment, and lay out a fixed-price path to a certification-ready program — and through the assessment itself."
        primary="Start a Conversation" onNav={onNav} dest="contact" />
    </window.Section>
  </div>
);

Object.assign(window, { CMMC2Page });
