// Method8 — demo · Health Check workshop slides + agenda.
// The Functional Model Health Assessment runs slides interspersed with poll
// questions, per the real slide pack (slides 1–12) and the platform upload sheet.

const WS_LOGO = (
  <span className="sl-logo"><svg viewBox="0 0 40 40" fill="none"><path d="M14 12c-4.4 0-8 3.6-8 8s3.6 8 8 8c2.7 0 5-1.3 6.4-3.4M26 28c4.4 0 8-3.6 8-8s-3.6-8-8-8c-2.7 0-5 1.3-6.4 3.4" stroke="#53B1FD" strokeWidth="3.2" strokeLinecap="round"/></svg> Method8</span>
);

// the four functional model expectations (slides 8–11), matching the deck
const WS_EXPS = [
  { num: 1, name: 'Understanding & Alignment', color: '#1a7a52',
    icon: <g><circle cx="12" cy="8" r="3"/><path d="M6.5 20a5.5 5.5 0 0 1 11 0"/><path d="M3 14h2M19 14h2"/></g>,
    stmt: 'Leaders and teams understand and align to the intent and business objectives of the functional model.',
    tests: ['Leaders understand the rationale, objectives and intended benefits of the functional model.','Functions and operations have a shared understanding of how the functional model is intended to operate.','Leaders and teams can articulate business priorities and how their function contributes to them.','Leaders and teams understand the behaviours and ways of working required for the model to operate effectively.'] },
  { num: 2, name: 'Decision Making, Accountability & Working at Level', color: '#1f6fb2',
    icon: <g><path d="M12 3v18M5 7h14M7 7l-3 7h6zM17 7l-3 7h6z"/></g>,
    stmt: 'Decision making, accountability and authority at each organisational level support effective enterprise execution.',
    tests: ['Decision rights and accountabilities between functions and operations are defined, understood and accepted.','Leaders operate at the level appropriate to their role; decisions are made at the right level, not unnecessarily elevated.','Leaders and teams are empowered to act within their authority without seeking unnecessary approval.','Enterprise priorities, risks and trade-offs are addressed effectively through decision-making.'] },
  { num: 3, name: 'Coordination & Execution', color: '#6b2f8e',
    icon: <g><path d="M9 6a3 3 0 1 0-3 3M18 9a3 3 0 1 0-3-3M9 18a3 3 0 1 0 3 3M7 12a5 5 0 0 1 5-5M12 17a5 5 0 0 0 5-5"/></g>,
    stmt: 'Functions and operations effectively coordinate to support enterprise execution.',
    tests: ['Functions and operations view each other as responsive, effective and value-adding partners.','Leadership routines support alignment, coordination, accountability and execution.','Cross-functional dependencies and interfaces are proactively identified and managed.','Resources, capacity and priorities are managed collectively to prevent bottlenecks and competing demands.'] },
  { num: 4, name: 'Leadership Behaviour & Culture', color: '#e8631a',
    icon: <g><circle cx="9" cy="8" r="2.5"/><circle cx="16" cy="9" r="2"/><path d="M4 19a5 5 0 0 1 10 0M13.5 19a4 4 0 0 1 6.5-3.1"/></g>,
    stmt: 'Leadership behaviours, cultural norms and reinforcement mechanisms support effective functional model ways of working.',
    tests: ['Leaders consistently role-model behaviours aligned to the functional model.','Leaders have created an environment where people can raise concerns and escalate risks without fear.','Performance conversations and recognition reinforce functional model behaviours.','Leaders constructively challenge behaviours that undermine effective ways of working.'] },
];

