// NIST.jsx — Verigo Global: dedicated NIST CSF + RMF advisory page
const { V: NV, MAXW: NMW, FONT: NFT } = window;

/* ── DATA ─────────────────────────────────────────────────── */
const PILLARS = [
  {
    code: 'CSF 2.0', icon: 'compass', name: 'Cybersecurity Framework',
    kind: 'Voluntary · risk communication',
    desc: 'A flexible, outcome-based framework for understanding, managing, and communicating cybersecurity risk in plain language. Organized into six Functions, it gives leadership and technical teams a shared way to talk about posture — and a Profile to express where you are and where you want to be.',
    points: ['Six Functions, Categories & Subcategories', 'Current and Target Profiles', 'Four Implementation Tiers', 'Maps to 800-53, CSF, ISO 27001 & more'],
  },
  {
    code: 'RMF', icon: 'refresh', name: 'Risk Management Framework',
    kind: 'Mandated · authorization process',
    desc: 'The disciplined, seven-step process (SP 800-37) for building security and privacy into federal information systems and granting them an Authorization to Operate. Where the CSF communicates risk, the RMF operationalizes it — categorize, select, implement, assess, authorize, and monitor.',
    points: ['Seven-step lifecycle (SP 800-37)', 'Control selection from SP 800-53', 'Assessment under SP 800-53A', 'Drives the Authorization to Operate (ATO)'],
  },
];

const FUNCTIONS = [
  ['scale', 'Govern', 'GV', 'Establish and monitor the cybersecurity risk strategy, expectations, roles, and policy. New in CSF 2.0.', true],
  ['search', 'Identify', 'ID', 'Understand the assets, data, suppliers, and risks that make up your environment.'],
  ['shield', 'Protect', 'PR', 'Put safeguards in place to manage risk and limit the impact of potential events.'],
  ['activity', 'Detect', 'DE', 'Find and analyze possible attacks and compromises in a timely way.'],
  ['zap', 'Respond', 'RS', 'Take action on a detected incident to contain and mitigate its effect.'],
  ['refresh', 'Recover', 'RC', 'Restore assets and operations affected by an incident and return to normal.'],
];

const TIERS = [
  { n: 1, name: 'Partial', tone: '#C9C2DE', short: 'Ad hoc, reactive', desc: 'Risk is managed in an ad hoc, sometimes reactive way. There is limited awareness of cyber risk at the organizational level.' },
  { n: 2, name: 'Risk Informed', tone: '#A99BCE', short: 'Aware, not org-wide', desc: 'Risk-management practices are approved but may not be established organization-wide. Awareness exists but is inconsistent.' },
  { n: 3, name: 'Repeatable', tone: '#8159B5', short: 'Formal, organization-wide', desc: 'Formal policies are defined and practiced consistently across the organization, with regular updates as risk changes — a common target.' },
  { n: 4, name: 'Adaptive', tone: '#3F1E68', short: 'Adaptive, continuous', desc: 'The organization adapts practices in near real time from lessons learned and predictive indicators, continuously improving.' },
];

const RMF_STEPS = [
  ['clipboard', 'Prepare', 'Ready the organization to manage security and privacy risks.'],
  ['layers', 'Categorize', 'Categorize the system and information by impact level (FIPS 199).'],
  ['target', 'Select', 'Select an appropriate control baseline from SP 800-53.'],
  ['cpu', 'Implement', 'Deploy the selected controls and document how they are applied.'],
  ['check', 'Assess', 'Test the controls for effectiveness under SP 800-53A.'],
  ['award', 'Authorize', 'A senior official accepts residual risk and grants the ATO.'],
  ['activity', 'Monitor', 'Continuously monitor controls and risk posture over time.'],
];

const APPLIES = [
  ['building', 'Federal agencies', 'For federal information systems, the RMF and an Authorization to Operate are mandated under FISMA — NIST is not optional, it is the law of the land.'],
  ['network', 'Federal contractors & supply chain', 'Organizations handling federal data inherit NIST obligations — SP 800-171 for Controlled Unclassified Information, and the control language beneath CMMC.'],
  ['zap', 'Critical infrastructure operators', 'Energy, water, healthcare, and financial operators adopt the CSF to manage and communicate risk across sectors where disruption has outsized consequences.'],
  ['globe', 'Private-sector organizations', 'CSF 2.0 was broadened explicitly for organizations of every size and sector — a common, vendor-neutral language for cyber risk that boards and partners understand.'],
];

