// 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.'],
      ],
      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 program level. On the flagship workflow: 60% AHT reduction, 90%+ AI accuracy on false-positive validation. Agent feedback loops into model retraining. Human role elevated from data gathering to judgment.'],
      ],
      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.'],
      ],
      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.'],
      ],
      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.'],
      ],
      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.'],
      ],
      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.'],
      ],
      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">The work</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 italic 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={`ornament text-sienna transition-transform ${isOpen ? 'rotate-45' : ''}`}>+</span>
                </div>
              </button>

              {isOpen && (
                <div className="pb-12 grid md:grid-cols-12 gap-6 md:gap-10">
                  <div className="md:col-start-2 md:col-span-10 grid md:grid-cols-3 gap-8 md:gap-10">
                    {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 });