// CMMI.jsx — Verigo Global: dedicated CMMI maturity appraisal + support page
const { V: CV, MAXW: CMW, FONT: CFT } = window;

/* ── DATA ─────────────────────────────────────────────────── */
const LEVELS = [
  { n: 1, name: 'Initial', tone: '#C9C2DE', short: 'Unpredictable, reactive', desc: 'Work gets done, but processes are ad hoc and depend on individual heroics. Success is hard to repeat.' },
  { n: 2, name: 'Managed', tone: '#A99BCE', short: 'Managed at the project level', desc: 'Projects are planned, measured, and controlled. Practices are repeatable within a team or program.' },
  { n: 3, name: 'Defined', tone: '#8159B5', short: 'Proactive, organization-wide', desc: 'Standard processes are defined across the organization and tailored to each project — the common target for most appraisals.' },
  { n: 4, name: 'Quantitatively Managed', tone: '#5B2E91', short: 'Measured and controlled', desc: 'Performance is governed statistically. The organization sets quantitative quality and performance objectives and manages to them.' },
  { n: 5, name: 'Optimizing', tone: '#3F1E68', short: 'Continuous improvement', desc: 'The organization continuously improves performance through incremental and innovative change, driven by data.' },
];

const VIEWS = [
  ['cpu', 'Development (DEV)', 'Engineering and developing quality products and services — the most widely adopted view.'],
  ['handshake', 'Services (SVC)', 'Establishing, delivering, and managing services that meet customer needs.'],
  ['network', 'Supplier Management', 'Selecting and managing suppliers and the products and services they deliver.'],
  ['users', 'People (PCMM)', 'Developing, motivating, and retaining the workforce that delivers the work.'],
];

const PRACTICE_AREAS = [
  ['target', 'Estimating'],
  ['clipboard', 'Planning'],
  ['activity', 'Monitor & Control'],
  ['gauge', 'Process Management'],
  ['layers', 'Process Asset Development'],
  ['check', 'Verification & Validation'],
  ['file', 'Requirements Development & Management'],
  ['refresh', 'Configuration Management'],
  ['shield', 'Risk & Opportunity Management'],
  ['search', 'Causal Analysis & Resolution'],
  ['handshake', 'Supplier Agreement Management'],
  ['award', 'Peer Reviews'],
];

const APPLIES = [
  ['cpu', 'Software & product engineering', 'Development houses that compete on the predictability and quality of what they ship — where repeatable engineering process is a selling point.'],
  ['handshake', 'IT & managed service providers', 'Service-delivery organizations and BPOs proving they can deliver consistently against SLAs at scale.'],
  ['building', 'Government & defense contractors', 'Bidders for whom a CMMI maturity-level rating is frequently a stated requirement or a strong differentiator in proposals.'],
  ['globe', 'IT outsourcing & export firms', 'Offshore and nearshore delivery centers — heavily adopted across India and Singapore — signaling delivery rigor to enterprise buyers.'],
];

const ROADMAP = [
  ['compass', 'Scope & select view', '2–3 wks', 'Choose the view (DEV, SVC, Supplier, People) and target maturity level, and define the organizational scope and sample projects.'],
  ['search', 'Gap appraisal', '3–5 wks', 'Benchmark current practice against the model for the target level and quantify the gaps by practice area.'],
  ['layers', 'Process implementation', '3–9 mo', 'Define standard processes, deploy them on real projects, and build the process-asset library and evidence trail.'],
  ['activity', 'Institutionalize & measure', '2–4 mo', 'Run the processes long enough to gather objective evidence, metrics, and the performance baselines an appraisal expects.'],
  ['clipboard', 'Readiness review', '2–4 wks', 'A mock appraisal confirms evidence sufficiency across every required practice area before the formal event.'],
  ['award', 'Benchmark Appraisal & rating', '1–2 wks', 'A certified Lead Appraiser conducts the benchmark appraisal and ISACA confirms the maturity-level rating — valid for three years.'],
];

const SEEKING = [
  ['compass', 'Choose the right view and target level', 'CMMI is delivered through views — Development, Services, Supplier Management, People — and rated 1 through 5. Most organizations target Level 3. Picking the view your buyers recognize and a level you can genuinely sustain is the foundational decision.'],
  ['layers', 'Build process people actually follow', 'A maturity rating is earned by how you really work, not by a binder of policies. We help you define standard processes that teams adopt on live projects, so the evidence an appraiser needs is a by-product of delivery — not a special effort.'],
  ['activity', 'Generate objective evidence over time', 'Appraisals are evidence-driven and look for institutionalized practice across multiple projects. That takes runway. We sequence implementation so processes are operating — and producing metrics — well before the Lead Appraiser arrives.'],
];

