/* eslint-disable */
// Our Work, one library, two content types (case studies + white papers),
// filterable by type and industry. Built as repeatable templates for entry ten, not entry three.
// Content brief v4, Our Work section.

const WORK_ENTRIES = [
// ---------- CASE STUDIES (named clients only, published once the tracker shows
// named use approved and quotes signed off) ----------
{
  type: "case", slug: "accounting-firm-foundations", tracker: "CS-006",
  industry: "Professional services",
  client: "Regional accounting firm", clientPending: true, size: "80 staff",
  service: "AI Foundations",
  headline: "Controls first, because the client data left no room for guesswork.",
  summary: "Staff were already testing AI with mixed results, and the firm holds highly sensitive client data. Controls came first, then capability across the whole firm.",
  situation: "Staff had started using AI tools on their own, with mixed results and no shared rules. As a firm holding highly sensitive client and tax data, leadership needed comfort before encouragement.",
  engagement: "An AI Blueprint set the direction, and controls were sequenced ahead of training because governance comfort had to come first.",
  delivered: [
    "A Responsible AI Use policy with a named accountability owner",
    "A leadership workshop to land the position with partners",
    "Two days of hands-on Copilot training onsite for the whole firm",
    "The firm's own voice and tax research tools built into the sessions",
  ],
  outcome: null,
  quote: null,
},
{
  type: "case", slug: "shopping-centre-partnership", tracker: "CS-017",
  industry: "Property",
  client: "Shopping centre owner and manager", clientPending: true, size: "13 sites",
  service: "AI Foundations",
  headline: "Capability built team by team, at the pace the appetite allowed.",
  summary: "Capability built under an ongoing partnership: the Blueprint set direction, finance put its hand up first, and the rest followed.",
  situation: "A large, multi-site organisation where switching AI on everywhere at once would have been the fastest way to lose the room.",
  engagement: "An ongoing AI Partnership, with the Blueprint holding direction and each team joining when it was ready.",
  delivered: [
    "An AI Blueprint setting direction across the business",
    "Masterclasses and a lunch and learn series, starting with finance",
    "A capability journey tying the sequence together",
    "Board updates at each step",
  ],
  outcome: null,
  quote: null,
},
{
  type: "case", slug: "regional-club-right-sized", tracker: "CS-049",
  industry: "Clubs",
  client: "Small regional club", clientPending: true, size: "2 leaders",
  service: "AI Foundations",
  headline: "The same three essentials, sized to a two-person leadership team.",
  summary: "A Blueprint workshop to choose the core AI tool, then a compact program delivered remotely, governance documents included.",
  situation: "A small club with no internal IT function, aware that AI mattered but with no way to tell the useful from the noise.",
  engagement: "A compact Foundations engagement delivered remotely, scaled to a two-person leadership team.",
  delivered: [
    "A Blueprint workshop to choose the core AI tool",
    "A short list of starting points worth pursuing first",
    "A compact literacy program for the club's two leaders",
    "Position on AI and Responsible Use documents",
  ],
  outcome: null,
  quote: null,
},
{
  type: "case", slug: "content-engine-agent", tracker: "CS-011",
  industry: "E-commerce",
  client: "Building products retailer", clientPending: true, size: "3 brands",
  service: "AI Accelerators",
  headline: "A month of brand-voiced content from one performance report.",
  summary: "A two-stage agent turns the monthly performance report into a month of platform-ready content for three brands, with a human approving the plan.",
  situation: "Every month a marketer read the performance report, planned the campaign, wrote a month of posts for three brands, then re-keyed everything into a 94-column import file.",
  engagement: "A fixed-scope build, designed around the existing monthly rhythm rather than replacing it.",
  delivered: [
    "Stage one: report to campaign plan, for human approval",
    "Stage two: approved plan to a month of platform-ready posts",
    "Brand voice held separately for each of the three brands",
    "Output written straight into the 94-column import format",
  ],
  outcome: null,
  quote: null,
},
{
  type: "case", slug: "booking-data-automation", tracker: "CS-018",
  industry: "Property",
  client: "Shopping centre owner and manager", clientPending: true, size: "13 sites",
  service: "AI Accelerators",
  headline: "Monthly booking data moved between two systems, across thirteen sites.",
  summary: "A manual monthly transfer across thirteen sites, engineered properly and now running in production under ongoing support.",
  situation: "Booking data was moved between two systems by hand every month, across thirteen sites, with the error rate you would expect.",
  engagement: "An engineered build under the existing AI Partnership, now extending into payment verification.",
  delivered: [
    "An automated monthly transfer between the two systems",
    "Running in production under ongoing support",
    "Payment verification designed on a careful principle: where the AI cannot confirm a match, the correct answer is unable to confirm, never a guess",
  ],
  outcome: null,
  quote: null,
},
{
  type: "case", slug: "email-triage-handover", tracker: "CS-034",
  industry: "Logistics",
  client: "Road freight operator", clientPending: true, size: "2 shared inboxes",
  service: "AI Accelerators",
  headline: "Shared inboxes triaged, then handed over to run in-house.",
  summary: "An email triage agent built, proven, then migrated into the operator's own environment with staff trained to run it themselves.",
  situation: "Shared inboxes for customer service and the warehouse were absorbing the team's day before the real work started.",
  engagement: "A fixed-scope build with handover as the stated end point, not an afterthought.",
  delivered: [
    "An email triage agent sorting and routing both inboxes",
    "Proven in our environment, then migrated into theirs",
    "Staff trained to run and adjust it themselves",
  ],
  outcome: null,
  quote: null,
},

// ---------- WHITE PAPERS (IA's thinking; the deep tier of the GEO strategy) ----------
{
  type: "paper", slug: "three-essentials", industry: "All industries",
  headline: "Why AI adoption fails without all three essentials.",
  summary: "Brilliant tools with no guardrails. Policies nobody reads. Training with nothing to apply it to. Why partial adoption keeps failing.",
  status: "planned",
  links: [
    { label: "Can we start with training before strategy?", to: "faqs" },
    { label: "AI Foundations", to: "ai-foundations" },
  ],
},
{
  type: "paper", slug: "position-vs-policy", industry: "All industries",
  headline: "A board's Position on AI versus a Responsible Use policy, and why you need both.",
  summary: "One is owned by your board. The other is followed by your people on a Tuesday afternoon. Neither works without the other.",
  status: "planned",
  links: [
    { label: "What's the difference between the two?", to: "faqs" },
    { label: "Governance in detail", to: "governance" },
  ],
},
{
  type: "paper", slug: "engineered-vs-self-serve", industry: "All industries",
  headline: "Engineered agents versus self-serve agents.",
  summary: "Anyone can stand up an agent in an afternoon. What engineering adds once it touches your systems, and when self-serve is enough.",
  status: "planned",
  links: [
    { label: "What's an AI agent, and does our business need one?", to: "faqs" },
    { label: "AI Accelerators", to: "accelerators" },
  ],
},
{
  type: "paper", slug: "safe-adoption-smaller-organisations", industry: "All industries",
  headline: "Safe AI adoption for small and medium organisations.",
  summary: "Most AI governance material assumes a legal team. What good looks like without one, for a board that still needs to say yes.",
  status: "planned",
  links: [
    { label: "How we work", to: "how-we-work" },
    { label: "Governance in detail", to: "governance" },
  ],
}];