const ROADMAP = [
  ['compass', 'Scope & frame', '2–3 wks', 'Decide CSF, RMF, or both; define the systems, organizational scope, and risk context that frame the work.'],
  ['search', 'Current Profile / categorize', '3–5 wks', 'Build a CSF Current Profile and, for RMF, categorize systems by impact to set the right control baseline.'],
  ['target', 'Target Profile & control selection', '2–4 wks', 'Define the Target Profile and tier, and select the SP 800-53 controls that close the gap to it.'],
  ['layers', 'Implement & remediate', '3–9 mo', 'Deploy controls, write policies, and build the evidence and System Security Plan the framework expects.'],
  ['check', 'Assess', '4–8 wks', 'Independently assess control effectiveness under SP 800-53A and resolve findings into a POA&M.'],
  ['award', 'Authorize & monitor', '4–8 wks', 'Support the ATO decision and stand up the continuous-monitoring program that keeps the authorization alive.'],
];

const SEEKING = [
  ['compass', 'Decide CSF, RMF, or both', 'They solve different problems. The CSF communicates and prioritizes risk in plain language; the RMF authorizes a system to operate. Many organizations need both — CSF to set direction, RMF to satisfy a federal mandate. Naming the goal first keeps the effort focused.'],
  ['layers', 'Categorize before you select controls', 'In the RMF, impact categorization drives everything downstream — get it wrong and you either over-control a low-impact system or under-protect a high-impact one. We anchor the baseline to a defensible categorization so control selection is right-sized from the start.'],
  ['activity', 'Build monitoring in, not on', 'An ATO is not a finish line — it is sustained by continuous monitoring. The organizations that renew cleanly are the ones that instrument evidence from day one. We design the monitoring program alongside the controls, not as an afterthought.'],
];

const PREPARE = [
  'A decision on CSF, RMF, or both',
  'A defined system boundary and organizational scope',
  'Impact categorization for in-scope systems',
  'A CSF Current Profile of where you stand today',
  'A target tier / Target Profile to aim for',
  'Named system and control owners for assessment',
];

const OUTPUTS = [
  ['compass', 'Current & Target Profiles', 'CSF Profiles that document where your cybersecurity posture stands today and where it needs to be — the gap, prioritized and made legible to leadership.'],
  ['layers', 'Categorization & control baseline', 'A defensible system impact categorization (FIPS 199) and the tailored SP 800-53 control baseline selected to match it.'],
  ['file', 'System Security Plan (SSP)', 'The authoritative document describing your system, its boundary, and how each selected control is implemented — the backbone of any authorization package.'],
  ['check', 'Assessment report & POA&M', 'A Security Assessment Report on control effectiveness plus a Plan of Action & Milestones tracking every gap to a named owner and date.'],
  ['award', 'Authorization (ATO) support', 'A complete authorization package and the risk narrative an Authorizing Official needs to make — and defend — the decision to grant an ATO.'],
  ['activity', 'Continuous-monitoring program', 'The metrics, cadence, and tooling that keep your controls effective and your authorization current long after assessment day.'],
];

const TESTIMONIALS = [
  {
    quote: 'Verigo ran our RMF authorization end to end — categorization through ATO — and made the System Security Plan something our Authorizing Official could actually read. We received our authorization without a single blocking finding.',
    name: 'Grace Okafor', role: 'CISO', org: 'Federal systems integrator', initials: 'GO',
  },
  {
    quote: 'We adopted the CSF to get our board and our engineers speaking the same language about risk. The Current and Target Profiles Verigo built turned a vague worry into a funded, prioritized plan everyone understood.',
    name: 'Daniel Whitfield', role: 'Director of Security', org: 'Regional energy utility', initials: 'DW',
  },
  {
    quote: 'As a private fintech we weren\u2019t mandated to use NIST, but our partners expected it. Verigo mapped the CSF to controls we already had and showed us exactly where the real gaps were — no boilerplate, no busywork.',
    name: 'Sofia Mendez', role: 'VP of Risk', org: 'Payments platform', initials: 'SM',
  },
];