const PREPARE = [
  'A defined organizational scope and sample projects',
  'The selected view — DEV, SVC, Supplier, or People',
  'A target maturity level (commonly Level 3)',
  'Defined standard processes and a process-asset library',
  'Objective evidence across the required practice areas',
  'Named process owners ready for appraisal interviews',
];

const OUTPUTS = [
  ['search', 'Gap appraisal report', 'An independent benchmark of your current practice against the model for your target level — gaps quantified by practice area, with a prioritized improvement plan.'],
  ['layers', 'Standard process & asset library', 'A documented set of organizational standard processes, tailoring guidance, templates, and a reusable process-asset library your teams actually run on.'],
  ['award', 'CMMI maturity-level rating', 'The formal benchmark-appraisal result and ISACA-published maturity-level rating — the recognized, shareable credential, valid for three years.'],
  ['activity', 'Measurement & performance baselines', 'Defined metrics, dashboards, and performance baselines that turn process into evidence and make quantitative management possible.'],
  ['clipboard', 'Appraisal evidence package', 'Practice-area evidence organized and indexed exactly as a Lead Appraiser expects — the artifact that carries you cleanly through the benchmark appraisal.'],
  ['refresh', 'Sustainment & improvement plan', 'A roadmap to maintain your rating through its three-year validity and to climb to the next maturity level when you are ready.'],
];

const TESTIMONIALS = [
  {
    quote: 'Verigo got us to Level 3 without drowning our delivery teams in paperwork. They designed processes around how we already build software, so the appraisal evidence was just our normal project records. The Lead Appraiser had no findings.',
    name: 'Anika Sharma', role: 'VP of Delivery', org: 'IT services exporter', initials: 'AS',
  },
  {
    quote: 'A Level 3 rating was a hard requirement on a federal bid we couldn\u2019t afford to miss. Verigo built the plan backwards from the appraisal date and kept us on track. We were rated with two weeks to spare.',
    name: 'Thomas Beck', role: 'Director of PMO', org: 'Defense systems integrator', initials: 'TB',
  },
  {
    quote: 'What impressed me was the move from Level 3 to Level 4 — the measurement and statistical management side is where most firms stall. Verigo set up baselines that actually inform decisions, not just satisfy an appraiser.',
    name: 'Lena Ortiz', role: 'Head of Engineering Excellence', org: 'Enterprise software firm', initials: 'LO',
  },
];

const CMMI_FAQ = [
  ['What exactly is CMMI?', 'CMMI — Capability Maturity Model Integration — is a globally recognized process-improvement framework administered by ISACA. It describes the practices that distinguish ad hoc organizations from disciplined, continuously improving ones, and it provides an appraisal method to rate an organization\u2019s maturity on a scale of 1 to 5. It is used to both improve delivery performance and to prove that capability to customers.'],
  ['What do the five maturity levels mean?', 'They describe an organization\u2019s process maturity. Level 1 (Initial) is unpredictable and reactive. Level 2 (Managed) means projects are planned and controlled. Level 3 (Defined) means standard processes are established organization-wide — the most common target. Level 4 (Quantitatively Managed) adds statistical, data-driven control. Level 5 (Optimizing) means the organization continuously improves through measured innovation.'],
  ['Which maturity level should we target?', 'For most organizations, Level 3 is the right goal: it demonstrates defined, organization-wide processes and satisfies the majority of customer and bid requirements. Levels 4 and 5 add quantitative management and continuous optimization and are worth pursuing once Level 3 practices are firmly institutionalized. We help you pick a level you can genuinely sustain, not just achieve once.'],
  ['Who does CMMI apply to?', 'Any organization that wants to demonstrate disciplined, repeatable delivery — software and product engineering houses, IT and managed-service providers, government and defense contractors (where a maturity-level rating is often a bid requirement), and IT outsourcing and export firms, where CMMI adoption runs especially deep across markets like India and Singapore.'],
  ['Who performs the appraisal, and how long is it valid?', 'A formal Benchmark Appraisal is led by a Lead Appraiser certified by ISACA, who reviews objective evidence and interviews project teams before a maturity-level rating is confirmed and published. The rating is valid for three years, and can be maintained with a sustainment appraisal. Verigo prepares and coordinates the appraisal; to preserve independence, our readiness reviewer is kept separate from the team that implemented your processes.'],
  ['How is CMMI different from ISO or SOC 2?', 'They answer different questions. ISO 27001 and SOC 2 assess your security and control posture; CMMI assesses the maturity of how you deliver work — engineering, services, and management process. They are complementary, and the process discipline CMMI builds often strengthens the evidence and consistency those security frameworks rely on. Many of our clients pursue them together.'],
];

