// Gold Fields — Method 8 lead. AI-led control room + "what is where" registry.
// Replaces the linear wizard: the lead facilitates via chat + toggles; the
// registry is the messy live source of truth (half-built, half-launched).
const { Ico: LI, I: LIco, StatCard: LStat, AISum: LAISum } = window;

function LScreen({ children, h = 900, 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 LeadSidebar = () => (
  <aside className="sb">
    <div className="sb-logo">M8</div>
    {[['spark', LIco.spark, 1], ['file', LIco.file, 0], ['grid', LIco.grid, 0], ['users', LIco.users, 0], ['activity', LIco.activity, 0]].map(([id, ic, on]) => (
      <div key={id} className={`sb-icon ${on ? 'active' : ''}`}><LI d={ic}/></div>
    ))}
    <span className="sb-sp"/>
    <div className="sb-icon"><LI d={LIco.settings}/></div>
    <div className="sb-av"><img src="assets/avatars/av-me.svg" alt=""/></div>
  </aside>
);

const LeadTop = ({ crumbs }) => (
  <div className="topbar">
    <nav className="crumb">{crumbs.map((c, i) => <React.Fragment key={i}>{i > 0 && <span className="sep">›</span>}<span className={i === crumbs.length - 1 ? 'current' : ''}>{c}</span></React.Fragment>)}</nav>
    <div className="tb-right">
      <span className="byline"><span className="o-dot"/> Method 8 · <b>admin</b></span>
      <div className="searchbox" style={{ minWidth: 200 }}><LI d={LIco.search} sw={2}/><span className="ph">Search the program…</span><span className="kbd">⌘K</span></div>
    </div>
  </div>
);

/* ============================================================ L0 — Firm console · all programs across orgs */
function L0_AllPrograms() {
  const rows = [
    ['Gold Fields', 'Standards gap assessment', 'Gap assessment', 'Rollout · wave 1', 'av-me', 'Ryan', 71, 'blue'],
    ['Talison Lithium', 'Operating system overhaul', 'EOM + BOM', 'Build · week 5', 'av-sarah', 'Kath', 28, 'violet'],
    ['Subicare Health', 'NDIS readiness', 'Org health', 'Assess', 'av-marcus', 'Sai', 54, 'amber'],
    ['Lightwell Energy', 'Interface reset', 'Interface diagnostic', 'Findings', 'av-me', 'Ryan', 88, 'green'],
    ['Westport', 'Safety uplift', 'Gap assessment', 'Setup', null, '—', 0, 'gray'],
    ['Aurora Minerals', 'Continuous improvement', 'Improvement queue', 'Live', 'av-priya', 'Mei', 63, 'blue'],
    ['Kelda Water', 'Operating model build', 'EOM + BOM', 'Setup', null, '—', 0, 'gray'],
  ];
  return (
    <LScreen h={988} sidebar={<LeadSidebar/>} topbar={<LeadTop crumbs={['Method 8', 'Programs']}/>}
      summary={<LAISum head="9 active programs across 6 clients. Gold Fields wave 1 is mid-rollout; Talison overhaul on track. 2 new programs have no lead assigned." act="Assign a Method 8 lead to Westport and Kelda Water."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Method 8 firm console</span><span className="dot"/><span>All clients</span><span className="dot"/><span className="live">Live</span></div>
          <h1>Programs</h1>
          <div className="sub">Every client engagement in one place — module, stage, the assigned Method 8 lead, and progress. Spin up a new program in a couple of minutes.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-sec"><LI d={LIco.users} sw={2}/> Resourcing</button><button className="btn btn-pri"><LI d={LIco.plus} sw={2}/> New program</button></div>
      </header>

      <section className="stats">
        <LStat hue="sky" icon={LIco.layers} trend="+2 this Q" trendDir="up" label="Active programs" value="9" foot={<>across <b>6</b> clients</>}/>
        <LStat hue="violet" icon={LIco.file} trend="" trendDir="flat" label="Assessments in flight" value="430" foot={<>all clients</>}/>
        <LStat hue="orange" icon={LIco.users} trend="2 to staff" trendDir="dn" label="Programs unstaffed" value="2" foot={<>need a lead</>}/>
        <LStat hue="fuchsia" icon={LIco.activity} trend="" trendDir="flat" label="Method 8 people" value="11" foot={<>8 allocated</>}/>
      </section>

      <div className="card"><div className="card-head"><div className="card-head-l"><h2>All programs</h2></div><div className="card-head-r"><div className="pill-tabs"><button className="pill-tab active">All</button><button className="pill-tab">Mine</button><button className="pill-tab">Unstaffed</button></div></div></div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="gtable"><thead><tr><th>Client</th><th>Program</th><th>Module</th><th>Stage</th><th>Method 8 lead</th><th>Progress</th><th></th></tr></thead>
            <tbody>{rows.map(([cl, prog, mod, stage, av, lead, pct, tone]) => (
              <tr key={cl}><td><b>{cl}</b></td><td>{prog}</td><td><span className="badge gray">{mod}</span></td><td><span className={`badge ${tone}`}>{stage}</span></td>
                <td>{av ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><span className="av-sm"><img src={`assets/avatars/${av}.svg`} alt=""/></span>{lead}</span> : <span className="badge amber">Assign lead</span>}</td>
                <td><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><div style={{ width: 80, height: 6, background: 'var(--wash2)', borderRadius: 3, overflow: 'hidden' }}><div style={{ width: `${pct}%`, height: '100%', background: pct >= 70 ? '#17b26a' : pct > 0 ? '#2e90fa' : 'transparent' }}/></div><span style={{ font: '500 12px/1 Inter', fontVariantNumeric: 'tabular-nums', width: 30 }}>{pct ? pct + '%' : '—'}</span></div></td>
                <td><span className="card-link">Open <LI d={LIco.arrowR} sw={2} size={12}/></span></td></tr>
            ))}</tbody></table>
        </div>
      </div>
    </LScreen>
  );
}

/* ============================================================ L0b — Set up a program (precursor) */
function L0b_NewProgram() {
  const mods = [['Gap assessment', LIco.file, 'Standards conformance per site', true], ['Org health', LIco.shield, 'Formative effectiveness scan', false], ['Interface diagnostic', LIco.users, 'Team ↔ team friction', false], ['Operating model', LIco.layers, 'EOM + BOM build', false], ['Improvement queue', LIco.target, 'Continuous actions', false]];
  return (
    <LScreen h={1112} sidebar={<LeadSidebar/>} topbar={<LeadTop crumbs={['Method 8', 'Programs', 'New']}/>}
      summary={<LAISum head="Setting up for Gold Fields. Gap assessment selected; AI can prefill 8 of 11 standards from their existing standards docs." act="Assign a Method 8 lead, then create — you'll land in the control room."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>New program</span><span className="dot"/><span>Gold Fields</span></div>
          <h1>Set up a program</h1>
          <div className="sub">Pick the client and module, point AI at their documents to prefill, and assign the Method 8 lead. That's the whole setup — the rest is run from the control room.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-sec">Save draft</button><button className="btn btn-pri"><LI d={LIco.arrowR} sw={2}/> Create &amp; open control room</button></div>
      </header>

      <div className="grid-2">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>1 · Client</h2></div></div>
            <div className="card-body" style={{ paddingTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 34, height: 34, borderRadius: 8, background: '#fef0c7', display: 'grid', placeItems: 'center', font: '700 13px/1 Inter', color: '#b54708' }}>GF</div>
              <div style={{ flex: 1 }}><div style={{ font: '600 14px/18px Inter' }}>Gold Fields</div><div style={{ font: '400 12px/16px Inter', color: 'var(--ink4)' }}>Existing client · 15 sites · 4 regions</div></div>
              <span className="badge green">Selected</span>
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>2 · Module</h2><div className="sub">What this engagement delivers</div></div></div>
            <div className="card-body" style={{ paddingTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9 }}>
              {mods.map(([nm, ic, d, on]) => (
                <div key={nm} className={`catitem ${on ? 'on' : ''}`} style={{ marginBottom: 0, alignItems: 'flex-start' }}>
                  <span className="ck" style={{ marginTop: 1 }}>{on && <LI d={LIco.check} sw={3} size={12}/>}</span>
                  <div style={{ flex: 1 }}><div className="nm">{nm}</div><div className="mt">{d}</div></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>3 · Prefill from documents</h2><div className="sub">AI builds the modules from what they already have</div></div></div>
            <div className="card-body" style={{ paddingTop: 12 }}>
              {[['xls', 'GF-Standards-Register.xlsx', '11 standards detected'], ['doc', 'Critical-controls-SOPs.docx', '24 controls'], ['pdf', 'ICMM-frameworks.pdf', 'reference']].map(([t, n, m]) => (
                <div key={n} className="up-row"><span className={`up-ic ${t}`}>{t.toUpperCase()}</span><div style={{ flex: 1 }}><div className="up-name">{n}</div><div className="up-meta">{m}</div></div><LI d={LIco.check} sw={2.4} size={15} style={{ color: '#17b26a' }}/></div>
              ))}
              <div style={{ marginTop: 6, padding: '9px 12px', background: '#f6f4ff', border: '1px solid #d6bbfb', borderRadius: 9, font: '500 12.5px/18px Inter', color: '#5925dc', display: 'flex', alignItems: 'center', gap: 8 }}><LI d={LIco.spark} sw={2.2} size={15}/> AI will prefill <b>8 of 11</b> standards · 38 critical items flagged for review.</div>
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>4 · Assign Method 8 lead</h2></div></div>
            <div className="card-body" style={{ paddingTop: 10 }}>
              {[['av-me', 'Ryan Walsh', 'Delivery lead', true], ['av-sarah', 'Kath Nguyen', 'Co-lead · build', true], ['av-marcus', 'Sai Prasad', 'HSE specialist', false]].map(([a, nm, r, on]) => (
                <div key={nm} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--line2)' }}>
                  <span className="av-sm" style={{ width: 30, height: 30 }}><img src={`assets/avatars/${a}.svg`} alt=""/></span>
                  <div style={{ flex: 1 }}><div style={{ font: '600 13px/16px Inter' }}>{nm}</div><div style={{ font: '400 11px/14px Inter', color: 'var(--ink4)' }}>{r}</div></div>
                  <div className={`tgl ${on ? 'on' : ''}`}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </LScreen>
  );
}

/* ============================================================ L1 — AI control room */
function L1_ControlRoom() {
  return (
    <LScreen summary={<LAISum head="3 standards live, 5 issued; Cyanide just drafted from the ICMM doc. 6 submissions are waiting on review." act="Issue Cyanide to the cyanide sites, then clear the review queue."/>} h={1248} sidebar={<LeadSidebar/>} topbar={<LeadTop crumbs={['Method 8', 'Gold Fields', 'Control room']}/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Gold Fields</span><span className="dot"/><span>Live program</span><span className="dot"/><span className="live">3 standards launched · more coming</span></div>
          <h1>Control room</h1>
          <div className="sub">Tell Method 8 what you need — build, prefill, issue, adjust. You facilitate; it does the work. The <b>registry</b> is the live source of truth for what exists where.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-sec"><LI d={LIco.file} sw={2}/> Open registry</button></div>
      </header>

      <div className="grid-2">
        {/* chat */}
        <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
          <div className="card-head"><div className="card-head-l"><h2>Method 8 assistant</h2><div className="sub">Natural-language ops · everything lands in the registry</div></div></div>
          <div className="card-body" style={{ paddingTop: 14 }}>
            <div className="chat">
              <div className="chat-msg me"><div className="chat-bub">Build a Cyanide Management standard from this ICMM doc<span className="filechip"><LI d={LIco.doc} sw={2} size={13}/> ICMM-cyanide-code.pdf</span></div></div>
              <div className="chat-msg"><span className="chat-av ai"><LI d={LIco.spark} sw={2.2} size={15}/></span><div className="chat-bub">Built <b>Cyanide Management</b> — 14 criteria, 4 safety-critical (red). Added to the registry as <b>Draft</b>. Want me to issue it to the sites that handle cyanide?</div></div>
              <div className="chat-msg me"><div className="chat-bub">Prefill Contractor mgmt for Salares Norte from St Ives</div></div>
              <div className="chat-msg"><span className="chat-av ai"><LI d={LIco.spark} sw={2.2} size={15}/></span><div className="chat-bub">Prefilled <b>9 of 12</b> criteria. Left 3 site-specific ones blank for the owner. Salares Norte now shows <b>Partial</b>.</div></div>
              <div className="chat-msg me"><div className="chat-bub">Issue Tailings & dams to Salares Norte and Damang</div></div>
              <div className="chat-msg"><span className="chat-av ai"><LI d={LIco.spark} sw={2.2} size={15}/></span><div className="chat-bub">Issued to 2 sites · owners notified. Collaboration is <b>on</b> for both — change anytime in settings.</div></div>
            </div>
            <div className="chat-input"><LI d={LIco.spark} sw={2} size={16} style={{ color: '#5925dc' }}/> Ask Method 8 to build, prefill, issue or adjust…</div>
            <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap', marginTop: 12 }}>
              {[['Build standard', LIco.plus], ['Prefill from another site', LIco.layers], ['Issue to a site', LIco.arrowR], ['Set a due date', LIco.cal]].map(([t, ic]) => (
                <span key={t} className="cmd"><LI d={ic} sw={2} size={13}/> {t}</span>
              ))}
            </div>
          </div>
        </div>

        {/* right rail: status + toggles + log */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>What's where</h2><div className="sub">Live · perpetually in motion</div></div><span className="card-link">Open registry <LI d={LIco.arrowR} sw={2} size={12}/></span></div>
            <div className="card-body" style={{ paddingTop: 12 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                {[['Standards built', '8', 'of 11'], ['Issued to sites', '5', 'standards'], ['Sites live', '11', 'of 15'], ['Awaiting review', '6', 'submissions']].map(([l, v, s]) => (
                  <div key={l} style={{ padding: '10px 12px', border: '1px solid var(--line)', borderRadius: 10 }}>
                    <div style={{ font: '600 22px/26px Inter', fontVariantNumeric: 'tabular-nums' }}>{v} <span style={{ font: '400 12px/1 Inter', color: 'var(--ink4)' }}>{s}</span></div>
                    <div style={{ font: '400 12px/16px Inter', color: 'var(--ink4)' }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Program settings</h2><div className="sub">Toggle anytime — applies now</div></div></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              {[['Collaboration open', 'Owners can invite teammates', true], ['Evidence required on gaps', 'Block conformant without proof', true], ['Auto-reminders', 'Nudge owners near due dates', true], ['Show critical in red', 'Highlight safety-critical items', true], ['Allow partial submission', 'Submit before 100% complete', false]].map(([t, d, on]) => (
                <div key={t} className="tglrow"><div style={{ flex: 1 }}><div className="tt">{t}</div><div className="td">{d}</div></div><div className={`tgl ${on ? 'on' : ''}`}/></div>
              ))}
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Recent</h2></div></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              {[['Built Cyanide Management (draft)', 'just now'], ['Prefilled Salares Norte · Contractor', '4 min ago'], ['Issued Tailings → 2 sites', '6 min ago']].map(([t, ago], i) => (
                <div key={i} className="feed-item" style={{ borderBottom: i < 2 ? '1px solid var(--line2)' : 'none' }}><div className="feed-ic ai"><LI d={LIco.spark} sw={2.2}/></div><div style={{ flex: 1 }}><div className="feed-msg">{t}</div><div className="feed-meta">{ago}</div></div></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </LScreen>
  );
}

/* ============================================================ L2 — Registry: what is where */
function L2_Registry() {
  const SITES = ['St Ives', 'Agnew', 'Gruyere', 'Tarkwa', 'Damang', 'South Deep', 'Cerro Corona', 'Salares Norte'];
  const STDS = ['Safety', 'Environment', 'Contractor mgmt', 'Critical risk', 'Tailings & dams', 'Cyanide mgmt'];
  // messy mid-project state: status per [std][site]
  const S = {
    'Safety':         ['reviewed','reviewed','submitted','prog','prog','submitted','prog','issued'],
    'Environment':    ['reviewed','submitted','prog','prog','issued','prog','issued','none'],
    'Contractor mgmt':['submitted','prog','prog','partial','issued','prog','issued','partial'],
    'Critical risk':  ['prog','prog','issued','issued','none','issued','none','none'],
    'Tailings & dams':['reviewed','issued','none','prog','issued','submitted','prog','issued'],
    'Cyanide mgmt':   ['draft','draft','draft','none','none','none','draft','draft'],
  };
  const LABEL = { none: 'Not built', draft: 'Draft', issued: 'Issued', prog: 'In progress', partial: 'Partial', submitted: 'Submitted', reviewed: 'Reviewed' };
  return (
    <LScreen summary={<LAISum head="Mixed state: Safety nearly complete, Cyanide still draft everywhere, Critical risk not built at 3 sites." act="Build Critical risk for Damang, Cerro Corona and Salares Norte."/>} h={900} sidebar={<LeadSidebar/>} topbar={<LeadTop crumbs={['Method 8', 'Gold Fields', 'Registry']}/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Registry</span><span className="dot"/><span>What is where</span><span className="dot"/><span className="live">Live</span></div>
          <h1>What's where</h1>
          <div className="sub">The honest state of the program — some standards drafted, some issued, some half-done. Click any cell to jump in, or ask the assistant to act on a row.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-sec">Filter</button><button className="btn btn-ai"><LI d={LIco.spark} sw={2}/> Act via assistant</button></div>
      </header>
      <div className="card">
        <div className="card-body" style={{ padding: '14px 16px', overflowX: 'auto' }}>
          <table className="matrix" style={{ borderSpacing: '4px' }}>
            <thead><tr><th className="rowh"> </th>{SITES.map(s => <th key={s} style={{ minWidth: 92 }}>{s}</th>)}</tr></thead>
            <tbody>{STDS.map(std => (
              <tr key={std}><td className="rowh">{std}</td>{S[std].map((st, i) => (
                <td key={i}><span className={`st ${st}`} style={{ width: '100%', justifyContent: 'center' }}>{st === 'none' ? '—' : <><span className="d"/>{LABEL[st]}</>}</span></td>
              ))}</tr>
            ))}</tbody>
          </table>
          <div className="legend" style={{ marginTop: 14 }}>
            {[['draft', 'Draft'], ['issued', 'Issued'], ['prog', 'In progress'], ['partial', 'Partial'], ['submitted', 'Submitted'], ['reviewed', 'Reviewed'], ['none', 'Not built']].map(([k, l]) => (
              <span key={k} className="li"><span className={`st ${k}`} style={{ padding: '2px 7px' }}><span className="d"/></span>{l}</span>
            ))}
          </div>
        </div>
      </div>
    </LScreen>
  );
}

/* ============================================================ L3 — Health check (data QA + module inspection + manual review) */
function L3_HealthCheck() {
  const mods = [
    ['Safety', 'Reviewed', 'green', 100, 96, 0],
    ['Contractor mgmt', 'In progress', 'amber', 78, 88, 2],
    ['Tailings & dams', 'Issued', 'blue', 64, 91, 1],
    ['Cyanide mgmt', 'Draft', 'violet', 41, 72, 4],
    ['Critical risk', 'Issued', 'blue', 55, 84, 1],
  ];
  return (
    <LScreen summary={<LAISum head="Data is 82% populated. 3 anomalies and 5 low-confidence prefills need a human eye." act="Review Salares Norte cyanide — 3 criteria set conformant with no evidence."/>} h={1468} sidebar={<LeadSidebar/>} topbar={<LeadTop crumbs={['Method 8', 'Gold Fields', 'Health check']}/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Health check</span><span className="dot"/><span>Data QA &amp; module inspection</span><span className="dot"/><span className="live">Live</span></div>
          <h1>Is the data right?</h1>
          <div className="sub">Before anything reaches sites, check data is populating correctly, inspect what each module actually looks like, and clear the <b>manual review</b> queue. Full detail, nothing hidden.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-sec"><LI d={LIco.ext} sw={2}/> Export QA log</button><button className="btn btn-ai"><LI d={LIco.spark} sw={2}/> Re-run checks</button></div>
      </header>

      <section className="stats">
        <LStat hue="sky" icon={LIco.shield} trend="+4%" trendDir="up" label="Data completeness" value="82" unit="%" foot={<><b>1,120</b> of 1,360 fields</>}/>
        <LStat hue="violet" icon={LIco.spark} trend="" trendDir="flat" label="Avg AI prefill confidence" value="86" unit="%" foot={<>14 fields low-confidence</>}/>
        <LStat hue="orange" icon={LIco.target} trend="8 to clear" trendDir="dn" label="Awaiting manual review" value="8" foot={<><b>3 anomalies</b><span className="pip"/>5 low-conf</>}/>
        <LStat hue="fuchsia" icon={LIco.file} trend="" trendDir="flat" label="Modules built" value="8" unit="/ 11" foot={<>2 draft · 1 not started</>}/>
      </section>

      <div className="grid-2">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* module inspection table */}
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Module inspection</h2><div className="sub">Data population & quality per standard</div></div>
            <div className="card-head-r"><div className="pill-tabs"><button className="pill-tab active">All</button><button className="pill-tab">Flagged</button></div></div></div>
            <div className="card-body" style={{ padding: 0 }}>
              <table className="gtable">
                <thead><tr><th>Standard</th><th>Status</th><th>Data populated</th><th>AI confidence</th><th>Flags</th><th></th></tr></thead>
                <tbody>{mods.map(([nm, st, tone, pop, conf, flags]) => (
                  <tr key={nm}><td><b>{nm}</b></td><td><span className={`badge ${tone}`}>{st}</span></td>
                    <td><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><div style={{ width: 80, height: 6, background: 'var(--wash2)', borderRadius: 3, overflow: 'hidden' }}><div style={{ width: `${pop}%`, height: '100%', background: pop >= 80 ? '#17b26a' : pop >= 55 ? '#f79009' : '#f04438' }}/></div><span style={{ font: '500 12px/1 Inter', fontVariantNumeric: 'tabular-nums' }}>{pop}%</span></div></td>
                    <td><span className={`badge ${conf >= 85 ? 'green' : 'amber'}`}>{conf}%</span></td>
                    <td>{flags ? <span className="crit"><span className="d"/> {flags}</span> : <span className="muted">0</span>}</td>
                    <td><span className="card-link">Inspect <LI d={LIco.arrowR} sw={2} size={12}/></span></td></tr>
                ))}</tbody>
              </table>
            </div>
          </div>

          {/* module preview — what it actually looks like */}
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Module preview · Cyanide Management</h2><div className="sub">Exactly what the site owner will see</div></div><span className="crit"><span className="d"/> 4 critical</span></div>
            <div className="card-body" style={{ paddingTop: 12 }}>
              <div style={{ font: '600 11px/16px Inter', color: 'var(--ink4)', textTransform: 'uppercase', letterSpacing: '.3px', marginBottom: 8 }}>Section 2 · Storage &amp; handling</div>
              {[['2.1', 'Cyanide stored in bunded, access-controlled areas', false, 88], ['2.2', 'Field verification of dosing controls', true, 61], ['2.3', 'Spill response equipment on hand & tested', true, 92], ['2.4', 'Handling sign-off by competent person', true, 54]].map(([n, text, crit, conf]) => (
                <div key={n} className={`up-row ${crit ? 'critrow' : ''}`} style={{ marginBottom: 7 }}>
                  <span className="asmt-qn" style={{ width: 30 }}>{n}</span>
                  <div style={{ flex: 1, font: '500 13px/18px Inter' }}>{text}</div>
                  {crit ? <span className="crit"><span className="d"/> Critical</span> : <span className="badge gray">Standard</span>}
                  <span className={`badge ${conf >= 85 ? 'green' : 'amber'}`} title="AI prefill confidence" style={{ width: 54, justifyContent: 'center' }}>{conf}%</span>
                </div>
              ))}
              <div style={{ font: '400 12px/16px Inter', color: 'var(--ink4)', marginTop: 6 }}>Showing 4 of 14 criteria · <span className="card-link" style={{ display: 'inline' }}>open full module</span></div>
            </div>
          </div>
        </div>

        {/* right rail: review queue + anomalies */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Manual review queue</h2></div><span className="badge amber">8</span></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              {[['Low-confidence prefill', 'Cyanide 2.2 · dosing controls · 61%', 'warn'], ['Anomaly', 'Salares Norte · 3 criteria auto-set conformant, no evidence', 'warn'], ['Low-confidence prefill', 'Cyanide 2.4 · sign-off · 54%', 'warn'], ['New module', 'Cyanide Management draft · approve to issue', 'ai']].map(([t, s, ic], i) => (
                <div key={i} className="feed-item" style={{ borderBottom: i < 3 ? '1px solid var(--line2)' : 'none' }}><div className={`feed-ic ${ic === 'ai' ? 'ai' : 'warn'}`}><LI d={ic === 'ai' ? LIco.spark : LIco.shield} sw={2.2}/></div><div style={{ flex: 1 }}><div className="feed-msg"><b>{t}</b></div><div className="feed-meta">{s}</div></div><button className="btn btn-sec btn-sm">Review</button></div>
              ))}
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>What's happening</h2><div className="sub">Live data activity</div></div></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              {[['ok', 'Tarkwa contractor register ingested · 9 fields mapped', '3 min'], ['warn', 'Salares Norte cyanide prefill flagged for review', '12 min'], ['ai', 'Re-extracted Tailings criteria from updated GISTM doc', '1 h'], ['ok', 'St Ives Safety submitted & passed validation', '2 h']].map(([ic, t, ago], i) => (
                <div key={i} className="feed-item" style={{ borderBottom: i < 3 ? '1px solid var(--line2)' : 'none' }}><div className={`feed-ic ${ic}`}><LI d={ic === 'ai' ? LIco.spark : ic === 'warn' ? LIco.shield : LIco.check} sw={2.2}/></div><div style={{ flex: 1 }}><div className="feed-msg">{t}</div><div className="feed-meta">{ago}</div></div></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </LScreen>
  );
}

window.GFLEAD = {
  screens: [
    { id: 'l0', label: 'Firm console · all programs', w: 1440, h: 988, render: () => <L0_AllPrograms/> },
    { id: 'l0b', label: 'Set up a program (precursor)', w: 1440, h: 1112, render: () => <L0b_NewProgram/> },
    { id: 'l1', label: 'AI control room', w: 1440, h: 1248, render: () => <L1_ControlRoom/> },
    { id: 'l2', label: 'Registry · what is where', w: 1440, h: 900, render: () => <L2_Registry/> },
    { id: 'l3', label: 'Health check · data QA & module inspection', w: 1440, h: 1468, render: () => <L3_HealthCheck/> },
  ],
};