// Talison Lithium — "The Talison Way" operating-system overhaul.
// Aligned to the real framework: BOM = 5 Elements, AI-prefilled from 15 H&S
// structured interviews + 183 pain points. Lean on AI generation, few screens.
const { Ico: TI, I: TIco, StatCard: TStat, Gauge: TGauge, AISum: TAISum } = window;

function TScreen({ children, w = 1440, h = 900, sidebar, topbar, summary }) {
  return (
    <div className="e8 scr" style={{ width: w, height: h }}>
      {sidebar}
      <div className="main">{topbar}<div className="page" style={{ overflow: 'hidden' }}>{summary}{children}</div></div>
    </div>
  );
}
const TSide = ({ active = 'model', persona = 'client' }) => <window.Sidebar active={active} persona={persona} locked={persona === 'client' ? [] : []}/>;
const TTop = ({ crumbs, admin }) => <window.Topbar crumbs={crumbs} byline={admin ? <>Method 8 · <b>admin</b></> : <>Powered by <b>Method 8</b></>} search="Search the program…"/>;

// 5 BOM elements (real sub-items)
const EL_COLORS = ['#7a5af8', '#2e90fa', '#0e9384', '#e04f16', '#ba24d5'];
const ELEMENTS = [
  ['Value Delivery & Organisation', [['1.1', 'Mandate', 'confirmed'], ['1.2', 'Services', 'confirmed'], ['1.3', 'Critical decisions', 'review'], ['1.4', 'Interface management', 'gap'], ['1.5', 'Roles & accountabilities', 'review'], ['1.6', 'Position descriptions', 'todo'], ['1.7', 'Structure', 'confirmed']]],
  ['Governance & Standards', [['2.1', 'Enterprise standards', 'confirmed'], ['2.2', 'Critical documentation', 'review'], ['2.3', 'Material risks (12)', 'review']]],
  ['Processes', [['3.1', 'Critical processes', 'review'], ['3.2', 'RACI', 'todo']]],
  ['Technology', [['4.1', 'Apps & digital tools', 'review'], ['4.2', 'Reporting', 'review']]],
  ['Performance & Routines', [['5.1', 'Metrics', 'confirmed'], ['5.2', 'Scorecards (11)', 'review'], ['5.3', 'SLAs', 'todo'], ['5.4', 'Routines', 'review']]],
];
const stTone = { confirmed: ['green', 'Confirmed'], review: ['violet', 'AI · review'], gap: ['red', 'Gap'], todo: ['gray', 'To do'] };

// element completeness mini-strip (5 segments)
function ElStrip({ vals }) {
  return <div style={{ display: 'flex', gap: 3 }}>{vals.map((v, i) => <span key={i} style={{ flex: 1, height: 6, borderRadius: 3, background: v ? EL_COLORS[i] : 'var(--wash2)' }}/>)}</div>;
}

const FUNCS = [
  ['Operations', 'done', 80, 'BOM ratified', [1,1,1,1,1]],
  ['Human Resources', 'done', 74, 'BOM ratified', [1,1,1,1,1]],
  ['Health & Safety', 'active', 62, 'AI-prefilled · in review', [1,1,1,0,1]],
  ['Major Projects', 'active', 55, 'Define BOM · wk 4', [1,1,0,1,0]],
  ['Commercial', 'next', null, 'starts wk 9', [0,0,0,0,0]],
  ['Finance', 'next', null, 'starts wk 11', [0,0,0,0,0]],
  ['External Affairs', 'next', null, 'starts wk 13', [0,0,0,0,0]],
  ['General Counsel', 'next', null, 'starts wk 15', [0,0,0,0,0]],
];