// The six client engagements, captioned industry + service so the two
// Property engagements read as two different pieces of work.
const FAN_ENTRIES = WORK_ENTRIES.filter((e) => e.type === "case").slice(0, 6);
const ART_FOR = {
  "accounting-firm-foundations": "professional-services",
  "shopping-centre-partnership": "property",
  "regional-club-right-sized": "clubs",
  "content-engine-agent": "e-commerce",
  "booking-data-automation": "property-2",
  "email-triage-handover": "logistics",
};

const TYPE_FILTERS = [
{ key: "all", label: "Everything" },
{ key: "case", label: "Case studies" },
{ key: "paper", label: "White papers" }];

function WorkV2Screen({ go, t, sub }) {
  const [type, setType] = React.useState("all");
  const [industry, setIndustry] = React.useState("all");
  const [detail, setDetail] = React.useState(() => (sub ? WORK_ENTRIES.find((e) => e.slug === sub) || null : null));
  React.useEffect(() => { if (sub) { const e = WORK_ENTRIES.find((x) => x.slug === sub); if (e) setDetail(e); } }, [sub]);

  const industries = React.useMemo(() => {
    const seen = [];
    WORK_ENTRIES.forEach((e) => { if (e.industry !== "All industries" && !seen.includes(e.industry)) seen.push(e.industry); });
    return seen.sort();
  }, []);

  const filtered = React.useMemo(() =>
    WORK_ENTRIES.filter((e) => {
      if (type !== "all" && e.type !== type) return false;
      if (industry !== "all" && e.industry !== industry) return false;
      return true;
    }), [type, industry]);

  const typeCounts = React.useMemo(() => {
    const o = { all: WORK_ENTRIES.length };
    WORK_ENTRIES.forEach((e) => { o[e.type] = (o[e.type] || 0) + 1; });
    return o;
  }, []);

  if (detail) return <WorkV2Detail entry={detail} onBack={() => { setDetail(null); if (window.location.hash !== "#work") window.location.hash = "work"; }} go={go} t={t} />;

  return (
    <div data-screen-label="12 Our Work">
      {/* HERO — dark stage, quiet centred type, fanned photo cards below */}
      <section className={`hero hero--slab wk-stage wk-stage--${MOTION_KEY[(t && t.workMotion) || "scroll open"] || "scroll"}`}>
        <div className="container wk-stage-inner">
          <Crumbs items={[{ label: "Home", to: "home" }, "Our Work"]} go={go} />
          <div className="wk-stage-copy" key={`copy-${(t && t.workMotion) || "s"}-${(t && t.workMotionNonce) || 0}`}>
            <h1 className="h-display">Our <em>work</em></h1>
            <p className="lede">
              Every organisation's AI journey looks a little different. Here are some of the ones
              we've been part of, along with our thinking on what makes AI adoption work.
            </p>
          </div>
        </div>
        <WorkPhotoCorridor entries={FAN_ENTRIES} onOpen={setDetail} motion={(t && t.workMotion) || "scroll open"} nonce={(t && t.workMotionNonce) || 0} />
      </section>

      {/* FILTERS */}
      <section className="wk-filterbar">
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 12, padding: "18px 28px" }}>
          <div className="filter-row">
            <span className="filter-row-lbl">Type</span>
            <div className="filter-chips">
              {TYPE_FILTERS.map((f) => (
                <button key={f.key} onClick={() => setType(f.key)} className={`filter-chip ${type === f.key ? "filter-chip--active" : ""}`}>
                  <span>{f.label}</span>
                  <span className="filter-count">{typeCounts[f.key] || 0}</span>
                </button>
              ))}
            </div>
          </div>
          <div className="filter-row">
            <span className="filter-row-lbl">Industry</span>
            <div className="filter-chips">
              <button onClick={() => setIndustry("all")} className={`filter-chip ${industry === "all" ? "filter-chip--active" : ""}`}>
                <span>All industries</span>
              </button>
              {industries.map((n) => (
                <button key={n} onClick={() => setIndustry(n)} className={`filter-chip ${industry === n ? "filter-chip--active" : ""}`}>
                  <span>{n}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* LIBRARY */}
      <section className="section section--paper" style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, fontSize: 13, color: "#5C6172" }}>
            <span>{filtered.length} {filtered.length === 1 ? "entry" : "entries"}</span>
            {(type !== "all" || industry !== "all") && (
              <button onClick={() => { setType("all"); setIndustry("all"); }}
                style={{ background: 0, border: 0, color: "var(--ia-blue)", fontFamily: "inherit", fontSize: 13, fontWeight: 500, cursor: "pointer", padding: 0 }}>
                Clear filters
              </button>
            )}
          </div>

          {filtered.length === 0 ? (
            <div style={{ background: "#fff", border: "1px dashed var(--hairline)", borderRadius: 18, padding: 56, textAlign: "center", color: "#5C6172", fontSize: 15, marginTop: 20 }}>
              Nothing published under those filters yet. We have likely done something close, so{" "}
              <span style={{ color: "var(--ia-blue)", cursor: "pointer" }} onClick={() => go("contact")}>ask us</span>.
            </div>
          ) : (
            <div className="case-grid" style={{ marginTop: 20 }}>
              {filtered.map((e) => <WorkEntryCard key={e.slug} entry={e} onOpen={() => setDetail(e)} />)}
            </div>
          )}

        </div>
      </section>

      <section className="section section--paper tbx-closer" style={{ paddingTop: 32, paddingBottom: 88 }}>
        <div className="container">
          <div className="hww-closer">
            <p className="hww-closer-t">
              Recognise your own situation in one of these? <em>Tell us where you're up to with AI, and
              we'll tell you what we'd do next.</em>
            </p>
            <Button variant="primary" size="lg" onClick={() => go("contact")}>
              Talk to us <Icon name="arrow-right" size={16} className="arrow" />
            </Button>
          </div>
        </div>
      </section>

    </div>);
}

