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

const CASES = [
  {
    sector: 'Government · Federal Agency',
    title: 'Reframing an ITSM migration around processes and <em>capabilities</em>',
    summary: 'A complex service-management environment had accumulated a large catalogue of forms and request types across several teams. The work separated the catalogue from the business processes behind it and created a defensible scope for a future enterprise service-management platform.',
    situation: 'Leadership needed to scope a platform uplift, but forms, queues and request types obscured the underlying operating model and duplicated demand.',
    approach: 'We normalised the source data, mapped demand to ITIL-aligned processes, created a process and capability taxonomy, identified consolidation opportunities and connected priority processes to the future platform scope.',
    tools: 'Service-management data analysis · ITIL 4 · Process taxonomy · Service-catalogue rationalisation · Platform scoping',
    results: 'The programme discussion shifted from forms and queues to processes and capabilities, establishing priority migration areas and exposing governance gaps before implementation.',
    capabilities: 'ITSM analysis · Platform scoping · Process architecture · Data-led decision support',
    outcomes: 'Process-led migration scope established',
  },
  {
    sector: 'Government · Federal Agency',
    title: 'Creating an authoritative baseline for a complex workforce <em>offboarding service</em>',
    summary: 'A workforce offboarding service crossed several worker types, operational teams, external dependencies, service-desk activities and manual communications. Existing artefacts did not provide a consistent or traceable end-to-end view.',
    situation: 'The available maps and documents were too high-level for handover or future-state design. Process steps, controls, exceptions, automation behaviour and team responsibilities were not aligned across the evidence base.',
    approach: 'We reconstructed the current state around lifecycle stages and fulfilment scenarios, documented actors and rules, aligned the detailed steps to the process map and linked pain points to future-state requirements.',
    tools: 'Process modelling · Scenario analysis · Automation review · Stakeholder walkthroughs · Pain-point register · Requirements traceability',
    results: 'The engagement produced a consistent current-state package and a governance-ready baseline for service handover, future-state design and service-management uplift.',
    capabilities: 'Process discovery · Complex workflow modelling · Service transition · Governance',
    outcomes: 'Governance-ready current-state baseline',
  },
  {
    sector: 'Financial Services · Life Insurance',
    title: 'Redesigning a CPS 230 compliance process for <em>operational use</em>',
    summary: 'A regulated life-insurance environment needed a clearer process connecting CPS 230 obligations with operational steps, control ownership, evidence and escalation.',
    situation: 'Compliance requirements had to become a process that teams could operate consistently while preserving auditability and resolving unclear hand-offs, duplicated activity and gaps in accountability.',
    approach: 'We mapped the current process and CPS 230 obligation points, clarified roles and evidence, identified control gaps and designed a future-state workflow linking operational activity to governance and escalation.',
    tools: 'Process mapping · CPS 230 obligation-to-control traceability · RACI · Gap analysis · Stakeholder workshops · Control and evidence design',
    results: 'The work produced an auditable process design with clearer ownership, visible control points and defined implementation actions.',
    capabilities: 'Regulatory process redesign · Governance · Control traceability · Stakeholder alignment',
    outcomes: 'Control ownership and traceability clarified',
  },
  {
    sector: 'Financial Services · Life Insurance',
    title: 'Turning fragmented operational processes into a coherent transformation <em>roadmap</em>',
    summary: 'A life-insurance transformation needed a consistent view of current operations, pain points, dependencies and change priorities across business and technology teams.',
    situation: 'Processes and responsibilities had developed unevenly, making it difficult to separate local workarounds from structural problems or sequence improvements around operational constraints.',
    approach: 'We combined process discovery with current-state analysis, mapped dependencies and decision points, shaped future-state process changes and translated the findings into prioritised transformation actions.',
    tools: 'Stakeholder interviews · Process mapping · Current-state and future-state analysis · Dependency mapping · Prioritisation · Implementation planning',
    results: 'The engagement established a coherent transformation baseline and grounded process priorities in operational evidence.',
    capabilities: 'Process transformation · Systems thinking · Operating-model analysis · Change planning',
    outcomes: 'Transformation priorities grounded in operational evidence',
  },
  {
    sector: 'Fintech · Payments Platform',
    title: 'Connecting front-end journeys to back-end payment and <em>CDR integration</em>',
    summary: 'A payments and financial-platform initiative needed customer-facing journeys, back-end services, APIs, security controls and Consumer Data Right obligations to operate as one coherent solution.',
    situation: 'The solution crossed user experience, service orchestration, data exchange, security and delivery backlogs. A gap in any layer could create inconsistent behaviour or compliance risk across the end-to-end journey.',
    approach: 'We mapped user journeys to API behaviours and back-end services, clarified integration and security requirements, traced data obligations and converted the design into delivery-ready requirements and technical stories.',
    tools: 'User-journey mapping · API and interface analysis · Data-flow mapping · CDR requirements · Security controls · Service orchestration',
    results: 'The work aligned front-end and back-end requirements, clarified integration ownership and created a traceable delivery backlog.',
    capabilities: 'Business systems analysis · API integration · Payments · Digital trust · Requirements traceability',
    outcomes: 'End-to-end integration requirements aligned',
  },
  {
    sector: 'Education · State Government',
    title: 'Making cross-platform dependencies visible in an education technology <em>uplift</em>',
    summary: 'A state education environment needed technical platform changes to connect with existing processes, interfaces and data flows across a wider ecosystem.',
    situation: 'The change crossed multiple systems and operational processes. Unclear interfaces and dependencies created a risk that local platform decisions would not work end to end.',
    approach: 'We mapped interfaces and data flows, analysed affected processes, clarified integration requirements and produced technical specifications connecting business needs to the wider platform ecosystem.',
    tools: 'Interface mapping · Process redesign · Data-flow analysis · Technical specifications · Systems analysis · Stakeholder engagement',
    results: 'The engagement made integration dependencies visible and produced the specifications needed to progress the platform uplift.',
    capabilities: 'Technical integration · Process redesign · Data analysis · Business-to-technology translation',
    outcomes: 'Cross-platform dependencies made visible',
  },
  {
    sector: 'Government · Local Council',
    title: 'Grounding CRM procurement in process and market <em>evidence</em>',
    summary: 'A local council considering a CRM transformation needed to understand business processes, stakeholder needs, technology constraints and available market options before procurement.',
    situation: 'User requests alone did not provide a reliable basis for solution selection. Decision-makers also needed clarity on future operating requirements, governance and the capability required to sustain the service.',
    approach: 'We analysed current processes and needs, completed market scanning and gap analysis, shaped future-state recommendations and translated the findings into procurement requirements.',
    tools: 'Process analysis · Stakeholder interviews · CRM market scan · Gap analysis · Future-state recommendations · Vendor evaluation criteria',
    results: 'The analysis informed procurement specifications and gave decision-makers a more complete view of the operational and governance requirements behind the technology choice.',
    capabilities: 'CRM discovery · Procurement advisory · Process analysis · Future-state design · Decision support',
    outcomes: 'Procurement requirements grounded in evidence',
  },
];

