// Tools — proper context before each tool. No "quiz" framing.
function Tools() {
  const { go } = useRoute();

  const tools = [
    {
      id: 'readiness',
      num: '01',
      title: 'F500 AI Readiness Index',
      status: 'Live',
      badge: 'Shipping · open now',
      whatItIs: 'A sector-benchmarked scorecard across six practitioner dimensions.',
      whyItExists: 'Most "AI maturity" models measure the wrong things — model count, pilot count, spend — and skip the ones that decide whether a programme survives its first serious audit. This index scores dimensions that show up in regulated delivery: vertical IP depth, model-risk readiness, outcome-pricing appetite, vendor density, upstream access, and evaluation maturity.',
      howToUse: 'Useful before an RFP is drafted to see where your organisation actually sits relative to sector peers, or as a second opinion after a partner selection. Scoring is comparative, not pass/fail — the point is to surface the gaps that determine which partner types will work.',
      drawnFrom: 'Built from twelve years of BFSI and Telecom delivery, calibrated against public filings and peer benchmarks for the first tranche of firms.',
      component: <ReadinessIndex />,
    },
    {
      id: 'diagnostic',
      num: '02',
      title: 'Upstream Diagnostic',
      status: 'Week 02',
      badge: 'Next release · in progress',
      whatItIs: 'A structured intake workbook that produces a board-ready brief on where AI realistically fits in the next twelve months.',
      whyItExists: 'Most AI readiness check-ins are ten questions long and pretend an enterprise workflow can be summarised in a quiz. It cannot. The diagnostic is closer to a short workbook — around 40–50 prompts split across workflow mapping, data and integration readiness, commercial model fit, governance maturity, and change-readiness. It is designed to be worked in three to four sittings by the person who actually runs the operation, not a vendor filling in a form on their behalf.',
      howToUse: 'Fill it out over a week. The tool does not tell you what to build — it helps you and your leadership team agree on what is worth building, what is not yet ready, and which workflows need redesign before AI belongs anywhere near them. Outputs: a two-page brief, a workflow candidate list with risk flags, and a recommended sequence.',
      drawnFrom: 'Based on the 90-day diagnostic method used on the AP State Government Grievance-to-Governance engagement and multiple BFSI transformation programmes. Simplified for self-serve use; the full version is always run live with a senior team.',
    },
    {
      id: 'consolidation',
      num: '03',
      title: 'Vendor Consolidation Map',
      status: 'Week 04',
      badge: 'On the bench',
      whatItIs: 'A stack map that takes a current AI and automation vendor list and returns a realistic target state with one named owner per capability.',
      whyItExists: 'A typical mid-to-large bank or insurer runs 30–50 vendors across overlapping AI, automation, observability, and workflow capabilities. Each relationship carries a contract, governance cadence, SLA, and invoice. The cost is not only the spend — it is the coordination load, the inability to deploy an agentic layer coherently, and the procurement complexity that makes outcome contracts impractical. The map helps a CIO or head of procurement see where overlaps have accumulated and which consolidations carry the most leverage.',
      howToUse: 'List your current vendors against capabilities. The tool flags overlaps, scores consolidation impact, and proposes a target state with three or more fewer vendors. Output includes the conversation each consolidation will trigger and the risk profile of each move — not just a matrix.',
      drawnFrom: 'Derived from the seven-country West Indies conglomerate shared-services engagement at Infosys BPM, where 70–80% workflow overlap across countries enabled the first consolidation I ran end-to-end.',
    },
    {
      id: 'outcomes',
      num: '04',
      title: 'Outcome Contract Calculator',
      status: 'Week 06',
      badge: 'Drafting',
      whatItIs: 'A commercial-model calculator that converts an FTE-priced SoW into a gain-share structure and shows both sides of the table what the numbers look like.',
      whyItExists: 'Most discussions of outcome-based pricing stop at the principle. The hard part is the structure: which metric triggers which payment band, how the baseline is set, how disputes get resolved, what happens when the outcome depends on decisions the provider does not control. The calculator surfaces each of these clauses and shows the break-even point at which the structure becomes attractive to both sides.',
      howToUse: 'Enter your current FTE count, seat rate, volume, and the outcome metric you want to price on. The tool shows break-even, upside bands, the clauses most commercial teams forget to negotiate, and a downloadable term sheet draft. For buyer-side and provider-side teams alike.',
      drawnFrom: 'Distilled from commercial-model work across Infosys BPM and Concentrix engagements, including the conversations that succeeded and the ones that did not.',
    },
  ];

  return (
    <main className="mx-auto max-w-[1320px] px-6 md:px-10 pt-10 md:pt-16 pb-10">
      <div className="rule-bottom pb-4 flex items-center justify-between smallcaps text-muted">
        <span>Tools</span>
        <span className="tabular">Four instruments · one live</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">Working artefacts</div>
          <h1 className="mt-4 font-display font-medium tracking-tight text-balance leading-[0.98]
                         text-[48px] md:text-[92px]">
            Four instruments, pulled from the frameworks that actually run inside delivery.
          </h1>
        </div>
        <div className="md:col-span-3">
          <p className="text-ink2 leading-relaxed">
            Each tool is a scaled-down version of an artefact used on live engagements. The goal is not to replace a senior team. It is to get the first useful answer on the table before one is in the room.
          </p>
          <p className="mt-3 text-sm text-muted italic">The Readiness Index currently uses sample firms. Full F500 data lands in v1.0.</p>
        </div>
      </Reveal>

      {/* Live tool - featured */}
      <Reveal className="mt-14 rule-top rule-bottom">
        <div className="grid md:grid-cols-12 gap-6 md:gap-10 py-10">
          <div className="md:col-span-5">
            <div className="flex items-baseline gap-3">
              <span className="font-display italic text-sienna tabular text-xl">01</span>
              <span className="smallcaps text-sienna">{tools[0].badge}</span>
            </div>
            <h2 className="mt-3 font-display text-[40px] md:text-[56px] leading-[1.02] tracking-tight">{tools[0].title}</h2>
            <p className="mt-5 font-display text-xl leading-relaxed text-ink2">{tools[0].whatItIs}</p>
            <div className="mt-6 smallcaps text-muted">Why it exists</div>
            <p className="mt-2 text-ink2 leading-relaxed">{tools[0].whyItExists}</p>
            <div className="mt-5 smallcaps text-muted">How to use it</div>
            <p className="mt-2 text-ink2 leading-relaxed">{tools[0].howToUse}</p>
            <div className="mt-5 smallcaps text-muted">Drawn from</div>
            <p className="mt-2 text-sm text-muted italic leading-relaxed">{tools[0].drawnFrom}</p>
          </div>
          <div className="md:col-span-7">
            {tools[0].component}
          </div>
        </div>
      </Reveal>

      {/* Forthcoming — each with full context */}
      <div className="mt-20">
        <div className="smallcaps text-muted mb-8">Next releases</div>
        <div className="rule-top">
          {tools.slice(1).map(t => (
            <article key={t.id} className="py-12 rule-bottom grid md:grid-cols-12 gap-6 md:gap-10">
              <div className="md:col-span-3">
                <div className="flex items-baseline gap-3">
                  <span className="font-display italic text-sienna tabular text-xl">{t.num}</span>
                  <span className="smallcaps text-sienna">{t.badge}</span>
                </div>
                <h3 className="mt-3 font-display text-[28px] md:text-[36px] leading-[1.05] tracking-tight">{t.title}</h3>
              </div>
              <div className="md:col-span-9">
                <p className="font-display text-xl md:text-2xl leading-relaxed text-ink">{t.whatItIs}</p>
                <div className="mt-6 grid md:grid-cols-2 gap-6 md:gap-10">
                  <div>
                    <div className="smallcaps text-muted">Why it exists</div>
                    <p className="mt-2 text-ink2 leading-relaxed">{t.whyItExists}</p>
                  </div>
                  <div>
                    <div className="smallcaps text-muted">How to use it</div>
                    <p className="mt-2 text-ink2 leading-relaxed">{t.howToUse}</p>
                  </div>
                </div>
                <div className="mt-6 rule-top pt-4 flex items-baseline gap-3">
                  <span className="smallcaps text-muted">Drawn from</span>
                  <span className="text-sm text-muted italic leading-relaxed">{t.drawnFrom}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>

      {/* Cadence */}
      <Reveal className="mt-20 rule-top pt-10">
        <div className="grid md:grid-cols-12 gap-6 md:gap-10">
          <div className="md:col-span-3">
            <div className="smallcaps text-muted">Cadence</div>
            <p className="mt-3 text-ink2 leading-relaxed">
              Built as each engagement surfaces one. Shipped as the writeup is ready. The site reflects what is live, not a promise of what will be.
            </p>
          </div>
          <div className="md:col-span-9">
            <div className="rule-top">
              {[
                ['F500 AI Readiness Index', 'Live'],
                ['Upstream Diagnostic', 'Shipping'],
                ['Vendor Consolidation Map', 'On the bench'],
                ['Outcome Contract Calculator', 'Drafting'],
                ['Regulated-industry evaluation harness', 'Scoping'],
              ].map(([t, s], i) => (
                <div key={i} className="grid grid-cols-[1fr_auto] items-baseline gap-6 py-4 rule-bottom last:border-0">
                  <span className="font-display text-xl">{t}</span>
                  <span className="smallcaps text-muted">{s}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Reveal>

      {/* Link to POV */}
      <div className="mt-20 rule-top pt-10">
        <div className="smallcaps text-muted">The argument behind the tools</div>
        <p className="mt-3 font-display text-xl leading-relaxed text-ink2 max-w-[56ch]">
          Each tool is an argument in miniature. The long-form version sits on the <button onClick={() => go('pov')} className="link-underline text-sienna">POV page</button>, and the case studies that seeded the methods are on the <button onClick={() => go('cases')} className="link-underline text-sienna">case studies page</button>.
        </p>
      </div>
    </main>
  );
}

function ReadinessIndex() {
  const firms = [
    { name: 'Sample Bank A', sector: 'BFSI', scores: [8, 7, 6, 9, 5, 7] },
    { name: 'Sample P&C Insurer', sector: 'Insurance', scores: [5, 6, 4, 6, 4, 5] },
    { name: 'Sample Payer', sector: 'Healthcare', scores: [4, 5, 3, 7, 3, 4] },
    { name: 'Sample Telco', sector: 'Telco', scores: [6, 4, 5, 8, 6, 6] },
    { name: 'Sample NBFC', sector: 'BFSI', scores: [7, 6, 7, 5, 6, 6] },
  ];
  const dims = ['Vertical IP', 'Model risk', 'Outcome pricing', 'Vendor density (inv.)', 'Upstream access', 'Eval maturity'];
  const [selected, setSelected] = React.useState(0);
  const cur = firms[selected];
  const total = cur.scores.reduce((a, b) => a + b, 0);
  const avg = (total / cur.scores.length).toFixed(1);

  return (
    <div className="border hairline bg-paper">
      <div className="rule-bottom px-5 py-3 flex items-center justify-between">
        <div className="smallcaps text-muted">F500 AI Readiness Index · v0.4 · sample data</div>
        <div className="smallcaps text-sienna">Interactive</div>
      </div>
      <div className="grid md:grid-cols-[240px_1fr]">
        <div className="rule-bottom md:rule-bottom-0 md:border-r hairline">
          {firms.map((f, i) => (
            <button key={f.name} onClick={() => setSelected(i)}
                    className={`w-full text-left px-5 py-3 rule-bottom last:border-0 transition-colors ${selected === i ? 'bg-ink text-paper' : 'hover:bg-paper2'}`}>
              <div className="font-display text-base">{f.name}</div>
              <div className={`smallcaps ${selected === i ? 'text-paper/70' : 'text-muted'}`}>{f.sector}</div>
            </button>
          ))}
        </div>
        <div className="p-6">
          <div className="flex items-baseline justify-between">
            <div>
              <div className="smallcaps text-muted">Composite score</div>
              <div className="font-display tabular text-[56px] leading-none mt-1">{avg}<span className="text-muted text-2xl">/10</span></div>
            </div>
            <div className="text-right">
              <div className="smallcaps text-muted">Sector rank</div>
              <div className="font-display italic text-sienna text-3xl mt-1">{['2nd', '4th', '5th', '3rd', '1st'][selected]}</div>
            </div>
          </div>
          <div className="mt-6 space-y-3">
            {dims.map((d, i) => (
              <div key={d} className="grid grid-cols-[1fr_160px_24px] gap-3 items-center">
                <div className="text-sm">{d}</div>
                <div className="h-[6px] bg-ink/10 relative">
                  <div className="absolute left-0 top-0 h-full bg-sienna transition-all duration-500" style={{ width: `${cur.scores[i] * 10}%` }} />
                </div>
                <div className="tabular text-sm text-right">{cur.scores[i]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Tools, ReadinessIndex });