// ---------- Hero corridor ----------
// Six engagements receding to a centre vanishing point behind the headline:
// front pair sharp, inner pairs falling out of focus. Cards drift with the cursor.
// A chained ribbon per wing: seven tiles, each touching the next, growing from
// a tiny tile at the waist to a full panel cropped by the screen edge.
const CHAIN_N = 4;
const CARD_W = 262;
const WK_CHAIN = (() => {
  const out = [];
  let cursor = 2;
  for (let i = 0; i < CHAIN_N; i++) {
    const s = 0.3 * Math.pow(1.55, i);
    const wdt = CARD_W * s;
    cursor += wdt / 2;
    out.push({ x: Math.round(cursor), z: -420 + i * 130, rot: 23 - i * 2.4, s: +s.toFixed(3), pz: 0.55 + i * 0.28, cap: i >= 2 });
    cursor += (wdt / 2) * 0.88;
  }
  return out;
})();

const MOTION_KEY = { "scroll open": "scroll", "stream": "stream", "fan": "fan", "deal in": "deal", "float": "float", "hover focus": "hover", "still": "still" };

// Fan: six panels overlapping in a shallow arc, anchored to the bottom edge of
// the stage so they run off it. Ends sit lower and turn out; z ascends right to
// left, so the leftmost face sits on top.
const FAN_GEO = [
  { x: -352, y: 44, rot: -11 },
  { x: -212, y: 12, rot: -6.6 },
  { x: -71, y: 0, rot: -2.2 },
  { x: 71, y: 0, rot: 2.2 },
  { x: 212, y: 12, rot: 6.6 },
  { x: 352, y: 44, rot: 11 },
];