function CaseRecord({ caseStudy: c, index }) {
  const [open, setOpen] = useStateCase(false);
  const triggerId = `case-details-trigger-${index}`;
  const panelId = `case-details-panel-${index}`;

  const closeDetails = (event) => {
    if (event.key !== 'Escape' || !open) return;
    event.preventDefault();
    setOpen(false);
    requestAnimationFrame(() => document.getElementById(triggerId)?.focus({ preventScroll: true }));
  };

  return (
    <article
      className="case-card"
      data-open={open}
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
      onFocus={() => setOpen(true)}
      onBlur={(event) => {
        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
      }}
      onKeyDown={closeDetails}
    >
      <div className="case-card-row">
        <span className="case-card-body">
          <span className="case-card-sector">{c.sector}</span>
          <h3 className="case-card-title" dangerouslySetInnerHTML={{ __html: c.title }} />
          <span className="case-card-description">{c.summary}</span>
        </span>
        <div className="case-card-meta">
          <dl className="case-card-outcome">
            <dt className="case-meta-label">Outcome</dt>
            <dd className="case-card-outcome-value">{c.outcomes}</dd>
          </dl>
          <button
            id={triggerId}
            type="button"
            className="case-details-toggle"
            aria-expanded={open}
            aria-controls={panelId}
            onClick={(event) => {
              const toggleRequested = event.detail === 0 || window.matchMedia('(hover: none)').matches;
              if (toggleRequested) setOpen((current) => !current);
            }}
          >
            <span>Engagement details</span>
            <span className="case-details-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
      <div
        id={panelId}
        className="case-card-details"
        role="region"
        aria-labelledby={triggerId}
        aria-hidden={!open}
      >
        <div className="case-card-details-clip">
          <dl className="case-card-details-list">
            <div className="case-meta-row">
              <dt className="case-meta-label">Situation</dt>
              <dd className="case-meta-val">{c.situation}</dd>
            </div>
            <div className="case-meta-row">
              <dt className="case-meta-label">Our approach</dt>
              <dd className="case-meta-val">{c.approach}</dd>
            </div>
            <div className="case-meta-row">
              <dt className="case-meta-label">Tools and methods</dt>
              <dd className="case-meta-val">{c.tools}</dd>
            </div>
            <div className="case-meta-row">
              <dt className="case-meta-label">Results and outcomes</dt>
              <dd className="case-meta-val">{c.results}</dd>
            </div>
            <div className="case-meta-row">
              <dt className="case-meta-label">Capabilities applied</dt>
              <dd className="case-meta-val">{c.capabilities}</dd>
            </div>
          </dl>
        </div>
      </div>
    </article>
  );
}