/* ── 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 }}>CMMI</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="stack" 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.purpleSubtle, color: CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <window.Icon name="trending" size={30} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <window.Tag color={CV.purple} bg={CV.purpleSubtle} border={CV.purpleSubtle}>Process Maturity</window.Tag>
              <window.Tag color={CV.g600} bg="#fff" border={CV.g200}>Maturity Levels 1&ndash;5</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 }}>
            CMMI maturity, <span style={{ color: CV.purple }}>proven by appraisal.</span>
          </h1>
          <p style={{ fontSize: 19, color: CV.g600, lineHeight: 1.6, margin: '0 0 30px', maxWidth: 600 }}>
            Capability Maturity Model Integration is the global benchmark for how disciplined your delivery really is. Verigo takes you from a gap appraisal through process implementation to a formal Benchmark Appraisal — and the ISACA maturity-level rating your customers recognize.
          </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:cmmi')}>Explore the CMMI 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', 'Administered by', 'ISACA'],
              ['trending', 'Measures', 'Delivery process maturity'],
              ['layers', 'Views', 'DEV · SVC · Supplier · People'],
              ['gauge', 'Rating validity', '3 years (Benchmark)'],
            ].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' }}>
      {[
        ['1–5', 'Maturity levels'],
        ['4', 'Views / constellations'],
        ['Level 3', 'Most common target'],
        ['3 yr', 'Rating validity'],
      ].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>
);

/* ── WHY CMMI ─────────────────────────────────────────────── */
const WhyCmmi = () => (
  <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 CMMI 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 }}>Capability you can prove — not just claim.</h2>
        <p style={{ fontSize: 16.5, color: CV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          Many organizations deliver well when their best people are on the job. CMMI exists to make that capability <strong style={{ color: CV.black }}>repeatable, organization-wide, and independent of individual heroics</strong> — so quality and predictability survive growth, turnover, and scale.
        </p>
        <p style={{ fontSize: 16.5, color: CV.g600, lineHeight: 1.7, margin: '0 0 18px' }}>
          Crucially, a CMMI maturity level is <strong style={{ color: CV.black }}>earned through a formal, evidence-based appraisal</strong> by a certified Lead Appraiser — not self-declared. That independent rating is exactly why buyers, especially in government and enterprise procurement, treat it as a credible signal of delivery rigor.
        </p>
        <p style={{ fontSize: 16.5, color: CV.g600, lineHeight: 1.7, margin: 0 }}>
          For software houses, IT service providers, and government contractors, a maturity-level rating has become a recognized differentiator — and frequently a prerequisite to bid.
        </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="stack" 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> Why it carries weight
            </div>
            <h3 style={{ fontSize: 22, fontWeight: 800, color: '#fff', margin: '0 0 12px', letterSpacing: '-0.02em', lineHeight: 1.25, fontFamily: CFT }}>Appraised, not asserted.</h3>
            <p style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, margin: 0 }}>
              A Benchmark Appraisal tests objective evidence across real projects and is led by an ISACA-certified Lead Appraiser before any rating is published. That independence is why a CMMI maturity level answers procurement diligence where a self-claim cannot.
            </p>
          </div>
        </div>
        <div className="vg-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {[
            ['layers', 'PA', 'Practice Area — the building blocks of the model, grouping the practices that drive a specific capability.'],
            ['award', 'Rating', 'The maturity level (1\u20135) confirmed by a Lead Appraiser and published by ISACA, valid for three years.'],
          ].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.purpleSubtle, color: CV.purple, 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>
);