// Stream geometry. Panels butt against each other while growing, so the centre
// distance has to follow the integral of the width: X(u) = K(g^u - 1).
const STREAM = {
  n: 5,            // panels per wing
  s0: 0.1,         // scale at the waist
  g: 1.62,         // growth per slot
  rot: 22,         // constant fold angle, as in the reference
  uMax: 5,         // slots travelled before a panel recycles
  period: 14000,   // ms for one full traverse
};
STREAM.k = (CARD_W * STREAM.s0 * Math.cos(STREAM.rot * Math.PI / 180)) / Math.log(STREAM.g);

function WorkPhotoCorridor({ entries, onOpen, motion = "scroll open", nonce = 0 }) {
  // Outer pair first so the wings read left to right: 1 3 5 | 6 4 2.
  const order = [0, 2, 4, 5, 3, 1].map((i) => entries[i]).filter(Boolean);
  const ref = React.useRef(null);

  // The wings start folded in near the headline and swing open as the visitor
  // scrolls into the page.
  const mode = MOTION_KEY[motion] || "scroll";

  // Conveyor: each panel walks the chain, recycling at the waist.
  React.useEffect(() => {
    const el = ref.current;
    if (!el || mode !== "stream") return;
    const cards = Array.prototype.slice.call(el.querySelectorAll(".wk-corr-card"));
    const { n, s0, g, rot, uMax, period, k } = STREAM;
    let raf = 0;
    const tick = (now) => {
      const base = ((now % period) / period) * uMax;
      for (let c = 0; c < cards.length; c++) {
        const side = c < n ? -1 : 1;
        const slot = c % n;
        const u = (base + (slot * uMax) / n) % uMax;
        const grow = Math.pow(g, u);
        const s = s0 * grow;
        const x = k * (grow - 1) + 1;
        const fade = Math.min(1, u / 0.4, (uMax - u) / 0.6);
        const el2 = cards[c];
        el2.style.opacity = fade.toFixed(3);
        el2.style.transform = "translate3d(" + (side * x).toFixed(1) + "px,0,0) rotateY(" + (side * rot) + "deg) scale(" + s.toFixed(4) + ")";
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [mode]);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (mode !== "scroll") { el.style.setProperty("--open", "1"); return; }
    let frame = 0;
    const upd = () => {
      frame = 0;
      const p = Math.min(1, Math.max(0, window.scrollY / 380));
      el.style.setProperty("--open", p.toFixed(3));
    };
    const onScroll = () => { if (!frame) frame = requestAnimationFrame(upd); };
    upd();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); if (frame) cancelAnimationFrame(frame); };
  }, [mode]);

  if (mode === "fan") {
    // Honest decoration: the fan signals a body of work, the index below does the
    // navigating. No click, no cursor tilt, no rise — the panels are just there.
    return (
      <div className="wk-corridor wk-motion--fan wk-corridor--still" ref={ref} aria-hidden="true">
        {FAN_GEO.map((g, i) => {
          const e = entries[i] || entries[i % entries.length];
          return (
            <div
              key={i}
              className="wk-corr-card wk-fan-face"
              style={{ "--x": `${g.x}px`, "--y": `${g.y}px`, "--rot": `${g.rot}deg`, "--i": i, "--pz": 1 + Math.abs(g.x) / 400, zIndex: FAN_GEO.length - i }}
            >
              <img src={`assets/placeholder-art/${ART_FOR[e.slug] || "hospitality"}.png`} alt="" />
              <span className="wk-corr-cap">{e.industry}<span>{e.service}</span></span>
            </div>);
        })}
      </div>);
  }

  return (
    <TiltStage className={`wk-corridor wk-motion--${mode}`} innerRef={ref} key={`${mode}-${nonce}`}>
      {[-1, 1].map((side) =>
        (mode === "stream" ? new Array(STREAM.n).fill(0) : WK_CHAIN).map((g0, i) => {
          const g = mode === "stream"
            ? { x: 0, z: 0, rot: STREAM.rot, s: STREAM.s0, pz: 1, cap: false }
            : g0;
          const e = order[(side < 0 ? i : i + (mode === "stream" ? STREAM.n : CHAIN_N)) % order.length];
          return (
            <button
              key={`${side}-${i}`}
              className={`wk-corr-card${g.cap ? "" : " wk-corr-card--tile"}`}
              onClick={() => onOpen(e)}
              style={{
                "--x": `${g.x * side}px`, "--z": `${g.z}px`, "--rot": `${g.rot * side}deg`,
                "--s": g.s, "--pz": g.pz, "--op": 1, "--bl": "0px",
                zIndex: i + 1,
              }}
            >
              <img src={`assets/placeholder-art/${ART_FOR[e.slug] || "hospitality"}.png`} alt="" />
              {g.cap && <span className="wk-corr-cap">{e.industry}<span>{e.service}</span></span>}
            </button>);
        })
      )}
    </TiltStage>);
}

