/* Lawyer secondary screens: Calendar, Billing, Templates, Earnings */

const LawyerCalendar = () => {
  const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
  const events = {
    0: [{ t: '9:00', title: 'Chen · Complaint filing', court: 'Alameda Dept 7', color: THEME.warn, type: 'filing' }],
    1: [{ t: '10:30', title: 'Rivera · Mediation', court: 'JAMS SF', color: THEME.blue, type: 'hearing' }, { t: '3:00', title: 'Park · Client prep', color: THEME.accent, type: 'client' }],
    2: [{ t: '11:00', title: 'Alvarez · Interrog. due', color: THEME.warn, type: 'deadline' }],
    3: [{ t: '9:30', title: 'Park · Motion hearing', court: 'SF Dept 302', color: THEME.danger, type: 'hearing' }],
    4: [],
    5: [],
    6: [{ t: '2:00', title: 'Kim · Deposition', court: 'Rm 4B', color: THEME.blue, type: 'hearing' }],
  };

  return (
    <div style={{ height: '100%', overflow: 'auto', padding: '28px 32px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 2.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>Court Calendar</div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, color: THEME.text, fontWeight: 500, letterSpacing: -0.3 }}>April 13–19, 2026</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button style={lawBtn('ghost')}>← Prev</button>
          <button style={lawBtn('ghost')}>Today</button>
          <button style={lawBtn('ghost')}>Next →</button>
          <button style={lawBtn('primary')}><Icon d={Icons.plus} size={12} stroke="#fff" sw={2}/> New event</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8, marginBottom: 22 }}>
        {days.map((d, i) => (
          <div key={i} style={{
            background: i === 0 ? 'rgba(91,123,255,0.08)' : 'rgba(255,255,255,0.02)',
            border: i === 0 ? `1px solid rgba(91,123,255,0.25)` : `1px solid ${THEME.lineSoft}`,
            borderRadius: 10, padding: 12, minHeight: 200,
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 10 }}>
              <span style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 0.5, fontWeight: 600 }}>{d}</span>
              <span style={{ fontSize: 18, color: i === 0 ? THEME.accent : THEME.text, fontWeight: 600, fontFamily: 'Fraunces, serif' }}>{13 + i}</span>
              {i === 0 && <span style={{ fontSize: 9, padding: '1px 5px', borderRadius: 3, background: THEME.blue, color: '#fff', fontWeight: 700, marginLeft: 'auto' }}>TODAY</span>}
            </div>
            {(events[i] || []).map((e, j) => (
              <div key={j} style={{ padding: '7px 8px', background: `${e.color}22`, borderLeft: `2px solid ${e.color}`, borderRadius: 4, marginBottom: 5 }}>
                <div style={{ fontSize: 10.5, color: e.color, fontWeight: 600 }}>{e.t}</div>
                <div style={{ fontSize: 11, color: THEME.text, fontWeight: 500, lineHeight: 1.3 }}>{e.title}</div>
                {e.court && <div style={{ fontSize: 10, color: THEME.textMute, marginTop: 1 }}>{e.court}</div>}
              </div>
            ))}
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 14 }}>
        <div>
          <SectionLabel>Upcoming filing deadlines</SectionLabel>
          <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 4 }}>
            {[
              { date: 'Apr 14', case: 'Chen v. Northbay', what: 'SC-100 Complaint', days: 1, urgent: true },
              { date: 'Apr 18', case: 'Park Motion', what: 'Oral argument brief', days: 5, urgent: true },
              { date: 'Apr 22', case: 'Alvarez', what: 'Interrogatory responses', days: 9 },
              { date: 'May 3', case: 'Kim LLC', what: 'Jury instructions proposed', days: 20 },
            ].map((d, i) => (
              <div key={i} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'grid', gridTemplateColumns: '60px 1fr 80px 50px', gap: 10, alignItems: 'center' }}>
                <span style={{ fontSize: 12, color: d.urgent ? THEME.danger : THEME.textDim, fontWeight: 600 }}>{d.date}</span>
                <div>
                  <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 550 }}>{d.what}</div>
                  <div style={{ fontSize: 11, color: THEME.textMute }}>{d.case}</div>
                </div>
                <span style={{ fontSize: 11, color: d.urgent ? THEME.danger : THEME.textMute, fontWeight: 500 }}>{d.days}d left</span>
                <Icon d={Icons.chevronRight} size={13} stroke={THEME.textMute}/>
              </div>
            ))}
          </div>
        </div>

        <div>
          <SectionLabel>Magistrates & clerks</SectionLabel>
          <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 4 }}>
            {[
              { name: 'Hon. Helena Vasquez', role: 'Alameda · Dept 7', phone: '(510) 891-6000', color: '#8b5cf6' },
              { name: 'Hon. Daniel Okafor', role: 'Alameda · Dept 11', phone: '(510) 891-6011', color: '#5b7bff' },
              { name: 'Hon. Priya Raman', role: 'SF · Dept 302', phone: '(415) 551-4000', color: '#4fd39a' },
            ].map((m, i) => (
              <div key={i} style={{ padding: '12px 14px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 32, height: 32, borderRadius: 16, background: `linear-gradient(135deg, ${m.color}33, ${m.color})`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 11, fontWeight: 600, fontFamily: 'Fraunces, serif' }}>
                  {m.name.split(' ').slice(-1)[0][0]}{m.name.split(' ')[1][0]}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 550 }}>{m.name}</div>
                  <div style={{ fontSize: 11, color: THEME.textMute }}>{m.role} · {m.phone}</div>
                </div>
                <Icon d={Icons.send} size={14} stroke={THEME.blue}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const LawyerBilling = () => {
  return (
    <div style={{ height: '100%', overflow: 'auto', padding: '28px 32px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 2.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>Billing & Time</div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, color: THEME.text, fontWeight: 500 }}>Track hours · invoice clients</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button style={lawBtn('ghost')}><Icon d={Icons.clock} size={12} stroke={THEME.text}/> Start timer</button>
          <button style={lawBtn('primary')}><Icon d={Icons.plus} size={12} stroke="#fff" sw={2}/> New invoice</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 22 }}>
        <SummaryStat label="Billable this week" value="27.5 h" delta="68% utilization" color={THEME.text}/>
        <SummaryStat label="Outstanding" value="$4,320" delta="3 invoices" color={THEME.warn}/>
        <SummaryStat label="Paid · 30d" value="$7,930" delta="+18% MoM" color={THEME.success}/>
        <SummaryStat label="Avg collection" value="11 days" delta="faster than avg" color={THEME.accent}/>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 14 }}>
        <div>
          <SectionLabel>Active timer</SectionLabel>
          <div style={{ background: 'rgba(91,123,255,0.08)', border: `1px solid rgba(91,123,255,0.25)`, borderRadius: 12, padding: 18, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ width: 48, height: 48, borderRadius: 24, background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 20px rgba(91,123,255,0.3)' }}>
              <Icon d={Icons.clock} size={22} stroke="#fff"/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, color: THEME.textDim }}>Park · Motion to Dismiss</div>
              <div style={{ fontSize: 24, color: THEME.text, fontWeight: 600, fontFamily: 'Fraunces, serif', letterSpacing: -0.3, fontVariantNumeric: 'tabular-nums' }}>2:18:47</div>
              <div style={{ fontSize: 11, color: THEME.textMute, marginTop: 2 }}>@ $240/hr · $557 accrued</div>
            </div>
            <button style={{ ...lawBtn('ghost'), background: 'rgba(240,113,119,0.1)', color: THEME.danger, borderColor: 'rgba(240,113,119,0.3)' }}>Stop</button>
          </div>

          <SectionLabel>Recent time entries</SectionLabel>
          <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 4 }}>
            {[
              { case: 'Chen v. Northbay', task: 'Draft complaint · review AI output', hrs: 1.8, rate: 'Flat', amount: 510 },
              { case: 'Park · MTD', task: 'Research 12(b)(6) precedents', hrs: 2.3, rate: '$240/hr', amount: 552 },
              { case: 'Alvarez', task: 'Client call · discovery strategy', hrs: 0.7, rate: '$275/hr', amount: 193 },
              { case: 'Kim LLC', task: 'Witness prep · declaration drafting', hrs: 3.1, rate: 'Contingency', amount: null },
              { case: 'Rivera', task: 'Mediation prep', hrs: 1.5, rate: 'Hybrid $200/hr', amount: 300 },
            ].map((e, i) => (
              <div key={i} style={{ padding: '11px 14px', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}`, display: 'grid', gridTemplateColumns: '1.2fr 2fr 50px 80px 70px', gap: 10, alignItems: 'center' }}>
                <span style={{ fontSize: 12, color: THEME.text, fontWeight: 550 }}>{e.case}</span>
                <span style={{ fontSize: 11.5, color: THEME.textDim }}>{e.task}</span>
                <span style={{ fontSize: 11.5, color: THEME.textDim, fontVariantNumeric: 'tabular-nums' }}>{e.hrs}h</span>
                <span style={{ fontSize: 11, color: THEME.textMute }}>{e.rate}</span>
                <span style={{ fontSize: 12, color: e.amount ? THEME.success : THEME.textMute, fontWeight: 600, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{e.amount ? `$${e.amount}` : 'accrued'}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <SectionLabel>Outstanding invoices</SectionLabel>
          <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 4 }}>
            {[
              { inv: '#2026-041', client: 'Marcus Chen', amt: 340, days: 3, status: 'Sent' },
              { inv: '#2026-040', client: 'Jae-won Park', amt: 2880, days: 12, status: 'Overdue', overdue: true },
              { inv: '#2026-038', client: 'Camila Alvarez', amt: 1100, days: 21, status: 'Partial', partial: true },
            ].map((i, k) => (
              <div key={k} style={{ padding: '12px 14px', borderTop: k === 0 ? 'none' : `1px solid ${THEME.lineSoft}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                  <span style={{ fontSize: 12, color: THEME.text, fontWeight: 600, flex: 1 }}>{i.inv}</span>
                  <span style={{ fontSize: 13, color: THEME.text, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>${i.amt.toLocaleString()}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 11, color: THEME.textMute, flex: 1 }}>{i.client}</span>
                  <LawPill color={i.overdue ? THEME.danger : i.partial ? THEME.warn : THEME.blue} bg="rgba(255,255,255,0.04)">{i.status} · {i.days}d</LawPill>
                </div>
              </div>
            ))}
          </div>

          <SectionLabel style={{ marginTop: 18 }}>Payout schedule</SectionLabel>
          <div style={{ background: 'rgba(79,211,154,0.06)', border: `1px solid rgba(79,211,154,0.2)`, borderRadius: 12, padding: 16 }}>
            <div style={{ fontSize: 11.5, color: THEME.textDim, marginBottom: 6 }}>Next payout via Stripe</div>
            <div style={{ fontSize: 22, color: THEME.success, fontWeight: 600, fontFamily: 'Fraunces, serif', letterSpacing: -0.3 }}>$3,240.00</div>
            <div style={{ fontSize: 11, color: THEME.textMute, marginTop: 4 }}>Friday, Apr 17 · **** 4729</div>
            <div style={{ height: 1, background: 'rgba(255,255,255,0.06)', margin: '12px 0' }}/>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: THEME.textDim }}>
              <span>Platform fee (8%)</span><span>−$281.74</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: THEME.textDim, marginTop: 3 }}>
              <span>Processing</span><span>−$94.86</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const LawyerTemplates = () => {
  const templates = [
    { name: 'Small Claims Complaint (SC-100)', cat: 'Claim forms', used: 34, rating: 4.8 },
    { name: 'Motion to Dismiss. FRCP 12(b)(6)', cat: 'Motions', used: 18, rating: 4.9 },
    { name: 'Demand Letter. Breach of contract', cat: 'Pre-suit', used: 52, rating: 4.7 },
    { name: 'Interrogatories. Housing', cat: 'Discovery', used: 14, rating: 4.6 },
    { name: 'Request for Production', cat: 'Discovery', used: 29, rating: 4.8 },
    { name: 'Response to Unlawful Detainer', cat: 'Housing', used: 11, rating: 4.9 },
    { name: 'Witness Declaration template', cat: 'Trial', used: 41, rating: 4.8 },
    { name: 'Settlement Agreement. Mutual', cat: 'Settlement', used: 22, rating: 4.7 },
  ];

  return (
    <div style={{ height: '100%', overflow: 'auto', padding: '28px 32px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 2.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>Templates & Precedents</div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, color: THEME.text, fontWeight: 500 }}>Your library · 48 templates · 1,240 precedents</div>
        </div>
        <button style={lawBtn('primary')}><Icon d={Icons.plus} size={12} stroke="#fff" sw={2}/> New template</button>
      </div>

      <div style={{ display: 'flex', gap: 6, marginBottom: 18 }}>
        {['All', 'Claim forms', 'Motions', 'Discovery', 'Pre-suit', 'Trial', 'Settlement', 'Housing'].map((f, i) => (
          <span key={f} style={{
            padding: '6px 12px', fontSize: 11.5, borderRadius: 14,
            background: i === 0 ? THEME.blueSoft : 'rgba(255,255,255,0.03)',
            color: i === 0 ? THEME.accent : THEME.textDim,
            border: i === 0 ? `1px solid rgba(91,123,255,0.3)` : `1px solid ${THEME.lineSoft}`,
            fontWeight: i === 0 ? 600 : 450, cursor: 'pointer',
          }}>{f}</span>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 22 }}>
        {templates.map((t, i) => (
          <div key={i} style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16, cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
              <div style={{ width: 32, height: 38, borderRadius: 4, background: 'rgba(91,123,255,0.1)', border: `1px solid rgba(91,123,255,0.2)`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon d={Icons.doc} size={16} stroke={THEME.blue}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 600, lineHeight: 1.35 }}>{t.name}</div>
                <div style={{ fontSize: 10.5, color: THEME.textMute, marginTop: 2 }}>{t.cat}</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: THEME.textDim }}>
              <span>Used {t.used}×</span>
              <span>·</span>
              <span style={{ color: THEME.warn }}>★ {t.rating}</span>
              <div style={{ flex: 1 }}/>
              <Icon d={Icons.sparkle} size={11} stroke={THEME.accent}/>
              <span style={{ color: THEME.accent, fontWeight: 500 }}>AI-enhanced</span>
            </div>
          </div>
        ))}
      </div>

      <SectionLabel>Precedent search</SectionLabel>
      <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,0.03)', border: `1px solid ${THEME.line}`, borderRadius: 10, padding: '10px 14px', marginBottom: 14 }}>
          <Icon d={Icons.search} size={15} stroke={THEME.textDim}/>
          <input placeholder="Search 12,400 CA appellate + trial opinions…" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: THEME.text, fontSize: 13 }}/>
          <button style={{ ...lawBtn('ghost'), padding: '4px 10px', fontSize: 11 }}><Icon d={Icons.sparkle} size={11} stroke={THEME.accent}/> Ask AI</button>
        </div>
        {[
          { case: 'Brandon v. Meridian Construction', cite: '92 Cal.App.5th 1184 (2023)', snippet: 'Successor contractor premium of 48% held reasonable where original contractor abandoned weather-sensitive exterior work.', tag: 'Relevant · Chen' },
          { case: 'Ortega v. Sunwest Builders', cite: '78 Cal.App.5th 221 (2022)', snippet: 'Materials-delivered counterclaim requires proof of actual use, not mere delivery.', tag: 'Relevant · Chen' },
        ].map((p, i) => (
          <div key={i} style={{ padding: '12px 0', borderTop: i === 0 ? 'none' : `1px solid ${THEME.lineSoft}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              <span style={{ fontSize: 13, color: THEME.text, fontWeight: 600, fontFamily: 'Fraunces, serif' }}>{p.case}</span>
              <span style={{ fontSize: 11, color: THEME.textMute }}>{p.cite}</span>
              <div style={{ flex: 1 }}/>
              <LawPill color={THEME.accent} bg={THEME.blueSoft}>{p.tag}</LawPill>
            </div>
            <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.5 }}>{p.snippet}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

const LawyerEarnings = () => {
  const bars = [2100, 3400, 2800, 4100, 3200, 5200, 4800, 6200, 5400, 7100, 6800, 7930];
  const max = Math.max(...bars);
  const months = ['May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr'];

  return (
    <div style={{ height: '100%', overflow: 'auto', padding: '28px 32px' }}>
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 2.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>Earnings</div>
        <div style={{ fontFamily: 'Fraunces, serif', fontSize: 28, color: THEME.text, fontWeight: 500 }}>$59,030 lifetime · 127 cases closed</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 22 }}>
        <SummaryStat label="This month" value="$7,930" delta="+18% MoM" color={THEME.success}/>
        <SummaryStat label="Avg case value" value="$465" delta="flat-fee mix" color={THEME.text}/>
        <SummaryStat label="Client rating" value="4.9 ★" delta="127 reviews" color={THEME.warn}/>
        <SummaryStat label="Acceptance rate" value="61%" delta="11/18 this month" color={THEME.accent}/>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }}>
        <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 20 }}>
          <SectionLabel>Monthly revenue · last 12 months</SectionLabel>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 180, marginBottom: 10 }}>
            {bars.map((v, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{
                  width: '100%', height: `${(v/max) * 150}px`, borderRadius: '4px 4px 0 0',
                  background: i === bars.length - 1 ? `linear-gradient(180deg, ${THEME.accent}, ${THEME.blue})` : `linear-gradient(180deg, rgba(91,123,255,0.5), rgba(91,123,255,0.15))`,
                  border: i === bars.length - 1 ? `1px solid ${THEME.accent}` : 'none',
                }}/>
                <span style={{ fontSize: 10, color: THEME.textMute }}>{months[i]}</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <SectionLabel>Case mix</SectionLabel>
          <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16, marginBottom: 14 }}>
            {[
              { label: 'Small Claims', pct: 42, color: THEME.blue },
              { label: 'Housing', pct: 28, color: THEME.accent },
              { label: 'Civil', pct: 18, color: THEME.success },
              { label: 'Business', pct: 12, color: THEME.warn },
            ].map((c, i) => (
              <div key={i} style={{ marginBottom: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: THEME.textDim, marginBottom: 4 }}>
                  <span>{c.label}</span>
                  <span style={{ color: THEME.text, fontWeight: 600 }}>{c.pct}%</span>
                </div>
                <div style={{ height: 6, borderRadius: 3, background: 'rgba(255,255,255,0.06)', overflow: 'hidden' }}>
                  <div style={{ width: `${c.pct}%`, height: '100%', background: c.color, borderRadius: 3 }}/>
                </div>
              </div>
            ))}
          </div>

          <SectionLabel>Client reviews</SectionLabel>
          <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{ fontSize: 30, color: THEME.warn, fontFamily: 'Fraunces, serif', fontWeight: 500 }}>4.9</div>
              <div>
                <div style={{ color: THEME.warn, fontSize: 13, letterSpacing: 2 }}>★★★★★</div>
                <div style={{ fontSize: 11, color: THEME.textMute }}>127 reviews · top 3% in CA</div>
              </div>
            </div>
            <div style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.5, fontStyle: 'italic', paddingTop: 10, borderTop: `1px solid ${THEME.lineSoft}` }}>
              "Sarah guided us through small claims with zero stress. Filed in a week.". <span style={{ color: THEME.textMute, fontStyle: 'normal' }}>M.C., Apr 2026</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.LawyerCalendar = LawyerCalendar;
window.LawyerBilling = LawyerBilling;
window.LawyerTemplates = LawyerTemplates;
window.LawyerEarnings = LawyerEarnings;