// Engagement screens — assembled on the design canvas, split by persona.

const { DesignCanvas, DCSection, DCArtboard } = window;

const PERSONAS = [
  ['#0ba5ec', 'Method 8 lead', 'The delivery team', 'Sets up, builds, reviews, releases and tracks the program. Sees everything, across every client. This is the 9-step plan→build→release→track flow.'],
  ['#6938ef', 'Client lead', 'Group HSE / sponsor', 'Owns the portfolio. Sees the rollup across all 15 sites and 11 standards — completion, conformance, where the gaps are. Cannot edit the build.'],
  ['#e04f16', 'Client completer', 'Site owner & collaborators', 'Does the actual work at their site. Sees only their assigned standards, their critical items, their evidence to upload — nothing else.'],
];

function IntroBoard() {
  return (
    <div className="e8" style={{ width: '100%', height: '100%', background: '#fff', padding: 40, overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
        <div style={{ width: 40, height: 40, borderRadius: 10, background: 'linear-gradient(135deg,#84caff,#2e90fa)', display: 'grid', placeItems: 'center', color: '#fff', font: '700 15px/1 Inter' }}>M8</div>
        <div className="badge violet">Gold Fields · three role lenses</div>
      </div>
      <h1 style={{ font: '600 32px/40px Inter', letterSpacing: '-0.02em', margin: '6px 0 8px' }}>One engagement, three points of view</h1>
      <p style={{ font: '400 15px/23px Inter', color: 'var(--ink3)', maxWidth: 940, margin: '0 0 26px' }}>
        The same Gold Fields gap-assessment program looks completely different depending on who's logged in. We split the screens by role so we can go deep on each — what the <b style={{color:'var(--ink2)'}}>Method 8 lead</b> builds, what the <b style={{color:'var(--ink2)'}}>client lead</b> oversees, and what the <b style={{color:'var(--ink2)'}}>client completer</b> actually does.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginBottom: 22 }}>
        {PERSONAS.map(([c, t, who, body]) => (
          <div key={t} style={{ border: '1px solid var(--line)', borderRadius: 14, padding: 20, borderTop: `3px solid ${c}` }}>
            <h2 style={{ font: '600 18px/24px Inter', margin: '0 0 2px' }}>{t}</h2>
            <div style={{ font: '500 12px/16px Inter', color: c, marginBottom: 10 }}>{who}</div>
            <p style={{ font: '400 13px/19px Inter', color: 'var(--ink3)', margin: 0 }}>{body}</p>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
        <span className="badge gray">Scroll right →</span>
        <span style={{ font: '400 13px/18px Inter', color: 'var(--ink4)' }}>Each role is its own section below. Talison (the deep-overhaul contrast) sits at the end.</span>
      </div>
    </div>
  );
}

// pick screens by id from a screens array
const pick = (arr, ids) => ids.map(id => arr.find(s => s.id === id)).filter(Boolean);

function NarrativeBoard() {
  const steps = [
    ['1', 'Set up', 'Method 8 lead spins up a program for a client, picks the module, points AI at their documents.', '#0ba5ec'],
    ['2', 'AI generates', 'AI drafts the whole thing — assessment criteria, BOM elements, risks, interfaces — from docs & interviews.', '#7a5af8'],
    ['3', 'Humans review', 'Leads & owners confirm or edit. Provenance on every item. Judgement, not data entry.', '#dc6803'],
    ['4', 'Clients act', 'Client lead oversees from one command center; completers do only their assigned, critical work.', '#17b26a'],
    ['5', 'Roll up & expand', 'Sites roll into a portfolio; the same engine extends to new standards like CMSI by AI-mapping what exists.', '#ba24d5'],
  ];
  return (
    <div className="e8" style={{ width: '100%', height: '100%', background: '#fff', padding: 40, overflow: 'hidden' }}>
      <div className="badge violet" style={{ marginBottom: 10 }}>The story across both engagements</div>
      <h1 style={{ font: '600 30px/38px Inter', letterSpacing: '-0.02em', margin: '0 0 8px' }}>AI does the work; people do the judgement</h1>
      <p style={{ font: '400 14px/22px Inter', color: 'var(--ink3)', maxWidth: 980, margin: '0 0 26px' }}>
        Whether it's Gold Fields' 165 gap assessments or Talison's full operating-model overhaul, the shape is the same — and it's what keeps the screen count and the client's manual effort low.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
        {steps.map(([n, t, body, c]) => (
          <div key={n} style={{ border: '1px solid var(--line)', borderRadius: 14, padding: 18, borderTop: `3px solid ${c}` }}>
            <div style={{ width: 30, height: 30, borderRadius: 999, background: c, color: '#fff', display: 'grid', placeItems: 'center', font: '700 14px/1 Inter', marginBottom: 10 }}>{n}</div>
            <div style={{ font: '600 15px/20px Inter', marginBottom: 5 }}>{t}</div>
            <div style={{ font: '400 12.5px/18px Inter', color: 'var(--ink3)' }}>{body}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
        <span className="badge gray">Gold Fields · wide & shallow (15 sites × 11 standards)</span>
        <span className="badge gray">Talison · narrow & deep (full OS overhaul, 5-element BOM)</span>
        <span className="badge violet">CMSI · the same engine, a new standard</span>
      </div>
    </div>
  );
}

function Section({ id, title, subtitle, screens }) {
  return (
    <DCSection id={id} title={title} subtitle={subtitle}>
      {screens.map(s => (
        <DCArtboard key={s.id} id={s.id} label={s.label} width={s.w} height={s.h}>
          {s.render()}
        </DCArtboard>
      ))}
    </DCSection>
  );
}

function App() {
  const gf = window.GF.screens;
  const flow = window.GFFLOW.screens;
  return (
    <DesignCanvas commentSlot={window.CommentPins ? React.createElement(window.CommentPins) : null}>
      <DCSection id="intro" title="Overview" subtitle="Gold Fields, split by who's looking">
        <DCArtboard id="intro" label="Read me first" width={1080} height={540}>
          <IntroBoard/>
        </DCArtboard>
        <DCArtboard id="walkthrough" label="Narrative walkthrough" width={1280} height={580}>
          <NarrativeBoard/>
        </DCArtboard>
      </DCSection>

      <Section id="gf-lead" title="① Gold Fields · Method 8 lead"
        subtitle="Firm console (all orgs) → set up a program → control room → registry → health check"
        screens={window.GFLEAD.screens}/>

      <Section id="gf-clientlead" title="② Gold Fields · Client lead"
        subtitle="Group HSE / sponsor — one AI-kept command center + a detail drill (2 screens)"
        screens={pick(gf, ['clc', 'gf5'])}/>

      <Section id="gf-completer" title="③ Gold Fields · Client completer"
        subtitle="Site owner — my work + an AI-prefilled review & confirm (2 screens)"
        screens={pick(gf, ['gfc', 'gf6'])}/>

      <Section id="talison-clientlead" title="Talison · Client lead (overhaul cockpit)"
        subtitle="The Talison Way — 3 elements, functions tracked on the 5-element BOM"
        screens={pick(window.TAL.screens, ['t1'])}/>

      <Section id="talison-owner" title="Talison · Function owner (BOM)"
        subtitle="H&S — AI-prefilled BOM workspace, element deep-dive & the risk editor with provenance"
        screens={pick(window.TAL.screens, ['t2', 't3', 't5'])}/>

      <Section id="talison-lead" title="Talison · Method 8 lead (EOM)"
        subtitle="Enterprise model rollup — functional foundations, systems of work, enterprise risk"
        screens={pick(window.TAL.screens, ['t4'])}/>

      <Section id="cmsi" title="④ Gold Fields · CMSI expansion (research)"
        subtitle="One consolidated standard, AI-mapped from existing assessments — readiness + performance-area detail"
        screens={window.GFCMSI.screens}/>
    </DesignCanvas>
  );
}

const __engRoot = ReactDOM.createRoot(document.getElementById('root'));
__engRoot.render(
  window.CommentsRoot
    ? React.createElement(window.CommentsRoot, { canvasId: 'method8-engagement-screens' }, React.createElement(App))
    : <App/>
);