// ---------- Entry card (one template, both content types) ----------
function WorkEntryCard({ entry, onOpen }) {
  const e = entry;
  const isPaper = e.type === "paper";
  return (
    <article className={`work-card work-card--${e.type}`} onClick={onOpen}>
      {!isPaper && (
        <div className="work-card-img">
          <image-slot id={`work-${e.slug}`} placeholder={`Hero image for "${e.headline}"`} shape="rect" fit="cover" style={{ height: "100%", width: "100%" }} />
        </div>
      )}
      <div className="work-card-body">
        <div className="entry-kind">
          <span className={`entry-kind-dot entry-kind-dot--${e.type}`} />
          {isPaper ? "White paper" : "Case study"}
          {isPaper && e.status === "planned" && <span className="entry-kind-note">In preparation</span>}
        </div>
        <h3 className="work-card-headline">{e.headline}</h3>
        <p className="work-card-summary">{e.summary}</p>
        <div className="work-card-foot">
          <div className="work-card-client">
            {isPaper ? <strong>Intelligence Assist</strong> : (
              <strong>{e.client}{e.clientPending && <span className="pending-pill">name pending approval</span>}</strong>
            )}
            <span>{e.industry}{e.size ? ` · ${e.size}` : ""}</span>
          </div>
        </div>
      </div>
    </article>);
}

