/* global React, Reveal, SectionHead, CTABlock */

const CASES = [
  {
    n: '01',
    sector: 'Financial Services · Tier-1 Bank',
    title: 'Untangling a legacy ITSM environment ahead of a platform <em>migration</em>',
    summary: 'A core service-management platform had accumulated fifteen years of customisation, with documentation and reality having drifted in different directions. We were brought in to produce a defensible current-state map and a sequenced migration approach the executive could trust.',
    role: 'Lead Business Analyst',
    duration: '6 months',
    outcomes: '~40% scope reduction',
  },
  {
    n: '02',
    sector: 'Government · Federal Agency',
    title: 'Requirements governance uplift across a multi-vendor <em>programme</em>',
    summary: 'A large public-sector programme was producing requirements at volume, but quality and consistency had degraded under delivery pressure. We designed and embedded a peer-review and assurance practice that lifted requirement quality without slowing delivery.',
    role: 'Requirements Lead · Practice Designer',
    duration: '9 months',
    outcomes: 'Quality gate adopted across 4 streams',
  },
  {
    n: '03',
    sector: 'Technology · SaaS Scale-up',
    title: 'Discovery for an enterprise transformation that turned out to be an <em>operating-model</em> problem',
    summary: 'The brief was a platform replacement. The actual problem was that the operating model had outgrown the leadership team\'s explicit decision-rights. We ran a structured discovery that surfaced the real problem in a way the executive could act on.',
    role: 'Discovery Lead',
    duration: '8 weeks',
    outcomes: 'Programme re-scoped before tooling spend',
  },
  {
    n: '04',
    sector: 'Insurance · Pan-European Insurer',
    title: 'Stakeholder alignment for a contested <em>process redesign</em>',
    summary: 'A redesign of a core underwriting process had stalled in committee for nine months. We designed a sequence of structured workshops that surfaced the unspoken disagreements and produced an alignment that survived the next leadership change.',
    role: 'Workshop Designer · Facilitator',
    duration: '10 weeks',
    outcomes: 'Decision rights signed by three function leads',
  },
  {
    n: '05',
    sector: 'Healthcare · Public Provider',
    title: 'Process architecture for a clinical-administrative <em>integration</em>',
    summary: 'Two services that had been governed and operated independently for decades were being asked to integrate operationally. We built the process architecture that gave both sides a shared object to argue with — and that argument produced a workable design.',
    role: 'Process Architect',
    duration: '5 months',
    outcomes: 'Joint service model approved by both boards',
  },
];

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">
            <h1 className="display-1">
              Real work,<br />
              <em>generalised</em> with care.
            </h1>
            <p className="page-header-lede lede">
              The following case studies reflect real engagements across real organisations. Details have been generalised or anonymised to protect confidentiality — the patterns, approaches, and outcomes are genuine.
            </p>
          </div>
        </div>
      </section>

      {/* INTRO STRIP */}
      <Reveal as="section" className="section-sm">
        <div className="container">
          <div className="positioning-inner">
            <span className="label section-eyebrow">A note on these</span>
            <p className="pull-quote">
              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>
      </Reveal>

      {/* CASE LIST */}
      <Reveal as="section" className="section">
        <div className="container">
          <SectionHead
            label="Selected engagements"
            title="Five examples across <em>five sectors.</em>"
            action={<span className="label">More available on request</span>}
          />

          <div className="case-list">
            {CASES.map((c) => (
              <article className="case-card" key={c.n}>
                <span className="case-card-num">{c.n}</span>
                <div className="case-card-body">
                  <span className="case-card-sector">{c.sector}</span>
                  <h3 className="case-card-title" dangerouslySetInnerHTML={{ __html: c.title }} />
                  <p className="case-card-summary">{c.summary}</p>
                </div>
                <div className="case-card-meta">
                  <div className="case-meta-row">
                    <span className="case-meta-label">Role</span>
                    <span className="case-meta-val">{c.role}</span>
                  </div>
                  <div className="case-meta-row">
                    <span className="case-meta-label">Duration</span>
                    <span className="case-meta-val">{c.duration}</span>
                  </div>
                  <div className="case-meta-row">
                    <span className="case-meta-label">Outcome</span>
                    <span className="case-meta-val">{c.outcomes}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </Reveal>

      {/* CONFIDENTIALITY NOTE */}
      <Reveal as="section" className="section-sm" style={{background: 'var(--surface-alternate)'}}>
        <div className="container">
          <div className="positioning-inner">
            <span className="label section-eyebrow">Confidentiality</span>
            <p className="pull-quote" style={{fontSize: 'clamp(20px, 1.8vw, 22px)', fontStyle: 'normal'}}>
              All identifying detail has been removed or altered. We do not name clients in writing or in conversation without their explicit, written permission — including when it would be flattering to do so.
            </p>
          </div>
        </div>
      </Reveal>

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

window.CasesPage = CasesPage;