/* Partner Firm experience. B.12 branded platform overview.
   For legal aid orgs, pro bono firms, unbundled-services firms operating a branded version. */

const PartnerFirmOverview = () => {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <div style={{ padding: '24px 32px 16px', borderBottom: `1px solid ${THEME.line}` }}>
        <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600 }}>
          B.12 · Partner Firm
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginTop: 4 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Fraunces', fontSize: 30, color: THEME.text, fontWeight: 500, letterSpacing: -0.5, lineHeight: 1.1 }}>
              Bay Legal Aid · Firm overview
            </div>
            <div style={{ fontSize: 12.5, color: THEME.textDim, marginTop: 6, maxWidth: 600, lineHeight: 1.5 }}>
              Branded platform for legal aid · 14 attorneys · 92 active matters · Custom intake flows · Grant reporting enabled
            </div>
          </div>
          <div style={{
            padding: '8px 14px', borderRadius: 8,
            background: 'rgba(91,167,115,0.16)', border: `1px solid rgba(91,167,115,0.35)`,
            display: 'flex', alignItems: 'center', gap: 7,
          }}>
            <Icon d={Icons.shield} size={13} stroke={THEME.success}/>
            <span style={{ fontSize: 11.5, color: THEME.success, fontWeight: 600 }}>Enterprise license · $87K/yr</span>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '24px 32px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        {/* Top stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {[
            { label: 'Active matters', value: '92', sub: '14 attorneys', tone: THEME.blue },
            { label: 'Closed YTD', value: '247', sub: '68% favorable', tone: THEME.success },
            { label: 'Pro bono hours', value: '1,842', sub: 'Q4 grant reporting', tone: THEME.accent },
            { label: 'Reduced-fee', value: '$28K', sub: 'subsidized through grants', tone: THEME.warning },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '16px 18px', borderRadius: 12,
              background: THEME.surface, border: `1px solid ${THEME.line}`,
            }}>
              <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 600 }}>{s.label}</div>
              <div style={{ fontFamily: 'Fraunces', fontSize: 30, color: THEME.text, fontWeight: 500, letterSpacing: -0.6, marginTop: 6, lineHeight: 1 }}>{s.value}</div>
              <div style={{ fontSize: 11.5, color: THEME.textDim, marginTop: 6 }}>{s.sub}</div>
            </div>
          ))}
        </div>

        {/* Two columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 16 }}>
          {/* Attorney roster */}
          <div style={{ padding: '18px 20px', borderRadius: 14, background: THEME.surface, border: `1px solid ${THEME.line}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <div style={{ fontFamily: 'Fraunces', fontSize: 18, color: THEME.text, fontWeight: 500, letterSpacing: -0.2 }}>Attorney roster</div>
              <div style={{ fontSize: 11, color: THEME.textDim, padding: '3px 9px', borderRadius: 5, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)' }}>+ Add attorney</div>
            </div>
            {[
              { name: 'Sara Lin', role: 'Senior staff', cases: 14, util: 92, areas: 'Housing, Consumer' },
              { name: 'Daniel Reyes', role: 'Senior staff', cases: 18, util: 88, areas: 'Family, Immigration' },
              { name: 'Aisha Okonkwo', role: 'Staff attorney', cases: 11, util: 76, areas: 'Employment' },
              { name: 'Marco Vélez', role: 'Pro bono', cases: 6, util: 45, areas: 'Small claims, Consumer' },
              { name: 'Hannah Reed', role: 'Of counsel', cases: 4, util: 38, areas: 'Appeals' },
            ].map((a, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 0',
                borderBottom: i < 4 ? `1px solid ${THEME.lineSoft}` : 'none',
              }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 15,
                  background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', fontSize: 11, fontWeight: 600,
                }}>{a.name.split(' ').map(p => p[0]).join('')}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, color: THEME.text, fontWeight: 600 }}>{a.name}</div>
                  <div style={{ fontSize: 11, color: THEME.textMute }}>{a.role} · {a.areas}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 13, color: THEME.text, fontWeight: 600 }}>{a.cases} matters</div>
                  <div style={{ fontSize: 10.5, color: a.util > 85 ? THEME.warning : a.util > 60 ? THEME.success : THEME.textMute }}>{a.util}% utilization</div>
                </div>
              </div>
            ))}
          </div>

          {/* Branding + grant strip */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ padding: '18px 20px', borderRadius: 14, background: THEME.surface, border: `1px solid ${THEME.line}` }}>
              <div style={{ fontFamily: 'Fraunces', fontSize: 17, color: THEME.text, fontWeight: 500, letterSpacing: -0.2, marginBottom: 12 }}>Branded experience</div>
              {[
                { label: 'White-label domain', value: 'help.baylegal.org', ok: true },
                { label: 'Custom logo + brand', value: 'Configured', ok: true },
                { label: 'Custom intake flows', value: '4 active', ok: true },
                { label: 'Practice area filters', value: 'Housing · Consumer · Family', ok: true },
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 9, padding: '7px 0',
                  borderBottom: i < 3 ? `1px solid ${THEME.lineSoft}` : 'none',
                }}>
                  <Icon d={Icons.check} size={12} stroke={THEME.success} sw={3}/>
                  <span style={{ flex: 1, fontSize: 12, color: THEME.text }}>{r.label}</span>
                  <span style={{ fontSize: 11.5, color: THEME.textDim }}>{r.value}</span>
                </div>
              ))}
            </div>

            <div style={{
              padding: '16px 18px', borderRadius: 14,
              background: `linear-gradient(135deg, ${THEME.blueSoft}, transparent)`,
              border: `1px solid ${THEME.blue}30`,
            }}>
              <div style={{ fontFamily: 'Fraunces', fontSize: 17, color: THEME.text, fontWeight: 500, letterSpacing: -0.2, marginBottom: 8 }}>Q4 grant reporting</div>
              <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.5, marginBottom: 10 }}>
                Auto-tracked metrics for LSC, IOLA, Robin Hood Foundation. Pro bono hours, reduced-fee subsidies, demographics.
              </div>
              <div style={{ display: 'flex', gap: 6, alignItems: 'center', fontSize: 12, color: THEME.blue, fontWeight: 600 }}>
                <Icon d={Icons.download} size={13} stroke={THEME.blue}/>
                Export Q4 grant pack →
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.PartnerFirmOverview = PartnerFirmOverview;