/* Reviewing Attorney screens. In progress queue, Completed, Consults, Earnings, Verification.
   Reuses REVIEW_QUEUE data from reviewing-attorney.jsx. */

/* ============================================================
   IN PROGRESS QUEUE
   Variants: 'list' | 'split' (queue + active doc) | 'cards'
   ============================================================ */

const IN_PROGRESS = [
  {
    id: 'rios-active', client: 'Daniel Rios', matter: 'Consumer fraud · auto repair',
    jurisdiction: 'UT', sandbox: true, tier: 'consult', fee: 79,
    started: '2h ago', sla: '12h remaining', accepted: 'Today 11:14 AM',
    type: '30-min consult', progress: 35,
    notes: 'Reviewed intake. Two viable theories. Recommending consumer fraud over breach. Need to confirm misrep timeline before consult call.',
    next: 'Video consult · Tue 2:30 PM',
  },
  {
    id: 'haque-active', client: 'Tariq Haque', matter: 'Probate · estate filing',
    jurisdiction: 'NY', tier: 'standard', fee: 149,
    started: 'Yesterday', sla: '2d 4h remaining', accepted: 'Yesterday 4:02 PM',
    type: 'Document review', progress: 60,
    notes: 'Petition draft is solid. Caught one heir-notice issue (missing nephew per affidavit). Drafting written feedback.',
    next: 'Send written feedback by Thu',
  },
];

const ReviewingInProgress = ({ variant = 'split' }) => {
  const [active, setActive] = React.useState(IN_PROGRESS[0].id);
  const cur = IN_PROGRESS.find(r => r.id === active) || IN_PROGRESS[0];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <PageHeader
        eyebrow="Section B · Reviewing attorney"
        title="In progress · 2 active"
        subtitle="Reviews you've accepted but not yet returned. SLA timers continue counting."
        right={<Btn icon={Icons.bell} kind="ghost">Pause new requests</Btn>}
      />

      {variant === 'list' && (
        <div style={{ flex: 1, overflowY: 'auto', padding: '20px 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {IN_PROGRESS.map(r => <InProgressCard key={r.id} r={r} expanded/>)}
        </div>
      )}

      {variant === 'split' && (
        <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
          <div style={{ width: 320, borderRight: `1px solid ${THEME.line}`, overflowY: 'auto', padding: '14px 14px' }}>
            {IN_PROGRESS.map(r => (
              <div key={r.id} onClick={() => setActive(r.id)} style={{
                padding: '12px 14px', borderRadius: 10, cursor: 'pointer', marginBottom: 6,
                background: active === r.id ? THEME.blueSoft : 'transparent',
                border: `1px solid ${active === r.id ? THEME.blue + '40' : THEME.line}`,
              }}>
                <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
                  <JurisdictionPill jx={r.jurisdiction}/>
                  {r.sandbox && <Pill tone={THEME.success} dense>SANDBOX</Pill>}
                </div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 14, color: THEME.text, fontWeight: 600, marginBottom: 2 }}>{r.client}</div>
                <div style={{ fontSize: 11, color: THEME.textDim, marginBottom: 8 }}>{r.matter}</div>
                <Progress pct={r.progress}/>
                <div style={{ fontSize: 10.5, color: THEME.textMute, marginTop: 6 }}>{r.sla}</div>
              </div>
            ))}
          </div>
          <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px' }}>
            <ActiveReview r={cur}/>
          </div>
        </div>
      )}

      {variant === 'cards' && (
        <div style={{ flex: 1, overflowY: 'auto', padding: '20px 32px', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
          {IN_PROGRESS.map(r => <InProgressCard key={r.id} r={r}/>)}
        </div>
      )}
    </div>
  );
};

const InProgressCard = ({ r, expanded }) => (
  <div style={{ padding: '16px 18px', borderRadius: 12, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)', border: `1px solid ${THEME.line}` }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
      <JurisdictionPill jx={r.jurisdiction}/>
      <Pill tone={THEME.accent} soft dense>{r.type.toUpperCase()}</Pill>
      <div style={{ flex: 1 }}/>
      <div style={{ fontSize: 11, color: THEME.warn, fontWeight: 600 }}>{r.sla}</div>
    </div>
    <div style={{ fontFamily: 'Fraunces', fontSize: 17, color: THEME.text, fontWeight: 500, marginBottom: 4 }}>{r.client} · {r.matter}</div>
    <Progress pct={r.progress} label="Progress"/>
    {expanded && <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.5, marginTop: 10, paddingTop: 10, borderTop: `1px solid ${THEME.lineSoft}` }}>{r.notes}</div>}
    <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
      <Btn kind="primary">Continue review</Btn>
      <Btn kind="ghost">Save notes</Btn>
    </div>
  </div>
);