const NIST_FAQ = [
  ['What is the difference between the NIST CSF and the RMF?', 'They serve different purposes. The Cybersecurity Framework (CSF) is a voluntary, outcome-based framework for understanding, prioritizing, and communicating cyber risk — a common language for leadership and technical teams. The Risk Management Framework (RMF) is a prescriptive, seven-step process for building security into systems and granting them an Authorization to Operate, and it is mandated for federal systems. Many organizations use the CSF to set direction and the RMF to satisfy a compliance obligation.'],
  ['What are the CSF Functions, and what changed in version 2.0?', 'The CSF organizes outcomes into Functions. CSF 2.0, released in 2024, defines six: Govern, Identify, Protect, Detect, Respond, and Recover. The headline change from 1.1 was the addition of Govern, which elevates cybersecurity risk management to a leadership and strategy concern rather than a purely technical one. CSF 2.0 also broadened the framework\u2019s audience from critical infrastructure to organizations of every size and sector.'],
  ['Are the CSF Implementation Tiers maturity levels?', 'Not exactly — and the distinction matters. The four Tiers (Partial, Risk Informed, Repeatable, Adaptive) describe the rigor and consistency of your risk-management practices, much like a maturity scale. But NIST is clear that higher Tiers are not always the goal: the right Tier is the one that reduces risk cost-effectively for your organization. We help you choose and reach a target Tier deliberately rather than chasing Tier 4 for its own sake.'],
  ['Who is required to use the NIST RMF?', 'The RMF is mandated for US federal agencies and their information systems under FISMA, where an Authorization to Operate is required before a system goes live. Federal contractors and the broader supply chain inherit related NIST obligations — most commonly SP 800-171 for Controlled Unclassified Information, which also underpins CMMC. Private-sector organizations adopt NIST voluntarily, usually via the CSF.'],
  ['What is an ATO, and who grants it?', 'An Authorization to Operate (ATO) is a formal decision by a senior official — the Authorizing Official — to accept the residual risk of operating a system and permit it to go live. It is the culmination of the RMF: the Authorizing Official reviews the System Security Plan, the assessment results, and the Plan of Action & Milestones before granting authorization, which is then sustained through continuous monitoring.'],
  ['How does NIST relate to CMMC, ISO 27001, and SOC 2?', 'NIST is the foundation beneath much of the compliance landscape. SP 800-171 and SP 800-53 provide the control language that CMMC builds on directly, and CSF outcomes map cleanly to ISO 27001 and the SOC 2 Trust Services Criteria. That makes NIST work highly reusable — control evidence developed once can accelerate several certifications. We design NIST engagements with that cross-framework reuse in mind.'],
];

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

/* ── HERO ─────────────────────────────────────────────────── */
const NHero = ({ onNav }) => (
  <section style={{ background: NV.g50, padding: '56px 0 64px', borderBottom: `1px solid ${NV.g200}`, position: 'relative', overflow: 'hidden' }}>
    <window.HeroWatermark variant="grid" color={NV.purpleDark} opacity={0.4} style={{ top: -20, right: -20, width: 480, height: 440 }} />
    <div style={{ maxWidth: NMW, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1 }}>
      <NCrumb 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: NV.g100, color: NV.g700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="building" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={NV.g700} bg={NV.g100} border={NV.g200}>US Gov Foundation</window.Tag>
              <window.Tag color={NV.g600} bg="#fff" border={NV.g200}>CSF 2.0 · RMF</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize: 60, fontWeight: 800, letterSpacing: '-0.035em', color: NV.black, margin: '0 0 18px', lineHeight: 1.02, fontFamily: NFT }}>
            NIST CSF &amp; RMF, <span style={{ color: NV.purple }}>built into how you operate.</span>
          </h1>
          <p style={{ fontSize: 19, color: NV.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            The control language and risk discipline beneath US government compliance — and a common framework the whole market trusts. Verigo takes you from a CSF Profile and risk picture through the RMF lifecycle to an Authorization to Operate and continuous monitoring.
          </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:nist')}>Explore the NIST CSF 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 ${NV.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: NV.g400, marginBottom: 16 }}>At a glance</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[
              ['building', 'Authority', 'NIST (US Dept. of Commerce)'],
              ['compass', 'CSF 2.0', '6 Functions · 4 Tiers'],
              ['refresh', 'RMF', '7-step lifecycle to ATO'],
              ['layers', 'Control catalog', 'SP 800-53 · 800-171'],
            ].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: NV.purpleSubtle, color: NV.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: NV.g400, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{k}</div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: NV.black, lineHeight: 1.35 }}>{val}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── STATS STRIP ──────────────────────────────────────────── */
