// Mobile screens — part 3: Biblioteca de autores, Contratos templates, Financeiro, Investimentos, Estudo

// ─── Biblioteca de autores favoritos ─────────────────────
function MBiblioteca() {
  const t = useTheme();
  const nav = useNav();
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <ScreenHeader sub="Identidade na escrita" title="Biblioteca" onBack={() => nav.go('mais')} right={<IconBtn name="plus"/>}/>

    <div style={{ padding: '0 18px 12px' }}>
      <Card pad={14} style={{ background: t.raised }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <Icon name="feather" size={14} color={t.accent}/>
          <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Estilo do escritório</div>
        </div>
        <div style={{ fontSize: 12.5, color: t.text, lineHeight: 1.5 }}>
          A IA referenciará <b>23 autores favoritos</b> e <b>4 obras-base</b> ao redigir peças em seu nome, mantendo a voz autoral do escritório.
        </div>
      </Card>
    </div>

    <div style={{ padding: '0 18px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <h3 style={{ fontFamily: '"Playfair Display", serif', fontSize: 14, fontWeight: 600, margin: 0, color: t.text }}>Autores · 23</h3>
      <a style={{ fontSize: 11, color: t.accent, fontWeight: 600 }}>Gerenciar</a>
    </div>

    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {[
        { n: 'Pontes de Miranda',     a: 'Tratado de Direito Privado',          area: 'Civil · Geral',         peso: 5 },
        { n: 'Fábio Konder Comparato', a: 'O Poder de Controle na S/A',          area: 'Empresarial',           peso: 5 },
        { n: 'Humberto Theodoro Jr.', a: 'Curso de Direito Proc. Civil',         area: 'Processo Civil',        peso: 4 },
        { n: 'Caio Mário',             a: 'Instituições de Direito Civil',       area: 'Civil · Obrigações',    peso: 4 },
        { n: 'Tércio Sampaio Ferraz',  a: 'Introdução ao Estudo do Direito',     area: 'Teoria',                peso: 3 },
        { n: 'Nelson Nery Jr.',        a: 'Código de Processo Civil Comentado',  area: 'Processo Civil',        peso: 4 },
      ].map(au => <Card key={au.n} pad={12}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <div style={{ width: 36, height: 44, borderRadius: 4, background: t.elevated, border: `1px solid ${t.border}`, position: 'relative', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="book" size={16} color={t.accent}/>
            <div style={{ position: 'absolute', left: 0, top: 6, bottom: 6, width: 3, background: t.accent }}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: t.text }}>{au.n}</div>
            <div style={{ fontSize: 11, color: t.subtext, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{au.a}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 5 }}>
              <Pill tone="neutral">{au.area}</Pill>
              <div style={{ display: 'flex', gap: 2 }}>
                {Array.from({length: 5}).map((_, i) => <div key={i} style={{ width: 5, height: 5, borderRadius: '50%', background: i < au.peso ? t.accent : t.borderSoft }}/>)}
              </div>
            </div>
          </div>
        </div>
      </Card>)}
    </div>

    <BottomNav items={NAV_ITEMS} value="mais"/>
  </div>;
}

// ─── Contratos & templates ──────────────────────────────
function MContratos() {
  const t = useTheme();
  const nav = useNav();
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <ScreenHeader sub="Templates jurídicos" title="Contratos" onBack={() => nav.go('mais')} right={<IconBtn name="plus"/>}/>

    <div style={{ padding: '0 18px 12px' }}>
      <Card pad={13} style={{ background: t.raised, borderColor: t.border }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: t.accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="spark" size={18}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: t.text }}>Geração a partir do CRM</div>
            <div style={{ fontSize: 11, color: t.subtext, marginTop: 1 }}>Vincule um lead e o contrato é pré-preenchido</div>
          </div>
          <Btn size="sm" variant="primary">Vincular</Btn>
        </div>
      </Card>
    </div>

    <div style={{ padding: '0 18px 6px', fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Templates</div>

    <div style={{ padding: '6px 18px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
      {[
        { n: 'Honorários',           u: '142 usos',  cor: t.accent },
        { n: 'Procuração',           u: '298 usos',  cor: t.accent2 },
        { n: 'Petição inicial',      u: '87 usos',   cor: t.positive },
        { n: 'Contestação',          u: '94 usos',   cor: t.warn },
        { n: 'Apelação',             u: '36 usos',   cor: t.accent },
        { n: 'Agravo',               u: '21 usos',   cor: t.accent2 },
        { n: 'Acordo extrajudicial', u: '54 usos',   cor: t.positive },
        { n: 'Prestação serviços',   u: '67 usos',   cor: t.warn },
      ].map(c => <Card key={c.n} pad={12}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: t.elevated, border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 9, position: 'relative' }}>
          <Icon name="doc" size={16} color={c.cor}/>
          <div style={{ position: 'absolute', top: 0, left: 0, width: 3, height: '60%', background: c.cor, borderTopLeftRadius: 8 }}/>
        </div>
        <div style={{ fontSize: 12.5, fontWeight: 700, color: t.text }}>{c.n}</div>
        <div style={{ fontSize: 10.5, color: t.muted, marginTop: 2 }}>{c.u}</div>
      </Card>)}
    </div>

    <div style={{ padding: '14px 18px 6px', fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Recentes</div>
    <div style={{ padding: '4px 18px', display: 'flex', flexDirection: 'column', gap: 8 }}>
      {[
        { n: 'Honorários · Vellozo S/A',     d: 'há 2h',  s: 'Aguardando assinatura', tone: 'warn' },
        { n: 'Procuração · M. Quintanilha',  d: 'ontem',  s: 'Assinado',              tone: 'positive' },
        { n: 'Prestação · Construtora Rocha',d: '3d',     s: 'Em revisão',            tone: 'neutral' },
      ].map((c, i) => <Card key={i} pad={11}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: t.chipBg, color: t.chipText, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="doc" size={15}/></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: t.text }}>{c.n}</div>
            <div style={{ fontSize: 10.5, color: t.muted }}>{c.d}</div>
          </div>
          <Pill tone={c.tone}>{c.s}</Pill>
        </div>
      </Card>)}
    </div>

    <BottomNav items={NAV_ITEMS} value="mais"/>
  </div>;
}

// ─── Financeiro (escritório + cliente em abas) ─────────
function MFinanceiro() {
  const t = useTheme();
  const nav = useNav();
  const [tab, setTab] = React.useState('escritorio');
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <ScreenHeader sub="Controle financeiro" title="Financeiro" onBack={() => nav.go('mais')} right={<IconBtn name="filter"/>}/>

    <div style={{ padding: '0 18px 14px' }}>
      <Tabs value={tab} onChange={setTab} items={[
        { id: 'escritorio', label: 'Escritório' },
        { id: 'cliente', label: 'Cliente' },
        { id: 'fiscal', label: 'Fiscal' },
      ]}/>
    </div>

    {tab === 'escritorio' && <>
      {/* Saldo */}
      <div style={{ padding: '0 18px 12px' }}>
        <Card pad={16}>
          <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Receita do mês</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 6 }}>
            <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 30, fontWeight: 600, color: t.text, letterSpacing: -0.5 }}>R$ 487.230</div>
            <Pill tone="positive">+18,2%</Pill>
          </div>
          <div style={{ marginTop: 14 }}>
            <Bars data={[42, 51, 38, 60, 47, 72, 65, 81, 70, 88, 96, 110]}/>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 9.5, color: t.muted }}>
            {['Jun','Jul','Ago','Set','Out','Nov','Dez','Jan','Fev','Mar','Abr','Mai'].map(m => <span key={m}>{m}</span>)}
          </div>
        </Card>
      </div>

      <div style={{ padding: '0 18px 12px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <Card pad={12}><Stat label="A receber" value="R$ 89k" hint="12 honorários"/></Card>
        <Card pad={12}><Stat label="Inadimplência" value="3,4%" hint="-0,8pp" tone="positive"/></Card>
      </div>

      <div style={{ padding: '0 18px 6px', fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Últimos lançamentos</div>
      <div style={{ padding: '4px 18px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[
          { n: 'Honorários Vellozo S/A',    d: 'Hoje',  v: '+ R$ 48.000', tone: 'positive' },
          { n: 'Despesa cartorial',         d: 'Ontem', v: '- R$ 1.240',  tone: 'danger' },
          { n: 'Honorários M. Quintanilha', d: '3d',    v: '+ R$ 12.000', tone: 'positive' },
          { n: 'Folha funcionários',        d: '5d',    v: '- R$ 86.400', tone: 'danger' },
        ].map((l, i) => <Card key={i} pad={11}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 30, height: 30, borderRadius: 8, background: t.elevated, color: l.tone === 'positive' ? t.positive : t.danger, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={l.tone === 'positive' ? 'wallet' : 'doc'} size={14}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, color: t.text }}>{l.n}</div>
              <div style={{ fontSize: 10.5, color: t.muted }}>{l.d}</div>
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, fontFamily: '"Playfair Display"', color: l.tone === 'positive' ? t.positive : t.danger }}>{l.v}</div>
          </div>
        </Card>)}
      </div>
    </>}

    {tab === 'cliente' && <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <Card pad={14}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <Avatar name="Vellozo S/A" size={40} tone={t.accent}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: t.text }}>Vellozo S/A</div>
            <div style={{ fontSize: 11, color: t.subtext }}>Patrimônio consolidado</div>
          </div>
          <Pill tone="accent">Premium</Pill>
        </div>
        <Stat label="Patrimônio total" value="R$ 42,7M" hint="+R$ 1,2M este mês" tone="positive" big/>
      </Card>

      <Card pad={14}>
        <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 10 }}>Distribuição patrimonial</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Donut size={92} thickness={16} segments={[
            { value: 18, color: t.accent },
            { value: 12, color: t.accent2 },
            { value: 8, color: t.positive },
            { value: 5, color: t.warn },
          ]} center={<><div style={{ fontSize: 9.5, color: t.muted }}>Total</div><div style={{ fontFamily: '"Playfair Display"', fontWeight: 700, fontSize: 14, color: t.text }}>R$ 42M</div></>}/>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              { c: t.accent,    l: 'Imóveis',      v: '42%' },
              { c: t.accent2,   l: 'Renda fixa',   v: '28%' },
              { c: t.positive,  l: 'Ações',        v: '19%' },
              { c: t.warn,      l: 'Previdência',  v: '11%' },
            ].map(s => <div key={s.l} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 11 }}>
              <span style={{ width: 8, height: 8, borderRadius: 2, background: s.c }}/>
              <span style={{ color: t.subtext, flex: 1 }}>{s.l}</span>
              <span style={{ color: t.text, fontWeight: 700 }}>{s.v}</span>
            </div>)}
          </div>
        </div>
      </Card>
    </div>}

    {tab === 'fiscal' && <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <Card pad={14}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <Icon name="shield" size={15} color={t.accent}/>
          <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Compliance fiscal</div>
        </div>
        <div style={{ fontFamily: '"Playfair Display"', fontSize: 24, fontWeight: 600, color: t.positive, marginBottom: 4 }}>96%</div>
        <ProgressBar value={0.96} color={t.positive}/>
        <div style={{ fontSize: 11, color: t.subtext, marginTop: 6 }}>3 obrigações pendentes este mês</div>
      </Card>

      <Card pad={0}>
        {[
          { n: 'DARF · IRPJ', d: 'Vence 20/06',  tone: 'warn',     v: 'R$ 18.420' },
          { n: 'GFIP · INSS', d: 'Vence 07/06',  tone: 'danger',   v: 'R$ 9.870' },
          { n: 'DCTF',        d: 'Vence 25/06',  tone: 'neutral',  v: '—' },
          { n: 'ECF anual',   d: 'Vence 30/06',  tone: 'neutral',  v: '—' },
        ].map((o, i, a) => <div key={i} style={{
          padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10,
          borderBottom: i < a.length - 1 ? `1px solid ${t.borderSoft}` : 'none',
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: t.text }}>{o.n}</div>
            <div style={{ fontSize: 11, color: t.subtext }}>{o.d}</div>
          </div>
          <div style={{ fontSize: 12, fontFamily: '"Playfair Display"', fontWeight: 700, color: t.text }}>{o.v}</div>
          <Pill tone={o.tone}>{o.tone === 'danger' ? 'urgente' : o.tone === 'warn' ? 'em breve' : 'no prazo'}</Pill>
        </div>)}
      </Card>
    </div>}

    <BottomNav items={NAV_ITEMS} value="mais"/>
  </div>;
}