const ActiveReview = ({ r }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
        <JurisdictionPill jx={r.jurisdiction}/>
        {r.sandbox && <Pill tone={THEME.success} dense>SANDBOX</Pill>}
        <Pill tone={THEME.accent} soft dense>{r.type.toUpperCase()}</Pill>
        <div style={{ fontSize: 11, color: THEME.textMute, alignSelf: 'center' }}>· accepted {r.accepted}</div>
      </div>
      <div style={{ fontFamily: 'Fraunces', fontSize: 26, color: THEME.text, fontWeight: 500, letterSpacing: -0.4, lineHeight: 1.1 }}>{r.client}</div>
      <div style={{ fontSize: 13, color: THEME.textDim, marginTop: 4 }}>{r.matter}</div>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
      <Stat label="SLA remaining" value={r.sla.split(' ')[0]} sub={r.sla.split(' ').slice(1).join(' ')} tone={THEME.warn}/>
      <Stat label="Fee" value={`$${r.fee}`} sub="after platform fee · $146" tone={THEME.success}/>
      <Stat label="Progress" value={`${r.progress}%`} sub={r.next}/>
    </div>

    <div>
      <SectionLabel>Your private notes</SectionLabel>
      <div style={{ padding: '14px 16px', borderRadius: 11, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)', border: `1px solid ${THEME.line}`, fontSize: 13, color: THEME.text, lineHeight: 1.6, fontFamily: 'Fraunces' }}>
        {r.notes}
      </div>
    </div>

    <div>
      <SectionLabel>Written feedback to client</SectionLabel>
      <div style={{ padding: '14px 16px', borderRadius: 11, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.04)' : '#fff', border: `1px solid ${THEME.line}`, minHeight: 140 }}>
        <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.6 }}>
          <div style={{ marginBottom: 8 }}><strong style={{ color: THEME.text }}>Theory recommendation:</strong> Consumer fraud is the stronger fit. Your texts and the unauthorized work memo establish reliance and material misrepresentation. Breach of contract works as backup but damages are easier to prove under the consumer fraud theory.</div>
          <div style={{ marginBottom: 8 }}><strong style={{ color: THEME.text }}>Suggested edits:</strong> Reorder the demand letter to lead with the misrepresentation timeline. Move the price comparison to a separate exhibit.</div>
          <div style={{ color: THEME.textMute, fontStyle: 'italic' }}>- Draft. Client sees this only after you click Send.</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
        <Btn kind="primary" icon={Icons.send}>Send feedback</Btn>
        <Btn kind="ghost">Save & continue later</Btn>
        <div style={{ flex: 1 }}/>
        <Btn kind="ghost" tone={THEME.warn}>Refer to specialist</Btn>
      </div>
    </div>
  </div>
);

/* ============================================================
   COMPLETED REVIEWS
   Variants: 'table' | 'cards'
   ============================================================ */

