// Method 8 — demo · Operating system map (the OS mockup).
// Design → Govern → Assess → Improve → Sense. Assess & Sense are live today;
// the rest is the unlocked vision. Live modules link into the demo.

const { Ico, I, PageHead, useNav } = window;

const PHASES = [
  { key: 'design', name: 'Design', icon: I.pencil, live: false,
    desc: 'Define the operating model, standards and critical controls — once.',
    mods: [['Operating model', 0], ['Standards library', 0], ['Critical control design', 0]] },
  { key: 'govern', name: 'Govern', icon: I.govern, live: false,
    desc: 'Assign accountability, set assurance cadence, manage change.',
    mods: [['RACI & accountability', 0], ['Assurance cadence', 0], ['Management of change', 0]] },
  { key: 'assess', name: 'Assess', icon: I.file, live: true,
    desc: 'Measure conformance and maturity against the standards.',
    mods: [['Gap assessment', 1, 'gap'], ['Formative workshops', 1, 'workshop'], ['Evidence & validation', 1]] },
  { key: 'improve', name: 'Improve', icon: I.improve, live: false,
    desc: 'Turn findings into closure actions and track them to done.',
    mods: [['Action plans', 0], ['Closure tracking', 0], ['Lessons learned', 0]] },
  { key: 'sense', name: 'Sense', icon: I.sense, live: true,
    desc: 'Listen to the workforce and the leading indicators.',
    mods: [['Culture surveys', 1, 'survey'], ['Pulse & sentiment', 1], ['Leading indicators', 1]] },
];

const LOOP = [
  ['Design', 'Standards & critical controls', 'Set the bar once — the whole system reads from it.'],
  ['Assess + Sense', 'Conformance, maturity & culture', 'What\'s in place, how mature it is, and whether people feel it. Live today.'],
  ['Improve', 'Findings → closure', 'Every gap and weak signal becomes a tracked action.'],
  ['Govern', 'Re-baseline & assure', 'The loop runs on a cadence — the picture never goes stale.'],
];

function OSView() {
  const { go } = useNav();
  return (
    <>
      <PageHead
        eyebrow={<><span>Your operating system</span><span className="dot"/><span>2 of 5 phases live</span></>}
        title="One operating system — you're using two phases of it"
        sub={<>Gold Fields runs <b>Assess</b> and <b>Sense</b> on Method 8 today: gap assessments, formative workshops and culture surveys. They sit inside a larger system that designs the standards, governs accountability and closes the loop. Same engine, same data — switched on when you're ready.</>}
        actions={<button className="btn btn-ai" onClick={() => alert('Demo: would open the enablement plan for Improve.')}><Ico d={I.spark} sw={2}/> Plan what's next</button>}/>

      <div className="card" style={{ marginBottom: 22 }}>
        <div className="card-body" style={{ padding: '30px 28px 26px' }}>
          <div className="spine">
            {PHASES.map(p => (
              <div key={p.key} className={`phase ${p.live ? 'live' : ''}`}>
                <div className="phase-node"><Ico d={p.icon} sw={2} size={24}/></div>
                <div className={`phase-card ${p.live ? 'clk' : ''}`}>
                  <div className="phase-top">
                    <span className="phase-name">{p.name}</span>
                    <span className={`phase-tag ${p.live ? 'on' : 'off'}`}>{p.live ? 'Live' : 'Not enabled'}</span>
                  </div>
                  <div className="phase-desc">{p.desc}</div>
                  <div className="phase-mods">
                    {p.mods.map(([m, act, target]) => (
                      act
                        ? <div key={m} className={`phase-mod act`} onClick={() => target && go(target)}><span className="md"/>{m}{target && <Ico d={I.arrowR} sw={2.4} size={12} style={{ marginLeft: 'auto', color: '#2e90fa' }}/>}</div>
                        : <div key={m} className="phase-mod lk"><span className="md"/>{m}<Ico d={I.lock} sw={2} size={12}/></div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ marginBottom: 12, font: '600 13px/16px Inter', color: 'var(--ink3)', textTransform: 'uppercase', letterSpacing: '.4px' }}>Why it compounds</div>
      <div className="loop" style={{ marginBottom: 24 }}>
        {LOOP.map(([k, t, d], i) => (
          <div key={i} className="loop-step"><div className="ls-k">{i + 1} · {k}</div><div className="ls-t">{t}</div><div className="ls-d">{d}</div></div>
        ))}
      </div>

      <div className="grid-2">
        <div className="card" style={{ borderColor: '#b2ddff', background: 'linear-gradient(180deg,#f5faff,#fff 70%)' }}>
          <div className="card-body" style={{ padding: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <div className="qic" style={{ width: 40, height: 40, borderRadius: 10, background: '#175cd3', color: '#fff', display: 'grid', placeItems: 'center' }}><Ico d={I.improve} sw={2} size={20}/></div>
              <div><div style={{ font: '700 16px/20px Inter' }}>Improve is your natural next phase</div><div style={{ font: '400 12.5px/17px Inter', color: 'var(--ink4)' }}>You already produce the inputs it needs</div></div>
            </div>
            <div style={{ font: '400 13px/20px Inter', color: 'var(--ink3)', marginBottom: 12 }}>
              Your gap assessments throw off <b style={{ color: 'var(--ink2)' }}>214 open findings</b>; the culture pulse and workshops add weak-signal context. Today those route to spreadsheets. <b style={{ color: 'var(--ink2)' }}>Improve</b> turns each into a tracked closure action with an owner and a due date — and re-baselines conformance automatically when it's done.
            </div>
            <button className="btn btn-pri" onClick={() => alert('Demo: would open the Improve enablement plan.')}>See the enablement plan <Ico d={I.arrowR} sw={2}/></button>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-head-l"><h2>What you run today</h2><div className="sub">Live, with real Gold Fields data</div></div></div>
          <div className="card-body" style={{ paddingTop: 12 }}>
            {[
              ['Gap assessment', '117 / 165 complete · 68% conformance', I.file, '#eff8ff', '#0ba5ec', 'gap'],
              ['Formative workshops', '9 run · St Ives in session now', I.poll, '#f4f3ff', '#6938ef', 'workshop'],
              ['Culture survey', '1,240 sent · 61% responded', I.activity, '#f0fdf9', '#0e9384', 'survey'],
            ].map(([t, d, ic, bg, fg, target]) => (
              <div key={t} className="feed-item clk" style={{ borderBottom: t !== 'Culture survey' ? '1px solid var(--line2)' : 'none' }} onClick={() => go(target)}>
                <div className="feed-ic" style={{ background: bg, color: fg, border: 'none' }}><Ico d={ic} sw={2}/></div>
                <div style={{ flex: 1 }}><div className="feed-msg"><b>{t}</b></div><div className="feed-meta">{d}</div></div>
                <Ico d={I.arrowR} sw={2} size={15} style={{ color: 'var(--ink4)' }}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { OSView });