// Gold Fields — CMSI expansion (research-driven).
// CMSI = Consolidated Mining Standard Initiative: merges Copper Mark, MAC TSM,
// WGC Responsible Gold Mining Principles & ICMM into ONE standard.
// 24 Performance Areas · 4 pillars · 3 levels (Towards Good / Good / Leading).
// Facility-level claim: ≥80% aggregate at Good Practice, Good in ≥20/24 PAs,
// and Good in ≥4 PAs per pillar. The platform AI-maps existing standards in.
const { Ico: CI, I: CIco, Sidebar: CSide, Topbar: CTop, Gauge: CGauge, StatCard: CStat, AISum: CAISum } = window;

function CScreen({ children, h = 1000, sidebar, topbar, summary }) {
  return (
    <div className="e8 scr" style={{ width: 1440, height: h }}>
      {sidebar}
      <div className="main">{topbar}<div className="page" style={{ overflow: 'hidden' }}>{summary}{children}</div></div>
    </div>
  );
}

const PILLARS = [
  ['Ethical Business Practices', '#7a5af8', 6, 5, ['Business integrity', 'Transparency of payments', 'Responsible supply chains', 'Security & human rights']],
  ['Worker & Social Safeguards', '#2e90fa', 6, 5, ['Occupational health & safety', 'Labour rights', 'Diversity, equity & inclusion', 'Grievance mechanisms']],
  ['Social Performance', '#dc6803', 6, 3, ['Community engagement', "Indigenous peoples' rights", 'Resettlement', 'Cultural heritage']],
  ['Environmental Stewardship', '#0e9384', 6, 4, ['Tailings management', 'Water stewardship', 'Biodiversity', 'Climate & GHG', 'Cyanide management', 'Mine closure']],
];