const COMPLETED_REVIEWS = [
  { id: 'c1', client: 'Marcus Chen', matter: 'Small claims · contractor breach', jurisdiction: 'NY', type: 'Document review', tier: '48h rush', completed: 'Apr 27', fee: 179, rating: 5, slaHit: true, summary: 'Suggested 3 edits to damages section. Client incorporated 2.', adopted: 2 },
  { id: 'c2', client: 'Priya Patel', matter: 'Demand letter · security deposit', jurisdiction: 'NY', type: 'Document review', tier: 'Standard', completed: 'Apr 25', fee: 99, rating: 5, slaHit: true, summary: 'Letter was clean. Suggested adding GBL §7-108(1)(e) cite for 2x damages.', adopted: 1 },
  { id: 'c3', client: 'Lin Nguyen', matter: 'Vendor breach · complaint draft', jurisdiction: 'NY', type: 'Document review', tier: '24h rush', completed: 'Apr 23', fee: 249, rating: 4, slaHit: true, summary: 'Found procedural gap re: choice of forum. Client revised.', adopted: 1 },
  { id: 'c4', client: 'Anna Volkov', matter: 'Wage claim · retaliation', jurisdiction: 'NY', type: 'Consult', tier: 'Consult', completed: 'Apr 22', fee: 79, rating: 5, slaHit: true, summary: 'Recommended she pursue Title VII separately from wage claim.', adopted: null },
  { id: 'c5', client: 'James Okafor', matter: 'Auto repair fraud', jurisdiction: 'UT', sandbox: true, type: 'Document review', tier: 'Standard', completed: 'Apr 19', fee: 119, rating: 5, slaHit: true, summary: 'Sandbox feedback positive. Edits to fact section adopted.', adopted: 3 },
  { id: 'c6', client: 'Maria Solano', matter: 'Lease dispute · roommate', jurisdiction: 'NY', type: 'Consult', tier: 'Consult', completed: 'Apr 17', fee: 79, rating: 4, slaHit: true, summary: 'Walked through small claims vs civil court tradeoffs.', adopted: null },
  { id: 'c7', client: 'Kenji Yamada', matter: 'Insurance denial · medical', jurisdiction: 'NY', type: 'Document review', tier: 'Standard', completed: 'Apr 15', fee: 99, rating: 5, slaHit: true, summary: 'Pointed to bad-faith claim path. Beyond reviewer scope.', adopted: 0 },
  { id: 'c8', client: 'Rachel Berman', matter: 'Small claims · pet damage', jurisdiction: 'NY', type: 'Document review', tier: 'Standard', completed: 'Apr 12', fee: 99, rating: 5, slaHit: true, summary: 'Tightened the ask. Client filed and won $1,400.', adopted: 4 },
];

