// ToolkitCMMI.jsx — Verigo Global: CMMI v2.0 implementation toolkit page
const { V: TV, MAXW: TMW, FONT: TFT } = window;
const CM_ACCENT = '#3F1E68'; // purpleDark
const CM_ACCENTBG = '#E0E0F8';

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

/* ── HERO ────────────────────────────────────────────────── */
const MiHero = ({ onNav }) => (
  <section style={{background:TV.g50,padding:'56px 0 64px',borderBottom:`1px solid ${TV.g200}`,position:'relative',overflow:'hidden'}}>
    <window.HeroWatermark variant="stack" color={CM_ACCENT} opacity={0.14} style={{top:-20,right:-20,width:480,height:440}} />
    <div style={{maxWidth:TMW,margin:'0 auto',padding:'0 32px',position:'relative',zIndex:1}}>
      <MiCrumb onNav={onNav} />
      <div style={{display:'grid',gridTemplateColumns:'1fr 360px',gap:64,alignItems:'end'}}>
        <div>
          <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:22}}>
            <div style={{width:60,height:60,background:CM_ACCENTBG,color:CM_ACCENT,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <window.Icon name="trending" size={30} />
            </div>
            <div style={{display:'flex',gap:8}}>
              <window.Tag color={CM_ACCENT} bg={CM_ACCENTBG} border={CM_ACCENTBG}>Process Maturity</window.Tag>
              <window.Tag color={TV.g600} bg="#fff" border={TV.g200}>CMMI v2.0 · ML2–ML5</window.Tag>
            </div>
          </div>
          <h1 className="vg-hero-title" style={{fontSize:60,fontWeight:800,letterSpacing:'-0.035em',color:TV.black,margin:'0 0 18px',lineHeight:1.02,fontFamily:TFT}}>
            The CMMI toolkit, <span style={{color:TV.purple}}>ready to deploy.</span>
          </h1>
          <p style={{fontSize:19,color:TV.g600,lineHeight:1.6,margin:'0 0 30px',maxWidth:600}}>
            A complete, practitioner-maintained document set — 14 policies, 12 procedures, and practice templates across all 20 CMMI v2.0 practice areas — tailored to your organization so you build an appraisal-ready process environment without starting from a blank page.
          </p>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <window.Btn kind="primary" onClick={()=>onNav('evaluation')}>Start the readiness evaluation <window.Icon name="arrow" size={17} color="#fff" /></window.Btn>
            <window.Btn kind="ghost" onClick={()=>document.getElementById('downloads')?.scrollIntoView({behavior:'smooth',block:'start'})}>See what's inside</window.Btn>
          </div>
        </div>
        <div style={{background:'#fff',border:`1px solid ${TV.g200}`,padding:'26px',boxShadow:'0 8px 32px rgba(91,46,145,0.08)'}}>
          <div style={{fontSize:11,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:TV.g400,marginBottom:16}}>Inside the toolkit</div>
          <div style={{display:'flex',flexDirection:'column',gap:14}}>
            {[['doc','14','Approval-ready policies'],['file','12','Operational procedures'],['layers',String(window.TK_CMMI.CTRL_COUNT),'CMMI v2.0 practice templates'],['clipboard','25+','Evidence checklists & samples']].map(([ic,n,l],i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap:12}}>
                <div style={{width:34,height:34,background:TV.purpleSubtle,color:TV.purple,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><window.Icon name={ic} size={18} /></div>
                <div style={{fontSize:22,fontWeight:800,color:TV.black,fontFamily:TFT,letterSpacing:'-0.02em',minWidth:46}}>{n}</div>
                <div style={{fontSize:13.5,color:TV.g600,fontWeight:500}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ── OVERVIEW ────────────────────────────────────────────── */
const MiOverview = () => (
  <window.Section bg="#fff" pad="80px 0">
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:64,alignItems:'start'}}>
      <div>
        <window.Overline style={{marginBottom:14}}>Overview</window.Overline>
        <h2 className="vg-section-title" style={{ fontSize: 36,fontWeight:800,letterSpacing:'-0.025em',color:TV.black,margin:'0 0 20px',lineHeight:1.12,fontFamily:TFT}}>Every practice area covered — pre-built and tailored.</h2>
        <p style={{fontSize:16.5,color:TV.g600,lineHeight:1.7,margin:'0 0 18px'}}>The Verigo CMMI toolkit is the document backbone of an appraisal-ready <strong style={{color:TV.black}}>process improvement program</strong>. It pairs the organizational policies and procedures with implementation templates for every practice across CMMI v2.0's 20 practice areas — from Estimating to Causal Analysis & Resolution.</p>
        <p style={{fontSize:16.5,color:TV.g600,lineHeight:1.7,margin:0}}>Each artefact is maintained by senior practitioners and tailored to your organization and target maturity level — embedded into how you operate, the <strong style={{color:TV.black}}>Compliance by Design</strong> way, so appraisal evidence is produced by the process itself.</p>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:14}}>
        {[['compass','Scaled to your target ML',"Whether you're targeting ML2 or ML3, the toolkit covers only the practice areas that apply — no unnecessary overhead."],['clipboard','Evidence-first design','Each practice template is built to generate the direct and indirect evidence a Lead Appraiser will sample.'],['network','Cross-framework ready','Practices are mapped so the same artefacts support ISO 9001, NIST, and SPICE/ISO 33000.']].map(([ic,t,d],i)=>(
          <div key={i} style={{display:'flex',gap:16,border:`1px solid ${TV.g200}`,padding:'22px 24px',background:'#fff'}}>
            <div style={{width:44,height:44,background:TV.purpleSubtle,color:TV.purple,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><window.Icon name={ic} size={22} /></div>
            <div><h3 style={{fontSize:16.5,fontWeight:700,color:TV.black,margin:'0 0 5px',fontFamily:TFT,letterSpacing:'-0.01em'}}>{t}</h3><p style={{fontSize:14,color:TV.g600,lineHeight:1.6,margin:0}}>{d}</p></div>
          </div>
        ))}
      </div>
    </div>
  </window.Section>
);

/* ── COVERAGE ────────────────────────────────────────────── */
const MiCoverage = () => (
  <window.Section bg={TV.g50} pad="80px 0">
    <window.SectionHeader overline="Coverage" align="center" title="Built for every maturity level — across all four categories" sub="The toolkit scales from ML2 to ML5, covering all 20 practice areas across the Doing, Managing, Enabling, and Improving categories." />
    <div style={{marginBottom:16,fontSize:11,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:TV.g400}}>Three target maturity levels</div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16,marginBottom:40}}>
      {window.TK_CMMI.LEVELS.map((lv,i)=>{const pop=!!lv.popular;return(
        <div key={i} style={{background:'#fff',border:`1px solid ${pop?CM_ACCENT:TV.g200}`,outline:pop?`1px solid ${CM_ACCENT}`:'none',padding:'24px'}}>
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:12}}>
            <span style={{fontSize:11,fontWeight:700,letterSpacing:'0.08em',textTransform:'uppercase',color:pop?CM_ACCENT:TV.g500,fontFamily:"'JetBrains Mono', monospace"}}>{lv.id.toUpperCase()}</span>
            {pop&&<span style={{fontSize:10,fontWeight:700,letterSpacing:'0.06em',textTransform:'uppercase',color:'#fff',background:CM_ACCENT,padding:'3px 9px'}}>Most common</span>}
          </div>
          <div style={{display:'flex',alignItems:'baseline',gap:8,marginBottom:8}}>
            <span style={{fontSize:34,fontWeight:800,color:TV.purple,letterSpacing:'-0.03em',fontFamily:TFT,lineHeight:1}}>{lv.pas}</span>
            <span style={{fontSize:13.5,color:TV.g500,fontWeight:600}}>practice areas</span>
          </div>
          <div style={{fontSize:14.5,fontWeight:700,color:TV.black,fontFamily:TFT,marginBottom:8}}>{lv.name.split(' — ')[1]}</div>
          <p style={{fontSize:13,color:TV.g500,lineHeight:1.55,margin:'0 0 10px'}}>{lv.desc}</p>
          <div style={{display:'flex',alignItems:'center',gap:8,fontSize:13,color:TV.g700}}><window.Icon name="award" size={15} color={TV.purple} />{lv.appraisal}</div>
        </div>
      );})}
    </div>
    <div style={{marginBottom:16,fontSize:11,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:TV.g400}}>Four CMMI categories · 20 practice areas</div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16}}>
      {window.TK_CMMI.CATS.map((c,i)=>(
        <div key={i} style={{background:'#fff',border:`1px solid ${TV.g200}`,padding:'22px 20px'}}>
          <div style={{width:44,height:44,background:TV.purpleSubtle,color:TV.purple,display:'flex',alignItems:'center',justifyContent:'center',marginBottom:14}}><window.Icon name={c.icon} size={22} /></div>
          <div style={{fontSize:18,fontWeight:800,color:TV.black,fontFamily:TFT,letterSpacing:'-0.01em',marginBottom:8}}>{c.cat}</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
            {c.pas.map((p,j)=><span key={j} style={{fontSize:11,fontWeight:700,color:TV.purple,background:TV.purpleSubtle,padding:'3px 8px',fontFamily:"'JetBrains Mono', monospace"}}>{p.code}</span>)}
          </div>
        </div>
      ))}
    </div>
  </window.Section>
);

