// Regulated industries — anchor nav + sector deep-dives. Honest about transfer vs. proven.
function Industries() {
  const { anchor } = useRoute();
  const [active, setActive] = React.useState('bfsi');

  const sectors = [
    {
      id: 'bfsi', name: 'BFSI', numeral: 'I', tag: 'Flagship',
      lede: 'Where most of the delivery work has happened. Mortgage servicing, FinCrime investigation, banking NPS, and voice CX. Three of those engagements are written up in full on the case studies page.',
      context: 'Model risk review is the bottleneck, and it is rarely the model. The firms that succeed in BFSI own the evaluation harness, speak fluently with second-line risk, and treat the regulator as a named stakeholder rather than a check at the end. Anything else is renting capacity inside someone else\'s compliance perimeter.',
      proof: [
        ['PCN Mortgage Transformation', '25 → 4 day TAT', 'Infosys BPM, US mortgage client'],
        ['FinCrime Agentic AI', '60% AHT reduction', 'Concentrix, Tier-1 BFSI'],
        ['NPS GenAI', '+10 to +34', 'Concentrix, banking client'],
      ],
      moat: ['Process graphs for document-heavy judgment workflows', 'Outcome-priced delivery with agreed SLAs', 'Diagnostic-first entry through presales'],
    },
    {
      id: 'insurance', name: 'Insurance', numeral: 'II', tag: 'Pattern transfer',
      lede: 'No production work in insurance yet. The workflow shape is close enough to FinCrime that the method applies. Claims triage is almost a twin of case investigation.',
      context: 'Underwriting remains largely off-limits for production agents, and for good reason. Claims, subrogation, and fraud narratives are where the operating leverage lives. The vocabulary of actuarial evaluation is unfamiliar to most AI firms, and that unfamiliarity cuts both ways — it is an opening, and it is why the work is not trivial.',
      proof: [
        ['Claims triage pattern', 'Maps to FinCrime case flow', 'Method transfer, not deployment'],
        ['Subrogation narrative workflow', 'Maps to PCN document chain', 'Method transfer, not deployment'],
      ],
      moat: ['Workflow-design transfer from BFSI', 'Actuarial evaluation harness (scoped)', 'Governance framework in draft'],
    },
    {
      id: 'healthcare', name: 'Healthcare', numeral: 'III', tag: 'Pattern transfer',
      lede: 'Same workflow shape as BFSI and insurance: document-heavy, judgment-based, multi-system. No production healthcare delivery yet. The method transfer is the claim, and it is a limited one.',
      context: 'Healthcare AI has spent a decade over-promising at the clinical edge. Prior-authorisation, claims adjudication, and coding QA are where measurable dollars live. A regulated-industry operator who can handle audit trails and model risk has a natural right to play here — but production experience in the sector still has to be earned.',
      proof: [
        ['Prior-auth workflow shape', 'Maps to mortgage PCN', 'Method transfer'],
        ['Claims triage shape', 'Maps to FinCrime case investigation', 'Method transfer'],
      ],
      moat: ['HIPAA-native architecture (scoped, not deployed)', 'Evaluation pipeline for regulated NLP', 'Clinical SME bench to be built'],
    },
    {
      id: 'telco', name: 'Telco', numeral: 'IV', tag: 'Volume lab',
      lede: 'Renewals transformation at Telstra across India and Australia. Process-mining diagnostics. The telco engagement was where RPA plus process discipline got tested at volume.',
      context: 'Telco and large utilities are among the few sectors where a single contract exposes you to several million annual contacts. The compliance overhead is lower than BFSI, but the multilingual and public-sector learning curve is substantial, and valuable once it is done.',
      proof: [
        ['Telstra Renewals Transformation', '3% → 38% automation maturity', '$1.5M+ annual impact'],
        ['AP State Grievance System', 'Three-layer design', 'Presales solution design'],
      ],
      moat: ['Process-mining fluency with SAP Signavio', 'Public-sector governance experience', 'Multi-language operation awareness'],
    },
  ];

  React.useEffect(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: '-40% 0px -50% 0px' });
    sectors.forEach(s => { const el = document.getElementById(s.id); if (el) io.observe(el); });
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (anchor) setTimeout(() => document.getElementById(anchor)?.scrollIntoView({ behavior: 'smooth', block: 'start' }), 100);
  }, [anchor]);

  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>Industries</span>
        <span className="tabular">Four sectors · one framework</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">Regulated industries</div>
          <h1 className="mt-4 font-display font-medium tracking-tight text-balance leading-[0.98]
                         text-[48px] md:text-[92px]">
            Four sectors worth reading carefully, because the shape of the work is the same.
          </h1>
        </div>
        <div className="md:col-span-3">
          <p className="text-ink2 leading-relaxed">
            The sector pages distinguish between live delivery and pattern-transfer. Live means an engagement shipped. Pattern-transfer means the workflow shape is close enough that the method applies, though I have not delivered in that sector yet.
          </p>
        </div>
      </Reveal>

      <div className="mt-14 grid md:grid-cols-12 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">Jump to</div>
            <ol className="mt-4 space-y-3">
              {sectors.map(s => (
                <li key={s.id}>
                  <a href={`#${s.id}`} className={`flex items-baseline gap-3 transition-colors ${active === s.id ? 'text-sienna' : 'text-ink2 hover:text-ink'}`}>
                    <span className="font-display italic text-sm w-8 tabular">{s.numeral}</span>
                    <span className="font-display text-lg">{s.name}</span>
                  </a>
                </li>
              ))}
            </ol>
            <div className="mt-10 rule-top pt-5">
              <div className="smallcaps text-muted">Framework</div>
              <p className="mt-3 text-sm text-ink2 leading-relaxed">
                Vertical IP. Outcome pricing. Upstream consulting. The specifics change by sector. The three moats do not.
              </p>
            </div>
          </div>
        </aside>

        <div className="md:col-span-9 order-1 md:order-2">
          {sectors.map((s, i) => (
            <section key={s.id} id={s.id} className={`scroll-mt-28 ${i > 0 ? 'mt-24 rule-top pt-16' : ''}`}>
              <Reveal>
                <div className="flex items-baseline justify-between">
                  <div className="flex items-baseline gap-4">
                    <span className="font-display italic text-sienna text-2xl tabular">{s.numeral}.</span>
                    <span className="smallcaps text-muted">{s.tag}</span>
                  </div>
                  <span className="smallcaps text-muted">{String(i+1).padStart(2,'0')} / {String(sectors.length).padStart(2,'0')}</span>
                </div>
                <h2 className="mt-4 font-display text-[52px] md:text-[80px] leading-[0.98] tracking-tight">{s.name}</h2>
                <p className="mt-5 font-display text-[22px] md:text-[24px] leading-[1.3] max-w-[44ch] text-ink2">{s.lede}</p>
              </Reveal>

              <Reveal className="mt-10 grid md:grid-cols-12 gap-6 md:gap-10" delay={120}>
                <div className="md:col-span-5">
                  <div className="smallcaps text-muted">Market context</div>
                  <p className="mt-3 text-ink2 leading-relaxed measure">{s.context}</p>
                </div>
                <div className="md:col-span-7">
                  <div className="smallcaps text-muted">Proof and pattern</div>
                  <div className="mt-3 rule-top">
                    {s.proof.map((p, j) => (
                      <div key={j} className="grid grid-cols-[1fr_auto] items-baseline gap-6 py-5 rule-bottom">
                        <div>
                          <div className="font-display text-xl">{p[0]}</div>
                          <div className="text-sm text-muted mt-1">{p[2]}</div>
                        </div>
                        <div className="font-display tabular text-sienna text-2xl md:text-3xl text-right">{p[1]}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>

              <Reveal className="mt-10" delay={180}>
                <div className="smallcaps text-muted">Moat in this sector</div>
                <ul className="mt-4 grid md:grid-cols-3 gap-px bg-ink/10">
                  {s.moat.map((m, j) => (
                    <li key={j} className="bg-paper p-5">
                      <span className="font-display italic text-sienna text-sm">{['Vertical IP', 'Outcome pricing', 'Upstream consulting'][j]}</span>
                      <div className="mt-2 leading-relaxed text-ink2">{m}</div>
                    </li>
                  ))}
                </ul>
              </Reveal>
            </section>
          ))}
        </div>
      </div>

      <div className="mt-20 rule-top pt-10 grid md:grid-cols-12 gap-8 pb-12">
        <div className="md:col-span-3">
          <div className="smallcaps text-muted">A note on transfer</div>
        </div>
        <div className="md:col-span-9">
          <p className="font-display text-xl leading-relaxed text-ink2 max-w-[56ch]">
            Pattern transfer happens fast when the workflow shape is the same. A claims-adjudication workflow and a FinCrime case investigation have more in common than a claims-adjudication workflow and a healthcare clinical summary, even though the first two sit in different sectors and the last two sit in the same one.
          </p>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { Industries });
