// CRIMINAL JUSTICE — POST-CONVICTION sub-platform (5 tabs: Dashboard · Motions · Appeals · Clemency · Evidentiary)
const { useState: useCjPcState } = React;
const Tcpp = window.ArbiterTokens;

// Type categorization helper
function pcCategory(type) {
  const t = type.toLowerCase();
  if (t.includes('§ 2255') || t.includes('2255')) return 'post-motion';
  if (t.includes('§ 2254') || t.includes('habeas')) return 'post-motion';
  if (t.includes('direct appeal') || t.includes('appeal (')) return 'appeal';
  if (t.includes('clemency')) return 'clemency';
  if (t.includes('compassionate')) return 'compassionate';
  if (t.includes('first step act') || t.includes('retroactive')) return 'retroactive';
  return 'other';
}
function pcLikelihoodColor(cj, l) {
  const v = (l || '').toLowerCase();
  if (v.includes('high')) return cj.emerald;
  if (v.includes('moderate')) return cj.amber;
  if (v.includes('low-moderate')) return cj.amber;
  if (v.includes('low')) return cj.burgundy;
  return cj.slate;
}

// ── Dashboard ────────────────────────────────────────────────────────────
function CjPcDashboard({ data }) {
  const cj = window.__cj;
  const pc = data.postConviction || [];
  const briefs = data.postConvictionBriefs || [];
  const hearings = data.postConvictionHearings || [];

  // Count by category
  const cats = { 'post-motion': 0, 'appeal': 0, 'clemency': 0, 'compassionate': 0, 'retroactive': 0, 'other': 0 };
  pc.forEach(p => { cats[pcCategory(p.type)]++; });

  const byLikelihood = { High: 0, Moderate: 0, 'Low-moderate': 0, Low: 0 };
  pc.forEach(p => {
    const v = (p.likelihood || '').trim();
    if (byLikelihood[v] != null) byLikelihood[v]++;
  });

  // Upcoming hearings
  const upcoming = [...hearings].sort((a, b) => a.date.localeCompare(b.date)).slice(0, 6);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Active matters</span><span style={cj.statValue}>{pc.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>§ 2255 / § 2254</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{cats['post-motion']}</span><span style={{ ...cj.statDelta, color: Tcpp.color.text.tertiary }}>habeas + motions</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Direct appeals</span><span style={{ ...cj.statValue, color: cj.cobalt }}>{cats.appeal}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Clemency</span><span style={{ ...cj.statValue, color: cj.violet }}>{cats.clemency}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Compassionate release</span><span style={{ ...cj.statValue, color: cj.emerald }}>{cats.compassionate}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>FSA retroactive</span><span style={{ ...cj.statValue, color: cj.teal }}>{cats.retroactive}</span></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: '14px', marginBottom: '14px' }}>
        <div style={cj.card}>
          <div style={cj.cardH}>Likelihood distribution</div>
          <div style={{ padding: '14px 16px' }}>
            {Object.entries(byLikelihood).map(([l, n]) => {
              const color = pcLikelihoodColor(cj, l);
              const max = Math.max(...Object.values(byLikelihood), 1);
              return (
                <div key={l} style={{ marginBottom: '10px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
                    <span style={{ fontSize: '11px', fontWeight: 600, color: Tcpp.color.text.primary }}>{l}</span>
                    <span style={{ fontSize: '11px', fontFamily: Tcpp.font.mono, fontWeight: 700, color }}>{n}</span>
                  </div>
                  <div style={{ height: '6px', background: Tcpp.color.border.light, borderRadius: '3px', overflow: 'hidden' }}>
                    <div style={{ width: `${(n / max) * 100}%`, height: '100%', background: color }} />
                  </div>
                </div>
              );
            })}
            <div style={{ marginTop: '14px', padding: '8px', background: Tcpp.color.bg.secondary, borderRadius: '5px', fontSize: '10px', color: Tcpp.color.text.tertiary, textAlign: 'center' }}>
              Based on record-review, controlling authority, and venue posture.
            </div>
          </div>
        </div>

        <div style={cj.card}>
          <div style={cj.cardH}>Upcoming hearings · {upcoming.length}</div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={cj.th}>Date</th>
                <th style={cj.th}>Court</th>
                <th style={cj.th}>Matter</th>
                <th style={cj.th}>Purpose</th>
              </tr>
            </thead>
            <tbody>
              {upcoming.map(h => {
                const m = pc.find(p => p.id === h.pcId);
                return (
                  <tr key={h.id}>
                    <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px', color: cj.amber, fontWeight: 700 }}>{h.date}</td>
                    <td style={{ ...cj.td, fontSize: '11px' }}>{h.court}<div style={{ fontSize: '10px', color: Tcpp.color.text.tertiary }}>{h.judge}</div></td>
                    <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{m?.defendant || '—'}</td>
                    <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.primary, maxWidth: '360px' }}>{h.purpose}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>Full post-conviction docket</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>ID</th>
              <th style={cj.th}>Defendant</th>
              <th style={cj.th}>Type</th>
              <th style={cj.th}>Filed</th>
              <th style={cj.th}>Hearing</th>
              <th style={cj.th}>Ground</th>
              <th style={cj.th}>Status</th>
              <th style={cj.th}>Likelihood</th>
            </tr>
          </thead>
          <tbody>
            {pc.map(p => {
              const lc = pcLikelihoodColor(cj, p.likelihood);
              return (
                <tr key={p.id}>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{p.id}</td>
                  <td style={{ ...cj.td, fontWeight: 600 }}>{p.defendant}</td>
                  <td style={{ ...cj.td, fontSize: '11px' }}>{p.type}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px', color: Tcpp.color.text.tertiary }}>{p.filed}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px', color: cj.amber }}>{p.hearing}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.primary, maxWidth: '320px' }}>{p.ground}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{p.status}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: `${lc}18`, color: lc }}>{p.likelihood}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Motions (§ 2255, § 2254) ────────────────────────────────────────────
function CjPcMotions({ data }) {
  const cj = window.__cj;
  const motions = (data.postConviction || []).filter(p => pcCategory(p.type) === 'post-motion');
  const briefs = (data.postConvictionBriefs || []).filter(b => motions.some(m => m.id === b.pcId));
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Habeas / § 2255</span><span style={{ ...cj.statValue, color: cj.burgundy }}>{motions.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Briefs filed</span><span style={cj.statValue}>{briefs.filter(b => b.status.startsWith('Filed')).length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Total pages</span><span style={cj.statValue}>{briefs.reduce((s, b) => s + b.pages, 0).toLocaleString()}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Response received</span><span style={{ ...cj.statValue, color: cj.cobalt }}>{briefs.filter(b => b.status === 'Received').length}</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>
          <span>Post-conviction motions — {motions.length}</span>
          <button style={cj.btnPrimary}>+ File motion</button>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>ID</th>
              <th style={cj.th}>Defendant</th>
              <th style={cj.th}>Type</th>
              <th style={cj.th}>Filed</th>
              <th style={cj.th}>Hearing</th>
              <th style={cj.th}>Ground</th>
              <th style={cj.th}>Status</th>
              <th style={cj.th}>Likelihood</th>
            </tr>
          </thead>
          <tbody>
            {motions.map(p => {
              const lc = pcLikelihoodColor(cj, p.likelihood);
              return (
                <tr key={p.id}>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{p.id}</td>
                  <td style={{ ...cj.td, fontWeight: 600 }}>{p.defendant}</td>
                  <td style={{ ...cj.td, fontSize: '11px' }}>{p.type}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px' }}>{p.filed}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px', color: cj.amber }}>{p.hearing}</td>
                  <td style={{ ...cj.td, fontSize: '11px', maxWidth: '320px' }}>{p.ground}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{p.status}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: `${lc}18`, color: lc }}>{p.likelihood}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>Briefs & filings — {briefs.length}</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>Brief ID</th>
              <th style={cj.th}>Matter</th>
              <th style={cj.th}>Title</th>
              <th style={cj.th}>Filed</th>
              <th style={{ ...cj.th, textAlign: 'right' }}>Pages</th>
              <th style={cj.th}>Author</th>
              <th style={cj.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {briefs.map(b => {
              const m = motions.find(mm => mm.id === b.pcId);
              return (
                <tr key={b.id}>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{b.id}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{m?.defendant || b.pcId}</td>
                  <td style={{ ...cj.td, fontWeight: 600, maxWidth: '320px' }}>{b.title}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px' }}>{b.filed}</td>
                  <td style={{ ...cj.td, textAlign: 'right', fontFamily: Tcpp.font.mono, fontWeight: 700 }}>{b.pages}</td>
                  <td style={{ ...cj.td, fontSize: '11px' }}>{b.author}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{b.status}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Appeals ─────────────────────────────────────────────────────────────
function CjPcAppeals({ data }) {
  const cj = window.__cj;
  const appeals = (data.postConviction || []).filter(p => pcCategory(p.type) === 'appeal');
  const briefs = (data.postConvictionBriefs || []).filter(b => appeals.some(a => a.id === b.pcId));
  const hearings = (data.postConvictionHearings || []).filter(h => appeals.some(a => a.id === h.pcId));
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Direct appeals</span><span style={{ ...cj.statValue, color: cj.cobalt }}>{appeals.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Appellate briefs</span><span style={cj.statValue}>{briefs.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Oral arguments set</span><span style={{ ...cj.statValue, color: cj.amber }}>{hearings.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Avg brief length</span><span style={cj.statValue}>{Math.round(briefs.reduce((s, b) => s + b.pages, 0) / (briefs.length || 1))}<span style={{ fontSize: '12px', color: Tcpp.color.text.tertiary, fontWeight: 500 }}> pp</span></span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>Active appeals</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>ID</th>
              <th style={cj.th}>Defendant</th>
              <th style={cj.th}>Circuit / Type</th>
              <th style={cj.th}>Filed</th>
              <th style={cj.th}>Argument</th>
              <th style={cj.th}>Ground</th>
              <th style={cj.th}>Status</th>
              <th style={cj.th}>Likelihood</th>
            </tr>
          </thead>
          <tbody>
            {appeals.map(a => {
              const lc = pcLikelihoodColor(cj, a.likelihood);
              return (
                <tr key={a.id}>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{a.id}</td>
                  <td style={{ ...cj.td, fontWeight: 600 }}>{a.defendant}</td>
                  <td style={{ ...cj.td, fontSize: '11px' }}>{a.type}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px' }}>{a.filed}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px', color: cj.amber }}>{a.hearing}</td>
                  <td style={{ ...cj.td, fontSize: '11px', maxWidth: '320px' }}>{a.ground}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{a.status}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: `${lc}18`, color: lc }}>{a.likelihood}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {briefs.length > 0 && (
        <div style={cj.card}>
          <div style={cj.cardH}>Appellate briefs</div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={cj.th}>ID</th>
                <th style={cj.th}>Title</th>
                <th style={cj.th}>Filed</th>
                <th style={{ ...cj.th, textAlign: 'right' }}>Pages</th>
                <th style={cj.th}>Author</th>
                <th style={cj.th}>Status</th>
              </tr>
            </thead>
            <tbody>
              {briefs.map(b => (
                <tr key={b.id}>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{b.id}</td>
                  <td style={{ ...cj.td, fontWeight: 600, maxWidth: '340px' }}>{b.title}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px' }}>{b.filed}</td>
                  <td style={{ ...cj.td, textAlign: 'right', fontFamily: Tcpp.font.mono, fontWeight: 700 }}>{b.pages}</td>
                  <td style={{ ...cj.td, fontSize: '11px' }}>{b.author}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{b.status}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// ── Clemency / Compassionate Release / FSA ──────────────────────────────
function CjPcClemency({ data }) {
  const cj = window.__cj;
  const items = (data.postConviction || []).filter(p => {
    const c = pcCategory(p.type);
    return c === 'clemency' || c === 'compassionate' || c === 'retroactive';
  });
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Clemency petitions</span><span style={{ ...cj.statValue, color: cj.violet }}>{items.filter(i => pcCategory(i.type) === 'clemency').length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Compassionate release</span><span style={{ ...cj.statValue, color: cj.emerald }}>{items.filter(i => pcCategory(i.type) === 'compassionate').length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>FSA retroactive</span><span style={{ ...cj.statValue, color: cj.teal }}>{items.filter(i => pcCategory(i.type) === 'retroactive').length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>High-likelihood</span><span style={{ ...cj.statValue, color: cj.emerald }}>{items.filter(i => (i.likelihood || '').toLowerCase().includes('high') && !(i.likelihood || '').toLowerCase().includes('low')).length}</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>Executive & statutory relief — {items.length}</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>ID</th>
              <th style={cj.th}>Defendant</th>
              <th style={cj.th}>Type</th>
              <th style={cj.th}>Filed</th>
              <th style={cj.th}>Hearing</th>
              <th style={cj.th}>Ground</th>
              <th style={cj.th}>Status</th>
              <th style={cj.th}>Likelihood</th>
            </tr>
          </thead>
          <tbody>
            {items.map(i => {
              const lc = pcLikelihoodColor(cj, i.likelihood);
              const typeTag = pcCategory(i.type) === 'clemency' ? { bg: cj.violetBg, color: cj.violet }
                : pcCategory(i.type) === 'compassionate' ? { bg: cj.emeraldBg, color: cj.emerald }
                : { bg: cj.tealBg, color: cj.teal };
              return (
                <tr key={i.id}>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{i.id}</td>
                  <td style={{ ...cj.td, fontWeight: 600 }}>{i.defendant}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: typeTag.bg, color: typeTag.color }}>{i.type}</span></td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px' }}>{i.filed}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px', color: cj.amber }}>{i.hearing}</td>
                  <td style={{ ...cj.td, fontSize: '11px', maxWidth: '320px' }}>{i.ground}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{i.status}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: `${lc}18`, color: lc }}>{i.likelihood}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Evidentiary hearings ────────────────────────────────────────────────
function CjPcEvidentiary({ data }) {
  const cj = window.__cj;
  const hearings = data.postConvictionHearings || [];
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={cj.stat}><span style={cj.statLabel}>Hearings scheduled</span><span style={cj.statValue}>{hearings.length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Courts</span><span style={cj.statValue}>{new Set(hearings.map(h => h.court)).size}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Next 30 days</span><span style={{ ...cj.statValue, color: cj.amber }}>{hearings.filter(h => {
          const d = new Date(h.date); const now = new Date('2026-04-21');
          const diff = (d - now) / 86400000;
          return diff >= 0 && diff <= 30;
        }).length}</span></div>
        <div style={cj.stat}><span style={cj.statLabel}>Appellate oral args</span><span style={{ ...cj.statValue, color: cj.cobalt }}>{hearings.filter(h => h.court.includes('Cir.')).length}</span></div>
      </div>

      <div style={cj.card}>
        <div style={cj.cardH}>Evidentiary & oral argument schedule</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={cj.th}>Hearing ID</th>
              <th style={cj.th}>Date</th>
              <th style={cj.th}>Court</th>
              <th style={cj.th}>Judge / Panel</th>
              <th style={cj.th}>Matter</th>
              <th style={cj.th}>Purpose</th>
              <th style={cj.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {[...hearings].sort((a, b) => a.date.localeCompare(b.date)).map(h => {
              const m = (data.postConviction || []).find(p => p.id === h.pcId);
              return (
                <tr key={h.id}>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, color: cj.burgundy, fontWeight: 700 }}>{h.id}</td>
                  <td style={{ ...cj.td, fontFamily: Tcpp.font.mono, fontSize: '11px', color: cj.amber, fontWeight: 700 }}>{h.date}</td>
                  <td style={{ ...cj.td, fontSize: '11px', fontWeight: 600 }}>{h.court}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.secondary }}>{h.judge}</td>
                  <td style={{ ...cj.td, fontSize: '11px' }}>{m?.defendant || '—'}</td>
                  <td style={{ ...cj.td, fontSize: '11px', color: Tcpp.color.text.primary, maxWidth: '360px' }}>{h.purpose}</td>
                  <td style={cj.td}><span style={{ ...cj.tag, background: cj.amberBg, color: cj.amber }}>{h.status}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Platform entry ──────────────────────────────────────────────────────
function CriminalPostConvictionPlatform({ data }) {
  const [subTab, setSubTab] = useCjPcState('dashboard');
  const cj = window.__cj;

  const subTabs = [
    { id: 'dashboard',   label: 'Dashboard' },
    { id: 'motions',     label: '§ 2255 / Habeas' },
    { id: 'appeals',     label: 'Appeals' },
    { id: 'clemency',    label: 'Clemency & Release' },
    { id: 'evidentiary', label: 'Hearings' },
  ];

  const renderSub = () => {
    switch (subTab) {
      case 'dashboard':   return <CjPcDashboard   data={data} />;
      case 'motions':     return <CjPcMotions     data={data} />;
      case 'appeals':     return <CjPcAppeals     data={data} />;
      case 'clemency':    return <CjPcClemency    data={data} />;
      case 'evidentiary': return <CjPcEvidentiary data={data} />;
      default:            return <CjPcDashboard   data={data} />;
    }
  };

  return (
    <div>
      <div style={{ display: 'flex', gap: '0', borderBottom: `1px solid ${Tcpp.color.border.light}`, marginBottom: '16px' }}>
        {subTabs.map(t => {
          const active = subTab === t.id;
          return (
            <button key={t.id} onClick={() => setSubTab(t.id)}
              style={{
                padding: '8px 14px', fontSize: '11px', fontWeight: active ? 600 : 500,
                color: active ? cj.burgundy : Tcpp.color.text.tertiary,
                background: 'none',
                borderTop: 'none', borderLeft: 'none', borderRight: 'none',
                borderBottom: `2px solid ${active ? cj.burgundy : 'transparent'}`,
                cursor: 'pointer', fontFamily: Tcpp.font.family,
                marginBottom: '-1px', transition: 'color 0.15s',
              }}>
              {t.label}
            </button>
          );
        })}
      </div>
      {renderSub()}
    </div>
  );
}

window.CriminalPostConvictionPlatform = CriminalPostConvictionPlatform;