/* ── CONTENTS EXPLORER + GATED DOWNLOADS ─────────────────── */
const MiContents = ({ onDownload, unlocked }) => {
  const [tab, setTab] = React.useState('policies');
  const A = window.TK_CMMI.ASSETS;
  const tabs = [['policies','Policies',A.policies.count],['procedures','Procedures',A.procedures.count],['controls','Practice Templates',A.controls.count]];
  const meta = A[tab];
  const renderList = () => {
    if (tab === 'controls') return (
      <div style={{display:'flex',flexDirection:'column',gap:32}}>
        {window.TK_CMMI.CATS.map((c,ci)=>(
          <div key={ci}>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:16,paddingBottom:8,borderBottom:`2px solid ${TV.g200}`}}>
              <window.Icon name={c.icon} size={20} color={TV.purple} />
              <span style={{fontSize:15,fontWeight:800,color:TV.black,fontFamily:TFT}}>{c.cat}</span>
            </div>
            {c.pas.map((p,pi)=>(
              <div key={pi} style={{marginBottom:20}}>
                <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
                  <span style={{fontSize:12,fontWeight:800,color:CM_ACCENT,fontFamily:"'JetBrains Mono',monospace"}}>{p.code}</span>
                  <span style={{fontSize:14,fontWeight:700,color:TV.black,fontFamily:TFT}}>{p.name}</span>
                  <span style={{fontSize:11.5,color:TV.g400}}>{p.items.length} practices{p.ml2?' · ML2+':' · ML3+'}</span>
                </div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:'6px 24px'}}>
                  {p.items.map(([id,t],k)=>(
                    <div key={k} style={{display:'flex',gap:10,alignItems:'baseline',fontSize:13,lineHeight:1.4,paddingBottom:5,borderBottom:`1px solid ${TV.g100}`}}>
                      <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,fontWeight:700,color:TV.orange,flexShrink:0,minWidth:50}}>{id}</span>
                      <span style={{color:TV.g700}}>{t}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
    const list = tab==='policies'?window.TK_CMMI.POLICIES:window.TK_CMMI.PROCEDURES;
    return (<div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:'14px 24px'}}>{list.map(([t,d],i)=>(<div key={i} style={{display:'flex',gap:12,alignItems:'flex-start',paddingBottom:14,borderBottom:`1px solid ${TV.g100}`}}><span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:12,fontWeight:700,color:TV.purple,flexShrink:0,marginTop:1}}>{String(i+1).padStart(2,'0')}</span><div><div style={{fontSize:14.5,fontWeight:700,color:TV.black,lineHeight:1.3,fontFamily:TFT}}>{t}</div><div style={{fontSize:13,color:TV.g500,lineHeight:1.5,marginTop:2}}>{d}</div></div></div>))}</div>);
  };
  return (
    <section id="downloads" style={{background:'#fff',padding:'84px 0',scrollMarginTop:80}}>
      <div style={{maxWidth:TMW,margin:'0 auto',padding:'0 32px'}}>
        <window.SectionHeader overline="Toolkit contents" title="Browse the full set — and take it with you" sub="Explore every policy, procedure, and practice in the toolkit. Download any list as a branded PDF." maxSub={620} />
        <div style={{display:'flex',gap:8,borderBottom:`1px solid ${TV.g200}`}}>
          {tabs.map(([id,label,count])=>(<button key={id} onClick={()=>setTab(id)} style={{fontFamily:TFT,fontSize:14.5,fontWeight:700,padding:'14px 20px',cursor:'pointer',background:'none',border:'none',borderBottom:tab===id?`3px solid ${TV.purple}`:'3px solid transparent',color:tab===id?TV.purple:TV.g500,marginBottom:-1,display:'flex',alignItems:'center',gap:8}}>{label}<span style={{fontSize:11,fontWeight:700,padding:'2px 8px',borderRadius:9999,background:tab===id?TV.purpleSubtle:TV.g100,color:tab===id?TV.purple:TV.g500}}>{count}</span></button>))}
        </div>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:24,flexWrap:'wrap',background:TV.g50,border:`1px solid ${TV.g200}`,borderTop:'none',padding:'20px 24px'}}>
          <div style={{display:'flex',alignItems:'center',gap:14}}>
            <div style={{width:46,height:46,background:TV.purple,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><window.Icon name={meta.icon} size={23} color="#fff" /></div>
            <div><div style={{fontSize:16,fontWeight:800,color:TV.black,fontFamily:TFT}}>{meta.label}</div><div style={{fontSize:13,color:TV.g500,maxWidth:520,lineHeight:1.4}}>{meta.blurb}</div></div>
          </div>
          <window.Btn kind="primary" onClick={()=>onDownload(tab)} style={{flexShrink:0}}>
            <window.Icon name={unlocked?'arrow':'lock'} size={16} color="#fff" />
            {unlocked?`Download PDF · ${meta.count} ${meta.unit}`:`Download PDF (${meta.count} ${meta.unit})`}
          </window.Btn>
        </div>
        <div style={{border:`1px solid ${TV.g200}`,borderTop:'none',padding:'32px 28px'}}>{renderList()}</div>
      </div>
    </section>
  );
};

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

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

