// POV — essay long-read, her voice.
function POV() {
  const { go } = useRoute();
  const [progress, setProgress] = React.useState(0);
  const [activeSection, setActiveSection] = React.useState('i');
  const articleRef = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      const el = articleRef.current;
      if (!el) return;
      const top = el.getBoundingClientRect().top;
      const height = el.scrollHeight - window.innerHeight;
      const scrolled = Math.min(1, Math.max(0, (-top) / height));
      setProgress(scrolled);

      const sections = ['i', 'ii', 'iii', 'iv', 'v'];
      for (let i = sections.length - 1; i >= 0; i--) {
        const s = document.getElementById('sec-' + sections[i]);
        if (s && s.getBoundingClientRect().top < 120) { setActiveSection(sections[i]); break; }
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const sections = [
    { id: 'i',   numeral: 'I',   title: 'Where the market is today' },
    { id: 'ii',  numeral: 'II',  title: 'Consolidation has already started' },
    { id: 'iii', numeral: 'III', title: 'Three moats, built in parallel' },
    { id: 'iv',  numeral: 'IV',  title: 'How fast each sector is moving' },
    { id: 'v',   numeral: 'V',   title: 'What to do in the next twelve months' },
  ];

  return (
    <main ref={articleRef} className="mx-auto max-w-[1320px] px-6 md:px-10 pt-10 md:pt-16 pb-20">
      <div className="rule-bottom pb-4 flex items-center justify-between smallcaps text-muted">
        <span>POV</span>
        <span className="hidden md:inline">Why 2026–2028 is the defining window for CX services incumbents</span>
        <span className="tabular">April 2026</span>
      </div>

      <header className="mt-10 md:mt-16 grid md:grid-cols-12 gap-6 md:gap-10">
        <div className="md:col-span-2">
          <div className="smallcaps text-muted">Essay</div>
        </div>
        <div className="md:col-span-10">
          <h1 className="font-display font-medium tracking-tight text-balance leading-[0.98]
                         text-[48px] sm:text-[64px] md:text-[84px] lg:text-[96px]">
            Why 2026–2028 is the defining window for CX services incumbents.
          </h1>
          <p className="mt-6 font-display text-[22px] md:text-[26px] leading-[1.35] max-w-[44ch] text-ink2">
            A strategic view on BPO-to-intelligence transition, vendor consolidation, and the durable moats being built now.
          </p>
          <div className="mt-8 smallcaps text-muted">
            By <span className="text-ink">Prathyusha Vemula</span> · April 2026
          </div>
        </div>
      </header>

      <div className="mt-16 grid md:grid-cols-12 gap-6 md:gap-10">
        <aside className="md:col-span-3 order-2 md:order-1">
          <div className="md:sticky md:top-28">
            <div className="smallcaps text-muted">Contents</div>
            <ol className="mt-4 space-y-3">
              {sections.map(s => (
                <li key={s.id}>
                  <a href={`#sec-${s.id}`} className={`flex items-baseline gap-3 transition-colors ${activeSection === s.id ? 'text-sienna' : 'text-ink2 hover:text-ink'}`}>
                    <span className="font-display italic text-sm w-6 text-right tabular">{s.numeral}</span>
                    <span className="leading-tight">{s.title}</span>
                  </a>
                </li>
              ))}
            </ol>
            <div className="mt-10 rule-top pt-5">
              <div className="smallcaps text-muted">Progress</div>
              <div className="mt-3 h-[2px] bg-ink/10 relative">
                <div className="absolute left-0 top-0 h-full bg-sienna transition-all duration-200" style={{ width: `${Math.round(progress * 100)}%` }} />
              </div>
              <div className="mt-2 tabular text-xs text-muted">{Math.round(progress * 100)}%</div>
            </div>
            <div className="mt-10 rule-top pt-5">
              <div className="smallcaps text-muted">Next</div>
              <button onClick={() => go('cases')} className="mt-3 block font-display text-xl leading-tight hover:text-sienna text-left">
                The work: seven engagements →
              </button>
            </div>
          </div>
        </aside>

        <article className="md:col-span-9 order-1 md:order-2">
          <div className="measure font-display text-[20px] md:text-[21px] leading-[1.65] text-ink">
            {/* I */}
            <h2 id="sec-i" className="scroll-mt-24 mt-0">
              <span className="block smallcaps text-sienna mb-2">I · Where the market is today</span>
              <span className="font-display text-[34px] md:text-[44px] leading-[1.05] tracking-tight">Three moves in the last twelve months redrew the landscape.</span>
            </h2>
            <p className="dropcap mt-8">
              Genpact launched AP Suite in June 2025. Four agentic modules covering end-to-end accounts payable, productised on Azure. Early deployments report up to 90% early-discount capture. One banking case study reported 30% revenue-leakage reduction and projected 40% cost optimisation. This is the first unambiguous move from services firm to productised domain agent.
            </p>
            <p>
              Teleperformance shipped TP.ai FAB the same month. A proprietary AI orchestration platform anchoring the Future Forward strategy. TP also invested in Sanas for speech, acquired Agents Only for crowdsourced training data, and partnered with Carnegie Mellon on AI research.
            </p>
            <p>
              Concentrix rolled out iX Hero in May 2025 and updated it in July. Enterprise agentic platform embedding real-time intelligence into advisor workflows. Production studies show 22% AHT reduction, 20% faster search, 13.5% CSAT lift. The Harmony and Clarity features report 33.6% communication score lift and 22.3% NPS improvement.
            </p>

            <PullQuote>
              In parallel, the CCaaS layer started to consolidate. NICE acquired Cognigy for $955 million. Salesforce and ServiceNow jointly invested $1.5 billion in Genesys. The value has migrated to AI orchestration plus CRM. Vendors who do not own one of those two layers are buying access.
            </PullQuote>

            <p>
              And banks started building in-house. Revolut rolled out AIR to 13 million UK customers on 9 April 2026, replacing menu navigation with a conversational layer. HSBC partnered with Mistral. NatWest with OpenAI. Barclays with Microsoft. Starling with Gemini. The common pattern: bank-owned AI unit plus one strategic model partnership. BPOs are being excluded from this work.
            </p>

            {/* II */}
            <h2 id="sec-ii" className="scroll-mt-24 mt-16">
              <span className="block smallcaps text-sienna mb-2">II · Consolidation has already started</span>
              <span className="font-display text-[34px] md:text-[44px] leading-[1.05] tracking-tight">Three to four credible CCaaS players. Five Tier-1 BPOs. One or two of them will not be standalone by 2028.</span>
            </h2>
            <p className="mt-6">
              Enterprise buyers are collapsing 30–50 vendor relationships into 5–7 strategic partners. One consulting-led hybrid for end-to-end transformation. One IT-services anchor for core systems and AI implementation. One scaled CX partner for customer-facing operations. One domain-process specialist for regulated workflows. One platform provider, usually Salesforce or a hyperscaler.
            </p>
            <p>
              The plausible 2026–2028 acquirer buckets are clear. Tech-heavy services firms (Kyndryl, NTT, Capgemini, DXC) pushing their AI platforms through scaled distribution. Hyperscaler services arms as investors and partners more than direct acquirers. Private-equity roll-up as the most probable path. AI-natives with workforce ambition as an outside possibility.
            </p>
            <p>
              The track record of BPO incumbents acquiring AI-native firms is poor. Integration into utilisation-driven P&amp;Ls collapses engineering velocity. Legal and compliance friction slows shipping. Founder and talent exits begin 18–24 months after close. The model that has worked is Red Hat inside IBM: arm's-length structure, preserved compensation, preserved governance, distribution access without operational absorption.
            </p>

            <FigureTable />

            {/* III */}
            <h2 id="sec-iii" className="scroll-mt-24 mt-16">
              <span className="block smallcaps text-sienna mb-2">III · Three moats, built in parallel</span>
              <span className="font-display text-[34px] md:text-[44px] leading-[1.05] tracking-tight">Augmentation revenue buys three to four years. The durable moats have to be built during those years, not after.</span>
            </h2>
            <h3 className="font-display text-2xl mt-8 italic text-sienna">Vertical IP</h3>
            <p className="mt-3">
              Pre-trained domain agents for specific industry-function combinations. Healthcare claims adjudication. Fintech KYC. Telco billing dispute resolution. Insurance FNOL. Genpact AP Suite is the template worth studying. The differentiator is proprietary process data, workflow design, and integration connectors, all slow and expensive to replicate. That is the moat.
            </p>
            <h3 className="font-display text-2xl mt-8 italic text-sienna">Outcome-based pricing</h3>
            <p className="mt-3">
              Dollars per resolved ticket. Dollars per claim processed. Percentage of recovered revenue. Pricing this way forces the provider to invest in the platform efficiencies that agentic AI enables. The pricing model is the easy part. The measurement discipline behind it is where most providers fall over: real-time outcome attribution, SLA engineering, CFO-defensible reporting. Organisationally much harder than the technology.
            </p>
            <h3 className="font-display text-2xl mt-8 italic text-sienna">Upstream consulting</h3>
            <p className="mt-3">
              The transformation design conversation happens at strategy houses and tier-1 consultancies. BPOs arrive downstream to execute. Margin defence in 2028 requires being in the design conversation earlier. The test is whether consulting talent is protected from utilisation-driven incentives. Senior consulting economics do not work under BPO operating models unless leadership ring-fences the P&amp;L deliberately.
            </p>

            <PullQuote secondary>
              Incumbents that treat 2026–2028 as a run-rate extension of the BPO business will find themselves replaced. From below by AI-native providers. From above by CRM and hyperscaler-owned workflows. From the side by in-house banking and insurance AI units.
            </PullQuote>

            {/* IV */}
            <h2 id="sec-iv" className="scroll-mt-24 mt-16">
              <span className="block smallcaps text-sienna mb-2">IV · How fast each sector is moving</span>
              <span className="font-display text-[34px] md:text-[44px] leading-[1.05] tracking-tight">Adoption is not uniform. New-age banks are fifteen points ahead of heritage banks. Insurance moved 325% year on year.</span>
            </h2>
            <p className="mt-6">
              New-age banks like Revolut, Starling, Monzo, Nubank run 15–20 points ahead of heritage banks in production AI deployment. Regulatory posture and core-system modernisation explain most of that gap. Insurance moved from 8% full AI to 34% in a single year, driven by underwriting and claims workflows. Telecom and retail CPG have the highest agentic adoption, at 48% and 47% respectively, because the cost of a customer conversation is high and volume is enormous.
            </p>
            <p>
              Fast movers and early adopters are building in-house or buying from AI-native providers, bypassing traditional BPO. Mainstream and laggards still need handholding. That is where CX services firms have a three-to-five year revenue window. Only if they bring differentiated vertical IP. The old line "we have ten thousand trained agents" does not work for a mainstream insurance CIO who is buying an AI-first claims workflow.
            </p>

            {/* V */}
            <h2 id="sec-v" className="scroll-mt-24 mt-16">
              <span className="block smallcaps text-sienna mb-2">V · What to do in the next twelve months</span>
              <span className="font-display text-[34px] md:text-[44px] leading-[1.05] tracking-tight">A practical list for incumbents who want to be on the right side of 2028.</span>
            </h2>
            <ol className="mt-8 space-y-6 list-none">
              {[
                ['Productise at least two vertical agents.', 'Financial crime and claims adjudication are obvious starting points. Genpact AP Suite is the template worth studying. A product owner is the right role, not a delivery lead.'],
                ['Convert 10–15% of revenue to outcome-based terms.', 'Start with friendly accounts. Pilot a gain-share variant on a slice of an existing FTE-priced contract. The commercial conversation teaches you more than the technical one ever will.'],
                ['Ring-fence the consulting assets.', 'If you have acquired a consulting firm, protect it from utilisation targets. Separate P&L. Different KPIs. Different compensation. Otherwise the economics collapse inside eighteen months.'],
                ['Publish a workforce transition plan.', 'Thirty to forty percent of current Tier-1 and Tier-2 roles will change shape by 2029. Internal morale and external talent attraction both depend on this being stated clearly rather than hidden.'],
                ['Pick one flagship workflow per vertical.', 'Mortgage. Claims. FinCrime. Prior-auth. One workflow where a small team can reach production in a quarter. One, not two.'],
              ].map(([h, b], i) => (
                <li key={i} className="grid grid-cols-[auto_1fr] gap-5">
                  <span className="font-display italic text-sienna text-xl tabular">{String(i+1).padStart(2, '0')}</span>
                  <div>
                    <div className="font-display text-xl">{h}</div>
                    <p className="mt-1 text-ink2">{b}</p>
                  </div>
                </li>
              ))}
            </ol>

            <hr className="mt-16 hairline" />

            <p className="mt-10 font-display italic text-ink2 text-lg text-center ornament">❧</p>

            <p className="mt-10 text-base text-muted">
              This essay is v1 and will be revised as evidence accumulates. Related reading on this site: the <button onClick={() => go('cases')} className="link-underline text-ink">case studies</button> that seed the argument, the <button onClick={() => go('tools')} className="link-underline text-ink">working tools</button> that operationalise it, and the sector-specific shape on the <button onClick={() => go('industries')} className="link-underline text-ink">industries page</button>. Counter-arguments to <a className="link-underline text-ink" href="mailto:vemula.prathyusha@gmail.com">vemula.prathyusha@gmail.com</a>.
            </p>
          </div>

          <div className="mt-16 rule-top pt-10">
            <div className="smallcaps text-muted">Counter-arguments welcome</div>
            <p className="mt-3 font-display text-xl leading-relaxed text-ink2 max-w-[56ch]">
              The v1 of this essay is a working document. If the argument is wrong somewhere, the best place to say so is by email. The next revision will cite the disagreements that landed.
            </p>
          </div>
        </article>
      </div>
    </main>
  );
}

function PullQuote({ children, secondary }) {
  return (
    <blockquote className={`my-10 md:my-14 border-l-2 pl-6 md:pl-10 ${secondary ? 'border-ink/20' : 'border-sienna'}`}>
      <p className="font-display italic text-[24px] md:text-[30px] leading-[1.25] tracking-tight text-ink text-balance">
        {children}
      </p>
    </blockquote>
  );
}

function FigureTable() {
  return (
    <figure className="my-12">
      <div className="smallcaps text-muted mb-3">Figure · Sector adoption patterns, 2026</div>
      <div className="rule-top rule-bottom">
        <table className="w-full text-base">
          <thead>
            <tr className="border-b hairline">
              <th className="text-left py-3 pr-6 smallcaps text-muted w-2/5">Sector</th>
              <th className="text-left py-3 pr-6 smallcaps text-muted">Early adopters</th>
              <th className="text-left py-3 pr-6 smallcaps text-muted">Fast movers</th>
              <th className="text-left py-3 smallcaps text-muted">Laggards</th>
            </tr>
          </thead>
          <tbody className="font-sans">
            {[
              ['Banking & Fintech (new-age)', '~25%', '~35%', '~10%'],
              ['Banking (incumbent, >30 yrs)', '~10%', '~25%', '~20%'],
              ['Insurance', '~15%', '~30%', '~15%'],
              ['Retail / FMCG (digital-native)', '~25%', '~40%', '~10%'],
              ['Retail / FMCG (heritage)', '~8%', '~22%', '~25%'],
              ['Telecom', '~20%', '~35%', '~10%'],
              ['Healthcare / Lifesciences', '~12%', '~28%', '~20%'],
            ].map((row, i) => (
              <tr key={i} className="border-b hairline last:border-0">
                {row.map((c, j) => (
                  <td key={j} className={`py-3 pr-6 ${j === 0 ? 'text-ink2' : 'tabular text-ink2'}`}>
                    {c}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <figcaption className="mt-3 text-sm text-muted italic">
        Synthesised from McKinsey, Deloitte, PwC, and sector-specific survey data, 2025–2026.
      </figcaption>
    </figure>
  );
}

Object.assign(window, { POV, PullQuote, FigureTable });