/* global React, Reveal, SectionHead, CTABlock */
const { useState: useStateFw } = React;

const FRAMEWORKS = [
  {
    n: '01',
    title: 'Complexity-to-Clarity <em>Thinking Model</em>',
    tagline: 'A structured approach to moving from overwhelm to usable insight.',
    body: [
      'The core operating model behind our practice. A five-stage scaffold for taking a situation that feels overwhelming, undifferentiated, or contested — and arriving at a usable, defensible read of the work.',
      'It is not a recipe. It is a discipline. You can move through it in a session, or over a quarter; the value is in the order of the stages and the rigour applied at each one.',
    ],
    steps: [
      ['Notice', 'Catch what\'s actually being said, done, avoided — before sense-making begins.'],
      ['Name', 'Find language that holds the situation without reducing it.'],
      ['Map', 'Surface the structural and human connections that shape it.'],
      ['Locate', 'Decide where leverage actually lives — and where it doesn\'t.'],
      ['Move', 'Choose the smallest next step that creates real signal.'],
    ],
  },
  {
    n: '02',
    title: 'Requirements <em>Quality Checklist</em>',
    tagline: '30 questions every requirement should be able to answer.',
    body: [
      'A practical tool for assessing whether requirements are fit for purpose — before they become the reason a project fails.',
      'Used as a peer-review instrument, a pre-handover gate, or a teaching artefact for analysts moving from junior to mid-level work. Each question is calibrated for serious enterprise use; none of them are box-ticking.',
    ],
    steps: [
      ['Provenance', 'Who asked for this, and why — really?'],
      ['Boundary', 'What is in scope, and what is conspicuously not?'],
      ['Assumption', 'What must be true for this to make sense?'],
      ['Verification', 'How will we know it has been met?'],
      ['Cost of error', 'What happens if it is wrong, missing, or vague?'],
    ],
  },
  {
    n: '03',
    title: 'Stakeholder <em>Landscape Map</em>',
    tagline: 'Mapping visible and invisible stakeholders across a programme.',
    body: [
      'A model for mapping, understanding, and working with stakeholder complexity — including the stakeholders who don\'t appear in any org chart.',
      'The map distinguishes five layers: named, structural, political, psychological, and absent. Each layer has different needs, different signals, and different failure modes.',
    ],
    steps: [
      ['Named', 'The people on the RACI. Necessary, but not sufficient.'],
      ['Structural', 'Roles, governance bodies, and the rooms decisions actually happen in.'],
      ['Political', 'Who has influence without authority — and authority without influence.'],
      ['Psychological', 'Whose fear, hope, or fatigue is shaping the work.'],
      ['Absent', 'Whose interests aren\'t represented — and what that means.'],
    ],
  },
  {
    n: '04',
    title: 'Current-State / Future-State <em>Analysis</em>',
    tagline: 'A structured method for understanding the real gap.',
    body: [
      'A framework for understanding where an organisation is, where it wants to be, and the gap between — with honest attention to what the gap is actually made of.',
      'The discipline lies in refusing to collapse the gap into a list of capabilities. Capability gaps are downstream. The real gap is usually structural, relational, or epistemic.',
    ],
    steps: [
      ['Read present', 'Describe the current state without flinching or flattering.'],
      ['Articulate future', 'Make the desired state specific enough to be testable.'],
      ['Locate gap', 'Decompose by structural / capability / relational / belief.'],
      ['Sequence', 'Order the work by what unlocks what.'],
      ['Pressure-test', 'Find where the plan is wishful, and rework those parts first.'],
    ],
  },
  {
    n: '05',
    title: 'Transformation <em>Discovery Canvas</em>',
    tagline: 'A structured tool for the front-end of a transformation.',
    body: [
      'Surfacing the real problem before designing solutions. The canvas is a single A1 page that holds the seven questions a discovery has to answer before any solutioning is safe.',
      'It works as a workshop instrument, a one-to-one tool, and a deliverable. It also serves as a tactful way to surface that the problem you were hired to solve is not, in fact, the problem.',
    ],
    steps: [
      ['Trigger', 'What changed, that made this a problem now?'],
      ['Stated problem', 'What is the organisation saying the problem is?'],
      ['Suspected problem', 'What evidence suggests something else is going on?'],
      ['Constraints', 'What is genuinely fixed, and what is treated as fixed?'],
      ['Definition of progress', 'How will we know we are moving in the right direction?'],
    ],
  },
];

function FrameworkExplorer({ go }) {
  const [open, setOpen] = useStateFw(-1);

  return (
    <section className="section frameworks-insights" aria-label="Frameworks and working tools">
        <div className="container">
          <SectionHead
            label="Frameworks · Working tools"
            title="Tools for the <em>working</em> analyst."
            action={<span className="label">Tap to expand ↓</span>}
          />

          <p className="frameworks-intro lede">
            These are working tools, not theoretical constructs. Each framework has been stress-tested in real situations, and each exists because a checklist or a slide deck wasn't adequate to the problem in front of us.
          </p>

          <div className="frameworks-list">
            {FRAMEWORKS.map((f, i) => (
              <div className="framework-card" key={f.n} data-open={open === i}>
                <button
                  id={`framework-trigger-${i}`}
                  className="fw-summary"
                  aria-expanded={open === i}
                  aria-controls={`framework-panel-${i}`}
                  onClick={() => setOpen(open === i ? -1 : i)}
                >
                  <span className="fw-num">{f.n}</span>
                  <span className="fw-title" dangerouslySetInnerHTML={{ __html: f.title }} />
                  <span className="fw-tagline">{f.tagline}</span>
                  <span className="fw-toggle" aria-hidden="true"></span>
                </button>
                <div
                  id={`framework-panel-${i}`}
                  className="fw-body"
                  role="region"
                  aria-labelledby={`framework-trigger-${i}`}
                  hidden={open !== i}
                >
                  <div className="fw-body-inner">
                    <div className="fw-body-content">
                      <span className="label section-eyebrow">What it is</span>
                      <div className="fw-body-prose">
                        {f.body.map((p, j) => <p key={j}>{p}</p>)}
                      </div>
                      <div className="fw-steps">
                        {f.steps.map(([title, desc], j) => (
                          <div className="fw-step" key={j}>
                            <span className="fw-step-num">0{j+1}</span>
                            <span className="fw-step-text"><em>{title}.</em> {desc}</span>
                          </div>
                        ))}
                      </div>
                      <div className="fw-cta-row">
                        <span className="label">Available as a working document on request.</span>
                        <button className="btn btn-ghost" onClick={() => go('contact')}>
                          Request this framework <span className="arrow">→</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
  );
}

function FrameworksPage({ go }) {
  return (
    <div className="page-enter" data-screen-label="Frameworks">
      {/* Retained source view; the public route consolidates this material under Insights. */}
      <FrameworkExplorer go={go} />

      <CTABlock go={go} />
    </div>
  );
}

window.FrameworkExplorer = FrameworkExplorer;
window.FrameworksPage = FrameworksPage;