const ReviewingCompleted = ({ variant = 'table' }) => {
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? COMPLETED_REVIEWS :
    filter === 'utah' ? COMPLETED_REVIEWS.filter(r => r.jurisdiction === 'UT') :
    filter === 'consults' ? COMPLETED_REVIEWS.filter(r => r.type === 'Consult') :
    COMPLETED_REVIEWS.filter(r => r.type === 'Document review');

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <PageHeader
        eyebrow="Section B · Reviewing attorney"
        title="Completed · 52 reviews this quarter"
        subtitle="Audit trail of reviews you've delivered. Each entry shows what the client adopted."
        right={<Btn icon={Icons.download} kind="ghost">Export CSV</Btn>}
      />

      <div style={{ padding: '12px 32px 8px', borderBottom: `1px solid ${THEME.line}` }}>
        <FilterChips
          chips={[
            { value: 'all', label: `All · ${COMPLETED_REVIEWS.length}` },
            { value: 'reviews', label: `Document reviews · ${COMPLETED_REVIEWS.filter(r => r.type === 'Document review').length}` },
            { value: 'consults', label: `Consults · ${COMPLETED_REVIEWS.filter(r => r.type === 'Consult').length}` },
            { value: 'utah', label: `Utah sandbox · ${COMPLETED_REVIEWS.filter(r => r.jurisdiction === 'UT').length}` },
          ]}
          value={filter} onChange={setFilter}
        />
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 32px' }}>
        {variant === 'table' && (
          <div style={{ background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)', border: `1px solid ${THEME.line}`, borderRadius: 12, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 2fr 1fr 0.8fr 1.2fr 0.7fr', padding: '12px 16px', borderBottom: `1px solid ${THEME.line}`, fontSize: 10.5, color: THEME.textMute, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 700 }}>
              <span>Client / matter</span><span>Outcome</span><span>Type</span><span>Completed</span><span>Adopted</span><span style={{ textAlign: 'right' }}>Fee</span>
            </div>
            {filtered.map((r, i) => (
              <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '1.4fr 2fr 1fr 0.8fr 1.2fr 0.7fr', padding: '14px 16px', borderTop: i > 0 ? `1px solid ${THEME.lineSoft}` : 'none', alignItems: 'center', cursor: 'pointer' }}>
                <div>
                  <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 600 }}>{r.client}</div>
                  <div style={{ fontSize: 11, color: THEME.textMute, marginTop: 2, display: 'flex', gap: 5, alignItems: 'center' }}>
                    <JurisdictionPill jx={r.jurisdiction}/>
                    {r.sandbox && <Pill tone={THEME.success} dense>SANDBOX</Pill>}
                    <span>{r.matter}</span>
                  </div>
                </div>
                <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.45 }}>{r.summary}</div>
                <div style={{ fontSize: 11.5, color: THEME.text }}>{r.tier}</div>
                <div style={{ fontSize: 11.5, color: THEME.textDim }}>{r.completed}</div>
                <div style={{ fontSize: 11.5 }}>
                  {r.adopted == null ? <span style={{ color: THEME.textMute }}>- consult</span> :
                    r.adopted === 0 ? <span style={{ color: THEME.textMute }}>0 of 1</span> :
                    <span style={{ color: THEME.success, fontWeight: 600 }}>{r.adopted} edit{r.adopted !== 1 ? 's' : ''} adopted</span>}
                </div>
                <div style={{ fontSize: 13, color: THEME.text, fontWeight: 600, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>${r.fee}</div>
              </div>
            ))}
          </div>
        )}

        {variant === 'cards' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
            {filtered.map(r => (
              <div key={r.id} style={{ padding: '16px 18px', borderRadius: 12, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)', border: `1px solid ${THEME.line}`, cursor: 'pointer' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                  <JurisdictionPill jx={r.jurisdiction}/>
                  {r.sandbox && <Pill tone={THEME.success} dense>SANDBOX</Pill>}
                  <Pill tone={THEME.blue} soft dense>{r.tier}</Pill>
                  <div style={{ flex: 1 }}/>
                  <div style={{ fontSize: 11, color: THEME.textMute }}>{r.completed}</div>
                </div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 16, color: THEME.text, fontWeight: 500, marginBottom: 3 }}>{r.client}</div>
                <div style={{ fontSize: 11.5, color: THEME.textDim, marginBottom: 10 }}>{r.matter}</div>
                <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.5, marginBottom: 10 }}>{r.summary}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 10, borderTop: `1px solid ${THEME.lineSoft}` }}>
                  <span style={{ fontSize: 11, color: THEME.warn }}>{'★'.repeat(r.rating)}</span>
                  {r.adopted != null && r.adopted > 0 && <span style={{ fontSize: 11, color: THEME.success, fontWeight: 600 }}>{r.adopted} edits adopted</span>}
                  <div style={{ flex: 1 }}/>
                  <span style={{ fontSize: 13, color: THEME.text, fontWeight: 600 }}>${r.fee}</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

/* ============================================================
   CONSULTS. Scheduled video consults
   Variants: 'calendar' | 'list'
   ============================================================ */

