/* ─── Method Page — SEO/GEO cornerstone ─── */

const MethodPage = ({ onNavigate, tweaks }) => {
  const isMobile = useMediaQuery(680);

  const s = {
    hero: {
      paddingTop: isMobile ? 'var(--space-8)' : 'var(--space-10)',
      paddingBottom: isMobile ? 'var(--space-5)' : 'var(--space-6)',
    },
    h1: {
      fontFamily: 'var(--font-serif-display)',
      fontSize: isMobile ? '2rem' : 'clamp(2rem, 4.5vw, 2.75rem)',
      fontWeight: 500,
      lineHeight: 1.15,
      letterSpacing: 'var(--tracking-tight)',
      color: 'var(--fg-primary)',
      margin: '0 0 var(--space-5) 0',
    },
    subhead: {
      fontFamily: 'var(--font-serif)',
      fontSize: 'var(--text-lg)',
      lineHeight: 'var(--leading-normal)',
      color: 'var(--fg-secondary)',
      margin: '0 0 var(--space-4) 0',
      maxWidth: 'var(--measure)',
    },
    h2: {
      fontFamily: 'var(--font-serif)',
      fontSize: isMobile ? '1.35rem' : '1.5rem',
      fontWeight: 500,
      lineHeight: 1.25,
      color: 'var(--fg-primary)',
      margin: 'var(--space-9) 0 var(--space-4) 0',
    },
    h3: {
      fontFamily: 'var(--font-serif)',
      fontSize: '1.25rem',
      fontWeight: 400,
      lineHeight: 1.35,
      color: 'var(--fg-primary)',
      margin: 'var(--space-6) 0 var(--space-3) 0',
    },
    body: {
      fontFamily: 'var(--font-serif)',
      fontSize: 'var(--text-base)',
      lineHeight: 'var(--leading-relaxed)',
      color: 'var(--fg-primary)',
      margin: '0 0 var(--space-5) 0',
      maxWidth: 'var(--measure)',
      textWrap: 'pretty',
    },
    end: {
      paddingBottom: 'var(--space-10)',
    },
    stepNum: {
      fontFamily: 'var(--font-sans)',
      fontSize: 'var(--label-size)',
      fontWeight: 'var(--label-weight)',
      letterSpacing: 'var(--label-tracking)',
      textTransform: 'uppercase',
      color: 'var(--accent)',
      display: 'block',
      marginBottom: 'var(--space-2)',
    },
    ctaBlock: {
      marginTop: 'var(--space-8)',
      padding: isMobile ? 'var(--space-5)' : 'var(--space-7)',
      background: 'var(--bg-secondary)',
      borderRadius: 'var(--radius-md)',
      border: '1px solid var(--border-light)',
      textAlign: 'center',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: 'var(--space-4)',
    },
    list: {
      fontFamily: 'var(--font-serif)',
      fontSize: 'var(--text-base)',
      lineHeight: 'var(--leading-relaxed)',
      color: 'var(--fg-primary)',
      margin: '0 0 var(--space-5) 0',
      paddingLeft: 'var(--space-5)',
      maxWidth: 'var(--measure)',
    },
    li: {
      marginBottom: 'var(--space-2)',
    },
  };

  const steps = [
    {
      num: ‘Step 1’,
      title: ‘Frame the decision’,
      lead: ‘Before you consider options, be clear about three things: your Purpose, the opportunity, and the intended outcome.’,
      content: [
        { type: ‘h3’, title: ‘Purpose’, paras: [
          ‘The Purpose of an organisation (or yourself) is more fundamental than objectives, strategies and plans. It is the highest expression of the reason an organisation exists. Whether articulated or not, the Purpose reflects both the values to which the organisation aspires and what it seeks to achieve.’,
          ‘Purpose acts as a filter through which opportunities must pass before you start thinking about how to leverage them. If we are unclear as to Purpose, there is no basis to believe that the outcomes of decisions will support (or even not distract from) that Purpose. So many projects go wrong at this fundamental stage, often because the people making the decisions lose sight of, or cannot agree on, their organisation’s Purpose.’,
          ‘It is therefore vital that you can describe and write down your Purpose — and that others in your organisation also subscribe to that description.’,
        ]},
        { type: ‘h3’, title: ‘Opportunity’, paras: [
          ‘You also need to be clear about the opportunity your impending decision is seeking to exploit. A clear rather than vague understanding of the opportunity will inevitably help making the decision. By explicitly considering opportunity and Purpose, you become clear as to why the decision is being made.’,
        ]},
        { type: ‘h3’, title: ‘Intended outcome’, paras: [
          ‘Armed with these two understandings (Purpose and opportunity), you can then be specific about the desired outcome — what is to result from the decision that will best exploit the opportunity. The question is always: will the opportunity lead to outcomes that support and align with my Purpose?’,
        ]},
      ],
    },
    {
      num: ‘Step 2’,
      title: ‘Develop options or tentative decisions’,
      lead: 'Once you are clear on the Purpose and the opportunity you have identified, you can start to think about ways of achieving the outcome you intend.',
      content: [
        { type: 'p', text: 'This is done by developing some tentative decisions that are consistent with the organisation’s way of doing things.' },
        { type: 'p', text: 'As a general rule, these considerations will benefit from input from and conversation with others who either have relevant knowledge or an interest in the decision. Such conversations should include, at appropriate points, reaffirmation of Purpose, the opportunity and the intended outcome.' },
        { type: 'p', text: 'It’s highly desirable that you don’t just focus on one decision or option, but produce a short-list of potentially viable ways to achieve the intended outcome.' },
      ],
    },
    {
      num: 'Step 3',
      title: 'Understand the context and recognise associated assumptions and their significance',
      lead: 'By considering the settings or context for the short-list of tentative decisions, you can then recognise and consider the related assumptions.',
      content: [
        { type: 'p', text: 'The context is the set of background characteristics that a particular decision relies on or assumes. One useful way to help you recognise these is to consider, in turn, three concentric bands around the decision itself.' },
        { type: 'diagram', name: 'contextBands' },
        { type: 'h3', title: 'The Internal band', paras: [
          'Features of the organisation that affect implementation or that implementation depends on. Policies. Staffing. Culture. Working capital. The capabilities and constraints inside the organisation.',
          'For example, if your decision is concerned with expanding production to take advantage of a new market, the Internal band includes the logistics team’s bandwidth, the cash position, the IT systems that will need to be extended, and the organisation’s appetite for managing a potentially larger or multi-site operation.',
        ]},
        { type: 'h3', title: 'The External band', paras: [
          'The identity, role, and expected actions of stakeholders and external dependencies outside the organisation. Suppliers. Customers. Neighbours. Regulators. Power supply. Telecommunications. Physical access. The web of named parties whose behaviour the decision needs to succeed leading to the desired outcome.',
          'For the second warehouse, the External band includes the landlord, the local council, the transport contractors, the hire base for forklift drivers, the broadband provider, and the customers whose orders are being routed through the new site.',
        ]},
        { type: 'h3', title: 'The Wider band', paras: [
          'The more general features that make the decision possible, constrain it, or affect its success: the regulatory environment, economic climate, social norms, scientific knowledge, events, technology. It’s recommended you think about this band over successive time horizons: five years, ten years, beyond.',
          'For the expansion decision, the Wider band could include the trajectory of e-commerce penetration, fuel prices, immigration policy as it affects warehouse labour, automation technology, and the future shape of last-mile delivery. None of these are controllable. All of them shape whether the decision still makes sense in three years.',
        ]},
        { type: 'closing', text: 'The bands are conceptual, not bureaucratic. The point is to force the Decider to look outward in widening rings until every characteristic the decision depends on has been named. Anything not named will not be monitored, and anything not monitored cannot warn you when it changes.' },
        { type: 'p', text: 'In each case, identify every assumption you are relying on. Write them down.' },
        { type: 'p', text: 'Most failed decisions fail not because the wrong option was chosen, but because an assumption the decision-maker relied on turned out to be wrong and nobody had named it beforehand.' },
        { type: 'p', text: 'Once the assumptions are listed, they need to be ranked. Not by gut feel and not by anxiety, but by their significance to the decision. Figure 6 in the book gives the structure: a 2×2 chart with two axes that you can hold in your head.' },
        { type: 'p', text: 'The horizontal axis is Confidence in the assumption. The vertical axis is Influence on the desired outcome. Crossing the two produces four named zones.' },
        { type: 'diagram', name: 'significanceMatrix' },
        { type: 'h3', title: 'The four zones', paras: [
          'Critical — high influence, low confidence. The assumptions whose failure would derail the outcome, and which you are least sure about. Assumptions in this zone must be addressed as part of decision making.',
          'Important — high influence, high confidence. Assumptions the outcome rests on, but which you have good reason to trust. These warrant monitoring throughout the life of the decision, because confidence today does not guarantee confidence in the future. What you might regard as a ‘fact’ now, will be an assumption in the future.',
          'Relevant — low influence, low confidence. You are not sure about them, but they don’t drive the outcome much. Worth noting, not worth chasing.',
          'Limited — low influence, high confidence. Quietly true and quietly irrelevant. Record them so they are visible if anything changes, then leave them alone.',
        ]},
        { type: 'h3', title: 'What you do with the matrix', paras: [
          'Assumptions in both the Critical and Important zone should get attention. The book gives the Decider three levers for any assumption sitting there: obtain more information to improve certainty, modify the decision by adding secondary elements, or make a different decision with fewer or less critical assumptions.',
          'One warning the book repeats: reducing the significance of one assumption can create a new Critical assumption somewhere else. The Decider should re-walk the matrix after every adjustment, not just the line that changed.',
          'A second warning: assumptions interact. Two Important assumptions that depend on the same underlying condition behave like one Critical assumption. After the first pass, ask — do any of these assumptions affect or depend on other assumptions, and if so, how?',
        ]},
        { type: 'closing', text: 'The matrix is not the decision. It is the surface on which the Decider can see what they are relying on, where the weight is sitting, and where the next hour of work belongs.' },
      ],
    },
    {
      num: 'Step 4',
      title: 'Finalise the decision to be sufficiently certain about your desired outcomes',
      lead: 'There can seldom – if ever – be absolute certainty that your decision will result in your desired outcome.',
      content: [
        { type: 'p', text: 'Based on your understanding of the significance of the assumptions in your short list of tentative decisions you can appreciate how each could be adjusted to deliver sufficient certainty that the desired outcome will be achieved.' },
        { type: 'p', text: 'Sufficient certainty does not necessarily mean the greatest amount of certainty possible because that could be wasteful of resources – particularly if the benefits of the desired outcome were only modest relative to the cost or effort of achieving added certainty.' },
        { type: 'p', text: 'Greater certainty has a price: time, money, attention, and sometimes the option itself. Pushed past the point of diminishing return, the pursuit of certainty stops serving Purpose and starts undermining it.' },
        { type: 'p', text: 'Tentative decisions can be adjusted by:' },
        { type: 'list', items: [
          'obtaining more information to improve certainty by reducing uncertainty;',
          'modifying the decision by adding secondary elements that will have the effect of increasing certainty that what is intended is what will occur; or',
          'making a different decision with primary elements that have fewer or less critical assumptions.',
        ]},
        { type: 'p', text: 'The tentative decision that is eventually chosen will be that for which a combination of primary and secondary elements persuades the Decider that the desired outcome is sufficiently certain.' },
        { type: 'h3', title: 'The blood-imports example', paras: [
          'The book’s cautionary case comes from public health. Several countries, alarmed by contamination concerns, suspended imports of blood from suspect sources. The intent was to reduce the chance of contaminated blood reaching patients. The result was a shortage of blood and an increase in mortality. Chasing greater certainty on one input produced a worse outcome against the broader Purpose: keeping people alive.',
          'This is the failure mode the method is built to prevent. Sufficient certainty is not the timid version of certainty. It is the version that holds Purpose in view while the Decider works.',
        ]},
      ],
    },
    {
      num: 'Step 5',
      title: 'Implementation and Monitoring',
      lead: 'Before you finalise the decision, decide what you will monitor and how variances will be detected and responded to.',
      content: [
        { type: 'p', text: 'The adoption of monitoring (as part of the decision) is one way that decisions can be adjusted to ensure we have sufficient certainty we will obtain and continue to obtain the outcomes we desire. Of course, monitoring involves tracking the implementation of our decision. But also, it should include how variances in the Important assumptions on which our decision rests will be detected. In many cases this will involve observations of each of the characteristics and settings of context and even of the original opportunity – whether it exists and is unaltered.' },
        { type: 'p', text: 'Monitoring is not an audit function and it is not something that is implemented as part of the decision. It is designed when the decision is made, not added to afterwards.' },
        { type: 'diagram', name: 'monitoringFlow' },
        { type: 'h3', title: 'Monitoring before primary implementation', paras: [
          'Some monitoring has to be in place before the primary element begins, not alongside it. The book gives two patterns.',
          'Traffic control before roadworks. You do not start cutting up the road and then send someone to manage the diversion. The diversion goes in first. The monitoring of traffic, pedestrians, and access for emergency vehicles is established as a precondition of the primary work, not a consequence of it.',
          'Instrument count before surgery. The count happens before the first incision, not after the last suture. If you wait until the procedure is complete to check, the question you can answer is no longer the question you needed to.',
        ]},
        { type: 'h3', title: 'What good monitoring requires', paras: [
          'For each Critical and Important assumption, the decision record should name five things: what is watched, how often, who watches it, what triggers a response, and what that response is. Without those five, monitoring is a label, not a method. With them, the decision is something that can be managed across its duration rather than something that was made and then forgotten.',
        ]},
      ],
    },
  ];

  const renderItem = (item, j) => {
    if (item.type === 'p') return React.createElement('p', { key: j, style: s.body }, item.text);
    if (item.type === 'diagram') {
      if (item.name === 'contextBands') return React.createElement(ContextBandsDiagram, { key: j });
      if (item.name === 'significanceMatrix') return React.createElement(SignificanceMatrixDiagram, { key: j });
      if (item.name === 'monitoringFlow') return React.createElement(MonitoringFlowDiagram, { key: j });
      return null;
    }
    if (item.type === 'h3') return React.createElement('div', { key: j },
      React.createElement('h3', { style: s.h3 }, item.title),
      ...item.paras.map((p, l) => React.createElement('p', { key: l, style: s.body }, p))
    );
    if (item.type === 'closing') return React.createElement('p', { key: j, style: { ...s.body, fontStyle: 'italic', color: 'var(--fg-secondary)' } }, item.text);
    if (item.type === 'list') return React.createElement('ul', { key: j, style: s.list },
      ...item.items.map((li, l) => React.createElement('li', { key: l, style: s.li }, li))
    );
    return null;
  };

  return React.createElement('div', { style: { background: 'var(--bg-primary)' } },
    React.createElement(Section, { style: s.hero },
      React.createElement('p', { style: {
        fontFamily: 'var(--font-serif)',
        fontSize: 'var(--text-sm)',
        fontStyle: 'italic',
        color: 'var(--fg-tertiary)',
        margin: '0 0 var(--space-5) 0',
      } }, 'For Roger Estall, who taught us never to compromise on logic.'),
      React.createElement('h1', { style: s.h1 }, 'The Universal Decision-Making Method'),
      React.createElement('p', { style: s.subhead },
        'A decision-making framework for leaders who need decision quality, not risk theatre.'),
    ),

    React.createElement(Divider),

    /* ─── Full contrarian wedge ─── */
    React.createElement(Section, { style: {
      paddingTop: isMobile ? 'var(--space-5)' : 'var(--space-7)',
      paddingBottom: isMobile ? 'var(--space-7)' : 'var(--space-9)',
    } },
      React.createElement('p', { style: s.body },
        'For forty years, organisations have been told that “risk management” is the answer. Risk committees. Risk registers. Risk appetite statements. Risk maturity assessments. Certifications and consultants and the third revision of ISO 31000. After all that, the decisions that produced Enron, the 737 MAX and the Australian banking Royal Commission were made by people who’d signed the policies and ignored the registers. Risk management is a belief system that starts with the answer and tries to fit your problem to it. It is not what good Deciders actually do.'),
      React.createElement('p', { style: s.body },
        ‘What good Deciders do, quietly and often without realising they’re doing it, is the same five-step method whether they’re in a cockpit, a board room, or crossing the road.’),
      React.createElement(‘ul’, { style: s.list },
        React.createElement(‘li’, { style: s.li }, ‘Frame the decision: be clear on Purpose, the opportunity, and the intended outcome.’),
        React.createElement(‘li’, { style: s.li }, ‘Develop realistic options (tentative decisions).’),
        React.createElement(‘li’, { style: s.li }, ‘Consider the Internal, External and Wider context and recognise and appreciate the significance of the associated assumptions for each option (tentative decision).’),
        React.createElement(‘li’, { style: s.li }, ‘Finalise the decision by selecting and adjusting a tentative decision, adopting secondary elements to ensure your intended outcomes are sufficiently certain.’),
        React.createElement(‘li’, { style: s.li }, ‘Integrate ongoing monitoring to detect and respond to variances into the final decision before it leaves your desk.’),
      ),
      React.createElement(‘p’, { style: s.body },
        ‘This tool walks you through those five steps for one specific decision you’re making right now. The Decider is you. The method is the scaffolding. Your assumptions, ranked and recorded, are the actual work.’),
    ),

    React.createElement(Divider),

    React.createElement(Section, { style: s.end },
      /* ─── Why a method? ─── */
      React.createElement('h2', { style: s.h2 }, 'Why a method?'),
      React.createElement('p', { style: s.body },
        'Most people believe they already know how to make decisions. They are right. What they lack is a method for decision quality — for examining the decision before they make it. A method that forces them to state what they are actually deciding, surface what they are assuming, and record what they will watch after the decision is made.'),
      React.createElement('p', { style: s.body },
        'What also makes deciding particularly challenging (and for many Deciders, if they cared to admit, a bit scary) is that what is assumed can turn out to be invalid. Even scarier, perhaps, is the realisation that assumptions that were valid at the time of the decision can become invalid due to subsequent changes.'),
      React.createElement('p', { style: s.body },
        'The Universal Decision-Making Method, as its name suggests, is the method we all already follow, at least intuitively, and to some degree. It applies to any decision, at any scale, in any domain. A pilot deciding whether to divert. A board deciding whether to acquire. A family deciding whether to move. The steps are the same.'),

      /* ─── Five Steps ─── */
      ...steps.map((step, i) =>
        React.createElement(React.Fragment, { key: i },
          i === 0 && React.createElement('div', { style: { height: '1px', background: 'var(--border-light)', margin: 'var(--space-8) 0 0' } }),
          i > 0 && React.createElement('div', { style: { height: '1px', background: 'var(--border-light)', margin: 'var(--space-9) 0 0' } }),
          React.createElement('div', { style: { paddingTop: 'var(--space-7)' } },
            React.createElement('span', { style: s.stepNum }, step.num),
            React.createElement('h2', { style: { ...s.h2, marginTop: 0 } }, step.title),
            React.createElement('p', { style: {
              fontFamily: 'var(--font-serif)',
              fontSize: isMobile ? 'var(--text-base)' : 'var(--text-lg)',
              lineHeight: 'var(--leading-normal)',
              color: 'var(--fg-primary)',
              margin: '0 0 var(--space-5) 0',
              maxWidth: 'var(--measure)',
            } }, step.lead),
            ...step.content.map(renderItem),
          ),
        )
      ),

      /* ─── How to use ─── */
      React.createElement('h2', { style: s.h2 }, 'How to use this method'),
      React.createElement('p', { style: s.body },
        'The Walk is a decision coaching tool that guides you through these five steps for one specific decision you are facing now. You record your reasoning as you go. At the end, you have a Decision Record: a one-page record of what you decided, why, and what you are watching. That document is yours. It is the output and provides the basis for you to demonstrate a reliable process has been followed.'),
      React.createElement('p', { style: s.body },
        'The document can be stored in your information systems for future reference and also to demonstrate good governance.'),

      /* ─── CTA ─── */
      React.createElement('div', { style: s.ctaBlock },
        React.createElement('p', { style: {
          fontFamily: 'var(--font-serif)',
          fontSize: 'var(--text-lg)',
          color: 'var(--fg-primary)',
          margin: 0,
          fontWeight: 500,
        } }, 'Ready to walk a decision?'),
        React.createElement(Button, {
          variant: 'primary',
          size: 'lg',
          onClick: () => window.location.href = 'https://walk.sufficientcertainty.com',
        }, 'Start a Walk'),
      ),
    ),
  );
};

window.MethodPage = MethodPage;