/* ============================================================ T1 — Overhaul cockpit */
function T1_Cockpit() {
  return (
    <TScreen h={1250} sidebar={<TSide/>} topbar={<TTop crumbs={['Talison Lithium', 'The Talison Way']}/>}
      summary={<TAISum head="Week 5 of 18. H&S BOM is AI-prefilled from 15 interviews + 183 pain points and in review. 2 functions ratified, 2 running. A 'talk-vs-text' health gap is flagged." act="Review the H&S BOM — Interface management is the weakest element."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Greenbushes</span><span className="dot"/><span>Week 5 of 18</span><span className="dot"/><span className="live">Live</span></div>
          <h1>The Talison Way · operating system overhaul</h1>
          <div className="sub">Three elements, one operating model. Each function's <b>Basic Operating Model</b> is built against the same 5 elements — AI drafts it from interviews; leaders review.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-ai"><TI d={TIco.spark} sw={2}/> Ask Method 8</button><button className="btn btn-sec"><TI d={TIco.ext} sw={2}/> Steering pack</button></div>
      </header>

      {/* Talison Way = 3 elements */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12, marginBottom: 18 }}>
        {[['Direction & Culture', 'Vision · purpose · values · behaviours', '#17b26a', 'Set'], ['Functional Model (EOM)', 'Structure · governance · systems of work', '#7a5af8', '3 / 6 framed'], ['Team Operating Models (BOM)', '5 elements · per function', '#2e90fa', '2 / 8 ratified']].map(([t, d, c, s]) => (
          <div key={t} className="card" style={{ padding: '14px 16px', borderTop: `3px solid ${c}` }}>
            <div style={{ font: '600 14px/19px Inter' }}>{t}</div>
            <div style={{ font: '400 12px/16px Inter', color: 'var(--ink4)', margin: '3px 0 8px' }}>{d}</div>
            <span className="badge gray">{s}</span>
          </div>
        ))}
      </div>

      <section className="stats">
        <TStat hue="violet" icon={TIco.model} trend="on track" trendDir="up" label="Program progress" value="28" unit="%" foot={<><b>Week 5</b> of 18</>}/>
        <TStat hue="sky" icon={TIco.layers} trend="2 active" trendDir="flat" label="Function BOMs" value="2" unit="/ 8" foot={<>2 ratified · 2 running</>}/>
        <TStat hue="fuchsia" icon={TIco.shield} trend="talk-vs-text" trendDir="flat" label="H&S health (baseline)" value="59" unit="%" foot={<>workshop vs Likert gap</>}/>
        <TStat hue="teal" icon={TIco.zap} trend="6 new" trendDir="up" label="Quick wins delivered" value="14" foot={<><b>$2.1M</b> annualised</>}/>
      </section>

      <div className="grid-2">
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Function operating models</h2><div className="sub">Progress across the 5 elements · ▮ = element drafted</div></div></div>
          <div className="card-body" style={{ paddingTop: 8 }}>
            {FUNCS.map(([nm, st, pct, note, vals]) => (
              <div key={nm} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '11px 0', borderBottom: '1px solid var(--line2)', opacity: st === 'next' ? 0.6 : 1 }}>
                {pct != null ? <TGauge value={pct} size={40} sw={4}/> : <div style={{ width: 40, height: 40, borderRadius: 999, border: '1.5px dashed var(--line3)', display: 'grid', placeItems: 'center', font: '600 10px/1 Inter', color: 'var(--ink4)', flex: 'none' }}>—</div>}
                <div style={{ flex: 1 }}><div style={{ font: '600 14px/18px Inter' }}>{nm}</div><div style={{ font: '400 11.5px/15px Inter', color: 'var(--ink4)' }}>{note}</div></div>
                <div style={{ width: 120 }}><ElStrip vals={vals}/></div>
                <span className={`badge ${st === 'done' ? 'green' : st === 'active' ? 'blue' : 'gray'}`} style={{ width: 72, justifyContent: 'center' }}>{st === 'done' ? 'Ratified' : st === 'active' ? 'In build' : 'Scheduled'}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Enterprise model (EOM)</h2></div><span className="badge violet" style={{ height: 22 }}>3 / 6 framed</span></div>
            <div className="card-body" style={{ paddingTop: 10 }}>
              {[['Structure & mandates', 'done'], ['Governance framework', 'done'], ['Systems of work & standards', 'active'], ['Technology & digital', 'todo'], ['Strategy-to-performance', 'todo'], ['Operating rhythms', 'active']].map(([t, s], i) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '7px 0', borderBottom: i < 5 ? '1px solid var(--line2)' : 'none', font: '500 12.5px/16px Inter' }}>
                  <span style={{ width: 8, height: 8, borderRadius: 3, background: s === 'done' ? '#17b26a' : s === 'active' ? '#2e90fa' : 'var(--line3)' }}/>{t}
                </div>
              ))}
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Quick wins</h2><div className="sub">Captured during the work</div></div></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              {[['Isolation standard re-issued', 'H&S · $380k/yr'], ['Contractor onboarding tightened', 'H&S ↔ Contractors'], ['Pre-start integration', 'Operations']].map(([t, m], i) => (
                <div key={i} className="feed-item" style={{ borderBottom: i < 2 ? '1px solid var(--line2)' : 'none' }}><div className="feed-ic ok"><TI d={TIco.zap} sw={2.2}/></div><div style={{ flex: 1 }}><div className="feed-msg">{t}</div><div className="feed-meta">{m}</div></div></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </TScreen>
  );
}

/* ============================================================ T2 — BOM workspace (H&S), AI-prefilled 5 elements */
function T2_BOM() {
  const stages = [['Health assessment', TIco.shield, 'done'], ['Surveys', TIco.clipboard, 'done'], ['Structured interviews', TIco.mic, 'done'], ['AI-drafted BOM', TIco.spark, 'active'], ['Outputs', TIco.doc, '']];
  return (
    <TScreen h={1268} sidebar={<TSide active="file"/>} topbar={<TTop crumbs={['Talison Lithium', 'BOM', 'Health & Safety']}/>}
      summary={<TAISum head="AI prefilled all 5 elements from 15 H&S interviews + 183 pain points — 12 material risks, 9 interfaces, an 11-measure scorecard drafted. Ready for Paul & Darryl to review." act="Confirm Element 1 — Interface management is a gap; 3 items need an owner."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Basic Operating Model</span><span className="dot"/><span>Health & Safety</span><span className="dot"/><span>Teams: HHSEM · WHS Ops · WHS Projects</span></div>
          <h1>Health &amp; Safety · operating model</h1>
          <div className="sub">Every element drafted by AI from the interview record. You review and confirm — the work is judgement, not data entry.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-sec">Export workbook</button><button className="btn btn-pri"><TI d={TIco.check} sw={2}/> Confirm element</button></div>
      </header>

      {/* journey strip */}
      <div className="card" style={{ marginBottom: 18 }}><div className="card-body" style={{ padding: '22px 26px 18px' }}>
        <div className="journey">
          {stages.map(([t, ic, s], i) => (
            <div key={t} className={`jstage ${s}`}><div className="cap"><div className="jnode"><TI d={s === 'done' ? TIco.check : ic} sw={2}/></div><div className="jt">{t}</div><div className="jd">{['12 dimensions', '94 responses', '15 leaders', '5 elements drafted', 'pending'][i]}</div></div></div>
          ))}
        </div>
      </div></div>

      {/* 5 elements */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {ELEMENTS.map(([name, items], ei) => {
          const done = items.filter(it => it[2] === 'confirmed').length;
          return (
            <div key={name} className="card">
              <div className="card-head" style={{ borderLeft: `3px solid ${EL_COLORS[ei]}` }}>
                <div className="card-head-l"><h2 style={{ fontSize: 15 }}>Element {ei + 1} · {name}</h2><div className="sub">{done} of {items.length} confirmed</div></div>
                <div className="card-head-r"><span className="badge violet"><TI d={TIco.spark} sw={2.2} size={12}/> AI-prefilled</span></div>
              </div>
              <div className="card-body" style={{ padding: '8px 14px 12px' }}>
                {items.map(([n, t, st]) => (
                  <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0', borderBottom: '1px solid var(--line2)' }}>
                    <span className="asmt-qn" style={{ width: 24 }}>{n}</span>
                    <span style={{ flex: 1, font: '500 13px/17px Inter' }}>{t}</span>
                    <span className={`badge ${stTone[st][0]}`}>{stTone[st][1]}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </TScreen>
  );
}

/* ============================================================ T3 — Element deep-dive: Interface management + pain points */
function T3_Interfaces() {
  const ifaces = [
    ['H&S ↔ Operations / Maintenance', 'r', 'Contractor mgmt + isolation normalisation', 'OMT', 31],
    ['H&S ↔ IST / Systems', 'r', 'Fragmented systems (iSystain)', 'IST lead', 27],
    ['H&S ↔ Contractors', 'r', 'Onboarding & competency gaps', 'Procurement', 22],
    ['H&S ↔ Major Projects', 'a', 'Stage-gate readiness', 'Projects PMO', 14],
    ['H&S ↔ Human Resources', 'a', 'Injury management handoff', 'HR BP', 12],
    ['H&S ↔ Finance / Procurement', 'a', 'HSE spend visibility', 'Finance', 9],
    ['H&S ↔ Sustainability / Comms', 'a', 'Shared reporting', 'Sustainability', 7],
    ['H&S ↔ Executive (ELT)', 'g', 'Cadence working well', 'CEO', 8],
    ['H&S ↔ External / Regulators', 'g', 'Reporting compliant', 'GM H&S', 6],
  ];
  const ragTone = { r: ['red', 'Red'], a: ['amber', 'Amber'], g: ['green', 'Green'] };
  const pains = [['Outdated procedures & documentation', 34], ['Contractor management gap', 31], ['Fragmented systems (iSystain)', 27], ['Under-resourced team', 24], ['Isolation breach normalisation', 21], ['Unclear roles & accountabilities', 18], ['Interface friction with Operations', 16], ['Reactive vs strategic focus', 12]];
  return (
    <TScreen h={1180} sidebar={<TSide active="file"/>} topbar={<TTop crumbs={['Talison Lithium', 'H&S BOM', '1.4 Interface management']}/>}
      summary={<TAISum head="9 H&S interfaces rated from interview signal. 3 are red — H&S↔Operations, ↔IST/Systems and ↔Contractors. The contractor-management gap was cited 31 times." act="Validate the 3 red interfaces and assign escalation owners."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Element 1.4</span><span className="dot"/><span>AI-drafted from 15 interviews</span></div>
          <h1>Interface management · H&amp;S</h1>
          <div className="sub">Each interface is rated R/A/G from interview signal, with the top issue, escalation path and how often it surfaced. Full detail — review and confirm.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-ai"><TI d={TIco.spark} sw={2}/> Re-rate from signal</button><button className="btn btn-pri">Confirm all</button></div>
      </header>

      <div className="grid-2">
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>9 interfaces</h2></div><div className="card-head-r"><span className="badge red">3 red</span><span className="badge amber">4 amber</span><span className="badge green">2 green</span></div></div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="gtable"><thead><tr><th>Interface</th><th>Health</th><th>Top issue</th><th>Escalate</th><th>Mentions</th></tr></thead>
              <tbody>{ifaces.map(([nm, rag, issue, esc, m]) => (
                <tr key={nm}><td><b>{nm}</b></td><td><span className={`badge ${ragTone[rag][0]}`}><span className="d"/> {ragTone[rag][1]}</span></td><td style={{ color: 'var(--ink3)' }}>{issue}</td><td>{esc}</td><td><b>{m}</b></td></tr>
              ))}</tbody></table>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Pain-point themes</h2><div className="sub">183 mentions · 15 interviews</div></div></div>
            <div className="card-body" style={{ paddingTop: 10 }}>
              {pains.map(([t, n]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
                  <div style={{ flex: 1, font: '500 12.5px/16px Inter' }}>{t}</div>
                  <div style={{ width: 70, height: 6, background: 'var(--wash2)', borderRadius: 3, overflow: 'hidden' }}><div style={{ width: `${(n / 34) * 100}%`, height: '100%', background: '#7a5af8' }}/></div>
                  <span style={{ font: '600 12px/1 Inter', width: 22, textAlign: 'right' }}>{n}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Health baseline</h2><div className="sub">The "talk-vs-text" gap</div></div></div>
            <div className="card-body" style={{ paddingTop: 10 }}>
              {[['Value delivery', 29, 86.7], ['Governance', 0, 84.0], ['Processes', 29, 66.7], ['Technology', 0, 91.7], ['Performance', 38, 64.0]].map(([t, w, l]) => (
                <div key={t} style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', font: '500 11.5px/15px Inter' }}><span>{t}</span><span className="muted">workshop {w}% · Likert {l}%</span></div>
                  <div style={{ display: 'flex', gap: 3, marginTop: 3 }}>
                    <div style={{ flex: 1, height: 5, background: 'var(--wash2)', borderRadius: 3, overflow: 'hidden' }}><div style={{ width: `${w}%`, height: '100%', background: '#f04438' }}/></div>
                    <div style={{ flex: 1, height: 5, background: 'var(--wash2)', borderRadius: 3, overflow: 'hidden' }}><div style={{ width: `${l}%`, height: '100%', background: '#17b26a' }}/></div>
                  </div>
                </div>
              ))}
              <div style={{ font: '400 11.5px/16px Inter', color: 'var(--ink4)', marginTop: 4 }}>Workshop signals deep dissatisfaction with docs & tech; 1-to-1 Likert is more generous. The gap itself is a finding.</div>
            </div>
          </div>
        </div>
      </div>
    </TScreen>
  );
}

/* ============================================================ T4 — EOM rollup (Functional Model) */
function T4_EOM() {
  const foundations = [
    ['Functional structure & mandates', 'done', '9 functions mandated'],
    ['Governance & management framework', 'done', 'ELT · OMT bodies defined'],
    ['Systems of work & standards', 'active', 'Safety · Health · Risk · Contractor · MOC'],
    ['Technology & digital', 'review', 'SAP · iSystain · M365 owners'],
    ['Strategy-to-performance', 'todo', 'Plan-on-a-page → scorecards'],
    ['Operating rhythms & routines', 'active', 'ELT/OMT cadence + interface forums'],
  ];
  const map2 = { done: ['green', 'Defined'], active: ['blue', 'In progress'], review: ['violet', 'AI · review'], todo: ['gray', 'Not started'] };
  return (
    <TScreen h={1040} sidebar={<TSide active="model" persona="admin"/>} topbar={<TTop crumbs={['Talison Lithium', 'Functional Model (EOM)']} admin/>}
      summary={<TAISum head="Function BOMs roll up into the enterprise model as they ratify. 2 of 8 functions in; H&S in review. Systems of work and operating rhythms are forming." act="Integrate H&S material risks (12) into the enterprise risk view."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Enterprise Operating Model</span><span className="dot"/><span>The Talison Functional Model</span></div>
          <h1>EOM rollup</h1>
          <div className="sub">The enterprise foundations, fed by each function's BOM. As a function ratifies its 5 elements, its standards, risks, tech and routines roll up here.</div>
        </div>
        <div className="pg-head-r"><div className="pill-tabs"><button className="pill-tab active">Foundations</button><button className="pill-tab">By function</button></div></div>
      </header>

      <div className="card" style={{ marginBottom: 18 }}><div className="card-head"><div className="card-head-l"><h2>Functional model foundations</h2></div></div>
        <div className="card-body" style={{ paddingTop: 8 }}>
          {foundations.map(([nm, st, note], i) => (
            <div key={nm} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '12px 0', borderBottom: i < foundations.length - 1 ? '1px solid var(--line2)' : 'none' }}>
              <div style={{ width: 28, font: '600 12px/1 Inter', color: 'var(--ink4)' }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{ width: 280, font: '600 14px/18px Inter' }}>{nm}</div>
              <span className={`badge ${map2[st][0]}`} style={{ width: 96, justifyContent: 'center' }}>{map2[st][1]}</span>
              <div style={{ flex: 1, font: '400 12px/16px Inter', color: 'var(--ink4)' }}>{note}</div>
              <div style={{ display: 'flex', gap: 4 }}>{FUNCS.map((f, fi) => { const c = f[1] === 'done' || (f[1] === 'active' && i < 3); return <span key={fi} title={f[0]} style={{ width: 24, height: 24, borderRadius: 6, display: 'grid', placeItems: 'center', background: c ? '#ecfdf3' : 'var(--wash)', border: `1px solid ${c ? '#abefc6' : 'var(--line2)'}`, font: '600 8.5px/1 Inter', color: c ? '#067647' : 'var(--ink4)' }}>{f[0].slice(0, 2).toUpperCase()}</span>; })}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Systems of work</h2><div className="sub">Enterprise standards · fed by function BOMs</div></div></div>
          <div className="card-body" style={{ paddingTop: 10 }}>
            {[['Safety Management', 'H&S', 'green'], ['Health', 'H&S', 'green'], ['Risk Management', 'H&S · Ops', 'amber'], ['Contractor Management', 'H&S · Procurement', 'red'], ['Management of Change', 'Ops', 'amber']].map(([t, o, tone], i) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 4 ? '1px solid var(--line2)' : 'none' }}><span className={`badge ${tone}`}><span className="d"/></span><div style={{ flex: 1, font: '500 13px/17px Inter' }}>{t}</div><span className="muted" style={{ font: '400 11.5px/15px Inter' }}>{o}</span></div>
            ))}
          </div>
        </div>
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Enterprise risk view</h2><div className="sub">Material risks rolled up from BOMs</div></div><span className="badge violet">12 from H&S</span></div>
          <div className="card-body" style={{ paddingTop: 10 }}>
            {[['Contractor management gap', 'H&S', 'red'], ['Isolation breach normalisation', 'H&S', 'red'], ['Fragmented safety systems', 'H&S · IST', 'amber'], ['Under-resourced H&S team', 'H&S', 'amber']].map(([t, o, tone], i) => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < 3 ? '1px solid var(--line2)' : 'none' }}><span className={`badge ${tone}`}><span className="d"/></span><div style={{ flex: 1, font: '500 13px/17px Inter' }}>{t}</div><span className="muted" style={{ font: '400 11.5px/15px Inter' }}>{o}</span></div>
            ))}
          </div>
        </div>
      </div>
    </TScreen>
  );
}

/* ============================================================ T5 — BOM element editor (Material Risks) with provenance */
function T5_RiskEditor() {
  const risks = [
    ['Contractor management gap', 'WHS Projects', 5, 4, 'Onboarding & competency verification', 'partial', '6 interviews · "Contractor mgmt" theme', 31, 92],
    ['Isolation breach normalisation', 'WHS Operations', 5, 3, 'Permit-to-work + isolation standard', 'weak', '5 interviews · isolation theme', 21, 88],
    ['Outdated procedures & documentation', 'Whole H&S', 4, 4, 'DMS + scheduled review cycle', 'weak', '9 interviews · documentation theme', 34, 90],
    ['Fragmented safety systems (iSystain)', 'HHSEM', 3, 4, 'iSystain + manual workarounds', 'weak', '7 interviews · systems theme', 27, 86],
    ['Under-resourced H&S team', 'Whole H&S', 4, 3, 'Recruitment underway', 'partial', '8 interviews · resourcing theme', 24, 84],
  ];
  const effTone = { partial: ['amber', 'Partial'], weak: ['red', 'Weak'], strong: ['green', 'Strong'] };
  const cellColor = (i, p) => { const s = i * p; return s >= 15 ? '#fee4e2' : s >= 8 ? '#fef0c7' : '#ecfdf3'; };
  return (
    <TScreen h={1240} sidebar={<TSide active="file"/>} topbar={<TTop crumbs={['Talison Lithium', 'H&S BOM', '2.3 Material risks']}/>}
      summary={<TAISum head="12 material risks drafted from the interview record — every one links its evidence. Contractor management (cited 31×) and isolation normalisation are the two highest." act="Confirm the 4 high risks and assign owners before the playback."/>}>
      <header className="pg-head">
        <div className="pg-head-l">
          <div className="eyebrow"><span>Element 2.3</span><span className="dot"/><span>AI-drafted · review & confirm</span></div>
          <h1>Material risks · H&amp;S</h1>
          <div className="sub">Each risk was extracted from the interviews and pain-point analysis. Open the provenance to see exactly what it's built from, then confirm or edit — judgement, not transcription.</div>
        </div>
        <div className="pg-head-r"><button className="btn btn-ai"><TI d={TIco.spark} sw={2}/> Suggest controls</button><button className="btn btn-pri"><TI d={TIco.check} sw={2}/> Confirm 5</button></div>
      </header>

      <div className="grid-2w">
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Risks · 5 of 12</h2><div className="sub">Sorted by severity</div></div><span className="badge violet"><TI d={TIco.spark} sw={2.2} size={12}/> AI-drafted</span></div>
          <div className="card-body" style={{ paddingTop: 10 }}>
            {risks.map(([t, team, imp, prob, ctrl, eff, src, men, conf], i) => (
              <div key={t} className="asmt-q" style={{ marginBottom: 9 }}>
                <div className="asmt-qtop"><span className="asmt-qn" style={{ width: 26 }}>R{i + 1}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span style={{ font: '600 13.5px/18px Inter' }}>{t}</span><span className="badge gray">{team}</span></div>
                    <div style={{ font: '400 11.5px/16px Inter', color: 'var(--ink4)', marginTop: 3 }}>Control: {ctrl} · effectiveness <span style={{ color: effTone[eff][0] === 'red' ? '#b42318' : '#b54708', fontWeight: 600 }}>{effTone[eff][1]}</span></div>
                    <div style={{ marginTop: 7, padding: '6px 10px', background: '#f6f4ff', border: '1px solid #e0d6fb', borderRadius: 7, font: '400 11.5px/16px Inter', color: '#5925dc', display: 'flex', alignItems: 'center', gap: 7 }}>
                      <TI d={TIco.spark} sw={2.2} size={13}/> <span style={{ flex: 1 }}><b>Provenance:</b> {src} · {men} mentions</span><span style={{ fontWeight: 700 }}>{conf}%</span>
                    </div>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, flex: 'none' }}>
                    <div style={{ width: 38, height: 38, borderRadius: 9, background: cellColor(imp, prob), display: 'grid', placeItems: 'center', font: '700 13px/1 Inter', color: imp * prob >= 15 ? '#b42318' : '#b54708' }}>{imp * prob}</div>
                    <span style={{ font: '400 9.5px/1 Inter', color: 'var(--ink4)' }}>I{imp}×P{prob}</span>
                  </div>
                </div>
                <div className="asmt-opts" style={{ paddingLeft: 26 }}><span className="opt sel yes" style={{ fontSize: 11 }}>Confirm</span><span className="opt" style={{ fontSize: 11 }}>Edit</span><span className="opt" style={{ fontSize: 11 }}>Assign owner</span></div>
              </div>
            ))}
            <div style={{ font: '400 12px/16px Inter', color: 'var(--ink4)' }}>+ 7 more risks · <span className="card-link" style={{ display: 'inline' }}>show all</span></div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Risk matrix</h2><div className="sub">Impact × probability</div></div></div>
            <div className="card-body" style={{ paddingTop: 12 }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 3 }}>
                {[5,4,3,2,1].map(imp => [1,2,3,4,5].map(prob => {
                  const here = risks.filter(r => r[2] === imp && r[3] === prob).length;
                  return <div key={imp + '-' + prob} style={{ height: 30, borderRadius: 5, background: cellColor(imp, prob), display: 'grid', placeItems: 'center', font: '700 11px/1 Inter', color: '#475467' }}>{here || ''}</div>;
                }))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', font: '400 10px/14px Inter', color: 'var(--ink4)', marginTop: 5 }}><span>← impact (rows) · probability (cols) →</span></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 }}><TI d={TIco.spark} sw={2.2}/></div><div style={{ font: '600 13px/17px Inter' }}>How these were built</div></div>
            <div style={{ font: '400 12.5px/18px Inter', color: 'var(--ink3)' }}>Extracted from <b>15 structured interviews</b> and the <b>183-mention</b> pain-point analysis. Each risk traces back to its source quotes — open any provenance line to read them. Nothing is invented; you're confirming the model's reading.</div>
          </div></div>
        </div>
      </div>
    </TScreen>
  );
}

window.TAL = {
  title: 'Talison Lithium',
  subtitle: 'The Talison Way · operating-system overhaul (EOM + BOM, AI-prefilled)',
  screens: [
    { id: 't1', label: 'Overhaul cockpit · Talison Way', w: 1440, h: 1250, render: () => <T1_Cockpit/> },
    { id: 't2', label: 'BOM workspace · H&S (5 elements)', w: 1440, h: 1268, render: () => <T2_BOM/> },
    { id: 't3', label: 'Element deep-dive · interfaces & pain points', w: 1440, h: 1180, render: () => <T3_Interfaces/> },
    { id: 't4', label: 'EOM rollup · functional model', w: 1440, h: 1040, render: () => <T4_EOM/> },
    { id: 't5', label: 'BOM element editor · material risks (provenance)', w: 1440, h: 1240, render: () => <T5_RiskEditor/> },
  ],
};