const CONSULTS = [
  { id: 's1', client: 'Daniel Rios', matter: 'Auto repair fraud', when: 'Tue Apr 29 · 2:30 PM', duration: 30, jurisdiction: 'UT', sandbox: true, status: 'confirmed' },
  { id: 's2', client: 'Esther Mboya', matter: 'Tenant harassment', when: 'Wed Apr 30 · 10:00 AM', duration: 30, jurisdiction: 'NY', status: 'confirmed' },
  { id: 's3', client: 'Roberto Salinas', matter: 'Wage theft', when: 'Thu May 1 · 4:00 PM', duration: 60, jurisdiction: 'NY', status: 'pending' },
  { id: 's4', client: 'Linh Tran', matter: 'Small biz · breach', when: 'Fri May 2 · 9:00 AM', duration: 30, jurisdiction: 'UT', sandbox: true, status: 'confirmed' },
];

const ReviewingConsults = ({ variant = 'list' }) => (
  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
    <PageHeader
      eyebrow="Section B · Reviewing attorney"
      title="Scheduled consults · 4 upcoming"
      subtitle="Live video sessions, capped to your stated availability. Joins via in-platform Daily.co room."
      right={<Btn icon={Icons.calendar} kind="ghost">Manage availability</Btn>}
    />
    <div style={{ flex: 1, overflowY: 'auto', padding: '20px 32px' }}>
      {variant === 'list' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {CONSULTS.map(c => (
            <div key={c.id} style={{
              padding: '14px 16px', borderRadius: 12,
              background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)',
              border: `1px solid ${THEME.line}`,
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <div style={{
                width: 56, height: 56, borderRadius: 10, flexShrink: 0,
                background: c.sandbox ? 'rgba(91,167,115,0.16)' : THEME.blueSoft,
                border: `1px solid ${c.sandbox ? 'rgba(91,167,115,0.3)' : THEME.blue + '30'}`,
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Fraunces',
              }}>
                <div style={{ fontSize: 10, color: THEME.textMute, fontWeight: 700, letterSpacing: 0.5 }}>{c.when.split(' ')[0].toUpperCase()}</div>
                <div style={{ fontSize: 18, color: THEME.text, fontWeight: 600 }}>{c.when.split(' ')[2]}</div>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', gap: 6, marginBottom: 4 }}>
                  <JurisdictionPill jx={c.jurisdiction}/>
                  {c.sandbox && <Pill tone={THEME.success} dense>SANDBOX</Pill>}
                  <Pill tone={c.status === 'confirmed' ? THEME.success : THEME.warn} soft dense>{c.status}</Pill>
                </div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 16, color: THEME.text, fontWeight: 500, marginBottom: 3 }}>{c.client}</div>
                <div style={{ fontSize: 12, color: THEME.textDim }}>{c.matter} · {c.when} · {c.duration} min</div>
              </div>
              <Btn kind="primary" icon={Icons.send}>Join room</Btn>
              <Btn kind="ghost">Reschedule</Btn>
            </div>
          ))}
        </div>
      )}
      {variant === 'calendar' && <ConsultsCalendar consults={CONSULTS}/>}
    </div>
  </div>
);

const ConsultsCalendar = ({ consults }) => {
  const days = ['Mon Apr 28', 'Tue Apr 29', 'Wed Apr 30', 'Thu May 1', 'Fri May 2'];
  const hours = ['9:00', '10:00', '11:00', '12:00', '1:00', '2:00', '3:00', '4:00', '5:00'];
  const byDay = {};
  consults.forEach(c => {
    const d = c.when.split(' · ')[0];
    if (!byDay[d]) byDay[d] = [];
    byDay[d].push(c);
  });
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `60px repeat(5, 1fr)`, gap: 6, fontSize: 11 }}>
      <div></div>
      {days.map(d => (
        <div key={d} style={{ fontSize: 11, color: THEME.textMute, fontWeight: 700, letterSpacing: 0.5, textAlign: 'center', padding: '6px 0' }}>{d}</div>
      ))}
      {hours.map(h => (
        <React.Fragment key={h}>
          <div style={{ fontSize: 10.5, color: THEME.textMute, padding: '8px 4px', textAlign: 'right' }}>{h}</div>
          {days.map(d => {
            const events = (byDay[d] || []).filter(c => c.when.includes(h.replace(':00', ':')) || (h === '2:00' && c.when.includes('2:30')));
            return (
              <div key={d} style={{
                minHeight: 48, borderRadius: 6,
                background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.02)' : 'rgba(255,255,255,0.4)',
                border: `1px solid ${THEME.lineSoft}`, padding: 4,
              }}>
                {events.map(e => (
                  <div key={e.id} style={{
                    padding: '6px 8px', borderRadius: 5,
                    background: e.sandbox ? 'rgba(91,167,115,0.20)' : THEME.blueSoft,
                    borderLeft: `2px solid ${e.sandbox ? THEME.success : THEME.blue}`,
                    fontSize: 10.5, color: THEME.text, lineHeight: 1.3,
                  }}>
                    <div style={{ fontWeight: 600 }}>{e.client}</div>
                    <div style={{ color: THEME.textMute, marginTop: 1 }}>{e.duration} min</div>
                  </div>
                ))}
              </div>
            );
          })}
        </React.Fragment>
      ))}
    </div>
  );
};

