// Gold Fields — delivery flow: plan → build → review → release → track.
const { Ico: GI, I: GIco, StatCard: GStat, Gauge: GGauge } = window;

const WZ_STEPS = [
  ['Program plan & worklist', 'leads · scope · build list'],
  ['Data & AI load', 'docs → structured assessment'],
  ['Review & issue tests', 'client sign-off'],
  ['Training & guides', 'develop & review'],
  ['Module adjustments', 'fine-tune questions'],
  ['Locations & owners', 'assign accountability'],
  ['Collaborators & access', 'invite or self-assign'],
  ['Release', 'all at once or in waves'],
  ['Track performance', 'completion by level'],
];

function Wizard({ step, h = 900, crumbs, eyebrow, h1, sub, headRight, children }) {
  const pct = Math.round(((step + 1) / WZ_STEPS.length) * 100);
  return (
    <div className="e8 scr wzscr" style={{ width: 1440, height: h }}>
      <aside className="wz-rail">
        <div className="wz-brand"><span className="lg">M8</span><span className="nm">Method 8</span></div>
        <div className="wz-ttl">Gold Fields · setup</div>
        <div className="wz-sub">Standards gap assessment · 15 sites</div>
        <div className="wz-progwrap"><div className="wz-prog" style={{ width: `${pct}%` }}/></div>
        <div className="wz-steps">
          {WZ_STEPS.map(([t, d], i) => (
            <div key={i} className={`wz-step ${i === step ? 'on' : i < step ? 'done' : ''}`}>
              <span className="sn">{i < step ? <GI d={GIco.check} sw={3} size={11}/> : i + 1}</span>
              <div><div className="sl">{t}</div>{i === step && <div className="sd">{d}</div>}</div>
            </div>
          ))}
        </div>
        <div className="wz-foot"><GI d={GIco.grid} sw={2} size={14}/> Back to portfolio</div>
      </aside>
      <div className="main">
        <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>
            <span className="badge gray" style={{ height: 28 }}>Step {step + 1} of 9</span>
          </div>
        </div>
        <div className="page" style={{ overflow: 'hidden' }}>
          <header className="pg-head">
            <div className="pg-head-l">
              <div className="eyebrow">{eyebrow}</div>
              <h1>{h1}</h1>
              <div className="sub">{sub}</div>
            </div>
            <div className="pg-head-r">
              <button className="btn btn-sec">Back</button>
              {headRight || <button className="btn btn-pri"><GI d={GIco.arrowR} sw={2}/> Continue</button>}
            </div>
          </header>
          {children}
        </div>
      </div>
    </div>
  );
}

