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

const FRAMEWORKS = [
  {
    id: 'framework-transformation-readiness',
    title: 'Transformation Readiness',
    tagline: 'Test whether the conditions for a credible next commitment are in place.',
    body: 'A public framing for examining whether direction, intended outcomes, ownership, dependencies, governance and organisational readiness are clear enough for transformation to proceed with confidence.',
    questions: [
      'What decision or outcome is the work intended to enable?',
      'Which assumptions and dependencies remain unresolved?',
      'What evidence would demonstrate readiness for the next commitment?',
    ],
  },
  {
    id: 'framework-governance-visibility',
    title: 'Governance Visibility',
    tagline: 'Make ownership, authority, controls and escalation visible.',
    body: 'A way to surface how decisions are actually made, where accountability sits, which controls matter and where governance expectations are disconnected from operational practice.',
    questions: [
      'Who owns the decision, the outcome and the ongoing operation?',
      'Where are decision rights or escalation paths ambiguous?',
      'Are controls visible early enough to shape analysis and design?',
    ],
  },
  {
    id: 'framework-requirements-traceability',
    title: 'Requirements & Traceability',
    tagline: 'Connect business intent to decisions, commitments and delivered outcomes.',
    body: 'A structured view of the links between intended outcomes, requirements, procurement commitments, solution decisions, implementation evidence and acceptance.',
    questions: [
      'Can each material requirement be traced to a business purpose?',
      'Are obligations, assumptions and acceptance expectations explicit?',
      'Can delivery evidence be connected back to the intended outcome?',
    ],
  },
  {
    id: 'framework-ai-governance-adoption-readiness',
    title: 'AI Governance / Adoption Readiness',
    tagline: 'Move from AI experimentation to governed operational capability.',
    body: 'A public framework for considering purpose, ownership, decision rights, human oversight, risk controls, vendor obligations, process integration and measurable value before AI capability is scaled.',
    questions: [
      'What purpose and measurable value should the capability serve?',
      'Who owns approval, oversight, operation and accountability?',
      'Which controls and operating changes are needed before adoption?',
    ],
  },
  {
    id: 'framework-stakeholder-alignment',
    title: 'Stakeholder Alignment',
    tagline: 'Surface perspectives, influence and missing voices before they become delivery risk.',
    body: 'A way to distinguish formal authority from practical influence, understand competing interests and identify the stakeholders, users or obligations not yet represented in the work.',
    questions: [
      'Whose decision, support or operational ownership is essential?',
      'Where do interests or interpretations materially diverge?',
      'Which affected voices or obligations are currently absent?',
    ],
  },
  {
    id: 'framework-transformation-assurance',
    title: 'Transformation Assurance',
    tagline: 'Maintain visibility of alignment, readiness, risk and realised value.',
    body: 'A structured basis for an independent view of whether transformation direction, governance, commitments, delivery evidence, operational readiness and intended outcomes remain connected.',
    questions: [
      'Is delivery still aligned to the intended outcome and agreed commitments?',
      'Which unresolved risks or dependencies affect readiness?',
      'What evidence shows that adoption and value are being realised?',
    ],
  },
];

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

  const closeFramework = (event) => {
    if (event.key !== 'Escape' || open < 0) return;
    event.preventDefault();
    const trigger = document.getElementById(`framework-trigger-${open}`);
    setOpen(-1);
    requestAnimationFrame(() => trigger?.focus({ preventScroll: true }));
  };

  return (
    <section id="frameworks" className="section frameworks-insights route-section-target" aria-labelledby="frameworks-title">
      <div className="container">
        <div className="frameworks-section-head">
          <h2
            id="frameworks-title"
            className="display-2"
            tabIndex="-1"
            data-route-heading
          >
            Frameworks for <em>structured judgement.</em>
          </h2>
          <p>
            Frameworks organise difficult questions without pretending that every situation is identical. The public layer provides a useful conceptual view; deeper material is shared selectively and applied to the context of a real engagement.
          </p>
        </div>

        <div className="framework-access-layers" aria-label="How framework material is shared">
          <div className="framework-access-layer">
            <h3>Public view</h3>
            <p>Conceptual summaries and practical questions that help clarify the issue.</p>
          </div>
          <div className="framework-access-layer">
            <h3>Deeper material</h3>
            <p>Supporting framework material may be available on request where appropriate.</p>
          </div>
          <div className="framework-access-layer">
            <h3>Applied in engagement</h3>
            <p>Tailored application within advisory, assessment and transformation work.</p>
          </div>
        </div>

        <div className="frameworks-list" onKeyDown={closeFramework}>
          {FRAMEWORKS.map((framework, index) => (
            <article
              id={framework.id}
              className="framework-card route-section-target"
              key={framework.title}
              data-open={open === index}
              onMouseEnter={() => setOpen(index)}
              onMouseLeave={() => setOpen(-1)}
              onFocus={() => setOpen(index)}
              onBlur={(event) => {
                if (!event.currentTarget.contains(event.relatedTarget)) setOpen(-1);
              }}
            >
              <button
                id={`framework-trigger-${index}`}
                type="button"
                className="fw-summary"
                data-route-heading
                aria-expanded={open === index}
                aria-controls={`framework-panel-${index}`}
                onClick={(event) => {
                  const toggleRequested = event.detail === 0 || window.matchMedia('(hover: none)').matches;
                  setOpen((current) => toggleRequested && current === index ? -1 : index);
                }}
              >
                <span className="fw-summary-copy">
                  <span className="fw-kicker">Framework</span>
                  <span className="fw-title">{framework.title}</span>
                  <span className="fw-tagline">{framework.tagline}</span>
                </span>
                <span className="fw-toggle" aria-hidden="true"></span>
              </button>
              <div
                id={`framework-panel-${index}`}
                className="fw-body"
                role="region"
                aria-labelledby={`framework-trigger-${index}`}
                aria-hidden={open !== index}
              >
                <div className="fw-body-clip">
                  <div className="fw-body-content">
                    <p className="fw-body-prose">{framework.body}</p>
                    <div className="fw-questions">
                      <h3 className="fw-question-title">Questions this framework helps surface</h3>
                      <ul>
                        {framework.questions.map((question) => <li key={question}>{question}</li>)}
                      </ul>
                    </div>
                    <div className="fw-cta-row">
                      <p>Deeper material may be available on request where appropriate.</p>
                      <button
                        className="btn btn-ghost btn-gold"
                        tabIndex={open === index ? 0 : -1}
                        onClick={() => go('contact')}
                      >
                        Start a Conversation <span className="arrow">→</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FrameworksPage({ go }) {
  return (
    <div className="page-enter" data-screen-label="Frameworks">
      <FrameworkExplorer go={go} />
      <CTABlock go={go} />
    </div>
  );
}

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