/* ─── Method Page Diagrams — inline SVG, editorial register ─── */
/* Adapted from Estall & Purdy, Deciding (2020). Figures 6, 8, 10, 15. */

/* ─── Figure 8: Three Context Bands ─── */
const ContextBandsDiagram = () => {
  const m = useMediaQuery(680);
  const t = { sm: m ? 15 : 10, md: m ? 18 : 12, lg: m ? 19 : 13 };
  return React.createElement('figure', {
    style: { margin: 'var(--space-6) 0', textAlign: 'center' },
    'aria-label': 'Figure 8. The three bands of decision context',
  },
    React.createElement('svg', {
      viewBox: '0 0 480 300',
      style: { width: '100%', maxWidth: '480px', height: 'auto' },
      role: 'img',
    },
      /* Wider band */
      React.createElement('ellipse', { cx: 240, cy: 150, rx: 225, ry: 140, fill: 'none', stroke: 'var(--border)', strokeWidth: 1.2, strokeDasharray: '6 4' }),
      React.createElement('text', { x: 240, y: 24, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-tertiary)', letterSpacing: '0.06em' }, 'WIDER'),
      React.createElement('text', { x: 240, y: m ? 43 : 40, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)', fontStyle: 'italic' }, 'General influences'),
      /* External band */
      React.createElement('ellipse', { cx: 240, cy: 150, rx: 165, ry: 100, fill: 'none', stroke: 'var(--border)', strokeWidth: 1.2 }),
      React.createElement('text', { x: 240, y: 62, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-tertiary)', letterSpacing: '0.06em' }, 'EXTERNAL'),
      React.createElement('text', { x: 240, y: m ? 81 : 78, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)', fontStyle: 'italic' }, 'Stakeholders and dependencies'),
      /* Internal band */
      React.createElement('ellipse', { cx: 240, cy: 150, rx: 110, ry: 65, fill: 'none', stroke: 'var(--border)', strokeWidth: 1.2 }),
      React.createElement('text', { x: 240, y: 100, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-tertiary)', letterSpacing: '0.06em' }, 'INTERNAL'),
      React.createElement('text', { x: 240, y: m ? 119 : 116, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)', fontStyle: 'italic' }, 'Features of the organisation'),
      /* Decision centre */
      React.createElement('ellipse', { cx: 240, cy: 158, rx: 48, ry: 28, fill: 'var(--fg-primary)', stroke: 'none' }),
      React.createElement('text', { x: 240, y: 163, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.lg, fill: '#fff', fontWeight: 500 }, 'Decision'),
    ),
    React.createElement('figcaption', {
      style: { fontFamily: 'var(--font-serif)', fontSize: 'var(--text-xs)', fontStyle: 'italic', color: 'var(--fg-tertiary)', marginTop: 'var(--space-3)', lineHeight: 1.5 }
    }, 'Figure 8. The three bands of decision context. Adapted from Estall & Purdy, ', React.createElement('em', null, 'Deciding'), ' (2020), p.\u00A050.'),
  );
};

/* ─── Figure 6: Significance Matrix ─── */
const SignificanceMatrixDiagram = () => {
  const m = useMediaQuery(680);
  const t = { sm: m ? 12 : 9, md: m ? 14 : 11, lg: m ? 17 : 14 };
  return React.createElement('figure', {
    style: { margin: 'var(--space-6) 0', textAlign: 'center' },
    'aria-label': 'Figure 6. Relative significance of assumptions',
  },
    React.createElement('svg', {
      viewBox: '0 0 400 400',
      style: { width: '100%', maxWidth: '400px', height: 'auto' },
      role: 'img',
    },
      /* Axes */
      React.createElement('line', { x1: 60, y1: 350, x2: 380, y2: 350, stroke: 'var(--fg-tertiary)', strokeWidth: 1 }),
      React.createElement('line', { x1: 60, y1: 350, x2: 60, y2: 20, stroke: 'var(--fg-tertiary)', strokeWidth: 1 }),
      /* Arrowheads */
      React.createElement('polygon', { points: '380,350 372,346 372,354', fill: 'var(--fg-tertiary)' }),
      React.createElement('polygon', { points: '60,20 56,28 64,28', fill: 'var(--fg-tertiary)' }),
      /* Axis labels */
      React.createElement('text', { x: 220, y: 385, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-secondary)' }, 'Confidence in assumption'),
      React.createElement('text', { x: 70, y: 375, fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)' }, 'Less'),
      React.createElement('text', { x: 345, y: 375, fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)' }, 'More'),
      React.createElement('text', { x: 20, y: 190, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-secondary)', transform: 'rotate(-90, 20, 190)' }, 'Influence on desired outcome'),
      React.createElement('text', { x: 48, y: 340, fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)', textAnchor: 'end' }, 'Less'),
      React.createElement('text', { x: 48, y: 45, fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)', textAnchor: 'end' }, 'More'),
      /* Cloud zones — soft ellipses with slight overlap */
      /* Critical — top left */
      React.createElement('ellipse', { cx: 155, cy: 130, rx: 85, ry: 75, fill: 'rgba(139,58,42,0.06)', stroke: 'rgba(139,58,42,0.25)', strokeWidth: 1, strokeDasharray: '4 3' }),
      React.createElement('text', { x: 155, y: 126, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.lg, fontWeight: 500, fill: '#8b3a2a' }, 'Critical'),
      React.createElement('text', { x: 155, y: 144, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)' }, 'high influence, low confidence'),
      /* Important — top right */
      React.createElement('ellipse', { cx: 285, cy: 130, rx: 85, ry: 75, fill: 'rgba(91,106,59,0.06)', stroke: 'rgba(91,106,59,0.25)', strokeWidth: 1, strokeDasharray: '4 3' }),
      React.createElement('text', { x: 285, y: 126, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.lg, fontWeight: 500, fill: '#5b6a3b' }, 'Important'),
      React.createElement('text', { x: 285, y: 144, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)' }, 'high influence, high confidence'),
      /* Relevant — bottom left */
      React.createElement('ellipse', { cx: 155, cy: 265, rx: 85, ry: 75, fill: 'rgba(74,90,122,0.05)', stroke: 'rgba(74,90,122,0.2)', strokeWidth: 1, strokeDasharray: '4 3' }),
      React.createElement('text', { x: 155, y: 261, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.lg, fontWeight: 500, fill: '#4a5a7a' }, 'Relevant'),
      React.createElement('text', { x: 155, y: 279, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)' }, 'low influence, low confidence'),
      /* Limited — bottom right */
      React.createElement('ellipse', { cx: 285, cy: 265, rx: 85, ry: 75, fill: 'rgba(138,138,122,0.05)', stroke: 'rgba(138,138,122,0.2)', strokeWidth: 1, strokeDasharray: '4 3' }),
      React.createElement('text', { x: 285, y: 261, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.lg, fontWeight: 500, fill: '#8a8a7a' }, 'Limited'),
      React.createElement('text', { x: 285, y: 279, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)' }, 'low influence, high confidence'),
    ),
    React.createElement('figcaption', {
      style: { fontFamily: 'var(--font-serif)', fontSize: 'var(--text-xs)', fontStyle: 'italic', color: 'var(--fg-tertiary)', marginTop: 'var(--space-3)', lineHeight: 1.5 }
    }, 'Figure 6. Relative significance of assumptions. Adapted from Estall & Purdy, ', React.createElement('em', null, 'Deciding'), ' (2020), p.\u00A041.'),
  );
};

/* ─── Figure 10: Monitoring Flowchart ─── */
const MonitoringFlowDiagram = () => {
  const m = useMediaQuery(680);
  const t = { sm: m ? 11 : 9, md: m ? 12 : 10, lg: m ? 13 : 11 };
  return React.createElement('figure', {
    style: { margin: 'var(--space-6) 0', textAlign: 'center' },
    'aria-label': 'Figure 10. General approach to establishing monitoring',
  },
    React.createElement('svg', {
      viewBox: '0 0 320 380',
      style: { width: '100%', maxWidth: '320px', height: 'auto' },
      role: 'img',
    },
      /* Box 1: Assumption */
      React.createElement('rect', { x: 80, y: 10, width: 160, height: 40, rx: 3, fill: 'none', stroke: 'var(--fg-tertiary)', strokeWidth: 1.2 }),
      React.createElement('text', { x: 160, y: 35, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.lg, fill: 'var(--fg-primary)' }, 'Assumption to be monitored'),
      /* Arrow down */
      React.createElement('line', { x1: 160, y1: 50, x2: 160, y2: 85, stroke: 'var(--fg-tertiary)', strokeWidth: 1 }),
      React.createElement('polygon', { points: '160,85 156,78 164,78', fill: 'var(--fg-tertiary)' }),
      /* Diamond: Is significant? */
      React.createElement('polygon', { points: '160,90 230,135 160,180 90,135', fill: 'none', stroke: 'var(--fg-tertiary)', strokeWidth: 1.2 }),
      React.createElement('text', { x: 160, y: 131, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-primary)' }, 'Is the assumption'),
      React.createElement('text', { x: 160, y: 145, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-primary)' }, 'significant?'),
      /* No branch — left */
      React.createElement('line', { x1: 90, y1: 135, x2: 30, y2: 135, stroke: 'var(--fg-tertiary)', strokeWidth: 1, strokeDasharray: '3 3' }),
      React.createElement('text', { x: 65, y: 128, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)' }, 'No'),
      React.createElement('rect', { x: 0, y: 120, width: 55, height: 28, rx: 12, fill: 'none', stroke: 'var(--fg-tertiary)', strokeWidth: 1, strokeDasharray: '3 3' }),
      React.createElement('text', { x: 27, y: 139, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)', fontStyle: 'italic' }, "Don't monitor"),
      /* Yes branch — down */
      React.createElement('line', { x1: 160, y1: 180, x2: 160, y2: 215, stroke: 'var(--fg-tertiary)', strokeWidth: 1 }),
      React.createElement('polygon', { points: '160,215 156,208 164,208', fill: 'var(--fg-tertiary)' }),
      React.createElement('text', { x: 172, y: 200, fontFamily: 'var(--font-serif)', fontSize: t.sm, fill: 'var(--fg-tertiary)' }, 'Yes'),
      /* Box 2: Match method */
      React.createElement('rect', { x: 60, y: 220, width: 200, height: 44, rx: 3, fill: 'none', stroke: 'var(--fg-tertiary)', strokeWidth: 1.2 }),
      React.createElement('text', { x: 160, y: 239, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-primary)' }, 'Match significance to'),
      React.createElement('text', { x: 160, y: 253, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-primary)' }, 'monitoring method'),
      /* Arrow down */
      React.createElement('line', { x1: 160, y1: 264, x2: 160, y2: 299, stroke: 'var(--fg-tertiary)', strokeWidth: 1 }),
      React.createElement('polygon', { points: '160,299 156,292 164,292', fill: 'var(--fg-tertiary)' }),
      /* Box 3: Choose response */
      React.createElement('rect', { x: 60, y: 304, width: 200, height: 44, rx: 3, fill: 'none', stroke: 'var(--fg-tertiary)', strokeWidth: 1.2 }),
      React.createElement('text', { x: 160, y: 323, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-primary)' }, 'Choose method for'),
      React.createElement('text', { x: 160, y: 337, textAnchor: 'middle', fontFamily: 'var(--font-serif)', fontSize: t.md, fill: 'var(--fg-primary)' }, 'responding to variances'),
    ),
    React.createElement('figcaption', {
      style: { fontFamily: 'var(--font-serif)', fontSize: 'var(--text-xs)', fontStyle: 'italic', color: 'var(--fg-tertiary)', marginTop: 'var(--space-3)', lineHeight: 1.5 }
    }, 'Figure 10. General approach to establishing monitoring. Adapted from Estall & Purdy, ', React.createElement('em', null, 'Deciding'), ' (2020), p.\u00A086.'),
  );
};

Object.assign(window, { ContextBandsDiagram, SignificanceMatrixDiagram, MonitoringFlowDiagram });