/* ── MATURITY LEVELS STAIRCASE (the picture) ──────────────── */
const Maturity = () => (
  <window.Section bg={CV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="The five maturity levels"
      title="Five steps from reactive to optimizing."
      sub="CMMI rates an organization on a five-level scale. Each level builds on the one below it — you climb the staircase, you don't skip steps. Most organizations target Level 3." maxSub={660} />
    {/* Staircase diagram */}
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginBottom: 28, minHeight: 340 }}>
      {LEVELS.map((lv, i) => (
        <div key={lv.n} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
          <div style={{
            background: lv.tone, color: lv.n >= 3 ? '#fff' : CV.purpleDark, borderRadius: 0,
            height: 130 + i * 48, padding: '20px 18px 18px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            position: 'relative', boxShadow: lv.n === 3 ? '0 10px 30px rgba(91,46,145,0.22)' : 'none',
            border: lv.n === 3 ? `2px solid ${CV.orange}` : 'none',
          }}>
            {lv.n === 3 && <span style={{ position: 'absolute', top: -11, left: 18, fontSize: 9.5, fontWeight: 800, letterSpacing: '0.06em', color: '#fff', background: CV.orange, padding: '3px 9px', textTransform: 'uppercase' }}>Common target</span>}
            <div>
              <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.06em', opacity: 0.85, fontFamily: "'JetBrains Mono', monospace", marginBottom: 8 }}>LEVEL {lv.n}</div>
              <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.12, fontFamily: CFT }}>{lv.name}</div>
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 700, opacity: 0.9, lineHeight: 1.3 }}>{lv.short}</div>
          </div>
        </div>
      ))}
    </div>
    {/* Ascending arrow rail */}
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 26, padding: '0 2px' }}>
      <span style={{ fontSize: 12, fontWeight: 700, color: CV.g400, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Increasing maturity</span>
      <div style={{ flex: 1, height: 2, background: `linear-gradient(90deg, ${CV.g300}, ${CV.purple})` }} />
      <span style={{ color: CV.purple, display: 'flex' }}><window.Icon name="arrow" size={20} color={CV.purple} /></span>
    </div>
    {/* Level descriptions */}
    <div className="vg-grid-5" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
      {LEVELS.map((lv) => (
        <div key={lv.n} style={{ background: '#fff', border: `1px solid ${lv.n === 3 ? CV.orange : CV.g200}`, borderRadius: 0, padding: '18px 18px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 9 }}>
            <span style={{ width: 26, height: 26, borderRadius: '50%', background: lv.tone, color: lv.n >= 3 ? '#fff' : CV.purpleDark, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 13, fontFamily: CFT, flexShrink: 0 }}>{lv.n}</span>
            <span style={{ fontSize: 13.5, fontWeight: 800, color: CV.black, lineHeight: 1.1, fontFamily: CFT }}>{lv.name}</span>
          </div>
          <p style={{ fontSize: 12.5, color: CV.g600, lineHeight: 1.55, margin: 0 }}>{lv.desc}</p>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── COVERAGE + WHO IT APPLIES TO ─────────────────────────── */
const Coverage = () => (
  <window.Section bg="#fff" pad="84px 0">
    <window.SectionHeader overline="Coverage"
      title="One model, delivered through views."
      sub="CMMI is applied through views (constellations) — each adapting the model to a domain — and organized into practice areas that group the practices behind each capability." maxSub={700} />
    <div style={{ marginBottom: 36 }}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: CV.g400, marginBottom: 16 }}>The four views</div>
      <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {VIEWS.map(([ic, t, d], i) => (
          <div key={i} style={{ border: `1px solid ${CV.g200}`, borderRadius: 0, padding: '22px 22px', background: '#fff' }}>
            <div style={{ width: 44, height: 44, borderRadius: 0, background: CV.purpleSubtle, color: CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
              <window.Icon name={ic} size={22} />
            </div>
            <h4 style={{ fontSize: 15.5, fontWeight: 800, color: CV.black, margin: '0 0 6px', fontFamily: CFT, letterSpacing: '-0.01em' }}>{t}</h4>
            <p style={{ fontSize: 13, color: CV.g500, lineHeight: 1.55, margin: 0 }}>{d}</p>
          </div>
        ))}
      </div>
    </div>
    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: CV.g400, marginBottom: 14 }}>Representative practice areas</div>
    <div className="vg-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {PRACTICE_AREAS.map(([ic, name], i) => (
        <div key={i} style={{ border: `1px solid ${CV.g200}`, borderRadius: 0, padding: '18px 18px', background: '#fff', display: 'flex', alignItems: 'center', gap: 13 }}>
          <div style={{ width: 38, height: 38, borderRadius: 0, background: CV.purpleSubtle, color: CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <window.Icon name={ic} size={19} />
          </div>
          <span style={{ fontSize: 13.5, fontWeight: 600, color: CV.black, lineHeight: 1.3 }}>{name}</span>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── WHO IT APPLIES TO ────────────────────────────────────── */
const Applies = () => (
  <window.Section bg={CV.g50} pad="84px 0">
    <window.SectionHeader overline="Who it applies to"
      title="Built for organizations that deliver."
      sub="CMMI fits any organization whose value depends on disciplined, repeatable delivery — and whose buyers want proof of it." 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 ${CV.g200}`, borderRadius: 0, padding: '26px 28px', background: '#fff' }}>
          <div style={{ width: 48, height: 48, borderRadius: 0, background: CV.orangeSubtle, color: CV.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: CV.black, margin: '0 0 6px', fontFamily: CFT, letterSpacing: '-0.01em' }}>{t}</h3>
            <p style={{ fontSize: 14, color: CV.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 a rating"
        title="From gap appraisal to maturity-level rating."
        sub="A clear, sequenced path to a formal Benchmark Appraisal — with the implementation and institutionalization phases that actually earn the rating. 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: 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: 168 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── SEEKING A RATING ─────────────────────────────────────── */
const Seeking = ({ onNav }) => (
  <window.Section bg={CV.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 }}>Seeking a rating</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 CMMI, start here.</h2>
        <p style={{ fontSize: 16, color: CV.g600, lineHeight: 1.7, margin: '0 0 30px', maxWidth: 620 }}>
          A maturity rating is earned in how you operate over months, not in a final push before the appraisal. Get the view, the target level, and the runway right, and the path is steady and predictable. 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: '#fff' }}>
          <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 to target?</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 view, target maturity level, 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 CMMI engagement produces the concrete artifacts a Lead Appraiser expects — and a way of working that keeps generating them long after the rating." 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>
);

/* ── TESTIMONIALS ─────────────────────────────────────────── */
const Testimonials = () => (
  <window.Section bg={CV.g50} pad="84px 0">
    <window.SectionHeader align="center" overline="Client voices"
      title="Trusted on the path to maturity."
      sub="A few words from the delivery and engineering leaders we&rsquo;ve guided to a CMMI maturity-level rating. 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 ${CV.g200}`, borderRadius: 0, padding: '30px 28px', background: '#fff', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ fontSize: 52, lineHeight: 0.6, fontWeight: 800, color: CV.orange, fontFamily: 'Georgia, serif', height: 26 }}>&ldquo;</div>
          <p style={{ fontSize: 15, color: CV.g700, lineHeight: 1.65, margin: 0, flex: 1, fontWeight: 500 }}>{t.quote}</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13, borderTop: `1px solid ${CV.g100}`, paddingTop: 18 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: CV.purpleSubtle, color: CV.purple, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14, fontFamily: CFT, flexShrink: 0 }}>{t.initials}</div>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: CV.black, fontFamily: CFT }}>{t.name}</div>
              <div style={{ fontSize: 12.5, color: CV.g500, lineHeight: 1.35 }}>{t.role} · {t.org}</div>
            </div>
          </div>
        </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 }}>CMMI 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 views, target levels, or the Benchmark Appraisal 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 ${CV.g200}`, borderRadius: 0, overflow: 'hidden', background: '#fff' }}>
          {CMMI_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>
  );
};

/* ── 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: CV.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 = CV.purpleDark; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = CV.purple; }}
    >
      <span style={{ display: 'flex', transform: 'rotate(-90deg)' }}>
        <window.Icon name="arrow" size={22} color="#fff" />
      </span>
    </button>
  );
};

/* ── PAGE ─────────────────────────────────────────────────── */
const CMMIPage = ({ onNav }) => (
  <div>
    <CHero onNav={onNav} />
    <CStats />
    <WhyCmmi />
    <Maturity />
    <Coverage />
    <Applies />
    <Roadmap />
    <Seeking onNav={onNav} />
    <Outputs />
    <Testimonials />
    <CFAQ onNav={onNav} />
    <window.Section bg={CV.g50} pad="0">
      <window.CTABand
        overline="Capability is the deliverable"
        title="Ready to earn your CMMI maturity rating?"
        body="Tell us what you deliver and who you deliver it to. We'll confirm the right view, a target maturity level you can sustain, and a clear path to a formal Benchmark Appraisal and ISACA rating."
        primary="Start a Conversation" onNav={onNav} dest="contact" />
    </window.Section>
    <ScrollTop />
  </div>
);

Object.assign(window, { CMMIPage });