// ─── Investimentos / Previdência (cliente) ──────────────
function MInvestimentos() {
  const t = useTheme();
  const nav = useNav();
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <ScreenHeader sub="Cliente · Vellozo S/A" title="Investimentos" onBack={() => nav.go('mais')}/>

    <div style={{ padding: '0 18px 12px' }}>
      <Card pad={16}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Patrimônio investido</div>
            <div style={{ fontFamily: '"Playfair Display"', fontSize: 28, fontWeight: 600, marginTop: 4, color: t.text, letterSpacing: -0.5 }}>R$ 24,3M</div>
            <div style={{ fontSize: 11.5, color: t.positive, marginTop: 4, fontWeight: 600 }}>+R$ 312k este mês · +1,3%</div>
          </div>
          <MiniSpark data={[12, 14, 13, 17, 18, 16, 22, 24]} width={70} height={50}/>
        </div>
      </Card>
    </div>

    {/* Alocação */}
    <div style={{ padding: '0 18px 12px' }}>
      <h3 style={{ fontFamily: '"Playfair Display", serif', fontSize: 14, fontWeight: 600, margin: '0 0 8px', color: t.text }}>Alocação atual</h3>
      <Card pad={14}>
        {[
          { l: 'Renda fixa',       v: 42, c: t.accent,   r: '11,8% a.a.' },
          { l: 'Ações nacionais',  v: 21, c: t.accent2,  r: '+18,4% YTD' },
          { l: 'Ações exterior',   v: 14, c: t.positive, r: '+9,2% YTD' },
          { l: 'Previdência PGBL', v: 12, c: t.warn,     r: '10,1% a.a.' },
          { l: 'Imóveis (FII)',    v: 11, c: t.muted,    r: '+5,7% YTD' },
        ].map(a => <div key={a.l} style={{ marginBottom: 11 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
              <span style={{ width: 8, height: 8, borderRadius: 2, background: a.c }}/>
              <span style={{ fontSize: 12, color: t.text, fontWeight: 600 }}>{a.l}</span>
            </div>
            <div style={{ display: 'flex', gap: 9, alignItems: 'baseline' }}>
              <span style={{ fontSize: 10.5, color: t.subtext }}>{a.r}</span>
              <span style={{ fontSize: 12, fontFamily: '"Playfair Display"', fontWeight: 700, color: t.text }}>{a.v}%</span>
            </div>
          </div>
          <ProgressBar value={a.v/42} color={a.c}/>
        </div>)}
      </Card>
    </div>

    {/* Recomendação IA */}
    <div style={{ padding: '0 18px 12px' }}>
      <Card pad={14} style={{ background: t.raised }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
          <Icon name="trend" size={15} color={t.accent}/>
          <div style={{ fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Sugestão patrimonial</div>
        </div>
        <div style={{ fontSize: 13, color: t.text, lineHeight: 1.5 }}>
          Rebalancear <b>3% de Renda Fixa</b> → <b>Previdência VGBL</b> para benefício fiscal de R$ 86k/ano.
        </div>
        <div style={{ display: 'flex', gap: 7, marginTop: 11 }}>
          <Btn size="sm" variant="primary">Simular</Btn>
          <Btn size="sm" variant="ghost">Por quê?</Btn>
        </div>
      </Card>
    </div>

    {/* Próximos passos */}
    <div style={{ padding: '0 18px 6px', fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Indicações de segurança</div>
    <div style={{ padding: '4px 18px', display: 'flex', flexDirection: 'column', gap: 8 }}>
      {[
        { n: 'Holding patrimonial',   sub: 'Proteção sucessória · -32% ITCMD', tone: 'accent' },
        { n: 'Previdência privada',   sub: 'PGBL + VGBL · benefício fiscal',   tone: 'accent2' },
        { n: 'Seguro D&O',            sub: 'Cobertura para diretores',          tone: 'neutral' },
      ].map((s, i) => <Card key={i} pad={11}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: t.chipBg, color: t.chipText, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="shield" size={14}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: t.text }}>{s.n}</div>
            <div style={{ fontSize: 11, color: t.subtext }}>{s.sub}</div>
          </div>
          <Icon name="chevron" size={14} color={t.muted}/>
        </div>
      </Card>)}
    </div>

    <BottomNav items={NAV_ITEMS} value="mais"/>
  </div>;
}

// ─── Trilhas de estudo + biblioteca ─────────────────────
function MEstudo() {
  const t = useTheme();
  const nav = useNav();
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <ScreenHeader sub="Tempo livre" title="Estudo & Network" onBack={() => nav.go('mais')}/>

    {/* Continue estudando */}
    <div style={{ padding: '0 18px 12px' }}>
      <Card pad={14} style={{ background: t.accent, color: '#fff', border: 'none' }}>
        <div style={{ fontSize: 10, letterSpacing: 0.8, textTransform: 'uppercase', opacity: 0.85, fontWeight: 600 }}>Continue de onde parou</div>
        <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 18, fontWeight: 600, marginTop: 6, letterSpacing: -0.2 }}>Reforma Tributária · Implicações no M&A</div>
        <div style={{ fontSize: 11, opacity: 0.9, marginTop: 4 }}>Módulo 4 de 6 · 42 min restantes</div>
        <div style={{ marginTop: 11, height: 4, background: 'rgba(255,255,255,0.25)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ width: '68%', height: '100%', background: '#fff', borderRadius: 999 }}/>
        </div>
      </Card>
    </div>

    {/* Trilhas */}
    <div style={{ padding: '0 18px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
      <h3 style={{ fontFamily: '"Playfair Display", serif', fontSize: 14, fontWeight: 600, margin: 0, color: t.text }}>Trilhas ativas · 3</h3>
      <a style={{ fontSize: 11, color: t.accent, fontWeight: 600 }}>Catálogo</a>
    </div>

    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      {[
        { n: 'M&A na nova reforma tributária', a: 'Pontes & Comparato',  pct: 68, dur: '12h',  modulos: '4/6' },
        { n: 'Processo Civil — recursos',       a: 'Theodoro Jr.',         pct: 32, dur: '24h',  modulos: '2/8' },
        { n: 'Direito Digital — LGPD avançado', a: 'Rony Vainzof',         pct: 15, dur: '18h',  modulos: '1/6' },
      ].map((c, i) => <Card key={i} pad={13}>
        <div style={{ display: 'flex', gap: 11 }}>
          <div style={{
            width: 50, height: 64, borderRadius: 8,
            background: `linear-gradient(135deg, ${t.accent} 0%, ${t.accent2} 100%)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0,
          }}><Icon name="book" size={22}/></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: '"Playfair Display"', fontSize: 14, fontWeight: 600, color: t.text, lineHeight: 1.25, marginBottom: 3 }}>{c.n}</div>
            <div style={{ fontSize: 11, color: t.subtext, marginBottom: 6 }}>{c.a} · {c.dur} · {c.modulos}</div>
            <ProgressBar value={c.pct/100}/>
            <div style={{ fontSize: 10, color: t.muted, marginTop: 4 }}>{c.pct}% concluído</div>
          </div>
        </div>
      </Card>)}
    </div>

    {/* Network */}
    <div style={{ padding: '14px 18px 6px' }}>
      <h3 style={{ fontFamily: '"Playfair Display", serif', fontSize: 14, fontWeight: 600, margin: 0, color: t.text }}>Eventos & network</h3>
    </div>
    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 8 }}>
      {[
        { d: '12 JUN', t: 'Café Jurídico · IBDP',           l: 'FIESP · São Paulo', conf: 18 },
        { d: '18 JUN', t: 'Painel — Reforma Tributária II', l: 'OAB/SP',            conf: 42 },
      ].map((e, i) => <Card key={i} pad={11}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 42, textAlign: 'center', background: t.elevated, borderRadius: 8, padding: '5px 0', flexShrink: 0 }}>
            <div style={{ fontFamily: '"Playfair Display"', fontSize: 13, fontWeight: 700, color: t.text }}>{e.d.split(' ')[0]}</div>
            <div style={{ fontSize: 8.5, color: t.muted, letterSpacing: 0.4 }}>{e.d.split(' ')[1]}</div>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: t.text }}>{e.t}</div>
            <div style={{ fontSize: 11, color: t.subtext }}>{e.l} · {e.conf} confirmados</div>
          </div>
          <Btn size="sm" variant="ghost">RSVP</Btn>
        </div>
      </Card>)}
    </div>

    <BottomNav items={NAV_ITEMS} value="mais"/>
  </div>;
}

Object.assign(window, { MBiblioteca, MContratos, MFinanceiro, MInvestimentos, MEstudo });

// ─── Mais (hub para telas secundárias) ──────────────────
function MMais() {
  const t = useTheme();
  const nav = useNav();
  const items = [
    { id: 'acervo',     ico: 'search',  l: 'Acervo · IA',       s: 'Jurisprudência conversacional' },
    { id: 'contratos',  ico: 'doc',     l: 'Contratos',         s: 'Templates + automação' },
    { id: 'biblio',     ico: 'book',    l: 'Biblioteca',        s: 'Autores favoritos · 23' },
    { id: 'financeiro', ico: 'wallet',  l: 'Financeiro',        s: 'Escritório · Cliente · Fiscal' },
    { id: 'invest',     ico: 'trend',   l: 'Investimentos',     s: 'Cliente · previdência' },
    { id: 'estudo',     ico: 'feather', l: 'Estudo & Network',  s: 'Trilhas + eventos' },
  ];
  return <div style={{ background: t.bg, minHeight: '100%', paddingBottom: 92, color: t.text, fontFamily: 'Inter, system-ui' }}>
    <ScreenHeader sub="Hub" title="Mais"/>

    <div style={{ padding: '0 18px 14px' }}>
      <Card pad={16} style={{ background: t.accent, border: 'none', color: '#fff' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Avatar name="Augusto Mendes" size={44} tone="rgba(255,255,255,0.2)"/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, opacity: 0.85, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>Sócio</div>
            <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 18, fontWeight: 600 }}>Dr. Augusto Mendes</div>
            <div style={{ fontSize: 11, opacity: 0.85 }}>OAB/SP 287.654 · Mendes & Partners</div>
          </div>
        </div>
      </Card>
    </div>

    <div style={{ padding: '0 18px 6px', fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Módulos</div>
    <div style={{ padding: '6px 18px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
      {items.map(it => <Card key={it.id} pad={14} style={{ cursor: 'pointer' }} onClick={() => nav.go(it.id)}>
        <div style={{ width: 36, height: 36, borderRadius: 10, background: t.chipBg, color: t.chipText, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 9 }}><Icon name={it.ico} size={18}/></div>
        <div style={{ fontSize: 13, fontWeight: 700, color: t.text }}>{it.l}</div>
        <div style={{ fontSize: 11, color: t.subtext, marginTop: 2, lineHeight: 1.4 }}>{it.s}</div>
      </Card>)}
    </div>

    <div style={{ padding: '16px 18px 6px', fontSize: 10, color: t.muted, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase' }}>Conta</div>
    <div style={{ padding: '0 18px' }}>
      <Card pad={0}>
        {[
          { i: 'bell', l: 'Notificações', sub: '3 não lidas' },
          { i: 'shield', l: 'Privacidade & segurança', sub: '2FA ativo' },
          { i: 'sun', l: 'Aparência', sub: 'Sistema · automático' },
        ].map((r, i, a) => <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 11,
          padding: '12px 14px',
          borderBottom: i < a.length - 1 ? `1px solid ${t.borderSoft}` : 'none',
        }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: t.elevated, color: t.subtext, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={r.i} size={14}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: t.text }}>{r.l}</div>
            <div style={{ fontSize: 10.5, color: t.muted }}>{r.sub}</div>
          </div>
          <Icon name="chevron" size={14} color={t.muted}/>
        </div>)}
      </Card>
    </div>

    <BottomNav items={NAV_ITEMS} value="mais"/>
  </div>;
}

Object.assign(window, { MMais });