/* ============================================================ CMSI 1 — Site claim readiness */
function CMSI1_Readiness() {
  const goodTotal = PILLARS.reduce((a, p) => a + p[3], 0); // 17
  return (
    <CScreen h={1120} sidebar={<CSide active="file" persona="client" locked={['model','target']}/>}
      topbar={<CTop crumbs={['Gold Fields', 'St Ives', 'CMSI readiness']} byline={<>Powered by <b>Method 8</b></>} search="Search…"/>}
      summary={<CAISum head="CMSI launches mid-2026. AI mapped your 11 group standards + ISO 9001/45001/14001 onto the 24 performance areas — St Ives is at Good Practice in 17 of 24, just short of the 20-area claim threshold." act="Close 3 areas in Social Performance to reach a Good Practice claim."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>CMSI · Consolidated Mining Standard</span><span className="dot"/><span>St Ives · facility-level</span><span className="dot"/><span className="badge violet" style={{ height: 18 }}>AI-mapped</span></div>
          <h1>CMSI claim readiness</h1>
          <div className="sub">One standard replacing four. Your existing assessments already cover most of it — AI mapped them onto the <b>24 performance areas</b> so you start at 71%, not zero.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-sec"><CI d={CIco.ext} sw={2}/> Assurance pack</button><button className="btn btn-pri">Plan to claim</button></div>
      </header>

      <section className="stats">
        <CStat hue="violet" icon={CIco.shield} trend="Good Practice" trendDir="flat" label="Aggregate score" value="71" unit="%" foot={<>claim needs <b>≥80%</b></>}/>
        <CStat hue="sky" icon={CIco.check} trend="17 / 24" trendDir="up" label="Areas at Good Practice" value="71" unit="%" foot={<>claim needs <b>≥20 / 24</b></>}/>
        <CStat hue="fuchsia" icon={CIco.layers} trend="3 of 4" trendDir="flat" label="Pillars meeting ≥4" value="3" unit="/ 4" foot={<>Social Performance short</>}/>
        <CStat hue="orange" icon={CIco.target} trend="from existing" trendDir="up" label="AI-prefilled areas" value="20" unit="/ 24" foot={<>4 need fresh evidence</>}/>
      </section>

      <div className="grid-2">
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>24 performance areas · 4 pillars</h2><div className="sub">Level achieved per area</div></div>
          <div className="card-head-r"><span className="legend" style={{ marginTop: 0, gap: 10 }}><span className="li"><span className="sw" style={{ background: '#17b26a' }}/>Good+</span><span className="li"><span className="sw" style={{ background: '#fdb022' }}/>Towards</span><span className="li"><span className="sw" style={{ background: '#f04438' }}/>Gap</span></span></div>
        </div>
          <div className="card-body" style={{ paddingTop: 12 }}>
            {PILLARS.map(([name, c, total, good, sample]) => (
              <div key={name} style={{ marginBottom: 14 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}><span style={{ width: 8, height: 8, borderRadius: 3, background: c }}/><span style={{ font: '600 13px/17px Inter', flex: 1 }}>{name}</span><span className={`badge ${good >= 4 ? 'green' : 'amber'}`}>{good} / {total} Good</span></div>
                <div style={{ display: 'flex', gap: 4 }}>{Array.from({ length: total }).map((_, i) => { const lvl = i < good ? 'g' : i < good + 1 ? 't' : 'r'; return <div key={i} style={{ flex: 1, height: 24, borderRadius: 5, background: lvl === 'g' ? '#d1fadf' : lvl === 't' ? '#fef0c7' : '#fee4e2', border: '1px solid rgba(0,0,0,.04)' }}/>; })}</div>
                <div style={{ font: '400 10.5px/15px Inter', color: 'var(--ink4)', marginTop: 4 }}>{sample.slice(0, 4).join(' · ')}{total > 4 ? ' …' : ''}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Claim eligibility</h2><div className="sub">CMSI Good Practice claim</div></div></div>
            <div className="card-body" style={{ paddingTop: 8 }}>
              {[['Aggregate ≥ 80% at Good Practice', '71%', false], ['Good Practice in ≥ 20 of 24 areas', '17 / 24', false], ['Good Practice in ≥ 4 areas per pillar', '3 of 4 pillars', false]].map(([t, v, ok], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: i < 2 ? '1px solid var(--line2)' : 'none' }}>
                  <span className="feed-ic" style={{ width: 26, height: 26, background: ok ? '#ecfdf3' : '#fffaeb', color: ok ? '#067647' : '#b54708', border: 'none' }}><CI d={ok ? CIco.check : CIco.target} sw={2.4} size={13}/></span>
                  <div style={{ flex: 1, font: '500 12.5px/16px Inter' }}>{t}</div><span style={{ font: '600 13px/1 Inter', color: ok ? '#067647' : '#b54708' }}>{v}</span>
                </div>
              ))}
              <div style={{ marginTop: 10, padding: '10px 12px', background: '#fffaeb', border: '1px solid #fedf89', borderRadius: 9, font: '500 12.5px/18px Inter', color: '#b54708' }}>Not yet claim-eligible — closest gap is <b>Social Performance</b> (3 of 4 areas). 3 areas to Good Practice gets you there.</div>
            </div>
          </div>
          <div className="card"><div className="card-body" style={{ padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}><div className="feed-ic ai" style={{ width: 32, height: 32 }}><CI d={CIco.spark} sw={2.2}/></div><div style={{ font: '600 13px/17px Inter' }}>How we got to 71% free</div></div>
            <div style={{ font: '400 12.5px/18px Inter', color: 'var(--ink3)' }}>AI mapped your <b>11 group standards</b> + ISO 9001/45001/14001 + your Tailings (GISTM) and Cyanide (ICMC) work onto CMSI's 24 areas. 20 areas prefilled with existing evidence; only 4 — mostly Social Performance — need fresh assessment.</div>
          </div></div>
        </div>
      </div>
    </CScreen>
  );
}

/* ============================================================ CMSI 2 — Performance Area detail */
function CMSI2_Area() {
  const levels = [
    ['Towards Good Practice', 'met', 'Tailings governance & accountable executive named; GISTM gap assessment complete.', 'GF Tailings Std · GISTM'],
    ['Good Practice', 'current', 'Independent tailings review board operating; emergency response plans tested; disclosure published.', 'ITRB minutes · ERP drill · disclosure'],
    ['Leading Practice', 'gap', 'Public commitment to zero harm with third-party-verified performance and community monitoring.', '2 evidence items missing'],
  ];
  return (
    <CScreen h={1040} sidebar={<CSide active="file" persona="client" locked={['model','target']}/>}
      topbar={<CTop crumbs={['Gold Fields', 'St Ives', 'CMSI', 'Tailings management']} byline={<>Powered by <b>Method 8</b></>} search="Search…"/>}
      summary={<CAISum head="Tailings management is at Good Practice — AI mapped it from your GISTM gap assessment and ITRB records. Leading Practice needs 2 more evidence items." act="Add third-party verification evidence to reach Leading Practice."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Environmental Stewardship</span><span className="dot"/><span>Performance area 18 of 24</span></div>
          <h1>Tailings management</h1>
          <div className="sub">Each CMSI area has three progressive levels. Your current level is mapped from existing assessments; the platform shows exactly what closes the gap to the next.</div>
        </div>
        <div className="pg-head-r"><span className="badge green" style={{ height: 28 }}><span className="d"/> Good Practice</span><button className="btn btn-pri">Upload evidence</button></div>
      </header>

      <div className="grid-2w">
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Three levels</h2><div className="sub">Progressive — each builds on the last</div></div></div>
          <div className="card-body" style={{ paddingTop: 12 }}>
            {levels.map(([lvl, st, body, ev], i) => (
              <div key={lvl} style={{ display: 'flex', gap: 12, padding: '12px 0', borderBottom: i < 2 ? '1px solid var(--line2)' : 'none' }}>
                <div style={{ flex: 'none', width: 34, height: 34, borderRadius: 999, display: 'grid', placeItems: 'center', background: st === 'met' ? '#ecfdf3' : st === 'current' ? '#1f242f' : '#fff', border: st === 'gap' ? '1.5px dashed var(--line3)' : 'none', color: st === 'current' ? '#fff' : st === 'met' ? '#067647' : 'var(--ink4)', font: '600 12px/1 Inter' }}>{st === 'gap' ? (i + 1) : <CI d={CIco.check} sw={3} size={15}/>}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ font: '600 14px/18px Inter' }}>{lvl}</span>{st === 'current' && <span className="badge green">You are here</span>}{st === 'gap' && <span className="badge amber">Next</span>}</div>
                  <div style={{ font: '400 12.5px/18px Inter', color: 'var(--ink3)', margin: '4px 0' }}>{body}</div>
                  <div style={{ font: '400 11px/15px Inter', color: st === 'gap' ? '#b54708' : '#5925dc' }}>{st === 'gap' ? '⚠ ' : '✓ mapped from: '}{ev}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>AI equivalency mapping</h2></div></div>
            <div className="card-body" style={{ paddingTop: 10 }}>
              {[['GF Tailings & dams standard', '92%', 'reviewed'], ['GISTM gap assessment', 'complete', 'reviewed'], ['ISO 14001 EMS', 'certified', 'mapped'], ['ICMM tailings governance', 'aligned', 'mapped']].map(([s, v, st], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '8px 0', borderBottom: i < 3 ? '1px solid var(--line2)' : 'none' }}><CI d={CIco.check} sw={2.4} size={14} style={{ color: '#17b26a' }}/><div style={{ flex: 1, font: '500 12.5px/16px Inter' }}>{s}</div><span className="muted" style={{ font: '400 11px/15px Inter' }}>{v}</span></div>
              ))}
              <div style={{ marginTop: 8, font: '400 11.5px/16px Inter', color: 'var(--ink4)' }}>These existing assessments satisfy the Good Practice level — no re-work needed.</div>
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Gap to Leading Practice</h2></div><span className="badge amber">2 items</span></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              {[['Third-party performance verification', 'warn'], ['Community-led monitoring program', 'warn']].map(([t, ic], i) => (
                <div key={i} className="feed-item" style={{ borderBottom: i < 1 ? '1px solid var(--line2)' : 'none' }}><div className="feed-ic warn"><CI d={CIco.target} sw={2.2}/></div><div style={{ flex: 1 }}><div className="feed-msg"><b>{t}</b></div></div><button className="btn btn-sec btn-sm">Plan</button></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </CScreen>
  );
}

window.GFCMSI = {
  screens: [
    { id: 'cm1', label: 'CMSI claim readiness (AI-mapped)', w: 1440, h: 1120, render: () => <CMSI1_Readiness/> },
    { id: 'cm2', label: 'Performance area detail · tailings', w: 1440, h: 1040, render: () => <CMSI2_Area/> },
  ],
};