// ---------- Detail (one template, both content types) ----------
function WorkV2Detail({ entry, onBack, go, t }) {
  const e = entry;
  const isPaper = e.type === "paper";
  const layout = (t && t.caseLayout) || "current";
  const csl = layout.charAt(0);
  return (
    <div data-screen-label={`Work · ${e.headline.slice(0, 32)}`}>
      <section className="section wk-detail-top" style={{ paddingTop: 32, paddingBottom: 24 }}>
        <div className="container">
          <button onClick={onBack} style={{ background: 0, border: 0, padding: 0, cursor: "pointer", color: "#5C6172", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontSize: 13.5 }}>
            <Icon name="arrow-left" size={14} /> All of our work
          </button>
        </div>
      </section>

      <section className="section wk-detail-hero" style={{ paddingTop: 0, paddingBottom: 56 }}>
        <div className="container">
          <div className="entry-kind" style={{ marginBottom: 14 }}>
            <span className={`entry-kind-dot entry-kind-dot--${e.type}`} />
            {isPaper ? "White paper" : "Case study"}
          </div>
          <h1 className="h-display" style={{ maxWidth: "20ch" }}>{e.headline}</h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: "62ch" }}>{e.summary}</p>

          {!isPaper && (
            <div style={{ marginTop: 36, borderRadius: 22, overflow: "hidden", background: "#F2F2EE", border: "1px solid var(--hairline)" }}>
              <image-slot id={`work-detail-${e.slug}`} placeholder={`Hero image for "${e.headline}"`} shape="rect" fit="cover" style={{ height: 420, width: "100%" }} />
            </div>
          )}
        </div>
      </section>

      {!isPaper && (
        <React.Fragment>
          <section className="section section--paper" style={{ paddingTop: 32, paddingBottom: 32 }}>
            <div className="container">
              <div className="case-detail-meta">
                <DetailMetaV2 label="Client" value={e.client} sub={e.clientPending ? "name pending approval" : null} />
                <DetailMetaV2 label="Industry" value={e.industry} />
                <DetailMetaV2 label="Size" value={e.size} />
                <DetailMetaV2 label="Engagement" value={e.service} />
                <DetailMetaV2 label="Outcome" value={e.outcome || "Pending"} sub={e.outcome ? null : `tracker ${e.tracker}`} highlight />
              </div>
            </div>
          </section>

          <section className="section section--white" style={{ paddingTop: 56, paddingBottom: 72 }}>
            <div className={layout === "current" ? "container container--narrow" : "container"}>

              {layout === "current" ? (<React.Fragment>
              <div className="entry-row" style={{ marginTop: 32 }}>
                <div className="case-section-eyebrow">The situation</div>
                <p className="entry-p">{e.situation}</p>
              </div>
              <hr className="divider" style={{ margin: "44px 0" }} />
              <div className="entry-row">
                <div className="case-section-eyebrow">The engagement</div>
                <p className="entry-p">{e.engagement}</p>
              </div>
              <hr className="divider" style={{ margin: "44px 0" }} />
              <div className="entry-row">
                <div className="case-section-eyebrow">What was delivered</div>
                <ul className="bullet-list">{e.delivered.map((d, i) => <li key={i}>{d}</li>)}</ul>
              </div>
              <hr className="divider" style={{ margin: "44px 0" }} />
              <div className="entry-row">
                <div className="case-section-eyebrow">The outcome</div>
                {e.outcome ? <p className="entry-p">{e.outcome}</p> :
                  <p className="entry-pending">Outcome line pending, tracker {e.tracker}.</p>}
              </div>
              <hr className="divider" style={{ margin: "44px 0" }} />
              <div className="entry-row">
                <div className="case-section-eyebrow">In their words</div>
                {e.quote ? (
                  <blockquote className="ia-quote entry-quote">{e.quote.text}
                    <footer>,  {e.quote.name}, {e.quote.role}</footer>
                  </blockquote>
                ) : <p className="entry-pending">Quote pending sign-off, tracker {e.tracker}.</p>}
              </div>
              </React.Fragment>) : csl === "A" ? <CaseBodyA e={e} /> : csl === "B" ? <CaseBodyB e={e} /> : <CaseBodyC e={e} />}
            </div>
          </section>
        </React.Fragment>
      )}

      {isPaper && (
        <section className="section section--paper" style={{ paddingTop: 40, paddingBottom: 72 }}>
          <div className="container container--narrow">
            <div className="entry-row" style={{ marginTop: 32 }}>
              <div className="case-section-eyebrow">What it covers</div>
              <p className="entry-p">
                A working paper from Intelligence Assist, written for leaders rather than practitioners.
                It expands on the questions we get asked most often, and doubles as the material behind
                our speaking on the topic.
              </p>
            </div>
            <hr className="divider" style={{ margin: "44px 0" }} />
            <div className="entry-row">
              <div className="case-section-eyebrow">Related reading</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start" }}>
                {e.links.map((l, i) => <LinkOut key={i} onClick={() => go(l.to)}>{l.label}</LinkOut>)}
              </div>
            </div>
          </div>
        </section>
      )}

      <section className="section section--paper tbx-closer" style={{ paddingTop: 32, paddingBottom: 88 }}>
        <div className="container">
          <div className="hww-closer">
            <p className="hww-closer-t">
              {isPaper ? "Want to talk it through? " : "Recognise your own situation here? "}
              <em>
                {isPaper
                  ? "We're happy to have the conversation before the paper lands."
                  : "Tell us where you're up to, and we'll tell you what we'd do next."}
              </em>
            </p>
            <Button variant="primary" size="lg" onClick={() => go("contact")}>
              Talk to us <Icon name="arrow-right" size={16} className="arrow" />
            </Button>
          </div>
        </div>
      </section>

    </div>);
}

