// Fortune 500 AI Readiness Index — interactive index page.
// Data: /data/ai-readiness-index-v1.json, produced by the readiness-index pipeline.
// Scoring is percentile-based — comparative, not pass/fail (see the methodology).

function riClean(name) {
  // SEC registrant names carry a trailing state code (" /DE/"); strip that noise.
  return (name || '').replace(/\s*\/[A-Z]{2}\/\s*$/, '').replace(/\s+/g, ' ').trim();
}

function RiBar({ value, muted }) {
  const v = value == null ? 0 : value;
  return (
    <div className="h-[6px] bg-ink/10 relative">
      <div className={`absolute left-0 top-0 h-full ${muted ? 'bg-ink/30' : 'bg-teal'} transition-all duration-500`}
           style={{ width: `${v * 10}%` }} />
    </div>
  );
}

// The per-company scorecard — the showcase artefact.
function RiScorecard({ co, meta, view, onClose }) {
  if (!co) return null;
  const dims = (meta.dimensions || []).filter(d => (d.axis || 'readiness') === 'readiness');
  const axes = (meta.axes || []).filter(a => a.enabled !== false);
  const vpos = view && co.views ? co.views[view.id] : null;
  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">Company scorecard</div>
        <button onClick={onClose} className="smallcaps text-muted hover:text-ink">Close ×</button>
      </div>

      <div className="grid md:grid-cols-[300px_1fr]">
        {/* Headline */}
        <div className="p-6 rule-bottom md:rule-bottom-0 md:border-r hairline">
          <div className="smallcaps text-muted">{co.ticker || '—'} · {co.sector}</div>
          <h3 className="mt-2 font-display font-semibold text-[24px] leading-[1.15] tracking-tight">
            {riClean(co.company)}
          </h3>
          <div className="mt-6 flex items-baseline gap-2">
            <span className="font-display font-semibold tabular text-[52px] leading-none">
              {co.composite != null ? co.composite.toFixed(1) : '—'}
            </span>
            <span className="text-muted text-2xl">/10</span>
          </div>
          <div className="mt-1 smallcaps text-teal">{co.tier}</div>
          <div className="mt-5 grid grid-cols-2 gap-4 text-sm">
            <div>
              <div className="smallcaps text-muted">Overall</div>
              <div className="font-display font-semibold tabular text-lg">#{co.rank}</div>
            </div>
            <div>
              <div className="smallcaps text-muted">In {co.sector}</div>
              <div className="font-display font-semibold tabular text-lg">
                {co.sectorRank} of {co.sectorSize}
              </div>
            </div>
          </div>
          <div className="mt-4 smallcaps text-muted">
            Evidence confidence: <span className="text-ink">{co.confidence}</span>
          </div>
          {co.sourceFiling && (
            <a href={co.sourceFiling} target="_blank" rel="noreferrer"
               className="mt-1 inline-block smallcaps link-underline text-teal">
              Audit the source 10-K →
            </a>
          )}
        </div>

        {/* Dimensions + gap */}
        <div className="p-6">
          {/* Two-axis position — each axis carries its honesty label (formula vs proxy) */}
          {co.axes && axes.length > 0 && (
            <div className="mb-6 pb-6 rule-bottom">
              <div className="smallcaps text-muted mb-3">Two-axis position</div>
              <div className="space-y-3">
                {axes.map(a => (
                  <div key={a.id} className="grid grid-cols-[1fr_150px_30px] gap-3 items-center">
                    <div title={a.note}>
                      <div className="text-sm">{a.name}</div>
                      {a.strength && <div className="smallcaps text-muted">{a.strength}</div>}
                    </div>
                    <RiBar value={co.axes[a.id]} muted={a.id !== 'readiness'} />
                    <div className="tabular text-sm text-right">
                      {co.axes[a.id] != null ? co.axes[a.id].toFixed(1) : '—'}
                    </div>
                  </div>
                ))}
              </div>
              {vpos && (
                <div className="mt-4 flex flex-wrap items-baseline gap-x-4 gap-y-1">
                  <span className="smallcaps text-teal">{vpos.quadrant}</span>
                  {vpos.gap && <span className="smallcaps text-muted">· {vpos.gap}</span>}
                  {vpos.blurb && <span className="text-sm text-ink2 leading-snug">{vpos.blurb}</span>}
                </div>
              )}
            </div>
          )}
          <div className="smallcaps text-muted mb-3">Six dimensions of durable readiness</div>
          <div className="space-y-3">
            {dims.map(d => (
              <div key={d.id} className="grid grid-cols-[1fr_150px_30px] gap-3 items-center">
                <div className="text-sm" title={d.question}>{d.name}</div>
                <RiBar value={co.dimensions[d.id]} />
                <div className="tabular text-sm text-right">
                  {co.dimensions[d.id] != null ? co.dimensions[d.id].toFixed(1) : '—'}
                </div>
              </div>
            ))}
          </div>

          <div className="mt-6 pt-5 rule-top">
            <div className="flex items-baseline justify-between">
              <div className="smallcaps text-muted">Substantiation Gap</div>
              {co.narrativeLed && <div className="smallcaps text-teal">● Narrative-Led</div>}
            </div>
            <div className="mt-3 grid grid-cols-2 gap-5 text-sm">
              <div>
                <div className="flex justify-between"><span>Narrative</span>
                  <span className="tabular">{co.narrativeScore != null ? co.narrativeScore.toFixed(1) : '—'}</span></div>
                <RiBar value={co.narrativeScore} muted />
              </div>
              <div>
                <div className="flex justify-between"><span>Substance</span>
                  <span className="tabular">{co.substanceScore != null ? co.substanceScore.toFixed(1) : '—'}</span></div>
                <RiBar value={co.substanceScore} />
              </div>
            </div>
            <p className="mt-3 text-sm text-muted leading-relaxed">
              {co.narrativeLed
                ? 'Public AI narrative runs ahead of built AI substance — the augmentation story is louder than the evidence beneath it.'
                : 'AI narrative and built substance are broadly in step on the public record.'}
            </p>
          </div>

          <div className="mt-5 pt-5 rule-top">
            <div className="flex items-baseline justify-between">
              <div className="smallcaps text-muted">Displacement Exposure</div>
              {co.displacementExposed && <div className="smallcaps text-teal">● Displacement-Exposed</div>}
            </div>
            <div className="mt-3 grid grid-cols-2 gap-5 text-sm">
              <div>
                <div className="flex justify-between"><span>AI ambition</span>
                  <span className="tabular">{co.narrativeScore != null ? co.narrativeScore.toFixed(1) : '—'}</span></div>
                <RiBar value={co.narrativeScore} muted />
              </div>
              <div>
                <div className="flex justify-between"><span>Foundation</span>
                  <span className="tabular">{co.foundationScore != null ? co.foundationScore.toFixed(1) : '—'}</span></div>
                <RiBar value={co.foundationScore} />
              </div>
            </div>
            <p className="mt-3 text-sm text-muted leading-relaxed">
              {co.displacementExposed
                ? 'AI ambition outruns the data and systems foundation beneath it — the gap an AI-native competitor is built to exploit.'
                : 'No unaddressed legacy drag surfaces in the filings against this company’s AI ambition.'}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

// The map — a 2x2 of any two axes (criss-cross). Each company is a point; the
// corner that matters is low-readiness / high-exposure: the Urgent Gap.
function RiQuadrant({ rows, view, selected, onSelect }) {
  if (!view) return null;
  const W = 760, H = 560, P = 60;
  const split = view.split ?? 5.0;
  const px = v => P + (v / 10) * (W - 2 * P);
  const py = v => (H - P) - (v / 10) * (H - 2 * P);     // screen y is inverted
  const q = view.quadrants || {};
  const mx = px(split), my = py(split);

  const pts = rows.map(c => {
    const v = (c.views || {})[view.id];
    if (!v || v.x == null || v.y == null) return null;
    return { c, x: v.x, y: v.y };
  }).filter(Boolean);

  const corners = [
    { key: 'lo_hi', x: P + 10, y: P + 20, anchor: 'start', glow: true },   // top-left — Urgent Gap
    { key: 'hi_hi', x: W - P - 10, y: P + 20, anchor: 'end' },             // top-right
    { key: 'lo_lo', x: P + 10, y: H - P - 12, anchor: 'start' },           // bottom-left
    { key: 'hi_lo', x: W - P - 10, y: H - P - 12, anchor: 'end' },         // bottom-right
  ];
  const label = { textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: '10px' };

  return (
    <div className="border hairline">
      <div className="rule-bottom px-5 py-3 smallcaps text-muted flex justify-between">
        <span>The map · {view.name}</span>
        <span className="tabular">{pts.length} plotted</span>
      </div>
      <div className="p-4 md:p-6">
        <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-auto" role="img"
             aria-label={`${view.name} — companies plotted by ${view.x.label} and ${view.y.label}`}>
          {/* Urgent-Gap quadrant tint (low x, high y) */}
          <g className="text-teal">
            <rect x={P} y={P} width={mx - P} height={my - P}
                  fill="currentColor" fillOpacity="0.05" />
          </g>
          {/* frame + midlines */}
          <g className="text-ink/20" stroke="currentColor" fill="none">
            <rect x={P} y={P} width={W - 2 * P} height={H - 2 * P} strokeWidth="1" />
            <line x1={mx} y1={P} x2={mx} y2={H - P} strokeWidth="1" strokeDasharray="3 4" />
            <line x1={P} y1={my} x2={W - P} y2={my} strokeWidth="1" strokeDasharray="3 4" />
          </g>
          {/* quadrant names */}
          <g className="text-muted" fill="currentColor">
            {corners.map(cn => q[cn.key] && (
              <text key={cn.key} x={cn.x} y={cn.y} textAnchor={cn.anchor}
                    style={label} className={cn.glow ? 'text-teal' : 'text-muted'}
                    fill="currentColor">
                {q[cn.key].name}
              </text>
            ))}
          </g>
          {/* axis labels */}
          <g className="text-muted" fill="currentColor" style={label}>
            <text x={W / 2} y={H - 18} textAnchor="middle" fill="currentColor">{view.x.label} →</text>
            <text x={20} y={H / 2} textAnchor="middle" fill="currentColor"
                  transform={`rotate(-90 20 ${H / 2})`}>{view.y.label} →</text>
          </g>
          {/* dots */}
          <g className="text-teal">
            {pts.map(p => {
              const sel = selected && selected.cik === p.c.cik;
              if (sel) return null;
              return (
                <circle key={p.c.cik} cx={px(p.x)} cy={py(p.y)} r="4"
                        fill="currentColor" fillOpacity="0.5" className="cursor-pointer"
                        onClick={() => onSelect(p.c)}>
                  <title>{riClean(p.c.company)} — {p.c.read || p.c.tier}</title>
                </circle>
              );
            })}
            {/* selected on top */}
            {pts.filter(p => selected && selected.cik === p.c.cik).map(p => (
              <g key="sel">
                <circle cx={px(p.x)} cy={py(p.y)} r="8" fill="none"
                        stroke="currentColor" strokeWidth="1.5" />
                <circle cx={px(p.x)} cy={py(p.y)} r="5" fill="currentColor" />
              </g>
            ))}
          </g>
        </svg>
      </div>
    </div>
  );
}

function ReadinessIndex2() {
  const { go } = useRoute();
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const [sector, setSector] = React.useState('All sectors');
  const [query, setQuery] = React.useState('');
  const [sort, setSort] = React.useState('composite');
  const [selected, setSelected] = React.useState(null);
  const [viewId, setViewId] = React.useState(null);

  React.useEffect(() => {
    fetch('/public/data/ai-readiness-index-v1.json')
      .then(r => { if (!r.ok) throw new Error('not found'); return r.json(); })
      .then(setData)
      .catch(() => setErr('The dataset has not been published yet.'));
  }, []);

  if (err) return (
    <main className="mx-auto max-w-[1320px] px-6 md:px-10 py-24">
      <div className="smallcaps text-muted">Fortune 500 AI Readiness Index</div>
      <p className="mt-4 font-display text-2xl text-ink2">{err}</p>
    </main>
  );
  if (!data) return (
    <main className="mx-auto max-w-[1320px] px-6 md:px-10 py-24">
      <div className="smallcaps text-muted">Loading the index…</div>
    </main>
  );

  const { meta, summary, companies } = data;
  const sectors = ['All sectors', ...Array.from(new Set(companies.map(c => c.sector))).sort()];
  // Two-axis map (v1.2+). Falls back gracefully on older datasets with no views.
  const views = (meta.views || []).filter(v => v.enabled !== false);
  const activeViewId = viewId || meta.defaultView || (views[0] && views[0].id);
  const currentView = views.find(v => v.id === activeViewId) || null;
  const axesMeta = (meta.axes || []).filter(a => a.enabled !== false);
  const urgentGapCount = (summary.quadrant_counts || {})['Urgent Gap'];

  let rows = companies.filter(c => c.composite != null);
  if (sector !== 'All sectors') rows = rows.filter(c => c.sector === sector);
  if (query.trim()) {
    const q = query.trim().toLowerCase();
    rows = rows.filter(c => riClean(c.company).toLowerCase().includes(q) ||
                            (c.ticker || '').toLowerCase().includes(q));
  }
  const inSector = sector !== 'All sectors';
  rows = [...rows].sort((a, b) => {
    if (sort === 'composite') return b.composite - a.composite;
    if (sort === 'gap') return (b.substantiationGap ?? -99) - (a.substantiationGap ?? -99);
    if (sort === 'company') return riClean(a.company).localeCompare(riClean(b.company));
    if (sort === 'sector') return a.sector.localeCompare(b.sector) || b.composite - a.composite;
    return 0;
  });

  return (
    <main className="mx-auto max-w-[1320px] px-6 md:px-10 pt-10 md:pt-16 pb-10">
      {/* Header */}
      <div className="rule-bottom pb-4 flex items-center justify-between smallcaps text-muted">
        <span>Working artefact · Open data</span>
        <span className="tabular">{meta.version} · {meta.edition} edition</span>
      </div>

      <Reveal className="mt-10 md:mt-14 grid md:grid-cols-12 gap-6 md:gap-10 items-end">
        <div className="md:col-span-8">
          <div className="smallcaps text-teal">The Fortune 500 AI Readiness Index</div>
          <h1 className="mt-4 font-display font-semibold tracking-tight text-balance leading-[1.06]
                         text-[36px] md:text-[54px]">
            Which of America's largest companies have built AI that survives an audit.
          </h1>
        </div>
        <div className="md:col-span-4">
          <p className="text-ink2 leading-relaxed">
            An outside-in benchmark scored entirely from public evidence — annual reports,
            proxy statements, patent records. No survey. Every score traces to a document
            you can open.
          </p>
        </div>
      </Reveal>

      {/* Summary exhibit */}
      <Reveal className="mt-12 border hairline">
        <div className="rule-bottom px-5 py-3 smallcaps text-muted flex justify-between">
          <span>The index at a glance</span>
          <span className="tabular">Generated {meta.generated}</span>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8">
          {[
            ['Companies rated', summary.rated],
            ['Mean composite', summary.mean_composite],
            ...meta.tiers.map(t => [t.name + 's', summary.tier_counts[t.name] ?? 0]),
            ['Narrative-Led', summary.narrative_led_count],
            ['Displacement-Exposed', summary.displacement_exposed_count],
          ].map(([label, val], i) => (
            <div key={i} className="px-5 py-5 rule-bottom md:border-r hairline last:border-r-0">
              <div className="font-display font-semibold tabular text-[26px] leading-none">{val}</div>
              <div className="mt-2 smallcaps text-muted">{label}</div>
            </div>
          ))}
        </div>
      </Reveal>

      {/* Reading the index */}
      <Reveal className="mt-12 grid md:grid-cols-12 gap-6 md:gap-10">
        <div className="md:col-span-3 smallcaps text-muted">Reading the index</div>
        <div className="md:col-span-9 max-w-[62ch] text-ink2 leading-relaxed space-y-3">
          <p>
            Each company is scored 0–10 on six dimensions of <span className="text-teal">durable</span> AI
            readiness — the dimensions that decide whether a programme holds up under a regulator
            or an auditor, not how much AI a company announces.
          </p>
          <p>
            Scoring is comparative. A score of 7.0 means a company is ahead of 70% of the
            Fortune 500 on that measure. The <span className="text-teal">within-sector</span> rank —
            a bank against banks — is the view that matters; filter by sector to see it.
          </p>
          <p>
            Six dimensions measure forward momentum; the seventh — <span className="text-teal">Foundation
            readiness</span> — measures the data and systems drag underneath it.
          </p>
          <p>
            Two contrast signals sit alongside the score. The <span className="text-teal">Substantiation
            Gap</span> flags companies whose AI narrative runs ahead of what they have built.
            <span className="text-teal"> Displacement Exposure</span> flags those whose ambition runs
            ahead of the foundation to deliver it — the gap an AI-native competitor exploits. Select
            any company to see its scorecard.
          </p>
        </div>
      </Reveal>

      {/* The two-axis map — criss-cross of any two enabled axes */}
      {currentView && (
        <Reveal className="mt-12 grid md:grid-cols-12 gap-6 md:gap-10">
          <div className="md:col-span-3">
            <div className="smallcaps text-muted">The two-axis map</div>
            <label className="mt-4 block">
              <div className="smallcaps text-muted mb-1">View</div>
              <select value={activeViewId} onChange={e => setViewId(e.target.value)}
                      className="bg-transparent border hairline px-3 py-1.5 font-display">
                {views.map(v => <option key={v.id} value={v.id}>{v.name}</option>)}
              </select>
            </label>
            <p className="mt-5 text-ink2 leading-relaxed max-w-[40ch]">
              Readiness alone tells you who has built AI. It does not tell you what to do
              next. The map adds a second axis, so each company sits at a point rather than a
              rank.
              {urgentGapCount != null && currentView.id === 'readiness_x_exposure' && (
                <> The corner that matters is the top-left — high exposure, low readiness: the{' '}
                <span className="text-teal">Urgent Gap</span>, where {urgentGapCount} of the
                Fortune 500 sit.</>
              )}
            </p>
            {currentView.gapLabel && (
              <p className="mt-3 text-sm text-muted leading-relaxed max-w-[40ch]">
                Where the axes line up a company reads <span className="text-ink">aligned</span>;
                where they pull apart it reads “{currentView.gapLabel.gap_down}” or
                “{currentView.gapLabel.gap_up}”.
              </p>
            )}
            <p className="mt-4 smallcaps text-muted">Select any point for its scorecard.</p>
          </div>
          <div className="md:col-span-9">
            <RiQuadrant rows={rows} view={currentView} selected={selected}
                        onSelect={(c) => { setSelected(c); window.scrollTo({ top: 320, behavior: 'smooth' }); }} />
            <div className="mt-3 grid grid-cols-2 md:grid-cols-4 gap-3">
              {['lo_hi', 'hi_hi', 'hi_lo', 'lo_lo'].map(k =>
                currentView.quadrants && currentView.quadrants[k] && (
                  <div key={k} className="border hairline px-3 py-2.5">
                    <div className={`smallcaps ${k === 'lo_hi' ? 'text-teal' : 'text-muted'}`}>
                      {currentView.quadrants[k].name}
                    </div>
                    <div className="text-sm text-ink2 leading-snug mt-1">
                      {currentView.quadrants[k].blurb}
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </Reveal>
      )}

      {/* Selected scorecard */}
      {selected && (
        <Reveal className="mt-10">
          <RiScorecard co={selected} meta={meta} view={currentView} onClose={() => setSelected(null)} />
        </Reveal>
      )}

      {/* Controls */}
      <div className="mt-12 flex flex-wrap items-end gap-x-8 gap-y-4">
        <label className="block">
          <div className="smallcaps text-muted mb-1">Sector</div>
          <select value={sector} onChange={e => setSector(e.target.value)}
                  className="bg-transparent border hairline px-3 py-1.5 font-display">
            {sectors.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
        </label>
        <label className="block">
          <div className="smallcaps text-muted mb-1">Sort by</div>
          <select value={sort} onChange={e => setSort(e.target.value)}
                  className="bg-transparent border hairline px-3 py-1.5 font-display">
            <option value="composite">Composite score</option>
            <option value="gap">Substantiation Gap</option>
            <option value="company">Company name</option>
            <option value="sector">Sector</option>
          </select>
        </label>
        <label className="block flex-1 min-w-[200px]">
          <div className="smallcaps text-muted mb-1">Search</div>
          <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Company or ticker"
                 className="w-full bg-transparent border hairline px-3 py-1.5 font-display" />
        </label>
        <div className="smallcaps text-muted tabular pb-2">{rows.length} shown</div>
      </div>

      {/* Leaderboard */}
      <div className="mt-6 border hairline">
        <div className="grid grid-cols-[56px_1fr_150px_92px_120px] md:grid-cols-[64px_1fr_190px_110px_150px]
                        rule-bottom px-4 py-2.5 smallcaps text-muted bg-paper2">
          <div>{inSector ? 'Sector' : 'Rank'}</div>
          <div>Company</div>
          <div className="hidden md:block">Sector</div>
          <div className="text-right">Composite</div>
          <div className="text-right">Tier</div>
        </div>
        <div className="max-h-[640px] overflow-y-auto">
          {rows.map(c => {
            const isSel = selected && selected.cik === c.cik;
            return (
              <button key={c.cik} onClick={() => { setSelected(c); window.scrollTo({ top: 320, behavior: 'smooth' }); }}
                className={`w-full text-left grid grid-cols-[56px_1fr_150px_92px_120px] md:grid-cols-[64px_1fr_190px_110px_150px]
                            items-center px-4 py-2.5 rule-bottom last:border-0 transition-colors
                            ${isSel ? 'bg-teal text-paper' : 'hover:bg-paper2'}`}>
                <div className="tabular text-sm">
                  {inSector ? `${c.sectorRank}/${c.sectorSize}` : `#${c.rank}`}
                </div>
                <div className="min-w-0">
                  <div className="font-display font-semibold truncate">{riClean(c.company)}</div>
                  <div className={`smallcaps ${isSel ? 'text-paper/70' : 'text-muted'}`}>
                    {[c.ticker, c.narrativeLed && 'Narrative-Led',
                      c.displacementExposed && 'Displacement-Exposed']
                      .filter(Boolean).join(' · ')}
                  </div>
                </div>
                <div className={`hidden md:block text-sm ${isSel ? 'text-paper/80' : 'text-ink2'}`}>{c.sector}</div>
                <div className="text-right">
                  <span className="font-display font-semibold tabular text-lg">{c.composite.toFixed(1)}</span>
                </div>
                <div className={`text-right smallcaps ${isSel ? 'text-paper' : 'text-teal'}`}>{c.tier}</div>
              </button>
            );
          })}
          {rows.length === 0 && (
            <div className="px-4 py-10 text-center text-muted">No companies match that filter.</div>
          )}
        </div>
      </div>

      {/* Method + cite + downloads */}
      <Reveal className="mt-16 rule-top pt-10 grid md:grid-cols-12 gap-6 md:gap-10">
        <div className="md:col-span-3 smallcaps text-muted">Method, data &amp; citation</div>
        <div className="md:col-span-9 space-y-6">
          <p className="max-w-[62ch] text-ink2 leading-relaxed">
            The full methodology — every indicator, its public source, the weighting, and the
            honest limitations — is documented and versioned. The dataset is open under a
            CC BY 4.0 licence: use it and cite it freely with attribution.
          </p>
          <div className="flex flex-wrap gap-x-6 gap-y-2 smallcaps">
            <a className="link-underline text-teal" href="/public/data/ai-readiness-index-v1.json"
               download>Download dataset (JSON)</a>
            <a className="link-underline text-teal" href="/public/data/ai-readiness-index-v1.csv"
               download>Download dataset (CSV)</a>
            <button className="link-underline text-teal" onClick={() => go('pov')}>The argument behind it →</button>
          </div>
          <div className="border hairline p-5 bg-paper2">
            <div className="smallcaps text-muted mb-2">Cite this</div>
            <p className="text-sm text-ink2 leading-relaxed">
              Vemula, P. (2026). <span className="italic-none font-semibold">Fortune 500 AI Readiness
              Index, {meta.version}.</span> prathyushavemula.com. Licensed under CC BY 4.0.
            </p>
          </div>
          <p className="text-sm text-muted leading-relaxed max-w-[62ch]">
            An outside-in benchmark reads what companies disclose, not their internal reality.
            v1.0 extraction is lexical and first-pass; scores carry a confidence rating and
            improve each edition. Corrections: vemula.prathyusha@gmail.com.
          </p>
        </div>
      </Reveal>
    </main>
  );
}

Object.assign(window, { ReadinessIndex2, RiScorecard, RiBar });