// Case studies — only verified engagements from resume.
function Cases() {
  const { go } = useRoute();
  const [open, setOpen] = React.useState(null);

  const cases = [
    {
      id: 'pcn', num: '01',
      client: 'US mortgage client', sector: 'BFSI',
      period: 'Infosys BPM · 2017–2020',
      title: 'PCN mortgage transformation. 25-day TAT to 4-day.',
      metric: '25→4', metricLabel: 'day TAT',
      pitch: 'The Bankruptcy Payment Change Notice process handled monthly EMI changes against 20+ state-based rules. Four teams. Multiple handoffs. Attorney review on every case. 8–10% rework cost days on a 21-day court deadline.',
      body: [
        ['Problem', 'Analytics team generated a daily list. Processing team applied state-based rule validations in Excel. Review team cross-checked. Documentation team prepared the PCN, redacted sensitive fields, sent to external attorney. If the attorney flagged issues the whole chain ran again. Court filing deadlines were at risk.'],
        ['Approach', 'RPA bot took the system-generated analytics report, performed all logical validations and calculations in one pass, generated the PDF with automated redaction. Processing team handled a few remaining validations in minutes instead of an hour. Attorney scope reduced to 40% of original fields. Review team eliminated. Audit logs replaced human review.'],
        ['Outcome', '4-day steady-state TAT. 40+ FTE benefit. 80% manual activity reduction. Rework from 8–10% to under 1%. Missed court deadlines near zero. Change management: trained the ops team on the new workflow, upskilled two agents to handle bot Level-1 support.'],
      ],
      numbers: [
        ['TAT', '25 → 4', 'days, steady state'],
        ['FTE benefit', '40+', 'released to higher work'],
        ['Manual activity', '−80%', 'after automation'],
        ['Rework', '8–10% → <1%', 'post-redesign'],
      ],
      tags: ['RPA', 'Change management', 'Court-deadline-critical'],
    },
    {
      id: 'fincrime', num: '02',
      client: 'BFSI client', sector: 'BFSI',
      period: 'Concentrix · 2022–present',
      title: 'FinCrime & Due Diligence agentic AI.',
      metric: '60%', metricLabel: 'AHT reduction',
      pitch: 'Suspicious activity investigation rebuilt as an agent-assisted human workflow. Agents fetch PEP and sanctions data, structure the narrative, propose the judgment. Investigator validates and signs.',
      body: [
        ['Problem', 'Investigators were manually pulling information from ERP/CRM, LexisNexis, sanction lists. Summarising research PDFs. Writing the case conclusion in Word, pasting into the case form. Every case a full cognitive load on one human.'],
        ['Approach', 'Combined RPA, GenAI, and Agentic AI. Agent fetches static customer data, PEP/sanctions information, device activity, associated account data. Uses ML to identify patterns, provide reasoning and proofs. Summarises source documents. Fills the case dashboard. Human validates and makes the final call.'],
        ['Outcome', '20–30% productivity gains at the programme level. On the flagship workflow: 60% AHT reduction, 90%+ AI accuracy on false-positive validation. Agent feedback loops into model retraining. The human role shifted from data gathering to judgment.'],
      ],
      numbers: [
        ['AHT', '−60%', 'flagship workflow'],
        ['AI accuracy', '90%+', 'on false-positive validation'],
        ['Productivity', '+20–30%', 'programme level'],
        ['Investigator role', 'Re-shaped', 'judgment, not gathering'],
      ],
      tags: ['Agentic AI', 'Human-in-loop', 'Regulator-compatible'],
    },
    {
      id: 'nps', num: '03',
      client: 'Banking client', sector: 'BFSI',
      period: 'Concentrix · 2022–present',
      title: 'NPS from +10 to +34. GenAI on customer feedback.',
      metric: '+10→+34', metricLabel: 'NPS movement',
      pitch: 'Customer feedback had been read monthly and consolidated into reports. By the time a pattern surfaced, the quarter was over. Built a feedback-tagging model on BI dashboards so themes surfaced weekly, then daily.',
      body: [
        ['Problem', 'Reading all customer comments as they arrived and updating analysis in real time was not happening. Quick decisions were not possible. Consolidating and observing patterns took months. Business heads and CX leads were waiting on the monthly NPS review.'],
        ['Approach', 'Feedback-tagging models plus BI dashboards for business heads and CX leads. GenAI knowledge bots for agent-side support. Accent-neutralisation AI (Sanas) for the voice team. Grounding the knowledge layer was the hard part, not the model.'],
        ['Outcome', 'NPS from +10 to +34. AHT improved roughly 15% alongside. Business heads stopped waiting for monthly reviews and started acting on patterns as they emerged. CX leads could ask questions directly of their customer feedback data and get answers in minutes instead of weeks.'],
      ],
      numbers: [
        ['NPS', '+10 → +34', '24-point lift'],
        ['AHT', '~−15%', 'alongside NPS gain'],
        ['Insight latency', 'Monthly → daily', 'feedback to action'],
      ],
      tags: ['GenAI', 'CX analytics', 'Voice AI'],
    },
    {
      id: 'coe', num: '04',
      client: 'Mortgage client + BFSI portfolio', sector: 'BFSI',
      period: 'Infosys BPM · 2017–2020',
      title: 'Automation CoE. $1M+ annualised savings.',
      metric: '$1M+', metricLabel: 'annual run-rate',
      pitch: 'Built the Automation CoE from the ground up. Governance model, delivery framework, prioritisation cadence, reusability library. Grew the pipeline to 125+ automations.',
      body: [
        ['Problem', 'Automation opportunities were being identified one-at-a-time by the delivery team, without a governance layer or reuse framework. Every engagement started from zero.'],
        ['Approach', 'Brought in external learnings and market insights. Built a structured CoE with proper guidelines, executable autonomy, and KPIs that measured outcome not activity. Made reusability non-negotiable. Everyone in the CoE had a voice in prioritisation.'],
        ['Outcome', '$1M+ annual savings. 80+ FTE benefits. 125+ automation pipeline. Won Infosys BPM PACE 1st Runner-Up (Nov 2019) for identifying and implementing an RPA opportunity that delivered benefits above par and was key to winning new business from the client.'],
      ],
      numbers: [
        ['Annual savings', '$1M+', 'run rate'],
        ['FTE benefit', '80+', 'across portfolio'],
        ['Pipeline', '125+', 'automations governed'],
        ['Recognition', 'PACE 1st RU', 'Nov 2019'],
      ],
      tags: ['CoE design', 'Governance', 'PACE award'],
    },
    {
      id: 'ap', num: '05',
      client: 'Government of Andhra Pradesh', sector: 'Public sector',
      period: 'Presales solution design',
      title: 'Grievance-to-Governance system design.',
      metric: '3-layer', metricLabel: 'system architecture',
      pitch: 'Citizen grievances were arriving through multiple channels. Case allocation was manual. Resolution marking was unreliable. Designed a three-layer system the government could actually operate.',
      body: [
        ['Problem', 'Multi-format grievance intake. No auto-allocation. Cases marked resolved without proof. No policy-level view on what was failing systemically.'],
        ['Approach', 'Designed three layers. Layer 1: citizen-facing issue tracker. Layer 2: officer and team resolution view with evidence capture. Layer 3: policy-maker dashboard to identify bottlenecks and root causes. Rules-based SLA display across layers. Auto-allocation by category.'],
        ['Outcome', 'Presales solution design and proposal submitted. Same design principles now inform the Upstream Diagnostic tool I am shipping on this site.'],
      ],
      numbers: [
        ['Architecture', '3-layer', 'citizen · officer · policy'],
        ['Intake formats', 'Multi-channel', 'unified into one queue'],
        ['Status', 'Submitted', 'design + proposal'],
      ],
      tags: ['Solution design', 'Presales', 'Public-sector'],
    },
    {
      id: 'shared', num: '06',
      client: 'West Indies conglomerate', sector: 'Shared services',
      period: 'Infosys BPM · 2017–2020',
      title: 'Seven-country shared services design.',
      metric: '~30%', metricLabel: 'efficiency gains',
      pitch: 'Seven operating companies across the Caribbean, each running the same work its own way. Led onsite discovery. Standardised the 70–80% of workflow that was common. Country-specific rules handled via HITL.',
      body: [
        ['Problem', 'Seven country operations, fragmented workflow standards, no shared capability map. Duplicate effort across countries. No combined scale for procurement or automation.'],
        ['Approach', 'Analysed workflows across countries. Identified 70–80% overlap in activities. Set up a central team with standardised workflows. Combined volumes made automation economically viable for the first time. Country-specific rules handled via human validation, not re-coding.'],
        ['Outcome', '>50% automation potential identified. ~30% efficiency gains. Procurement bargaining improved at combined scale. Template now informs how I think about cross-geography AI rollouts.'],
      ],
      numbers: [
        ['Country overlap', '70–80%', 'workflow common across seven'],
        ['Efficiency', '~+30%', 'after standardisation'],
        ['Automation potential', '>50%', 'identified, sequenced'],
      ],
      tags: ['Shared services', 'Multi-country', 'HITL'],
    },
    {
      id: 'telstra', num: '07',
      client: 'Telstra', sector: 'Telecom',
      period: 'Telstra · 2020–2022',
      title: 'Renewals transformation. 3% to 38% automation maturity.',
      metric: '$1.5M+', metricLabel: 'annual impact',
      pitch: 'Advisory, solution design, and delivery of the renewals transformation across India and Australia. SAP Signavio for process mining. RPA for execution.',
      body: [
        ['Problem', 'Renewals process maturity was low. SLA breaches frequent. Renewal rates stagnant. No view into which sub-workflows were structurally broken versus under-resourced.'],
        ['Approach', 'Process-mining diagnostics to find the real bottlenecks. Standardised workflow. RPA roadmap sequenced by ROI. Post-implementation impact assessments closed the loop.'],
        ['Outcome', 'Automation maturity from 3% to 38%. Renewal rates up 45%. $1.5M+ annual impact. 70% fewer SLA breaches.'],
      ],
      numbers: [
        ['Automation maturity', '3% → 38%', 'end-to-end programme'],
        ['Renewal rates', '+45%', 'India + Australia'],
        ['Annual impact', '$1.5M+', 'measured outcome'],
        ['SLA breaches', '−70%', 'post-roadmap'],
      ],
      tags: ['Process mining', 'SAP Signavio', 'RPA'],
    },
  ];

  return (
    <main className="mx-auto max-w-[1320px] px-6 md:px-10 pt-10 md:pt-16">
      <div className="rule-bottom pb-4 flex items-center justify-between smallcaps text-muted">
        <span>Case studies</span>
        <span className="tabular">Seven engagements · 2017–present</span>
      </div>

      <Reveal className="mt-10 md:mt-16 grid md:grid-cols-12 gap-6 md:gap-10 items-end">
        <div className="md:col-span-9">
          <div className="smallcaps text-sienna">Engagements</div>
          <h1 className="mt-4 font-display font-medium tracking-tight text-balance leading-[0.98]
                         text-[48px] md:text-[92px]">
            Seven engagements, written in plain detail.
          </h1>
        </div>
        <div className="md:col-span-3">
          <p className="text-ink2 leading-relaxed">
            Each row expands into problem, approach, and outcome. Client names disclosed only where already public. References can be shared through the <button onClick={() => go('contact')} className="link-underline text-sienna">contact page</button> when the conversation calls for them.
          </p>
        </div>
      </Reveal>

      <div className="mt-14 rule-top">
        {cases.map((c, i) => {
          const isOpen = open === c.id;
          return (
            <div key={c.id} className="rule-bottom">
              <button
                onClick={() => setOpen(isOpen ? null : c.id)}
                className="w-full text-left grid md:grid-cols-12 gap-4 md:gap-10 py-8 md:py-10 items-baseline group">
                <div className="md:col-span-1">
                  <span className="font-display text-sienna tabular text-xl">{c.num}</span>
                </div>
                <div className="md:col-span-5">
                  <div className="smallcaps text-muted">{c.sector} · {c.period}</div>
                  <h3 className="mt-2 font-display text-[28px] md:text-[36px] leading-[1.1] tracking-tight group-hover:text-sienna transition-colors">
                    {c.title}
                  </h3>
                </div>
                <div className="md:col-span-4">
                  <p className="text-ink2 leading-relaxed">{c.pitch}</p>
                </div>
                <div className="md:col-span-2 flex md:justify-end items-baseline gap-3">
                  <div className="text-right">
                    <div className="font-display tabular text-sienna text-[32px] md:text-[40px] leading-none">{c.metric}</div>
                    <div className="smallcaps text-muted mt-1">{c.metricLabel}</div>
                  </div>
                  <span className={`text-sienna text-2xl leading-none transition-transform ${isOpen ? 'rotate-45' : ''}`}>+</span>
                </div>
              </button>

              {isOpen && (
                <div className="pb-12 grid md:grid-cols-12 gap-6 md:gap-10">
                  <aside className="md:col-start-2 md:col-span-3 rule-top md:rule-top md:border-t md:hairline pt-5 md:pt-6 md:bg-paper2/40 md:p-6">
                    <div className="smallcaps text-sienna">By the numbers</div>
                    <div className="mt-4 space-y-4">
                      {(c.numbers || []).map(([k, v, note]) => (
                        <div key={k}>
                          <div className="smallcaps text-muted">{k}</div>
                          <div className="font-display tabular text-sienna text-2xl md:text-[28px] leading-none mt-1">{v}</div>
                          {note && <div className="text-xs text-muted mt-1">{note}</div>}
                        </div>
                      ))}
                    </div>
                  </aside>
                  <div className="md:col-span-7 grid md:grid-cols-1 gap-6 md:gap-8">
                    {c.body.map(([h, b]) => (
                      <div key={h}>
                        <div className="smallcaps text-sienna">{h}</div>
                        <p className="mt-3 text-ink2 leading-relaxed">{b}</p>
                      </div>
                    ))}
                  </div>
                  <div className="md:col-start-2 md:col-span-10 mt-6 flex flex-wrap gap-x-6 gap-y-2 smallcaps text-muted">
                    {c.tags.map(t => <span key={t}>· {t}</span>)}
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="mt-14 rule-top pt-10 grid md:grid-cols-12 gap-8 pb-8">
        <div className="md:col-span-3">
          <div className="smallcaps text-muted">Note on references</div>
        </div>
        <div className="md:col-span-9">
          <p className="font-display text-xl leading-relaxed text-ink2 max-w-[52ch]">
            Every engagement above had a named sponsor. References are available through the contact page when the conversation calls for them.
          </p>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { Cases });