function CaseBodyA({ e }) {
  return (
    <div className="csl-a">
      <div className="csl-ab">
        <div className="csl-ab-half csl-ab-before">
          <div className="csl-ab-l">Before</div>
          <p className="csl-ab-t">{e.situation}</p>
        </div>
        <div className="csl-ab-half csl-ab-now">
          <div className="csl-ab-l">After</div>
          <p className="csl-ab-t">{e.summary}</p>
        </div>
      </div>
      <div className="csl-build">
        <div className="case-section-eyebrow">The build</div>
        <div className="csl-stages">
          {e.delivered.map((d, i) => (
            <div key={i} className="csl-stage">
              <div className="csl-stage-n">{String(i + 1).padStart(2, "0")}</div>
              <p className="csl-stage-t">{d}</p>
            </div>
          ))}
        </div>
        <p className="entry-p csl-eng"><strong>The engagement.</strong> {e.engagement}</p>
        <div className="csl-pend">
          <span className="csl-pend-p">{e.outcome || `Outcome line pending, tracker ${e.tracker}`}</span>
          {!e.quote && <span className="csl-pend-p">Quote pending sign-off</span>}
        </div>
      </div>
    </div>);
}

function CaseBodyB({ e }) {
  const [one, two, ...rest] = e.delivered;
  return (
    <div className="csl-b">
      <div className="case-section-eyebrow">How it runs</div>
      <div className="csl-flow">
        <div className="csl-flow-card">
          <div className="csl-flow-n">Step one</div>
          <p className="csl-flow-t">{one}</p>
        </div>
        <div className="csl-flow-arrow"><Icon name="arrow-right" size={20} /></div>
        <div className="csl-flow-card csl-flow-card--gate">
          <div className="csl-flow-n">Step two</div>
          <p className="csl-flow-t">{two}</p>
        </div>
      </div>
      {rest.length > 0 && (
        <div className="csl-holds">
          {rest.map((r, i) => <div key={i} className="csl-hold"><p>{r}</p></div>)}
        </div>
      )}
      <div className="csl-cols">
        <div>
          <div className="case-section-eyebrow">The situation</div>
          <p className="entry-p">{e.situation}</p>
        </div>
        <div>
          <div className="case-section-eyebrow">The engagement</div>
          <p className="entry-p">{e.engagement}</p>
          <div className="csl-pend"><span className="csl-pend-p">{e.outcome || `Outcome and quote pending, tracker ${e.tracker}`}</span></div>
        </div>
      </div>
    </div>);
}