const NStats = () => (
  <div style={{ background: '#fff', borderBottom: `1px solid ${NV.g200}` }}>
    <div className="vg-container vg-stats-row" style={{ maxWidth: NMW, margin: '0 auto', padding: '0 32px', display: 'flex' }}>
      {[
        ['6', 'CSF 2.0 Functions'],
        ['4', 'CSF Implementation Tiers'],
        ['7', 'RMF lifecycle steps'],
        ['ATO', 'The RMF endpoint'],
      ].map(([v, l], i) => (
        <div key={i} style={{ flex: 1, padding: '34px 24px', borderLeft: i ? `1px solid ${NV.g200}` : 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <span style={{ fontSize: 34, fontWeight: 800, color: NV.orange, letterSpacing: '-0.02em', lineHeight: 1, fontFamily: NFT }}>{v}</span>
          <span style={{ fontSize: 13.5, color: NV.g500 }}>{l}</span>
        </div>
      ))}
    </div>
  </div>
);

/* ── WHY NIST ─────────────────────────────────────────────── */
const WhyNist = () => (
  <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 NIST matters</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.025em', color: NV.black, margin: '0 0 20px', lineHeight: 1.1, fontFamily: NFT }}>The foundation beneath the compliance landscape.</h2>
        <p style={{ fontSize: 16.5, color: NV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          NIST does not sell certifications — it publishes the <strong style={{ color: NV.black }}>control catalogs and risk language</strong> that nearly everything else is built on. CMMC inherits its controls from NIST; ISO 27001 and SOC 2 map cleanly to it. Get NIST right and the rest gets dramatically easier.
        </p>
        <p style={{ fontSize: 16.5, color: NV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          The two pillars do different jobs. The <strong style={{ color: NV.black }}>CSF communicates and prioritizes risk</strong> in language a board understands; the <strong style={{ color: NV.black }}>RMF operationalizes it</strong> into a system that earns an Authorization to Operate. Together they cover strategy and execution.
        </p>
        <p style={{ fontSize: 16.5, color: NV.g600, lineHeight: 1.7, margin: 0 }}>
          For federal agencies the RMF is mandatory; for everyone else the CSF has become the vendor-neutral common language of cyber risk.
        </p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ background: NV.charcoal, borderRadius: 0, padding: '30px 32px', position: 'relative', overflow: 'hidden' }}>
          <window.HeroWatermark variant="grid" 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: NV.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: NV.orange }}></span> Why it carries weight
            </div>
            <h3 style={{ fontSize: 22, fontWeight: 800, color: '#fff', margin: '0 0 12px', letterSpacing: '-0.02em', lineHeight: 1.25, fontFamily: NFT }}>Build it once, reuse it everywhere.</h3>
            <p style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, margin: 0 }}>
              Because NIST is the source the other frameworks reference, control evidence developed for NIST is highly reusable — the same work that earns an ATO can accelerate CMMC, ISO 27001, and SOC 2. NIST is the highest-leverage place to start.
            </p>
          </div>
        </div>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[
            ['compass', 'CSF', 'Cybersecurity Framework — six Functions and four Tiers for understanding and communicating cyber risk.'],
            ['refresh', 'RMF', 'Risk Management Framework — the seven-step process that takes a system to an Authorization to Operate.'],
          ].map(([ic, t, d], i) => (
            <div key={i} style={{ border: `1px solid ${NV.g200}`, borderRadius: 0, padding: '20px 20px', background: '#fff' }}>
              <div style={{ width: 40, height: 40, borderRadius: 0, background: NV.purpleSubtle, color: NV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
                <window.Icon name={ic} size={21} />
              </div>
              <h4 style={{ fontSize: 15, fontWeight: 800, color: NV.black, margin: '0 0 6px', fontFamily: NFT }}>{t}</h4>
              <p style={{ fontSize: 12.5, color: NV.g500, lineHeight: 1.5, margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </window.Section>
);

/* ── TWO PILLARS: CSF & RMF ───────────────────────────────── */
const Pillars = () => (
  <window.Section bg={NV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="The two pillars"
      title="CSF to communicate. RMF to operate."
      sub="Our NIST practice centers on the two frameworks most organizations actually need — the Cybersecurity Framework for risk strategy, and the Risk Management Framework for system authorization." maxSub={660} />
    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
      {PILLARS.map((p) => (
        <div key={p.code} style={{ background: '#fff', border: `1px solid ${NV.g200}`, borderRadius: 0, padding: '32px 32px', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 54, height: 54, borderRadius: 0, background: NV.purpleSubtle, color: NV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={p.icon} size={27} />
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: NV.orange, fontFamily: "'JetBrains Mono', monospace" }}>{p.code}</div>
              <h3 style={{ fontSize: 23, fontWeight: 800, letterSpacing: '-0.02em', color: NV.black, margin: '2px 0 0', fontFamily: NFT }}>{p.name}</h3>
            </div>
          </div>
          <span style={{ alignSelf: 'flex-start', fontSize: 12, fontWeight: 700, color: NV.g600, background: NV.g100, padding: '5px 12px' }}>{p.kind}</span>
          <p style={{ fontSize: 14.5, color: NV.g600, lineHeight: 1.65, margin: 0 }}>{p.desc}</p>
          <div style={{ borderTop: `1px solid ${NV.g100}`, paddingTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {p.points.map((pt, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, color: NV.g700, lineHeight: 1.4 }}>
                <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={16} color={NV.purple} /></span>{pt}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── CSF FUNCTIONS (COVERAGE) ─────────────────────────────── */
const Functions = () => (
  <window.Section bg="#fff" pad="84px 0">
    <window.SectionHeader overline="Coverage · CSF Core"
      title="Six Functions, one shared language."
      sub="The CSF organizes all cybersecurity outcomes into six Functions. Govern wraps the other five — making risk a leadership responsibility, not just a technical one." maxSub={680} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      {FUNCTIONS.map(([ic, name, abbr, d, isNew], i) => (
        <div key={i} style={{ border: `1px solid ${isNew ? NV.orange : NV.g200}`, borderRadius: 0, padding: '24px 24px', background: '#fff', position: 'relative' }}>
          {isNew && <span style={{ position: 'absolute', top: 20, right: 20, fontSize: 9.5, fontWeight: 800, letterSpacing: '0.06em', color: NV.orange, background: NV.orangeSubtle, padding: '3px 9px', textTransform: 'uppercase' }}>New in 2.0</span>}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: 0, background: NV.purpleSubtle, color: NV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name={ic} size={22} />
            </div>
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, color: NV.g400, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.06em' }}>{abbr}</div>
              <h4 style={{ fontSize: 18, fontWeight: 800, color: NV.black, margin: 0, fontFamily: NFT, letterSpacing: '-0.01em' }}>{name}</h4>
            </div>
          </div>
          <p style={{ fontSize: 13.5, color: NV.g600, lineHeight: 1.6, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── CSF IMPLEMENTATION TIERS STAIRCASE (the picture) ─────── */
const Tiers = () => (
  <window.Section bg={NV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="CSF Implementation Tiers"
      title="Four tiers of risk-management rigor."
      sub="The CSF describes how disciplined your risk management is on a four-tier scale. You climb deliberately — the right tier is the one that reduces risk cost-effectively, not the highest one." maxSub={680} />
    {/* Staircase */}
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, marginBottom: 28, minHeight: 320 }}>
      {TIERS.map((tr, i) => (
        <div key={tr.n} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
          <div style={{
            background: tr.tone, color: tr.n >= 3 ? '#fff' : NV.purpleDark, borderRadius: 0,
            height: 150 + i * 52, padding: '20px 20px 18px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            position: 'relative', boxShadow: tr.n === 3 ? '0 10px 30px rgba(91,46,145,0.22)' : 'none',
            border: tr.n === 3 ? `2px solid ${NV.orange}` : 'none',
          }}>
            {tr.n === 3 && <span style={{ position: 'absolute', top: -11, left: 20, fontSize: 9.5, fontWeight: 800, letterSpacing: '0.06em', color: '#fff', background: NV.orange, padding: '3px 9px', textTransform: 'uppercase' }}>Typical target</span>}
            <div>
              <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.06em', opacity: 0.85, fontFamily: "'JetBrains Mono', monospace", marginBottom: 8 }}>TIER {tr.n}</div>
              <div style={{ fontSize: 21, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.12, fontFamily: NFT }}>{tr.name}</div>
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }}>{tr.short}</div>
          </div>
        </div>
      ))}
    </div>
    {/* Arrow rail */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 26, padding: '0 2px' }}>
      <span style={{ fontSize: 12, fontWeight: 700, color: NV.g400, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Increasing rigor</span>
      <div style={{ flex: 1, height: 2, background: `linear-gradient(90deg, ${NV.g300}, ${NV.purple})` }} />
      <span style={{ color: NV.purple, display: 'flex' }}><window.Icon name="arrow" size={20} color={NV.purple} /></span>
    </div>
    {/* Descriptions */}
    <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
      {TIERS.map((tr) => (
        <div key={tr.n} style={{ background: '#fff', border: `1px solid ${tr.n === 3 ? NV.orange : NV.g200}`, borderRadius: 0, padding: '20px 20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <span style={{ width: 28, height: 28, borderRadius: '50%', background: tr.tone, color: tr.n >= 3 ? '#fff' : NV.purpleDark, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 13, fontFamily: NFT, flexShrink: 0 }}>{tr.n}</span>
            <span style={{ fontSize: 14.5, fontWeight: 800, color: NV.black, lineHeight: 1.1, fontFamily: NFT }}>{tr.name}</span>
          </div>
          <p style={{ fontSize: 12.5, color: NV.g600, lineHeight: 1.55, margin: 0 }}>{tr.desc}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── RMF LIFECYCLE ────────────────────────────────────────── */
const RmfLifecycle = () => (
  <window.Section bg="#fff" pad="84px 0">
    <window.SectionHeader overline="The RMF lifecycle"
      title="Seven steps to an Authorization to Operate."
      sub="Where the CSF describes risk, the RMF (SP 800-37) acts on it — a repeatable lifecycle from preparation through authorization and into continuous monitoring." maxSub={680} />
    <div className="vg-grid-7" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 12 }}>
      {RMF_STEPS.map(([ic, t, d], i) => (
        <div key={i} style={{ border: `1px solid ${NV.g200}`, borderRadius: 0, padding: '20px 16px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 10, position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ width: 38, height: 38, borderRadius: 0, background: NV.purpleSubtle, color: NV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <window.Icon name={ic} size={19} />
            </div>
            <span style={{ fontSize: 13, fontWeight: 800, color: NV.g300, fontFamily: "'JetBrains Mono', monospace" }}>{i + 1}</span>
          </div>
          <h4 style={{ fontSize: 14.5, fontWeight: 800, color: NV.black, margin: 0, fontFamily: NFT, letterSpacing: '-0.01em' }}>{t}</h4>
          <p style={{ fontSize: 11.5, color: NV.g500, lineHeight: 1.45, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 18, fontSize: 12.5, color: NV.g500 }}>
      <span style={{ color: NV.orange, display: 'flex' }}><window.Icon name="refresh" size={17} color={NV.orange} /></span>
      Monitor feeds back into the lifecycle — the RMF is continuous, not a one-time pass.
    </div>
  </window.Section>
);

/* ── WHO IT APPLIES TO ────────────────────────────────────── */
const Applies = () => (
  <window.Section bg={NV.g50} pad="84px 0">
    <window.SectionHeader overline="Who it applies to"
      title="Mandatory for some, invaluable for all."
      sub="NIST is the law of the land for federal systems — and the framework of choice for everyone who needs a credible, vendor-neutral way to manage cyber risk." maxSub={640} />
    <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
      {APPLIES.map(([ic, t, d], i) => (
        <div key={i} style={{ display: 'flex', gap: 18, border: `1px solid ${NV.g200}`, borderRadius: 0, padding: '26px 28px', background: '#fff' }}>
          <div style={{ width: 48, height: 48, borderRadius: 0, background: NV.orangeSubtle, color: NV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <window.Icon name={ic} size={24} />
          </div>
          <div>
            <h3 style={{ fontSize: 17.5, fontWeight: 800, color: NV.black, margin: '0 0 6px', fontFamily: NFT, letterSpacing: '-0.01em' }}>{t}</h3>
            <p style={{ fontSize: 14, color: NV.g600, lineHeight: 1.6, margin: 0 }}>{d}</p>
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── ROADMAP ──────────────────────────────────────────────── */
const Roadmap = () => (
  <window.Section bg="#fff" pad="84px 0">
    <div id="roadmap" style={{ scrollMarginTop: 24 }}>
      <window.SectionHeader align="center" overline="The roadmap to adoption"
        title="From risk picture to authorization."
        sub="A clear, sequenced path through NIST — profiling risk with the CSF and driving systems to authorization with the RMF. Durations are indicative for a mid-market organization." maxSub={700} />
    </div>
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', top: 33, left: '8.33%', right: '8.33%', height: 2, background: NV.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 ${NV.purpleLight}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
              <div style={{ width: 46, height: 46, borderRadius: '50%', background: NV.purpleSubtle, color: NV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <window.Icon name={ic} size={23} />
              </div>
            </div>
            <div style={{ fontSize: 11, fontWeight: 700, color: NV.orange, fontFamily: "'JetBrains Mono', monospace", marginBottom: 6 }}>{dur}</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: NV.black, marginBottom: 6, fontFamily: NFT, letterSpacing: '-0.01em' }}>{t}</div>
            <div style={{ fontSize: 12.5, color: NV.g500, lineHeight: 1.45, maxWidth: 168 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── SEEKING ──────────────────────────────────────────────── */
const Seeking = ({ onNav }) => (
  <window.Section bg={NV.g50} pad="84px 0">
    <div className="vg-detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 56, alignItems: 'start' }}>
      <div>
        <window.Overline style={{ marginBottom: 14 }}>Adopting NIST</window.Overline>
        <h2 style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.025em', color: NV.black, margin: '0 0 18px', lineHeight: 1.12, fontFamily: NFT }}>If you&rsquo;re adopting NIST, start here.</h2>
        <p style={{ fontSize: 16, color: NV.g600, lineHeight: 1.7, margin: '0 0 30px', maxWidth: 620 }}>
          NIST rewards clarity of intent. Decide what you are trying to achieve, categorize honestly, and instrument from the start — and the framework becomes a steady engine rather than a paperwork exercise. 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 ${NV.g200}`, borderRadius: 0, padding: '22px 24px', background: '#fff' }}>
              <div style={{ width: 44, height: 44, borderRadius: 0, background: NV.orangeSubtle, color: NV.orange, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <window.Icon name={ic} size={22} />
              </div>
              <div>
                <h3 style={{ fontSize: 17, fontWeight: 700, color: NV.black, margin: '0 0 5px', fontFamily: NFT, letterSpacing: '-0.01em' }}>{t}</h3>
                <p style={{ fontSize: 14, color: NV.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 ${NV.g200}`, borderRadius: 0, padding: '26px 26px', background: '#fff' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: NV.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: NV.g700, lineHeight: 1.45 }}>
                <span style={{ flexShrink: 0, marginTop: 1 }}><window.Icon name="check" size={18} color={NV.purple} /></span>{t}
              </div>
            ))}
          </div>
        </div>
        <div style={{ border: `1px solid ${NV.purple}`, borderRadius: 0, padding: '24px 26px', background: NV.purpleSubtle }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: NV.black, marginBottom: 8 }}>CSF, RMF, or both?</div>
          <p style={{ fontSize: 13.5, color: NV.g600, lineHeight: 1.55, margin: '0 0 16px' }}>The fastest way to clarity is a scoping conversation. We&rsquo;ll help you decide the right path and a realistic timeline.</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="#fff" pad="84px 0">
    <window.SectionHeader overline="Outputs"
      title="What you walk away with."
      sub="Every NIST engagement produces the concrete artifacts an Authorizing Official and an auditor expect — and a program that keeps producing them as your risk evolves." 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 ${NV.g200}`, borderRadius: 0, padding: '28px 26px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ width: 46, height: 46, borderRadius: 0, background: NV.purpleSubtle, color: NV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <window.Icon name={ic} size={23} />
          </div>
          <h3 style={{ fontSize: 17.5, fontWeight: 700, color: NV.black, margin: 0, lineHeight: 1.25, letterSpacing: '-0.01em', fontFamily: NFT }}>{t}</h3>
          <p style={{ fontSize: 14, color: NV.g600, lineHeight: 1.65, margin: 0 }}>{d}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── TESTIMONIALS ─────────────────────────────────────────── */
const Testimonials = () => (
  <window.Section bg={NV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="Client voices"
      title="Trusted across the NIST journey."
      sub="A few words from the security and risk leaders we&rsquo;ve guided through CSF adoption and RMF authorization. Illustrative of typical engagements." maxSub={640} />
    <div className="vg-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
      {TESTIMONIALS.map((t, i) => (
        <div key={i} style={{ border: `1px solid ${NV.g200}`, borderRadius: 0, padding: '30px 28px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ fontSize: 52, lineHeight: 0.6, fontWeight: 800, color: NV.orange, fontFamily: 'Georgia, serif', height: 26 }}>&ldquo;</div>
          <p style={{ fontSize: 15, color: NV.g700, lineHeight: 1.65, margin: 0, flex: 1, fontWeight: 500 }}>{t.quote}</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13, borderTop: `1px solid ${NV.g100}`, paddingTop: 18 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: NV.purpleSubtle, color: NV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14, fontFamily: NFT, flexShrink: 0 }}>{t.initials}</div>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: NV.black, fontFamily: NFT }}>{t.name}</div>
              <div style={{ fontSize: 12.5, color: NV.g500, lineHeight: 1.35 }}>{t.role} · {t.org}</div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── FAQ ──────────────────────────────────────────────────── */
const NFAQ = ({ 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 }}>NIST questions</window.Overline>
          <h2 className="vg-section-title" style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', color: NV.black, margin: '0 0 18px', lineHeight: 1.1, fontFamily: NFT }}>Good to know before we start.</h2>
          <p style={{ fontSize: 15.5, color: NV.g600, lineHeight: 1.65, margin: '0 0 24px' }}>Questions on CSF Profiles, Implementation Tiers, or the RMF and ATO process? 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 ${NV.g200}`, borderRadius: 0, overflow: 'hidden', background: '#fff' }}>
          {NIST_FAQ.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i ? `1px solid ${NV.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: NFT }}>
                  <span style={{ fontSize: 16, fontWeight: 700, color: NV.black, letterSpacing: '-0.01em' }}>{q}</span>
                  <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: '50%', background: isOpen ? NV.purple : NV.purpleSubtle, color: isOpen ? '#fff' : NV.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: NV.g600, lineHeight: 1.7, margin: 0, maxWidth: 680 }}>{a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </window.Section>
  );
};

/* ── FLOATING SCROLL-TO-TOP ───────────────────────────────── */
const ScrollTop = () => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      aria-label="Back to top"
      title="Back to top"
      style={{
        position: 'fixed', right: 28, bottom: 28, zIndex: 200,
        width: 52, height: 52, borderRadius: 0, border: 'none', cursor: 'pointer',
        background: NV.purple, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 28px rgba(91,46,145,0.32)',
        opacity: show ? 1 : 0,
        transform: show ? 'translateY(0)' : 'translateY(16px)',
        pointerEvents: show ? 'auto' : 'none',
        transition: 'opacity 200ms ease-out, transform 200ms ease-out, background 150ms ease-out',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.background = NV.purpleDark; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = NV.purple; }}
    >
      <span style={{ display: 'flex', transform: 'rotate(-90deg)' }}>
        <window.Icon name="arrow" size={22} color="#fff" />
      </span>
    </button>
  );
};

/* ── PAGE ─────────────────────────────────────────────────── */
const NISTPage = ({ onNav }) => (
  <div>
    <NHero onNav={onNav} />
    <NStats />
    <WhyNist />
    <Pillars />
    <Functions />
    <Tiers />
    <RmfLifecycle />
    <Applies />
    <Roadmap />
    <Seeking onNav={onNav} />
    <Outputs />
    <Testimonials />
    <NFAQ onNav={onNav} />
    <window.Section bg={NV.g50} pad="0">
      <window.CTABand
        overline="The foundation of trust"
        title="Ready to put NIST to work?"
        body="Tell us your systems, your obligations, and who you answer to. We'll confirm whether you need the CSF, the RMF, or both — and lay out a clear path from risk picture to authorization and continuous monitoring."
        primary="Start a Conversation" onNav={onNav} dest="contact" />
    </window.Section>
    <ScrollTop />
  </div>
);

Object.assign(window, { NISTPage });