/* ============================================================
   EARNINGS / VERIFICATION
   ============================================================ */

const ReviewingEarnings = ({ variant = 'overview' }) => {
  const bars = [340, 580, 720, 940, 1240, 1620, 1480, 1847];
  const max = Math.max(...bars);
  const months = ['Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr'];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <PageHeader
        eyebrow="Section B · Reviewing attorney"
        title="$1,847 this week · $9,540 quarter"
        subtitle="Per-task earnings net of platform fee. Payouts every Friday via Stripe."
        right={<Btn icon={Icons.download} kind="primary">Tax report</Btn>}
      />
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 18 }}>
          <Stat label="This week" value="$1,847" sub="12 reviews" tone={THEME.success}/>
          <Stat label="Avg per task" value="$154" sub="net of platform fee"/>
          <Stat label="SLA compliance" value="100%" sub="52 of 52" tone={THEME.success}/>
          <Stat label="Avg rating" value="4.92" sub="52 reviews" tone={THEME.warn}/>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 12 }}>
          <div style={{ padding: 18, borderRadius: 12, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)', border: `1px solid ${THEME.line}` }}>
            <SectionLabel>Monthly net earnings · last 8 months</SectionLabel>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: 180, padding: '12px 0' }}>
              {bars.map((v, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontSize: 9.5, color: THEME.textMute, fontVariantNumeric: 'tabular-nums' }}>${v}</div>
                  <div style={{
                    width: '100%', height: `${(v/max) * 130}px`, borderRadius: '4px 4px 0 0',
                    background: i === bars.length - 1 ? `linear-gradient(180deg, ${THEME.success}, ${THEME.blue})` : THEME.blueSoft,
                    border: i === bars.length - 1 ? `1px solid ${THEME.success}` : `1px solid ${THEME.blue}30`,
                  }}/>
                  <span style={{ fontSize: 10, color: THEME.textMute }}>{months[i]}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ padding: 16, borderRadius: 12,
              background: 'rgba(91,167,115,0.08)', border: `1px solid rgba(91,167,115,0.25)` }}>
              <SectionLabel>Next payout</SectionLabel>
              <div style={{ fontFamily: 'Fraunces', fontSize: 26, color: THEME.success, fontWeight: 600, letterSpacing: -0.4 }}>$1,610.13</div>
              <div style={{ fontSize: 11, color: THEME.textMute, marginTop: 4 }}>Friday Apr 30 · ****4729</div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: THEME.textDim, marginTop: 10, paddingTop: 10, borderTop: `1px dashed ${THEME.line}` }}>
                <span>Gross</span><span>$1,847</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: THEME.textDim, marginTop: 4 }}>
                <span>Platform fee (12%)</span><span>−$221.64</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: THEME.textDim, marginTop: 4 }}>
                <span>Stripe processing</span><span>−$15.23</span>
              </div>
            </div>
            <div style={{ padding: 16, borderRadius: 12, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)', border: `1px solid ${THEME.line}` }}>
              <SectionLabel>Tier breakdown · this quarter</SectionLabel>
              {[
                { label: '24h rush · $249', count: 4, pct: 26 },
                { label: '48h rush · $179', count: 11, pct: 36 },
                { label: 'Standard · $99', count: 28, pct: 23 },
                { label: 'Consult · $79', count: 9, pct: 15 },
              ].map((t, i) => (
                <div key={i} style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: THEME.textDim, marginBottom: 3 }}>
                    <span>{t.label}</span><span style={{ color: THEME.text, fontWeight: 600 }}>{t.count} · {t.pct}%</span>
                  </div>
                  <Progress pct={t.pct} height={4}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const ReviewingVerification = ({ variant = 'overview' }) => {
  const checks = [
    { label: 'Bar admission · NY', value: 'Active · Reg. 5,138,422', verified: true, expires: 'Biennial · 03/2027' },
    { label: 'Bar admission · UT (sandbox panel)', value: 'Active · Reg. 18,440', verified: true, expires: '03/2027' },
    { label: 'Disciplinary record', value: 'Clean', verified: true, expires: 'Auto-pinged monthly' },
    { label: 'Malpractice insurance', value: '$1M / $3M aggregate', verified: true, expires: '08/2026' },
    { label: 'Conflicts database', value: '124 prior parties on file', verified: true, expires: 'Rolling' },
    { label: 'Identity (KYC)', value: 'Persona verified', verified: true, expires: 'Annual' },
    { label: 'Sandbox quarterly accuracy report', value: 'Q1 filed · 96.4%', verified: true, expires: 'Q2 due July 1' },
  ];
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <PageHeader
        eyebrow="Section B · Reviewing attorney"
        title="Verification · all checks current"
        subtitle="Trust signals shown to clients. Expirations auto-prompt 30 days out."
        right={<Pill tone={THEME.success} soft dense>Verified · last refreshed 2h ago</Pill>}
      />
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 32px' }}>
        <div style={{ background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)', border: `1px solid ${THEME.line}`, borderRadius: 12, overflow: 'hidden' }}>
          {checks.map((c, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px',
              borderTop: i > 0 ? `1px solid ${THEME.lineSoft}` : 'none',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 18, flexShrink: 0,
                background: 'rgba(91,167,115,0.18)', border: `1px solid rgba(91,167,115,0.3)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <Icon d={Icons.shield} size={16} stroke={THEME.success}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, color: THEME.text, fontWeight: 600, marginBottom: 2 }}>{c.label}</div>
                <div style={{ fontSize: 11.5, color: THEME.textDim }}>{c.value}</div>
              </div>
              <div style={{ fontSize: 11, color: THEME.textMute, textAlign: 'right' }}>
                <div style={{ color: THEME.success, fontWeight: 600, marginBottom: 2 }}>VERIFIED</div>
                <div>{c.expires}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 18, padding: '16px 18px', borderRadius: 12,
          background: `linear-gradient(135deg, ${THEME.blueSoft}, transparent)`, border: `1px solid ${THEME.blue}30` }}>
          <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>Public profile preview</div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <Avatar initials="SL" size={48}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Fraunces', fontSize: 18, color: THEME.text, fontWeight: 500 }}>Sara Lin, Esq.</div>
              <div style={{ fontSize: 12, color: THEME.textDim }}>NY · UT · 4.92 ★ · 52 reviews · 100% SLA</div>
              <div style={{ fontSize: 11.5, color: THEME.textMute, marginTop: 3 }}>Specialty: Housing, Consumer fraud, Small claims</div>
            </div>
            <Btn kind="ghost">Edit profile</Btn>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ReviewingInProgress = ReviewingInProgress;
window.ReviewingCompleted = ReviewingCompleted;
window.ReviewingConsults = ReviewingConsults;
window.ReviewingEarnings = ReviewingEarnings;
window.ReviewingVerification = ReviewingVerification;