/* ── PAGE ────────────────────────────────────────────────── */
const ToolkitCMMIPage = ({ onNav }) => {
  const [modalAsset, setModalAsset] = React.useState(null);
  const [unlocked, setUnlocked] = React.useState(false);
  const sessionOk = () => { try { return !!sessionStorage.getItem('verigo_dl_ok'); } catch(e) { return false; } };
  React.useEffect(() => { if (sessionOk()) setUnlocked(true); }, []);
  const onDownload = (asset) => { if (sessionOk()) window.TK_CMMI.generatePDF(asset, window.TK_CMMI.getUser()||{}); else setModalAsset(asset); };
  const onModalSubmit = (form) => { window.TK_CMMI.storeLead(form); try{sessionStorage.setItem('verigo_dl_ok','1');}catch(e){} setUnlocked(true); const a=modalAsset; setModalAsset(null); setTimeout(()=>window.TK_CMMI.generatePDF(a,form),60); };
  const A = modalAsset ? window.TK_CMMI.ASSETS[modalAsset] : null;
  return (
    <div>
      <MiHero onNav={onNav} />
      <MiOverview />
      <MiCoverage />
      <MiContents onDownload={onDownload} unlocked={unlocked} />
      <MiPricing onNav={onNav} />
      <MiEvalBand onNav={onNav} />
      {A && <window.LeadCaptureModal icon={A.icon} eyebrow={`Download · ${A.count} ${A.unit}`} heading={A.label} intro="Tell us where to send it and a practitioner can tailor it to your scope. Your PDF downloads immediately." cta="Download PDF" note="We'll only use your details to share the toolkit and follow up." onClose={()=>setModalAsset(null)} onSubmit={onModalSubmit} />}
    </div>
  );
};
Object.assign(window, { ToolkitCMMIPage });