function CasesPage({ go }) {
  return (
    <div className="page-enter" data-screen-label="Case Studies">
      {/* HEADER */}
      <section className="page-header">
        <div className="container">
          <span className="label page-locator">Case studies · Selected work</span>
          <div className="page-header-grid page-header-grid--cases">
            <h1 className="display-1">
              Real work,<br />
              <em>generalised</em> with care.
            </h1>
            <div className="case-hero-notes" aria-label="About these case studies">
              <div className="case-hero-note">
                <span className="case-hero-note-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24">
                    <path d="M2.75 12s3.4-5.25 9.25-5.25S21.25 12 21.25 12 17.85 17.25 12 17.25 2.75 12 2.75 12Z" />
                    <circle cx="12" cy="12" r="2.5" />
                  </svg>
                </span>
                <p><strong>Real engagements</strong>The work reflects real engagements across real organisations.</p>
              </div>
              <div className="case-hero-note">
                <span className="case-hero-note-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24">
                    <path d="m12 3.25 7.5 4.25L12 11.75 4.5 7.5 12 3.25Z" />
                    <path d="m4.5 11.75 7.5 4.25 7.5-4.25M4.5 16l7.5 4.25L19.5 16" />
                  </svg>
                </span>
                <p><strong>Confidentiality protected</strong>Details are generalised or anonymised to protect the organisations involved.</p>
              </div>
              <div className="case-hero-note">
                <span className="case-hero-note-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24">
                    <path d="M4 17.5 9.25 12l3.25 3.25L20 7.5" />
                    <path d="M14.5 7.5H20V13" />
                  </svg>
                </span>
                <p><strong>Genuine evidence</strong>The patterns, approaches and outcomes remain genuine.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CASE LIST */}
      <Reveal as="section" id="selected-engagements" className="section case-engagements-lane route-section-target" aria-labelledby="selected-engagements-title">
        <div className="container">
          <div className="case-section-head">
            <h2 id="selected-engagements-title" className="display-3" tabIndex="-1" data-route-heading>Selected engagements across <em>different sectors.</em></h2>
            <p className="case-section-intro">
              These are <strong>not</strong> portfolio pieces designed to impress. They are honest summaries of work that taught us something, or that produced a result worth being specific about.
            </p>
          </div>

          <div className="case-list">
            {CASES.map((c, index) => (
              <CaseRecord caseStudy={c} index={index} key={c.title} />
            ))}
          </div>
        </div>
      </Reveal>

      {/* ENGAGEMENT JOURNEY */}
      <Reveal as="section" id="engagement-journey" className="section case-intro-lane route-section-target" aria-labelledby="engagement-journey-title">
        <div className="container">
          <div className="case-journey-layout">
            <div className="case-journey-copy">
              <h2 id="engagement-journey-title" className="display-3" tabIndex="-1" data-route-heading>From situation to <em>realised value.</em></h2>
              <p>
                Our case studies originate in real client engagements. We apply IDELIGO&rsquo;s distinctive advisory edge — focused expertise, disciplined analysis and independent judgement — to move from complex situations towards clearer decisions, aligned action and outcomes that can be evidenced. Learning continues throughout, strengthening both the work in progress and future engagements.
              </p>
            </div>
            <figure className="case-journey-figure">
              <div
                className="case-journey-frame"
                role="region"
                aria-label="Engagement journey diagram"
                tabIndex="0"
              >
                <img
                  className="case-journey-image"
                  src="/assets/diagrams/case-studies-engagement-journey.svg"
                  width="4116"
                  height="2384"
                  loading="lazy"
                  alt="Engagement journey diagram connecting a complex situation through explore context, analyse and frame, align and decide, and deliver and learn phases to clarity, direction, confidence and realised value outcomes."
                />
              </div>
            </figure>
          </div>
        </div>
      </Reveal>

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

window.CasesPage = CasesPage;