// ═══════════════════════════════════════════════════════════
// Leftshifted - Case Studies Pages
// ═══════════════════════════════════════════════════════════

const caseStudyData = [
  {
    slug: 'pr-ai-data-product',
    title: 'From broken pipelines and nothing to show, into a multi-million ARR, award-winning media intelligence engine',
    category: 'PR & Comms',
    capabilities: ['Market intelligence', 'AI agents', 'Data orchestration', 'Building teams'],
    products: ['Strategy', 'Data', 'AI', 'Cloud'],
    excerpt: '£250k of wasted spend. Five contractors. Nearly a year. Nothing connected end to end. We came in, diagnosed honestly, and delivered their in-house media intelligence engine in 3 months - processing hundreds of thousands of media files automatically, sold on subscription to a base of thousands of clients.',
    img: 'var(--ls-midnight-navy)',
    image: res('assets/imagery/case-pr-comms.png'),
    stats: [{ label: 'Time to product', value: '3 months' }, { label: 'Engagement', value: '9 months' }, { label: 'Contract extensions', value: '3' }],
    challenge: 'A global communications firm with thousands of clients had hundreds of analysts doing high-value media analysis by hand - monitoring coverage, tracking key messages, measuring spokesperson impact across hundreds of thousands of articles. Each task roughly £100 of analyst time, done manually, every time. The commercial logic for an automated subscription product was obvious. They\'d spent £250K across five individual contractors trying to build it. What they had was "80–90% done" - according to the people who built it. What we found was different. Five people had worked in complete isolation. Nothing connected end to end. The architecture was brittle, built on no-code tools chosen so future users "wouldn\'t need to be technical." Data science models ran on fake data with no plumbing to real sources. The product had not been sold to a single client.',
    solution: 'We rebuilt from scratch - but kept what was worth keeping from what had been explored. Three months. A team of three. Strategy to architecture to engineering to science to analysis, delivered end to end. We replaced the tooling decisions that had created a ceiling on what could be built and how fast. On Azure, we built a full-stack system: source systems, APIs, data storage, cloud processing and warehousing, through to client-facing visualisation. Fully automated, nothing manual, nothing brittle. LLMs handled the text processing - enabling new metrics at scale across hundreds of thousands of media files where analyst bandwidth had been the ceiling. Sentiment, message pull-through, spokesperson tracking, coverage granularity. We helped hire the internal team as we built, so when we left, they owned everything.',
    results: 'Nine months. Three contract extensions. A fully working, commercially viable AI-powered data product - built from scratch, end to end, by a team of three in the time five contractors hadn\'t managed with £250K. Hundreds of thousands of media files processed automatically. New metrics at scale that didn\'t exist before. Client reports generated and delivered without manual intervention. The product entered the market with subscription pricing across a base of thousands of clients. They came in expecting an MVP. They got a working product, a scalable architecture, and a commercial asset.',
  },
  {
    slug: 'music-rights-royalty-distribution',
    title: 'Case study coming soon',
    category: 'Music Rights',
    capabilities: [],
    products: ['Strategy', 'Data'],
    excerpt: 'We worked with a music rights organisation to unlock unclaimed royalties from unusable data. Full case study coming soon.',
    img: 'var(--ls-ultramarine-blue)',
    badge: '$60M+ royalties unlocked',
    stats: [],
    placeholder: true,
    challenge: '',
    solution: '',
    results: '',
  },
  {
    slug: 'music-rights-data-function',
    title: 'Case study coming soon',
    category: 'Music Rights',
    capabilities: [],
    products: ['Strategy', 'Data', 'Cloud'],
    excerpt: 'We set up the data function, strategy and architecture that took a music rights organisation from depending on a third party for every change and waiting hours or days for analysis, to in-house, self-sufficient and seconds to insight. Full case study coming soon.',
    img: 'var(--ls-ultramarine-blue)',
    stats: [],
    placeholder: true,
    challenge: '',
    solution: '',
    results: '',
  },
  {
    slug: 'standard-innovation-insurance',
    title: 'Case study coming soon',
    category: 'Insurance',
    capabilities: [],
    products: ['Strategy', 'Data', 'AI', 'Cloud'],
    excerpt: 'We worked with Standard Innovation to deliver data and AI capability across their insurance operations. Full case study coming soon.',
    img: 'var(--ls-blue-40)',
    badge: ['10%+ CAC improvement', '$600k cost savings p.a.'],
    stats: [],
    placeholder: true,
    challenge: '',
    solution: '',
    results: '',
  },
  {
    slug: 'north-current-real-estate',
    title: 'Case study coming soon',
    category: 'Real Estate',
    capabilities: [],
    products: ['Strategy', 'Data'],
    excerpt: 'We worked with North Current to bring clarity to their data strategy. Full case study coming soon.',
    img: 'var(--ls-ultramarine-blue)',
    logo: res('assets/logos/north-current-white.png'),
    stats: [],
    placeholder: true,
    challenge: '',
    solution: '',
    results: '',
  },
  {
    slug: 'memoyo-social-media',
    title: 'Case study coming soon',
    category: 'Social Media',
    capabilities: [],
    products: ['Strategy', 'Data', 'Cloud'],
    excerpt: 'We worked with Memoyo to build data-driven capability for their social media platform. Full case study coming soon.',
    img: 'var(--ls-midnight-navy)',
    logo: res('assets/logos/memoyo.png'),
    stats: [],
    placeholder: true,
    challenge: '',
    solution: '',
    results: '',
  },
];