/* 1 — Scope, timing & resources */
/* 1 — Program plan & worklist */
function S1() {
  const work = [
    ['Assessment structure · 11 standards', 'av-me', 'Ryan', 'Build', 'In review', 'amber'],
    ['Safety-critical flagging', 'av-sarah', 'Kath', 'Build', 'Approved', 'green'],
    ['Training · how-to video', 'av-marcus', 'Sai', 'Develop', 'Draft', 'gray'],
    ['Guide · evidence upload', 'av-priya', 'Mei', 'Develop', 'In review', 'amber'],
    ['Module adjustments · branching', 'av-me', 'Ryan', 'Build', 'To do', 'gray'],
    ['Locations & owners', 'av-sarah', 'Kath', 'Setup', 'Not started', 'gray'],
    ['Access & collaborators', 'av-sarah', 'Kath', 'Setup', 'Not started', 'gray'],
    ['Release plan · waves', 'av-me', 'Ryan', 'Release', 'Blocked', 'red'],
  ];
  const stageTone = { Build: 'blue', Develop: 'violet', Setup: 'gray', Release: 'gray' };
  return (
    <Wizard step={0} h={968} crumbs={['Gold Fields', 'Program', 'Plan & worklist']}
      eyebrow={<><span>Step 1</span><span className="dot"/><span>Program plan & worklist</span></>}
      h1="Plan the program"
      sub={<>Ryan and Kath lead delivery. Agree scope and timing, then work the build list — <b>assessments, training and guides are all developed and reviewed before release</b>.</>}
      headRight={<button className="btn btn-pri">Share plan</button>}>
      <section className="stats" style={{ marginBottom: 16 }}>
        <GStat hue="violet" icon={GIco.clipboard} label="Build items" value="8" foot={<>across 4 stages</>}/>
        <GStat hue="sky" icon={GIco.check} trend="1 done" trendDir="up" label="Approved" value="1" unit="/ 8"/>
        <GStat hue="orange" icon={GIco.file} label="In review" value="3" foot={<>need sign-off</>}/>
        <GStat hue="fuchsia" icon={GIco.cal} label="Target release" value="Mar 10" foot={<><b>Wave 1</b> · 12 days</>}/>
      </section>
      <div className="grid-2">
        <div className="card">
          <div className="card-head"><div className="card-head-l"><h2>Build worklist</h2><div className="sub">Everything that must be built and reviewed before release</div></div>
            <div className="card-head-r"><div className="pill-tabs"><button className="pill-tab active">All</button><button className="pill-tab">Build</button><button className="pill-tab">Review</button></div></div>
          </div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="gtable">
              <thead><tr><th>Workstream</th><th>Owner</th><th>Stage</th><th>Review</th></tr></thead>
              <tbody>{work.map(([t, av, nm, stage, rev, tone]) => (
                <tr key={t}><td><b>{t}</b></td>
                  <td><span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><span className="av-sm"><img src={`assets/avatars/${av}.svg`} alt=""/></span>{nm}</span></td>
                  <td><span className={`badge ${stageTone[stage]}`}>{stage}</span></td>
                  <td><span className={`badge ${tone}`}>{rev}</span></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>Leads</h2></div></div>
            <div className="card-body" style={{ paddingTop: 8 }}>
              {[['av-me','Ryan Walsh','Delivery lead'],['av-sarah','Kath Nguyen','Co-lead · build'],['av-priya','Priya Iyer','Client sponsor · Gold Fields']].map(([a, nm, r]) => (
                <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><div style={{ font: '600 13px/16px Inter' }}>{nm}</div><div style={{ font: '400 11px/14px Inter', color: 'var(--ink4)' }}>{r}</div></div>
                </div>
              ))}
            </div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Scope & timing</h2></div></div>
            <div className="card-body" style={{ paddingTop: 12 }}>
              <div className="om-foot" style={{ marginBottom: 10 }}><span><b>11</b> standards</span><span className="pip"/><span><b>15</b> sites</span><span className="pip"/><span><b>165</b> assessments</span></div>
              <div style={{ display: 'flex', gap: 4, alignItems: 'center', flexWrap: 'wrap', font: '500 11px/16px Inter', color: 'var(--ink3)' }}>
                {['Plan', 'Build', 'Review', 'Release', 'Track'].map((p, i) => (
                  <React.Fragment key={p}><span style={{ padding: '3px 8px', borderRadius: 6, background: i === 0 ? '#eff8ff' : 'var(--wash)', color: i === 0 ? '#175cd3' : 'var(--ink3)', border: i === 0 ? '1px solid #b2ddff' : '1px solid var(--line2)' }}>{p}</span>{i < 4 && <span style={{ color: 'var(--line3)' }}>›</span>}</React.Fragment>
                ))}
              </div>
            </div>
          </div>
          <div className="osrail"><div className="osrail-h"><GI d={GIco.layers} sw={2}/> Engagement type</div><div style={{ font: '400 12.5px/18px Inter', color: 'var(--ink3)' }}>An <b style={{ color: 'var(--ink2)' }}>Assess</b>-scope engagement — client gets Assessments + Actions; the rest of the operating system stays locked but visible.</div></div>
        </div>
      </div>
    </Wizard>
  );
}

/* 2 — Data & AI load */
function S2() {
  return (
    <Wizard step={1} h={904} crumbs={['Gold Fields', 'Setup', 'Data & AI load']}
      eyebrow={<><span>Step 2</span><span className="dot"/><span>Data & AI load</span></>}
      h1="Turn their documents into a structured assessment"
      sub={<>Upload existing standards, audit spreadsheets and SOPs. Method 8 extracts criteria and structures them — flagging <b>safety-critical items</b> automatically.</>}
      headRight={<button className="btn btn-pri">Accept structure · 142 criteria</button>}>
      <div className="grid-2w">
        <div className="card">
          <div className="card-head"><div className="card-head-l"><h2>Structured assessment · preview</h2><div className="sub">Contractor management · generated from 3 sources</div></div><span className="crit"><span className="d"/> 4 critical</span></div>
          <div className="card-body" style={{ paddingTop: 12 }}>
            {[
              ['Critical controls verified in the field', true],
              ['Risk assessment before mobilisation', false],
              ['Gold Fields sign-off on contractor RAs', true],
              ['Competency & licensing records current', false],
              ['Isolation & permit-to-work compliance', true],
              ['Incident reporting & investigation', false],
            ].map(([t, crit], i) => (
              <div key={i} className={`up-row ${crit ? 'critrow' : ''}`} style={{ marginBottom: 7 }}>
                <span className="asmt-qn" style={{ width: 34 }}>3.{i + 1}</span>
                <div style={{ flex: 1, font: '500 13px/18px Inter' }}>{t}</div>
                {crit ? <span className="crit"><span className="d"/> Critical</span> : <span className="badge gray">Standard</span>}
              </div>
            ))}
            <div style={{ font: '400 12px/16px Inter', color: 'var(--ink4)', marginTop: 8 }}>+ 6 more criteria · 6 sections</div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Sources</h2></div></div>
            <div className="card-body" style={{ paddingTop: 12 }}>
              {[['xls','GF-Contractor-Std.xlsx','24 controls'],['doc','Contractor SOP v4.docx','18 pages'],['pdf','ICMM critical controls.pdf','ref']].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><GI d={GIco.check} sw={2.4} size={15} style={{ color: '#17b26a' }}/></div>
              ))}
            </div>
          </div>
          <div className="card"><div className="card-body" style={{ padding: 14 }}>
            <div className="chat">
              <div className="chat-msg"><span className="chat-av ai"><GI d={GIco.spark} sw={2.2} size={15}/></span><div className="chat-bub">I found <b>24 controls</b> across your sources. 4 map to ICMM critical safety controls — I've marked them red. Want me to group by your 6 standard sections?</div></div>
              <div className="chat-msg me"><div className="chat-bub">Yes, and add isolation as critical.</div></div>
            </div>
            <div className="chat-input"><GI d={GIco.spark} sw={2} size={16} style={{ color: '#5925dc' }}/> Refine the structure…</div>
          </div></div>
        </div>
      </div>
    </Wizard>
  );
}

/* 3 — Review & issue tests */
function S3() {
  const rows = [
    ['Safety', 10, 3, 'Approved', 'green', 'av-priya'],
    ['Contractor mgmt', 12, 4, 'Changes requested', 'amber', 'av-priya'],
    ['Critical risk', 9, 5, 'In review', 'blue', 'av-marcus'],
    ['Environment', 8, 1, 'Approved', 'green', 'av-sarah'],
    ['Tailings & dams', 7, 4, 'Not sent', 'gray', null],
  ];
  return (
    <Wizard step={2} h={868} crumbs={['Gold Fields', 'Setup', 'Review']}
      eyebrow={<><span>Step 3</span><span className="dot"/><span>Review & issue tests</span></>}
      h1="Issue a sample for client review" sub={<>Before full release, send sample assessments to client reviewers to validate the criteria and critical flags. Nothing goes live until standards are approved.</>}
      headRight={<button className="btn btn-pri">Issue 2 sample tests</button>}>
      <section className="stats" style={{ gridTemplateColumns: 'repeat(4,1fr)', marginBottom: 18 }}>
        <GStat hue="violet" icon={GIco.file} label="Standards drafted" value="11"/>
        <GStat hue="sky" icon={GIco.check} trend="2 approved" trendDir="up" label="Approved" value="2" unit="/ 11"/>
        <GStat hue="orange" icon={GIco.target} label="Critical items" value="38" foot="auto-flagged"/>
        <GStat hue="fuchsia" icon={GIco.users} label="Client reviewers" value="3"/>
      </section>
      <div className="card"><div className="card-head"><div className="card-head-l"><h2>Review status</h2></div></div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="gtable">
            <thead><tr><th>Standard</th><th>Criteria</th><th>Critical</th><th>Status</th><th>Reviewer</th><th></th></tr></thead>
            <tbody>{rows.map(([s, c, cr, st, tone, av]) => (
              <tr key={s}><td><b>{s}</b></td><td>{c}</td><td><span className="crit"><span className="d"/> {cr}</span></td><td><span className={`badge ${tone}`}>{st}</span></td>
                <td>{av ? <span className="av-sm"><img src={`assets/avatars/${av}.svg`} alt=""/></span> : <span className="muted">—</span>}</td>
                <td><span className="card-link">Open <GI d={GIco.arrowR} sw={2} size={12}/></span></td></tr>
            ))}</tbody>
          </table>
        </div>
      </div>
    </Wizard>
  );
}

/* 4 — Locations & owners */
function S4() {
  const sites = [
    ['St Ives','Australia','Adetola Okafor','av-me','Assigned'],['Agnew','Australia','Devon Mphahlele','av-marcus','Assigned'],
    ['Granny Smith','Australia','—',null,'Unassigned'],['Gruyere','Australia','Priya Iyer','av-priya','Assigned'],
    ['Tarkwa','West Africa','Sarah Mensah','av-sarah','Assigned'],['Damang','West Africa','—',null,'Unassigned'],
    ['South Deep','Sthn Africa','Lerato Mthembu','av-priya','Assigned'],['Cerro Corona','Americas','James O\u2019Brien','av-marcus','Assigned'],
    ['Salares Norte','Americas','—',null,'Unassigned'],
  ];
  return (
    <Wizard step={5} h={948} crumbs={['Gold Fields', 'Setup', 'Locations & owners']}
      eyebrow={<><span>Step 6</span><span className="dot"/><span>Locations & owners</span></>}
      h1="Assign an owner to every location" sub={<>Each site needs one accountable owner who runs its 11 assessments. <b>12 of 15</b> assigned — 3 still need an owner before release.</>}
      headRight={<button className="btn btn-pri">Notify owners</button>}>
      <section className="stats" style={{ gridTemplateColumns: 'repeat(3,1fr)', marginBottom: 16 }}>
        <GStat hue="sky" icon={GIco.map} label="Locations" value="15"/>
        <GStat hue="violet" icon={GIco.users} trend="12 set" trendDir="up" label="Owners assigned" value="12" unit="/ 15"/>
        <GStat hue="orange" icon={GIco.target} trend="3 left" trendDir="dn" label="Unassigned" value="3"/>
      </section>
      <div className="card"><div className="card-head"><div className="card-head-l"><h2>Sites</h2></div><div className="card-head-r"><div className="pill-tabs"><button className="pill-tab active">All</button><button className="pill-tab">Unassigned</button></div></div></div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="gtable"><thead><tr><th>Location</th><th>Region</th><th>Owner</th><th>Status</th><th></th></tr></thead>
            <tbody>{sites.map(([n, r, o, av, st]) => (
              <tr key={n}><td><b>{n}</b></td><td>{r}</td>
                <td>{av ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><span className="av-sm"><img src={`assets/avatars/${av}.svg`} alt=""/></span>{o}</span> : <span className="muted">Unassigned</span>}</td>
                <td><span className={`badge ${st === 'Assigned' ? 'green' : 'amber'}`}>{st}</span></td>
                <td><span className="card-link">{st === 'Assigned' ? 'Change' : 'Assign owner'}</span></td></tr>
            ))}</tbody></table>
        </div>
      </div>
    </Wizard>
  );
}

/* 5 — Collaborators & access */
function S5() {
  const rows = [
    ['St Ives','av-me','Adetola Okafor',['av-marcus','av-sarah'],'Self-assigned 2'],
    ['Gruyere','av-priya','Priya Iyer',['av-marcus'],'Requested 3'],
    ['Tarkwa','av-sarah','Sarah Mensah',[],'Awaiting'],
    ['South Deep','av-priya','Lerato Mthembu',['av-me','av-marcus','av-sarah'],'Self-assigned 3'],
    ['Cerro Corona','av-marcus','James O\u2019Brien',['av-priya'],'Requested 1'],
  ];
  return (
    <Wizard step={6} h={892} crumbs={['Gold Fields', 'Setup', 'Access']}
      eyebrow={<><span>Step 7</span><span className="dot"/><span>Collaborators & access</span></>}
      h1="Owners build their site team" sub={<>Each owner can <b>self-assign</b> collaborators or <b>request</b> access for others (who get an approval email). You keep oversight of who can see what.</>}
      headRight={<button className="btn btn-pri">Approve 4 requests</button>}>
      <div className="grid-2">
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Access by site</h2></div></div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="gtable"><thead><tr><th>Site</th><th>Owner</th><th>Collaborators</th><th>State</th></tr></thead>
              <tbody>{rows.map(([s, oav, o, collabs, state]) => (
                <tr key={s}><td><b>{s}</b></td>
                  <td><span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><span className="av-sm"><img src={`assets/avatars/${oav}.svg`} alt=""/></span>{o}</span></td>
                  <td><div className="av-row">{collabs.map((c, i) => <span key={i} className="av-sm"><img src={`assets/avatars/${c}.svg`} alt=""/></span>)}<span className="av-add"><GI d={GIco.plus} sw={2.4} size={12}/></span></div></td>
                  <td><span className={`badge ${state.startsWith('Self') ? 'green' : state === 'Awaiting' ? 'gray' : 'amber'}`}>{state}</span></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>Pending requests</h2></div></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              {[['Gruyere','3 collaborators'],['Cerro Corona','1 collaborator']].map(([s, m]) => (
                <div key={s} className="feed-item"><div className="feed-ic warn"><GI d={GIco.users} sw={2}/></div><div style={{ flex: 1 }}><div className="feed-msg"><b>{s}</b> · {m}</div><div className="feed-meta">requested by owner</div></div><button className="btn btn-sec btn-sm">Approve</button></div>
              ))}
            </div>
          </div>
          <div className="osrail"><div className="osrail-h"><GI d={GIco.lock} sw={2}/> Access model</div><div style={{ font: '400 12.5px/18px Inter', color: 'var(--ink3)' }}>Owners see their site. Collaborators see only assigned standards. Method 8 & Group sponsor see everything.</div></div>
        </div>
      </div>
    </Wizard>
  );
}

/* 6 — Release */
function S6() {
  return (
    <Wizard step={7} h={912} crumbs={['Gold Fields', 'Setup', 'Release']}
      eyebrow={<><span>Step 8</span><span className="dot"/><span>Release</span></>}
      h1="Release the assessments" sub={<>Push everything live at once, or roll out in waves by region. Invitation emails fire automatically to owners and collaborators on release.</>}
      headRight={<button className="btn btn-pri"><GI d={GIco.zap} sw={2}/> Release Wave 1</button>}>
      <div className="grid-2">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="relopt">
            <div className="reltile"><div className="rt">All at once</div><div className="rd">All 15 sites go live now. 1 batch of emails.</div></div>
            <div className="reltile on"><div className="rt">In waves ✓</div><div className="rd">Region by region. Stagger load on owners and reviewers.</div></div>
          </div>
          <div className="card"><div className="card-head"><div className="card-head-l"><h2>Wave schedule</h2></div></div>
            <div className="card-body" style={{ paddingTop: 6 }}>
              {[['Wave 1 · Australia','4 sites · 44 assessments','Ready','green'],['Wave 2 · West Africa','3 sites · 33','Mar 31','gray'],['Wave 3 · Sthn Africa','2 sites · 22','Apr 14','gray'],['Wave 4 · Americas','4 sites · 44','Apr 28','gray']].map(([w, m, s, tone]) => (
                <div key={w} className="feed-item"><div className={`feed-ic ${tone === 'green' ? 'ok' : ''}`} style={tone !== 'green' ? { background: 'var(--wash)', color: 'var(--ink4)' } : {}}><GI d={GIco.cal} sw={2}/></div><div style={{ flex: 1 }}><div className="feed-msg"><b>{w}</b></div><div className="feed-meta">{m}</div></div><span className={`badge ${tone}`}>{s}</span></div>
              ))}
            </div>
          </div>
        </div>
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Invitation email</h2><div className="sub">Sent to owners + collaborators on release</div></div></div>
          <div className="card-body" style={{ paddingTop: 14 }}>
            <div className="email"><div className="email-bar"><b>To</b> site owners · <b>Subject</b> Your Gold Fields gap assessment is ready</div>
              <div className="email-body"><div className="email-logo">M8</div>
                <div style={{ font: '600 16px/22px Inter', marginBottom: 8 }}>St Ives — 11 standards to assess</div>
                <div style={{ font: '400 13px/20px Inter', color: 'var(--ink3)' }}>Hi Adetola, your site's gap assessment is now open. You have 11 standards and 30 assessments. Safety-critical items are marked in red and need evidence. Due in 3 weeks.</div>
                <span className="email-btn">Open my assessment</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Wizard>
  );
}

/* 7 — Training & guides */
function S7() {
  const guides = [
    ['How to complete a gap assessment','video','3 min · all roles','#eff8ff','#0ba5ec'],
    ['Evidence upload guide','doc','PDF · all roles','#f4f3ff','#6938ef'],
    ['Safety-critical controls explained','video','5 min · safety','#fef3f2','#d92d20'],
    ['Contractor mgmt assessor notes','doc','per standard','#ecfdf3','#079455'],
    ['Tailings standard walkthrough','video','per standard','#fff6ed','#e04f16'],
    ['Owner & collaborator roles','doc','admin','#fdf4ff','#ba24d5'],
  ];
  return (
    <Wizard step={3} h={880} crumbs={['Gold Fields', 'Setup', 'Training']}
      eyebrow={<><span>Step 4</span><span className="dot"/><span>Training & guides</span></>}
      h1="Attach the right guides" sub={<>Materials surface inside each assessment based on context — a safety-critical control links to its explainer; an assessor sees standard-specific notes.</>}
      headRight={<button className="btn btn-pri">Publish library</button>}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
        {guides.map(([t, kind, m, bg, fg]) => (
          <div key={t} className="guide">
            <div className="guide-ic" style={{ background: bg, color: fg }}><GI d={kind === 'video' ? GIco.activity : GIco.doc} sw={2}/></div>
            <div className="guide-t">{t}</div>
            <div className="guide-m">{m}</div>
            <div style={{ marginTop: 'auto', display: 'flex', gap: 6 }}><span className="badge gray">{kind}</span><span className="badge blue">attached</span></div>
          </div>
        ))}
      </div>
      <div className="osrail" style={{ marginTop: 16 }}><div className="osrail-h"><GI d={GIco.spark} sw={2}/> Context-aware</div><div style={{ font: '400 12.5px/18px Inter', color: 'var(--ink3)' }}>Method 8 suggests which guide to show per question. Safety-critical items always link their explainer so assessors understand why an item is red.</div></div>
    </Wizard>
  );
}

/* 8 — Adjustments (module builder) */
function S8() {
  return (
    <Wizard step={4} h={912} crumbs={['Gold Fields', 'Setup', 'Module builder']}
      eyebrow={<><span>Step 5</span><span className="dot"/><span>Adjustments · module builder</span></>}
      h1="Fine-tune a question" sub={<>Use-case-specific tweaks happen here: change response types, add branching logic, adjust scoring, or toggle the safety-critical flag.</>}
      headRight={<button className="btn btn-pri">Save changes</button>}>
      <div className="grid-2w">
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Contractor mgmt · Section 3</h2><div className="sub">Editing criterion 3.3</div></div></div>
          <div className="card-body" style={{ paddingTop: 12 }}>
            <div className="asmt-q flag">
              <div className="asmt-qtop"><span className="asmt-qn">3.3</span><span className="asmt-qt" contentEditable suppressContentEditableWarning style={{ outline: 'none' }}>Are contractor risk assessments reviewed and signed off by a Gold Fields representative before mobilisation?</span></div>
              <div className="asmt-opts"><span className="opt sel yes">Conformant</span><span className="opt sel partial">Partial</span><span className="opt sel no">Gap</span></div>
              <div className="asmt-note"><span className="ai-tag"><GI d={GIco.spark} sw={2.2} size={11}/> Branching</span>If "Gap" → reveal "Upload current sign-off process" + auto-create closure action.</div>
            </div>
            <div className="up-row" style={{ marginTop: 8 }}><span className="asmt-qn" style={{ width: 34 }}>3.4</span><div style={{ flex: 1, font: '500 13px/18px Inter' }}>Competency & licensing records current</div><span className="badge gray">Standard</span></div>
          </div>
        </div>
        <div className="card"><div className="card-head"><div className="card-head-l"><h2>Question settings</h2></div></div>
          <div className="card-body" style={{ paddingTop: 12, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {[['Response type','Conformant / Partial / Gap'],['Evidence','Required on Partial or Gap'],['Weighting','High (2×)'],['Section','3 · Risk & controls']].map(([l, v]) => (
              <div key={l}><div style={{ font: '500 11px/16px Inter', color: 'var(--ink4)', textTransform: 'uppercase', letterSpacing: '.3px' }}>{l}</div><div style={{ font: '500 13px/18px Inter', marginTop: 3, padding: '8px 11px', border: '1px solid var(--line)', borderRadius: 8 }}>{v}</div></div>
            ))}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 13px', border: '1px solid #fecdca', borderRadius: 9, background: '#fffbfa' }}>
              <div><div style={{ font: '600 13px/17px Inter', color: '#b42318' }}>Safety-critical</div><div style={{ font: '400 11px/14px Inter', color: 'var(--ink4)' }}>Marks the item red</div></div>
              <div style={{ width: 38, height: 22, borderRadius: 999, background: '#f04438', position: 'relative' }}><span style={{ position: 'absolute', top: 2, right: 2, width: 18, height: 18, borderRadius: 999, background: '#fff' }}/></div>
            </div>
          </div>
        </div>
      </div>
    </Wizard>
  );
}

/* 9 — Track performance */
function S9() {
  return (
    <Wizard step={8} h={912} crumbs={['Gold Fields', 'Delivery', 'Tracking']}
      eyebrow={<><span>Step 9</span><span className="dot"/><span>Track performance & completion</span><span className="dot"/><span className="live">Live</span></>}
      h1="Track completion & performance" sub={<>Every level sees the attributes that matter to them. Switch the lens — Group rolls up conformance; site owners see who's outstanding.</>}
      headRight={<button className="btn btn-sec"><GI d={GIco.ext} sw={2}/> Export</button>}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        <span style={{ font: '500 13px/1 Inter', color: 'var(--ink4)' }}>View as</span>
        <div className="pill-tabs"><button className="pill-tab">Group</button><button className="pill-tab active">Region</button><button className="pill-tab">Site</button><button className="pill-tab">Standard</button></div>
      </div>
      <section className="stats" style={{ marginBottom: 16 }}>
        <GStat hue="fuchsia" icon={GIco.file} trend="71%" trendDir="up" label="Completion" value="117" unit="/ 165"/>
        <GStat hue="violet" icon={GIco.shield} trend="+6 pts" trendDir="up" label="Avg conformance" value="68" unit="%"/>
        <GStat hue="orange" icon={GIco.target} trend="38 high" trendDir="up" label="Open actions" value="214"/>
        <GStat hue="sky" icon={GIco.users} trend="" trendDir="flat" label="Active owners" value="12" unit="/ 15"/>
      </section>
      <div className="card"><div className="card-head"><div className="card-head-l"><h2>By region</h2><div className="sub">Attributes shown for this level: completion, conformance, overdue</div></div></div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="gtable"><thead><tr><th>Region</th><th>Sites</th><th>Completion</th><th>Conformance</th><th>Overdue</th><th>Trend</th></tr></thead>
            <tbody>{[['Australia',5,86,79,1,'up'],['West Africa',3,58,61,4,'up'],['Sthn Africa',2,74,73,0,'flat'],['Americas',4,49,54,6,'dn']].map(([r, s, comp, conf, od, tr]) => (
              <tr key={r}><td><b>{r}</b></td><td>{s}</td>
                <td><div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><div style={{ width: 90, height: 6, background: 'var(--wash2)', borderRadius: 3, overflow: 'hidden' }}><div style={{ width: `${comp}%`, height: '100%', background: '#2e90fa' }}/></div>{comp}%</div></td>
                <td><span className={`badge ${conf >= 70 ? 'green' : conf >= 55 ? 'amber' : 'red'}`}>{conf}%</span></td>
                <td>{od ? <span className="crit"><span className="d"/> {od}</span> : <span className="muted">0</span>}</td>
                <td><span className={`stat-trend ${tr}`}><GI d={GIco[tr]} sw={2.4} size={11}/> {tr === 'up' ? '+4' : tr === 'dn' ? '−3' : '0'}</span></td></tr>
            ))}</tbody></table>
        </div>
      </div>
    </Wizard>
  );
}

window.GFFLOW = {
  title: 'Gold Fields — delivery flow',
  subtitle: 'Plan → build → review → release → track · the delivery-team journey',
  screens: [
    { id: 's1', label: '1 · Program plan & worklist', w: 1440, h: 968, render: () => <S1/> },
    { id: 's2', label: '2 · Data & AI load', w: 1440, h: 904, render: () => <S2/> },
    { id: 's3', label: '3 · Review & issue tests', w: 1440, h: 868, render: () => <S3/> },
    { id: 's7', label: '4 · Training & guides', w: 1440, h: 880, render: () => <S7/> },
    { id: 's8', label: '5 · Module adjustments', w: 1440, h: 912, render: () => <S8/> },
    { id: 's4', label: '6 · Locations & owners', w: 1440, h: 948, render: () => <S4/> },
    { id: 's5', label: '7 · Collaborators & access', w: 1440, h: 892, render: () => <S5/> },
    { id: 's6', label: '8 · Release (waves + email)', w: 1440, h: 912, render: () => <S6/> },
    { id: 's9', label: '9 · Track performance', w: 1440, h: 912, render: () => <S9/> },
  ],
};