// the session agenda — chapters with steps; each step is a slide or a question
const WS_AGENDA = [
  { ch: '1. Introduction', steps: [
    { k: 'slide', t: 'title', title: 'Introductions', sub: 'Functional Model Health Assessment', kicker: 'Welcome' },
    { k: 'slide', t: 'bullets', title: 'Objectives', kicker: 'Why we are here', items: [
      'Create a shared understanding of functional model success factors / expectations.',
      'Assess leaders’ perspective on alignment to the expectations.',
      'Proactively identify the gap-closure actions with the most impact / value.' ] },
    { k: 'slide', t: 'bullets', title: 'Our Journey Today', kicker: 'Agenda', items: [
      'Build shared understanding of functional model expectations.',
      'For each expectation, assess alignment, gaps and feedback.',
      'Align on the most value-add gap-closure actions to improve our functional model.' ] },
    { k: 'slide', t: 'rules', title: 'Session expectations', kicker: 'Ground rules', sub: 'A shared opportunity to reflect, learn and improve together.', rules: [
      'Work as ONE team.', 'SPEAK UP — share your honest views.', 'Prompt to capture actions and feedback.' ] },
  ]},
  { ch: '2. Shared understanding & belief', steps: [
    { k: 'slide', t: 'bullets', title: 'Build shared understanding', kicker: 'Chapter 2', items: [
      'We will build our understanding of the four functional model expectations.',
      'We will assess our understanding using a team poll.' ] },
    { k: 'slide', t: 'divider', title: 'Building our understanding', kicker: 'Discuss' },
    { k: 'q', measure: 'Understanding', title: 'I understand the expectations / success factors that underpin our functional model.', dist: [0, 0, 2, 3, 4] },
    { k: 'q', measure: 'Performance', title: 'I believe these expectations, if met, will set up our business to deliver better performance.', dist: [0, 0, 0, 4, 5] },
  ]},
  { ch: '3. Assess maturity', steps: [
    { k: 'slide', t: 'bullets', title: 'Assessing maturity', kicker: 'Chapter 3', sub: 'Use your best judgement — we are seeking perspectives to drive discussion, not perfection.', items: [
      'We will now work as a team to assess alignment of these expectations.',
      'Each expectation is introduced, then polled.' ] },
    { k: 'slide', t: 'exp', exp: 0 },
    { k: 'q', measure: 'Current maturity', expRef: 0, title: 'Leaders and teams understand and align to the intent and business objectives of the functional model.', dist: [1, 8, 0, 0, 0] },
    { k: 'slide', t: 'exp', exp: 1 },
    { k: 'q', measure: 'Current maturity', expRef: 1, title: 'Decision making, accountability and authority at each level support effective enterprise execution.', dist: [3, 6, 0, 0, 0] },
    { k: 'slide', t: 'exp', exp: 2 },
    { k: 'q', measure: 'Current maturity', expRef: 2, title: 'Functions and operations effectively coordinate to support enterprise execution.', dist: [1, 3, 2, 1, 0] },
    { k: 'slide', t: 'exp', exp: 3 },
    { k: 'q', measure: 'Current maturity', expRef: 3, title: 'Leadership behaviours, norms and reinforcement mechanisms support effective ways of working.', dist: [0, 5, 4, 1, 0] },
  ]},
  { ch: '4. Opportunities', steps: [
    { k: 'slide', t: 'bullets', title: 'Identifying opportunities', kicker: 'Chapter 4', items: [
      'We will now identify opportunities to improve our functional model to drive value and high performance.',
      'Be ready to provide and discuss feedback and any opportunities to strengthen our model.' ] },
    { k: 'comment', title: 'What are the 2–3 highest-priority actions that would improve the effectiveness of our functional model?' },
  ]},
  { ch: '5. Action summary & close-out', steps: [
    { k: 'q', measure: 'Session quality', title: 'Today’s team discussion was high quality and enabled constructive dialogue and feedback that added value.', dist: [0, 0, 1, 3, 5] },
  ]},
];

// flatten into ordered steps with chapter index + display number
const WS_STEPS = [];
WS_AGENDA.forEach((c, ci) => c.steps.forEach((s) => WS_STEPS.push({ ...s, chapter: ci })));

function WorkshopSlide({ step, exps }) {
  const EXPS = exps || window.WS_EXPS;
  if (step.t === 'title') {
    return (
      <div className="ws2-slide title-slide">{WS_LOGO}<div className="sl-pad">
        <div className="sl-kicker">{step.kicker}</div>
        <div className="sl-title">{step.title}</div>
        {step.sub && <div className="sl-sub">{step.sub}</div>}
        <div className="sl-foot"><span className="ch">Functional Model Health Assessment</span><span>Gold Fields · Executive Lead Team</span></div>
      </div></div>
    );
  }
  if (step.t === 'divider') {
    return (
      <div className="ws2-slide divider-slide">{WS_LOGO}<div className="sl-pad">
        <div className="sl-kicker">{step.kicker}</div>
        <div className="sl-title">{step.title}</div>
      </div></div>
    );
  }
  if (step.t === 'rules') {
    return (
      <div className="ws2-slide">{WS_LOGO}<div className="sl-pad">
        <div className="sl-kicker">{step.kicker}</div>
        <div className="sl-title">{step.title}</div>
        {step.sub && <div className="sl-sub" style={{ marginTop: 12 }}>{step.sub}</div>}
        <div className="sl-rules">
          {step.rules.map((r, i) => <div key={i} className="sl-rule"><div className="rn">{i + 1}</div><div className="rt">{r}</div></div>)}
        </div>
      </div></div>
    );
  }
  if (step.t === 'exp') {
    const e = EXPS[step.exp];
    const slideLabel = e.slideLabel || ('Expectation ' + e.num);
    const testsLabel = e.testsLabel || 'Effectiveness tests';
    return (
      <div className="ws2-slide exp-slide">{WS_LOGO}<div className="sl-pad">
        <div className="sl-exp-top">
          <span className="sl-exp-badge" style={{ background: e.color }}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{e.icon}</svg></span>
          <div><div className="sl-exp-num" style={{ color: e.color }}>{slideLabel}</div><div className="sl-exp-name">{e.name}</div></div>
        </div>
        <div className="sl-exp-stmt">“{e.stmt}”</div>
        <div className="sl-exp-h">{testsLabel}</div>
        <div className="sl-exp-tests">
          {e.tests.map((t, i) => <div key={i} className="sl-exp-test"><span className="tn" style={{ background: e.color }}>{i + 1}</span><span className="tt">{t}</span></div>)}
        </div>
      </div></div>
    );
  }
  // bullets (default)
  return (
    <div className="ws2-slide">{WS_LOGO}<div className="sl-pad">
      <div className="sl-kicker">{step.kicker}</div>
      <div className="sl-title">{step.title}</div>
      {step.sub && <div className="sl-sub" style={{ marginTop: 12 }}>{step.sub}</div>}
      <div className="sl-bullets">
        {step.items.map((it, i) => <div key={i} className="sl-bullet"><span className="bn">{i + 1}</span><span className="bt">{it}</span></div>)}
      </div>
    </div></div>
  );
}

Object.assign(window, { WS_AGENDA, WS_STEPS, WS_EXPS, WorkshopSlide, WS_LOGO });