const categories = ['View all', ...new Set(caseStudyData.map(c => c.category))];
const capabilityList = ['View all', ...[...new Set(caseStudyData.flatMap(c => c.capabilities || []))].sort()];
const productList = ['View all', ...[...new Set(caseStudyData.flatMap(c => c.products || []))].sort()];

const CaseStudiesPage = () => {
  const [activeFilter, setActiveFilter] = useState('View all');
  const [activeCap, setActiveCap] = useState('View all');
  const [activeProd, setActiveProd] = useState('View all');
  const [capOpen, setCapOpen] = useState(false);
  const [prodOpen, setProdOpen] = useState(false);
  const filtered = caseStudyData.filter(cs => {
    const matchCat = activeFilter === 'View all' || cs.category === activeFilter;
    const matchCap = activeCap === 'View all' || (cs.capabilities || []).includes(activeCap);
    const matchProd = activeProd === 'View all' || (cs.products || []).includes(activeProd);
    return matchCat && matchCap && matchProd;
  });

  return (
    <PageShell current="/case-studies">
      <Section className="m-cases-head" style={{ paddingTop: 80, paddingBottom: 40, textAlign: 'center' }}>
        <Eyebrow>Case studies</Eyebrow>
        <h1 style={{
          font: 'var(--type-display-2)', letterSpacing: 'var(--tracking-display)',
          marginTop: 20, textWrap: 'balance',
        }}>
          Explore our work
        </h1>
        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0 }}>
          <div className="cases-filters cases-filters--lead">
            {categories.map(cat => (
              <button
                key={cat}
                className={`cases-filter cases-filter--lead ${activeFilter === cat ? 'is-active' : ''}`}
                onClick={() => setActiveFilter(cat)}
              >{cat}</button>
            ))}
          </div>
          <div className="cases-filters-nested">
            <div className="cases-filter-group">
              <button className="cases-filter-group__toggle" onClick={() => setProdOpen(o => !o)}>
                <span className="cases-filter-label" style={{ minWidth: 0, marginRight: 0 }}>Service</span>
                <span style={{ fontSize: 10, color: 'var(--fg-subtle)', transform: prodOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform var(--dur-fast)' }}>▼</span>
                {activeProd !== 'View all' && <span className="cases-filter-group__badge">{activeProd}</span>}
              </button>
              {prodOpen && (
                <div className="cases-filters" style={{ marginTop: 8 }}>
                  <button
                    className={`cases-filter ${activeProd === 'View all' ? 'is-active' : ''}`}
                    onClick={() => setActiveProd('View all')}
                  >View all</button>
                  {['Strategy', 'Data', 'AI', 'Cloud'].map(s => (
                    <button key={s} className={`cases-filter ${activeProd === s ? 'is-active' : ''}`} onClick={() => setActiveProd(s)}>{s}</button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      </Section>

      <Section style={{ paddingTop: 0, paddingBottom: 100 }}>
        <div className="cases-grid">
          {filtered.map((cs, i) => (
            <article key={cs.slug} className={`case-card ${cs.placeholder ? 'case-card--placeholder' : ''}`} onClick={() => !cs.placeholder && navigate(`/case-studies/${cs.slug}`)}>
              <div className={`case-card__img ${cs.image ? '' : 'case-card__img--nophoto'}`} style={{ background: cs.img }}>
                {cs.image && <img src={cs.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
                <span className="case-card__tag">{cs.category}</span>
                <div style={{
                  position: 'absolute', inset: 0,
                  mask: `url("${res('assets/brand/Union.svg')}") center / auto 200% no-repeat`,
                  WebkitMask: `url("${res('assets/brand/Union.svg')}") center / auto 200% no-repeat`,
                  background: 'rgba(255,255,255,.12)',
                }}></div>
                {cs.logo && <img src={cs.logo} alt="" style={{ position: 'absolute', left: 20, bottom: 20, height: 26, width: 'auto', objectFit: 'contain' }} />}
                {cs.badge && (
                  <span style={{ position: 'absolute', right: 16, bottom: 16, display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                    {[].concat(cs.badge).map(b => (
                      <span key={b} style={{ display: 'inline-flex', alignItems: 'center', font: '700 12px/1 var(--font-display)', letterSpacing: '.01em', padding: '9px 14px', borderRadius: 'var(--radius-pill)', background: 'var(--ls-lime)', color: 'var(--ls-midnight-navy)' }}>{b}</span>
                    ))}
                  </span>
                )}
              </div>
              <div className="case-card__body">
                <h3 style={{ font: 'var(--type-h4)', letterSpacing: 'var(--tracking-h)', textWrap: 'balance' }}>
                  {cs.title}
                </h3>
                <p style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)', marginTop: 8 }}>
                  {cs.excerpt}
                </p>
                {!cs.placeholder && (
                  <span className="case-card__link">
                    Read Case Study <ArrowIcon size={9} />
                  </span>
                )}
                {cs.placeholder && (
                  <span style={{ font: '500 13px/1 var(--font-mono)', letterSpacing: '.04em', color: 'var(--fg-subtle)', marginTop: 16, display: 'inline-block' }}>Coming soon</span>
                )}
              </div>
            </article>
          ))}
        </div>
      </Section>
    </PageShell>
  );
};

// ── Individual Case Study ───────────────────────────────
const CaseStudyPage = ({ slug }) => {
  const { useState, useEffect } = React;
  const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' && window.innerWidth <= 900);
  useEffect(() => {
    const onR = () => setIsMobile(window.innerWidth <= 900);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  const cs = caseStudyData.find(c => c.slug === slug) || caseStudyData[0];
  const others = caseStudyData.filter(c => c.slug !== slug).slice(0, 2);

  if (cs.slug === 'pr-ai-data-product') {
    return (
      <PageShell current="/case-studies">
        <Section style={{ background: 'var(--ls-midnight-navy)', height: isMobile ? 'auto' : 'calc(100vh - 72px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: isMobile ? 40 : 20, paddingBottom: isMobile ? 48 : 20, position: 'relative', overflow: isMobile ? 'visible' : 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', mask: `url("${res('assets/brand/Union.svg')}") top left / 220px auto repeat`, WebkitMask: `url("${res('assets/brand/Union.svg')}") top left / 220px auto repeat`, background: 'rgba(255,255,255,.08)' }} />
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
            <span style={{ font: '500 10px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase', padding: '6px 12px', borderRadius: 'var(--radius-pill)', border: '1px solid rgba(255,255,255,.25)', color: 'rgba(255,255,255,.7)' }}>Case study</span>
            <span style={{ font: '600 10px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase', padding: '6px 12px', borderRadius: 'var(--radius-pill)', background: 'var(--ls-ultramarine-blue)', color: '#fff' }}>PR &amp; communications</span>
          </div>
          <h1 className="m-cs-h1" style={{ position: 'relative', width: '100%', maxWidth: 'none', font: '700 clamp(26px, 3.05vw, 41px)/1.14 var(--font-display)', letterSpacing: 'var(--tracking-display)', color: '#fff', marginBottom: 16 }}>
            From broken pipelines and nothing to show, into a{' '}<br/><span style={{ color: 'var(--ls-lime)' }}>multi-million ARR, award-winning media intelligence engine.</span>
          </h1>
          <div style={{ position: 'relative', marginBottom: 14 }}>
            <span style={{ display: 'block', font: '600 10px/1 var(--font-mono)', letterSpacing: '.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,.5)', marginBottom: 8 }}>At a glance</span>
            <div className="cs-glance" style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8, width: 305, height: 86, justifyContent: 'flex-start' }}>
              {[
                { value: 'Top-10', label: 'Global PR agency', bg: 'var(--ls-ultramarine-blue)', color: '#fff', labelColor: 'rgba(255,255,255,.7)', w: 98, h: 94 },
                { value: '2', label: 'person team', bg: 'var(--ls-ultramarine-blue)', color: '#fff', labelColor: 'rgba(255,255,255,.7)', w: 91, h: 94 },
                { value: '3mo', label: 'to build', bg: 'rgba(255,255,255,.1)', color: '#fff', labelColor: 'rgba(255,255,255,.6)', w: 101, h: 94 },
                { value: '9mo', label: 'total engagement', bg: 'var(--ls-ultramarine-blue)', color: '#fff', labelColor: 'rgba(255,255,255,.7)', w: 98, h: 94 },
                { value: 'Award\nwinning', label: '', bg: 'var(--ls-lime)', color: 'var(--ls-midnight-navy)', labelColor: 'rgba(3,2,40,.65)' },
                { value: '\u00a3multi-million', label: 'ARR generated', bg: 'var(--ls-lime)', color: 'var(--ls-midnight-navy)', labelColor: 'rgba(3,2,40,.65)' },
                { value: '5x ROI', label: 'delivered', bg: 'var(--ls-lime)', color: 'var(--ls-midnight-navy)', labelColor: 'rgba(3,2,40,.65)', w: 104, h: 95 },
              ].map((s, i) => (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '10px 8px', borderRadius: 'var(--radius-md)', background: s.bg, ...(s.w ? { width: s.w, height: s.h } : {}) }}>
                  <span style={{ font: '700 24px/1.05 var(--font-display)', color: s.color, whiteSpace: 'pre-line' }}>{s.value}</span>
                  {s.label && <span style={{ font: '400 9px/1.1 var(--font-body)', color: s.labelColor, marginTop: 4 }}>{s.label}</span>}
                </div>
              ))}
            </div>
          </div>
          <div className="cs-body" style={{ position: 'relative', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr', gap: isMobile ? 14 : 28, alignItems: 'stretch', flex: isMobile ? 'none' : 1, minHeight: 0 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
              {[
                { label: 'The situation', text: 'A top-10 global PR agency had analysts doing media analysis by hand - coverage, key messages, spokesperson impact. Roughly £100 of analyst time per task.', icon: <svg viewBox="0 0 20 20" fill="none" style={{ width: 16, height: 16, color: 'var(--ls-lime)' }}><circle cx="8.5" cy="8.5" r="6" stroke="currentColor" strokeWidth="1.4"/><path d="M13.2 13.2L18 18" stroke="currentColor" strokeWidth="1.4"/></svg> },
                { label: 'The vision', text: 'Automate the analysis and add capabilities not achieveable at scale with human effort. Sell the insights to clients on a subscription.', icon: <svg viewBox="0 0 20 20" fill="none" style={{ width: 16, height: 16, color: 'var(--ls-lime)' }}><circle cx="10" cy="10" r="7" stroke="currentColor" strokeWidth="1.4"/><circle cx="10" cy="10" r="3" stroke="currentColor" strokeWidth="1.4"/><circle cx="10" cy="10" r="0.9" fill="currentColor"/></svg> },
                { label: 'The problem', text: "£250k spent and over a year of trying to oversee and build it themselves. Failing pipelines, fake-data prototypes, nothing linked up, wrong assumptions baked into the architecture. Nothing to show.", icon: <svg viewBox="0 0 20 20" fill="none" style={{ width: 16, height: 16, color: 'var(--ls-lime)' }}><path d="M10 2L18.5 17H1.5L10 2Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M10 8V12" stroke="currentColor" strokeWidth="1.4"/><circle cx="10" cy="14.5" r="0.9" fill="currentColor"/></svg> },
              ].map(c => (
                <div key={c.label} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 20, borderRadius: 'var(--radius-lg)', background: 'rgba(255,255,255,.1)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                    {c.icon}
                    <span style={{ font: '600 11px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--ls-lime)' }}>{c.label}</span>
                  </div>
                  <p style={{ font: '400 13.5px/1.45 var(--font-body)', letterSpacing: 'var(--tracking-body)', color: 'rgba(255,255,255,.88)' }}>{c.text}</p>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 20, borderRadius: 'var(--radius-lg)', background: 'rgba(255,255,255,.1)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                  <svg viewBox="0 0 20 20" fill="none" style={{ width: 16, height: 16, color: 'var(--ls-lime)' }}><rect x="2" y="2" width="7" height="7" stroke="currentColor" strokeWidth="1.4"/><rect x="11" y="2" width="7" height="7" stroke="currentColor" strokeWidth="1.4"/><rect x="2" y="11" width="7" height="7" stroke="currentColor" strokeWidth="1.4"/><rect x="11" y="11" width="7" height="7" fill="currentColor"/></svg>
                  <span style={{ font: '600 11px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--ls-lime)' }}>What we built</span>
                </div>
                <p style={{ font: '400 13.5px/1.45 var(--font-body)', letterSpacing: 'var(--tracking-body)', color: 'rgba(255,255,255,.88)' }}>Their in-house media intelligence engine, processing hundreds of thousands of media files automatically - sentiment, message pull-through, spokesperson tracking, custom client-facing products, all automated end-to-end on their own cloud infrastructure.<br/><br/>We handled every blocker, then helped hire and handed over a data function that's scaled to 6 since we left.</p>
              </div>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 20, borderRadius: 'var(--radius-lg)', background: 'rgba(255,255,255,.1)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                  <svg viewBox="0 0 20 20" fill="none" style={{ width: 16, height: 16, color: 'var(--ls-lime)' }}><path d="M2 15L8 9L12 12L18 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/><path d="M13 5H18V10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  <span style={{ font: '600 11px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--ls-lime)' }}>The outcome</span>
                </div>
                <p style={{ font: '400 13.5px/1.45 var(--font-body)', letterSpacing: 'var(--tracking-body)', color: 'rgba(255,255,255,.88)' }}>3 months to a working product, 9 months total engagement. Multi-million ARR, award winning. Intelligence capabilities their competitors don't have.</p>
                <div style={{ marginTop: 16, paddingLeft: 14, borderLeft: '2px solid var(--ls-ultramarine-blue)' }}>
                  <p style={{ font: 'italic 600 13px/1.35 var(--font-body)', color: 'rgba(255,255,255,.9)' }}>"We hadn't expected to get to a fully working product."</p>
                  <p style={{ font: '400 10.5px/1 var(--font-mono)', color: 'rgba(255,255,255,.5)', marginTop: 5 }}>- CDAO, Global PR Firm</p>
                </div>
              </div>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginTop: 12, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,.12)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {[
                  { name: 'Strategy', color: 'var(--ls-lime)', dark: true },
                  { name: 'Data', color: 'var(--ls-blue-40)', dark: true },
                  { name: 'AI', color: '#FF5A6E', dark: false },
                  { name: 'Cloud', color: '#FFC845', dark: true },
                ].map(p => (
                  <span key={p.name} style={{ font: '600 10.5px/1 var(--font-mono)', letterSpacing: '.04em', textTransform: 'uppercase', padding: '6px 14px', borderRadius: 'var(--radius-pill)', background: p.color, color: p.muted ? 'rgba(255,255,255,.8)' : (p.dark ? 'var(--ls-midnight-navy)' : '#fff') }}>{p.name}</span>
                ))}
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {['Market intelligence', 'AI agents', 'Data orchestration', 'Building teams'].map(cap => (
                  <span key={cap} style={{ font: '500 10.5px/1 var(--font-mono)', letterSpacing: '.04em', padding: '6px 14px', borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.15)', color: 'rgba(255,255,255,.7)' }}>{cap}</span>
                ))}
              </div>
            </div>
            <a onClick={() => navigate('/contact')} style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 18px', borderRadius: 'var(--radius-md)', background: 'var(--ls-ultramarine-blue)', color: '#fff', font: '700 13px/1 var(--font-display)', cursor: 'pointer' }}>
              Work with us <ArrowIcon size={11} />
            </a>
          </div>
        </Section>
      </PageShell>
    );
  }

  return (
    <PageShell current="/case-studies">
      {/* Hero */}
      <div className="cs-hero" style={{ background: cs.img }}>
        <UnionOverlay opacity={0.08} />
        <div className="page-wrap" style={{ position: 'relative', zIndex: 1 }}>
          <a onClick={() => navigate('/case-studies')} style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-mono)', color: 'rgba(255,255,255,.6)', textTransform: 'uppercase', display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 32, cursor: 'pointer' }}>
            ← Back to case studies
          </a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 16 }}>
            <span className="case-card__tag" style={{ margin: 0 }}>{cs.category}</span>
          {cs.capabilities && cs.capabilities.length > 0 && (
              cs.capabilities.map(cap => (
                <span key={cap} style={{
                  font: '500 11px/1 var(--font-mono)', letterSpacing: '.04em',
                  padding: '6px 12px', borderRadius: 'var(--radius-pill)',
                  background: 'rgba(255,255,255,.12)', color: 'rgba(255,255,255,.8)',
                }}>{cap}</span>
              ))
          )}
          </div>
          <h1 style={{
            font: 'var(--type-display-3)', letterSpacing: 'var(--tracking-display)',
            color: '#fff', maxWidth: 800, textWrap: 'balance',
          }}>
            {cs.title}
          </h1>
          <div className="cs-hero__stats">
            {cs.stats.map((s, i) => (
              <div key={i} className="cs-hero__stat">
                <span className="cs-hero__stat-value">{s.value}</span>
                <span className="cs-hero__stat-label">{s.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Content */}
      <Section style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="cs-content">
          <div className="cs-section">
            <Eyebrow>The challenge</Eyebrow>
            <p style={{ font: 'var(--type-body-lg)', color: 'var(--fg-default)', marginTop: 16, maxWidth: 640 }}>
              {cs.challenge}
            </p>
          </div>
          <div className="cs-section">
            <Eyebrow>Our approach</Eyebrow>
            <p style={{ font: 'var(--type-body-lg)', color: 'var(--fg-default)', marginTop: 16, maxWidth: 640 }}>
              {cs.solution}
            </p>
          </div>
          <div className="cs-section">
            <Eyebrow>The results</Eyebrow>
            <p style={{ font: 'var(--type-body-lg)', color: 'var(--fg-default)', marginTop: 16, maxWidth: 640 }}>
              {cs.results}
            </p>
          </div>
        </div>
      </Section>

      {/* More case studies */}
      <Section style={{ paddingTop: 0, paddingBottom: 100 }}>
        <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: 60 }}>
          <h3 style={{ font: 'var(--type-h2)', letterSpacing: 'var(--tracking-h)', marginBottom: 32 }}>
            More case studies
          </h3>
          <div className="cases-grid">
            {others.map(o => (
              <article key={o.slug} className="case-card" onClick={() => navigate(`/case-studies/${o.slug}`)}>
                <div className="case-card__img" style={{ background: o.img }}>
                  <span className="case-card__tag">{o.category}</span>
                  <div style={{
                    position: 'absolute', inset: 0,
                    mask: `url("${res('assets/brand/Union.svg')}") center / auto 200% no-repeat`,
                    WebkitMask: `url("${res('assets/brand/Union.svg')}") center / auto 200% no-repeat`,
                    background: 'rgba(255,255,255,.12)',
                  }}></div>
                </div>
                <div className="case-card__body">
                  <h3 style={{ font: 'var(--type-h4)', letterSpacing: 'var(--tracking-h)', textWrap: 'balance' }}>{o.title}</h3>
                  <p style={{ font: 'var(--type-body-sm)', color: 'var(--fg-muted)', marginTop: 8 }}>{o.excerpt}</p>
                  <span className="case-card__link">Read Case Study <ArrowIcon size={9} /></span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </Section>
    </PageShell>
  );
};

Object.assign(window, { CaseStudiesPage, CaseStudyPage, caseStudyData });