function CaseBodyC({ e }) {
  return (
    <div className="csl-c">
      <div className="csl-rail">
        <div className="csl-rail-item"><span className="csl-rail-l">Client</span><span className="csl-rail-v">{e.client}</span>{e.clientPending && <span className="csl-rail-s">name pending approval</span>}</div>
        <div className="csl-rail-item"><span className="csl-rail-l">Industry</span><span className="csl-rail-v">{e.industry}</span></div>
        <div className="csl-rail-item"><span className="csl-rail-l">Size</span><span className="csl-rail-v">{e.size}</span></div>
        <div className="csl-rail-item"><span className="csl-rail-l">Engagement</span><span className="csl-rail-v">{e.service}</span></div>
        <div className="csl-rail-item"><span className="csl-rail-l">Outcome</span><span className="csl-rail-v csl-rail-v--pend">{e.outcome || "Pending"}</span>{!e.outcome && <span className="csl-rail-s">tracker {e.tracker}</span>}</div>
      </div>
      <div className="csl-run">
        <h3>The situation</h3>
        <p className="entry-p">{e.situation}</p>
        <h3>The engagement</h3>
        <p className="entry-p">{e.engagement}</p>
        <h3>What was delivered</h3>
        <ul className="csl-checks">{e.delivered.map((d, i) => <li key={i}>{d}</li>)}</ul>
        {e.quote ? (
          <blockquote className="ia-quote entry-quote">{e.quote.text}<footer>,  {e.quote.name}, {e.quote.role}</footer></blockquote>
        ) : <blockquote className="csl-quote-pend">Quote pending sign-off, tracker {e.tracker}.</blockquote>}
      </div>
    </div>);
}

function DetailMetaV2({ label, value, sub, highlight }) {
  return (
    <div className={`case-detail-meta-block ${highlight ? "case-detail-meta-block--hl" : ""}`}>
      <span className="case-meta-lbl">{label}</span>
      <span className={`case-meta-val ${highlight ? "case-meta-val--big" : ""}`}>{value}</span>
      {sub && <span className="case-meta-sub">{sub}</span>}
    </div>);
}

Object.assign(window, { WorkV2Screen, WORK_ENTRIES, WorkEntryCard });
