// Wave 3b — RH (6 telas): Comissões, Férias, Licenças, Tipos de Folga, Alocações, Relatórios RH

// =============================================================
// 1. Comissões
// =============================================================
const PageComissoes = ({ onNavigate }) => {
  const vendedores = EMPLOYEES.filter(e => ['Comercial', 'Vendas'].includes(e.depto));
  const comissoes = vendedores.map((v, i) => {
    const vendas = [142800, 98420, 76200, 89100, 124500, 58900, 112340][i] || 50000;
    const meta = [130000, 90000, 80000, 85000, 110000, 65000, 100000][i] || 60000;
    const pct = (vendas / meta) * 100;
    const taxa = pct >= 120 ? 0.05 : pct >= 100 ? 0.035 : pct >= 80 ? 0.025 : 0.015;
    const comissao = vendas * taxa;
    const bonusMeta = pct >= 100 ? 500 : 0;
    return { ...v, vendas, meta, pct, taxa, comissao, bonusMeta, total: comissao + bonusMeta };
  }).sort((a, b) => b.vendas - a.vendas);

  const totais = comissoes.reduce((t, c) => ({
    vendas: t.vendas + c.vendas, comissao: t.comissao + c.comissao, bonus: t.bonus + c.bonusMeta,
  }), { vendas: 0, comissao: 0, bonus: 0 });

  return (
    <AppShell current="comissoes" onNavigate={onNavigate}>
      <PageContainer
        title="Comissões de Vendas"
        subtitle="Apuração mensal · abril/2026 · regra escalonada por atingimento de meta."
        actions={<>
          <select style={rhSelectStyle}><option>Abril/2026</option><option>Março/2026</option></select>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="check" size={13}/> Aprovar apuração</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="trending-up" label="Vendas totais" value={BRLShort(totais.vendas)} delta="+18%" sub="vs. mês anterior"/>
          <Tile icon="wallet" label="Comissão apurada" value={BRL(totais.comissao)} sub={`${((totais.comissao/totais.vendas)*100).toFixed(2)}% efetivo`}/>
          <Tile icon="award" label="Bônus meta batida" value={BRL(totais.bonus)} sub={`${comissoes.filter(c=>c.bonusMeta).length} vendedores`}/>
          <Tile icon="users" label="Vendedores" value={comissoes.length} sub={`${comissoes.filter(c => c.pct >= 100).length} bateram meta`}/>
        </div>

        {/* Regra escalonada */}
        <div className="tile" style={{ marginBottom: 18, padding: 18 }}>
          <div className="sect-title" style={{ marginBottom: 12 }}>Regra vigente · escalonado por atingimento</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
            {[
              { range: '< 80%', taxa: '1,5%', c: '#fca5a5', bg: 'rgba(239,68,68,.08)' },
              { range: '80 – 99%', taxa: '2,5%', c: '#fcd34d', bg: 'rgba(245,158,11,.08)' },
              { range: '100 – 119%', taxa: '3,5%', c: '#86efac', bg: 'rgba(34,197,94,.08)' },
              { range: '≥ 120%', taxa: '5,0% + R$500', c: '#c4b5fd', bg: 'rgba(139,92,246,.10)' },
            ].map((r, i) => (
              <div key={i} style={{ padding: 14, borderRadius: 10, background: r.bg, border: `1px solid ${r.c}30` }}>
                <div style={{ fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>Atingimento</div>
                <div style={{ fontSize: 17, color: r.c, fontWeight: 700, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{r.range}</div>
                <div style={{ fontSize: 12, color: 'var(--text-1)', marginTop: 4 }}>Comissão: <b style={{ color: r.c }}>{r.taxa}</b></div>
              </div>
            ))}
          </div>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Vendedor</th>
                <th style={{ textAlign: 'right' }}>Vendas</th>
                <th style={{ textAlign: 'right' }}>Meta</th>
                <th>Atingimento</th>
                <th style={{ textAlign: 'right' }}>Taxa</th>
                <th style={{ textAlign: 'right' }}>Comissão</th>
                <th style={{ textAlign: 'right' }}>Bônus</th>
                <th style={{ textAlign: 'right' }}>Total</th>
              </tr>
            </thead>
            <tbody>
              {comissoes.map((c, i) => (
                <tr key={c.id}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{
                        width: 22, height: 22, borderRadius: 6,
                        background: i === 0 ? '#fbbf24' : i === 1 ? '#94a3b8' : i === 2 ? '#d97706' : 'var(--bg-3)',
                        color: i < 3 ? '#0c0b1a' : 'var(--text-2)',
                        display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700,
                      }}>{i + 1}</span>
                      <Avatar name={c.nome} size={28}/>
                      <div>
                        <div style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{c.nome}</div>
                        <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{c.cargo}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-0)' }}>{BRL(c.vendas)}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: 'var(--text-2)' }}>{BRL(c.meta)}</td>
                  <td style={{ minWidth: 160 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div style={{ flex: 1, height: 6, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden' }}>
                        <div style={{
                          height: '100%', width: Math.min(120, c.pct) + '%',
                          background: c.pct >= 120 ? 'linear-gradient(90deg, #a78bfa, #c4b5fd)' : c.pct >= 100 ? 'linear-gradient(90deg, #22c55e, #86efac)' : c.pct >= 80 ? '#f59e0b' : '#ef4444',
                        }}/>
                      </div>
                      <span style={{ fontSize: 11.5, fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: c.pct >= 100 ? '#86efac' : 'var(--text-2)', minWidth: 44, textAlign: 'right' }}>{c.pct.toFixed(0)}%</span>
                    </div>
                  </td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: 'var(--text-2)' }}>{(c.taxa * 100).toFixed(1)}%</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: 'var(--text-1)' }}>{BRL(c.comissao)}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', color: c.bonusMeta > 0 ? '#c4b5fd' : 'var(--text-4)' }}>{c.bonusMeta > 0 ? BRL(c.bonusMeta) : '—'}</td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 700, color: 'var(--text-0)' }}>{BRL(c.total)}</td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr style={{ background: 'var(--bg-3)', borderTop: '2px solid var(--line-2)' }}>
                <td style={{ fontWeight: 700, color: 'var(--text-0)' }}>TOTAIS</td>
                <td style={{ textAlign: 'right', fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>{BRL(totais.vendas)}</td>
                <td colSpan="4"/>
                <td style={{ textAlign: 'right', fontWeight: 700, color: '#c4b5fd', fontVariantNumeric: 'tabular-nums' }}>{BRL(totais.bonus)}</td>
                <td style={{ textAlign: 'right', fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>{BRL(totais.comissao + totais.bonus)}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 2. Férias
// =============================================================
const PageFerias = ({ onNavigate }) => {
  const ferias = [
    { id: 1, empId: 7, periodo: '2024/2025', aquisitivo: '27/02/24 – 26/02/25', limite: '26/02/26', gozo: '01/04/26 – 30/04/26', dias: 30, status: 'em_gozo', abono: 0, avisoPrev: '13/03/26' },
    { id: 2, empId: 11, periodo: '2024/2025', aquisitivo: '12/05/24 – 11/05/25', limite: '11/05/26', gozo: '15/06/26 – 04/07/26', dias: 20, status: 'programada', abono: 10, avisoPrev: '27/05/26' },
    { id: 3, empId: 2, periodo: '2024/2025', aquisitivo: '05/06/24 – 04/06/25', limite: '04/06/26', gozo: null, dias: 30, status: 'vence_em_breve', abono: 0, avisoPrev: null },
    { id: 4, empId: 13, periodo: '2024/2025', aquisitivo: '07/01/24 – 06/01/25', limite: '06/01/26', gozo: null, dias: 30, status: 'vencida', abono: 0, avisoPrev: null },
    { id: 5, empId: 1, periodo: '2025/2026', aquisitivo: '12/03/25 – 11/03/26', limite: '11/03/27', gozo: '14/07/26 – 02/08/26', dias: 20, status: 'programada', abono: 10, avisoPrev: '25/06/26' },
    { id: 6, empId: 3, periodo: '2025/2026', aquisitivo: '22/01/25 – 21/01/26', limite: '21/01/27', gozo: null, dias: 30, status: 'a_programar', abono: 0, avisoPrev: null },
    { id: 7, empId: 6, periodo: '2024/2025', aquisitivo: '18/04/24 – 17/04/25', limite: '17/04/26', gozo: '20/04/26 – 09/05/26', dias: 20, status: 'aprovada', abono: 10, avisoPrev: '01/04/26' },
    { id: 8, empId: 10, periodo: '2024/2025', aquisitivo: '01/10/24 – 30/09/25', limite: '30/09/26', gozo: null, dias: 30, status: 'a_programar', abono: 0, avisoPrev: null },
    { id: 9, empId: 12, periodo: '2024/2025', aquisitivo: '23/06/24 – 22/06/25', limite: '22/06/26', gozo: '10/08/26 – 29/08/26', dias: 20, status: 'programada', abono: 10, avisoPrev: '21/07/26' },
  ];

  const statusMeta = {
    em_gozo: { l: 'Em gozo', bg: 'rgba(59,130,246,.16)', c: '#93c5fd' },
    programada: { l: 'Programada', bg: 'rgba(139,92,246,.14)', c: '#c4b5fd' },
    aprovada: { l: 'Aprovada', bg: 'rgba(34,197,94,.14)', c: '#86efac' },
    a_programar: { l: 'A programar', bg: 'rgba(245,158,11,.14)', c: '#fcd34d' },
    vence_em_breve: { l: 'Vence em breve', bg: 'rgba(245,158,11,.2)', c: '#fbbf24' },
    vencida: { l: 'VENCIDA', bg: 'rgba(239,68,68,.18)', c: '#fca5a5' },
  };

  // Timeline 2026
  const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
  const parseGozo = (s) => {
    if (!s) return null;
    const [ini, fim] = s.split(' – ');
    const parse = (d) => { const [dd, mm] = d.split('/'); return { d: +dd, m: +mm - 1 }; };
    return { ini: parse(ini), fim: parse(fim) };
  };

  return (
    <AppShell current="ferias" onNavigate={onNavigate}>
      <PageContainer
        title="Férias"
        subtitle="Programação anual · controle de períodos aquisitivos, gozo e abono pecuniário."
        maxWidth={1700}
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Avisos</button>
          <button className="btn btn-outline btn-sm"><Icon name="calendar" size={13}/> Planejar ano</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Programar férias</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="calendar" label="Em gozo agora" value={ferias.filter(f => f.status === 'em_gozo').length} sub="1 pessoa · abril/26"/>
          <Tile icon="alert" label="Férias vencidas" value={ferias.filter(f => f.status === 'vencida').length} sub="Mariana · janeiro/26" accent="rgba(239,68,68,.2)"/>
          <Tile icon="clock" label="Vencem em 90 dias" value={ferias.filter(f => f.status === 'vence_em_breve').length} sub="Bruno · junho/26" accent="rgba(245,158,11,.2)"/>
          <Tile icon="wallet" label="Provisão férias+1/3" value={BRL(41280)} sub="passivo trabalhista"/>
        </div>

        {/* Timeline calendar 2026 */}
        <div className="tile" style={{ padding: 0, marginBottom: 18 }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div className="sect-title">Calendário de férias · 2026</div>
            <span className="grow"/>
            <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Linha = período de gozo · largura proporcional aos dias</span>
          </div>
          <div style={{ overflowX: 'auto' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', minWidth: 900 }}>
              {/* Month headers */}
              <div style={{ padding: '10px 16px', background: 'var(--bg-3)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--text-3)', fontWeight: 600, borderBottom: '1px solid var(--line-1)' }}>Funcionário</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', background: 'var(--bg-3)', borderBottom: '1px solid var(--line-1)' }}>
                {months.map((m, i) => (
                  <div key={m} style={{ padding: '10px 0', textAlign: 'center', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '.06em', color: i === 3 ? 'var(--accent-text)' : 'var(--text-3)', fontWeight: 600, borderLeft: i > 0 ? '1px solid var(--line-1)' : 'none' }}>{m}</div>
                ))}
              </div>
              {/* Rows */}
              {ferias.filter(f => f.gozo).map(f => {
                const emp = EMPLOYEES.find(e => e.id === f.empId);
                const g = parseGozo(f.gozo);
                const st = statusMeta[f.status];
                const startPct = ((g.ini.m * 30 + g.ini.d) / 360) * 100;
                const widthPct = (f.dias / 360) * 100;
                return (
                  <React.Fragment key={f.id}>
                    <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar name={emp.nome} size={26}/>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 12, color: 'var(--text-0)', fontWeight: 500 }}>{emp.nome.split(' ').slice(0, 2).join(' ')}</div>
                        <div style={{ fontSize: 10, color: 'var(--text-3)' }}>{f.dias}d · {f.abono > 0 ? `+${f.abono}d abono` : 'gozo total'}</div>
                      </div>
                    </div>
                    <div style={{ position: 'relative', borderBottom: '1px solid var(--line-1)', minHeight: 52, display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)' }}>
                      {months.map((_, i) => <div key={i} style={{ borderLeft: i > 0 ? '1px solid var(--line-1)' : 'none' }}/>)}
                      <div style={{
                        position: 'absolute', top: '50%', left: `${startPct}%`, width: `${widthPct}%`, transform: 'translateY(-50%)',
                        height: 22, background: st.bg, border: `1px solid ${st.c}40`, borderRadius: 6,
                        display: 'flex', alignItems: 'center', paddingLeft: 8, gap: 4,
                        fontSize: 10, color: st.c, fontWeight: 600,
                      }}>
                        <Icon name="calendar" size={10}/>
                        {f.dias}d
                      </div>
                    </div>
                  </React.Fragment>
                );
              })}
            </div>
          </div>
        </div>

        {/* Table - all periods */}
        <div className="table-wrap">
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line-1)' }}>
            <div className="sect-title">Períodos aquisitivos</div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Funcionário</th>
                <th>Período aquisitivo</th>
                <th>Limite gozo</th>
                <th>Gozo programado</th>
                <th style={{ textAlign: 'center' }}>Dias</th>
                <th style={{ textAlign: 'center' }}>Abono</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {ferias.map(f => {
                const emp = EMPLOYEES.find(e => e.id === f.empId);
                const st = statusMeta[f.status];
                return (
                  <tr key={f.id}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <Avatar name={emp.nome} size={28}/>
                        <div>
                          <div style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{emp.nome.split(' ').slice(0, 2).join(' ')}</div>
                          <div style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{emp.cargo}</div>
                        </div>
                      </div>
                    </td>
                    <td style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--text-2)' }}>{f.aquisitivo}</td>
                    <td style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: f.status === 'vencida' ? '#fca5a5' : f.status === 'vence_em_breve' ? '#fbbf24' : 'var(--text-2)', fontWeight: (f.status === 'vencida' || f.status === 'vence_em_breve') ? 600 : 400 }}>{f.limite}</td>
                    <td style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: f.gozo ? 'var(--text-1)' : 'var(--text-4)' }}>{f.gozo || '— não programado —'}</td>
                    <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>{f.dias}</td>
                    <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums', color: f.abono > 0 ? 'var(--text-1)' : 'var(--text-4)' }}>{f.abono > 0 ? `${f.abono}d` : '—'}</td>
                    <td><span className="chip" style={{ background: st.bg, color: st.c, fontSize: 10.5, fontWeight: 600 }}>{st.l}</span></td>
                    <td style={{ textAlign: 'right' }}>
                      {f.status === 'a_programar' || f.status === 'vence_em_breve' || f.status === 'vencida' ?
                        <button className="btn btn-primary btn-sm" style={{ padding: '5px 10px' }}>Programar</button> :
                        <button className="btn btn-outline btn-sm" style={{ padding: '5px 10px' }}>Ver</button>
                      }
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 3. Licenças
// =============================================================
const PageLicencas = ({ onNavigate }) => {
  const tipos = [
    { id: 'maternidade', l: 'Maternidade', bg: 'rgba(236,72,153,.16)', c: '#f9a8d4', i: 'heart', dias: 120 },
    { id: 'paternidade', l: 'Paternidade', bg: 'rgba(59,130,246,.14)', c: '#93c5fd', i: 'heart', dias: 5 },
    { id: 'medica', l: 'Médica (INSS)', bg: 'rgba(34,197,94,.14)', c: '#86efac', i: 'heartbeat', dias: null },
    { id: 'casamento', l: 'Casamento', bg: 'rgba(245,158,11,.14)', c: '#fcd34d', i: 'heart', dias: 3 },
    { id: 'luto', l: 'Luto', bg: 'rgba(107,114,128,.2)', c: '#d1d5db', i: 'heart', dias: 2 },
    { id: 'doacao', l: 'Doação de sangue', bg: 'rgba(239,68,68,.14)', c: '#fca5a5', i: 'heartbeat', dias: 1 },
  ];

  const licencas = [
    { id: 1, empId: 11, tipo: 'maternidade', inicio: '08/04/2026', fim: '05/08/2026', dias: 120, restante: 110, motivo: 'Nascimento - Beatriz Oliveira', doc: 'Certidão nasc. enviada', status: 'ativa', salarioInss: true },
    { id: 2, empId: 5, tipo: 'medica', inicio: '12/04/2026', fim: '19/04/2026', dias: 8, restante: 3, motivo: 'Cirurgia apendicite', doc: 'Atestado CID K35.8', status: 'ativa', salarioInss: false },
    { id: 3, empId: 4, tipo: 'doacao', inicio: '10/04/2026', fim: '10/04/2026', dias: 1, restante: 0, motivo: 'Hemominas · comprovante', doc: 'Comprovante', status: 'concluida', salarioInss: false },
    { id: 4, empId: 6, tipo: 'casamento', inicio: '02/06/2026', fim: '04/06/2026', dias: 3, restante: null, motivo: 'Casamento civil', doc: 'Certidão', status: 'programada', salarioInss: false },
    { id: 5, empId: 15, tipo: 'luto', inicio: '18/03/2026', fim: '19/03/2026', dias: 2, restante: 0, motivo: 'Falecimento avô', doc: 'Atestado óbito', status: 'concluida', salarioInss: false },
    { id: 6, empId: 8, tipo: 'paternidade', inicio: '22/02/2026', fim: '26/02/2026', dias: 5, restante: 0, motivo: 'Nascimento Theo', doc: 'Certidão nasc.', status: 'concluida', salarioInss: false },
    { id: 7, empId: 12, tipo: 'medica', inicio: '01/04/2026', fim: '05/04/2026', dias: 5, restante: 0, motivo: 'Gripe/bronquite', doc: 'Atestado CID J40', status: 'concluida', salarioInss: false },
  ];

  const ativas = licencas.filter(l => l.status === 'ativa');

  return (
    <AppShell current="licencas" onNavigate={onNavigate}>
      <PageContainer
        title="Licenças"
        subtitle="Afastamentos e ausências · maternidade, médica INSS, casamento, luto."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Nova licença</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="pause-circle" label="Licenças ativas" value={ativas.length} sub="2 funcionários afastados"/>
          <Tile icon="calendar" label="Dias no mês" value="44" sub="abril/26"/>
          <Tile icon="wallet" label="Salário-maternidade" value={BRL(2900)} sub="reembolso INSS"/>
          <Tile icon="heartbeat" label="Atestados 12m" value="28" sub="média 3,2 dias"/>
        </div>

        {/* Types row */}
        <div className="tile" style={{ padding: 16, marginBottom: 18 }}>
          <div className="sect-title" style={{ marginBottom: 12 }}>Tipos de licença (CLT)</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 10 }} className="gridG">
            <style>{`@media (max-width: 1000px) { .gridG { grid-template-columns: repeat(3, 1fr) !important; } }`}</style>
            {tipos.map(t => (
              <div key={t.id} style={{ padding: 12, borderRadius: 10, background: t.bg, border: `1px solid ${t.c}30` }}>
                <Icon name={t.i} size={18} color={t.c}/>
                <div style={{ fontSize: 12, color: 'var(--text-0)', fontWeight: 600, marginTop: 8 }}>{t.l}</div>
                <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}>{t.dias ? `Até ${t.dias} dias` : 'Conforme atestado'}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Active licenses cards */}
        {ativas.length > 0 && <>
          <div className="sect-title" style={{ marginBottom: 10 }}>Licenças em andamento</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginBottom: 18 }} className="gridH">
            <style>{`@media (max-width: 900px) { .gridH { grid-template-columns: 1fr !important; } }`}</style>
            {ativas.map(l => {
              const emp = EMPLOYEES.find(e => e.id === l.empId);
              const t = tipos.find(t => t.id === l.tipo);
              const pct = ((l.dias - l.restante) / l.dias) * 100;
              return (
                <div key={l.id} className="tile" style={{ padding: 18, borderLeft: `4px solid ${t.c}` }}>
                  <div style={{ display: 'flex', gap: 14, alignItems: 'start' }}>
                    <Avatar name={emp.nome} size={48}/>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-0)' }}>{emp.nome}</div>
                        <span className="chip" style={{ background: t.bg, color: t.c, fontSize: 10.5, fontWeight: 600 }}>{t.l}</span>
                      </div>
                      <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 2 }}>{l.motivo}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{l.inicio} → {l.fim}</div>
                    </div>
                  </div>
                  <div style={{ marginTop: 16 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Dia {l.dias - l.restante} de {l.dias}</span>
                      <span style={{ fontSize: 11, color: t.c, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>{l.restante} dias restantes</span>
                    </div>
                    <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden' }}>
                      <div style={{ width: pct + '%', height: '100%', background: t.c }}/>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: 12, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line-1)' }}>
                    <div style={{ fontSize: 11, color: 'var(--text-3)' }}><Icon name="check" size={10}/> {l.doc}</div>
                    {l.salarioInss && <div style={{ fontSize: 11, color: '#86efac', fontWeight: 600 }}><Icon name="wallet" size={10}/> Reembolso INSS</div>}
                  </div>
                </div>
              );
            })}
          </div>
        </>}

        <div className="table-wrap">
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line-1)' }}>
            <div className="sect-title">Histórico · últimos 12 meses</div>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Funcionário</th>
                <th>Tipo</th>
                <th>Início</th>
                <th>Fim</th>
                <th style={{ textAlign: 'center' }}>Dias</th>
                <th>Motivo / documento</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {licencas.map(l => {
                const emp = EMPLOYEES.find(e => e.id === l.empId);
                const t = tipos.find(t => t.id === l.tipo);
                return (
                  <tr key={l.id}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <Avatar name={emp.nome} size={26}/>
                        <span style={{ fontSize: 12.5, color: 'var(--text-0)' }}>{emp.nome.split(' ').slice(0, 2).join(' ')}</span>
                      </div>
                    </td>
                    <td><span className="chip" style={{ background: t.bg, color: t.c, fontSize: 10.5, fontWeight: 600 }}>{t.l}</span></td>
                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-2)' }}>{l.inicio}</td>
                    <td style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-2)' }}>{l.fim}</td>
                    <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums', fontWeight: 600, color: 'var(--text-0)' }}>{l.dias}</td>
                    <td style={{ fontSize: 12, color: 'var(--text-2)' }}>
                      {l.motivo}
                      <div style={{ fontSize: 10.5, color: 'var(--text-3)', marginTop: 2 }}><Icon name="file" size={10}/> {l.doc}</div>
                    </td>
                    <td><span className="chip" style={{ fontSize: 10.5, background: l.status === 'ativa' ? 'rgba(34,197,94,.14)' : l.status === 'programada' ? 'rgba(245,158,11,.14)' : 'var(--bg-3)', color: l.status === 'ativa' ? '#86efac' : l.status === 'programada' ? '#fcd34d' : 'var(--text-3)' }}>{l.status === 'ativa' ? 'Ativa' : l.status === 'programada' ? 'Programada' : 'Concluída'}</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 4. Tipos de Folga (cadastro)
// =============================================================
const PageTiposFolga = ({ onNavigate }) => {
  const [editing, setEditing] = React.useState(null);
  const tipos = [
    { id: 1, nome: 'Folga compensatória', codigo: 'FC', dias: 1, remunerada: true, exige_aprov: true, antecedencia: 3, doc: false, cor: '#3b82f6', usos: 48, desc: 'Compensação por horas extras trabalhadas em dias úteis ou feriados' },
    { id: 2, nome: 'Folga aniversário', codigo: 'FA', dias: 1, remunerada: true, exige_aprov: false, antecedencia: 15, doc: false, cor: '#ec4899', usos: 17, desc: 'Benefício da empresa · uso no mês de aniversário', ativo: true },
    { id: 3, nome: 'Falta justificada', codigo: 'FJ', dias: null, remunerada: true, exige_aprov: true, antecedencia: 0, doc: true, cor: '#f59e0b', usos: 12, desc: 'Ausência com motivo válido e documentação (atestado, comprovante)' },
    { id: 4, nome: 'Falta abonada', codigo: 'FAB', dias: 1, remunerada: true, exige_aprov: true, antecedencia: 0, doc: false, cor: '#8b5cf6', usos: 8, desc: 'Abono gerencial · limite 2 por ano por funcionário' },
    { id: 5, nome: 'Consulta médica', codigo: 'CM', dias: 0.5, remunerada: true, exige_aprov: false, antecedencia: 1, doc: true, cor: '#22c55e', usos: 31, desc: 'Saída parcial para consulta com atestado de comparecimento' },
    { id: 6, nome: 'Dispensa (banco horas)', codigo: 'DBH', dias: 1, remunerada: true, exige_aprov: true, antecedencia: 7, doc: false, cor: '#06b6d4', usos: 22, desc: 'Uso de saldo positivo de banco de horas para dispensa' },
    { id: 7, nome: 'Falta injustificada', codigo: 'FI', dias: null, remunerada: false, exige_aprov: false, antecedencia: 0, doc: false, cor: '#ef4444', usos: 3, desc: 'Ausência sem justificativa · desconta salário e DSR' },
  ];

  return (
    <AppShell current="tipos-folga" onNavigate={onNavigate}>
      <PageContainer
        title="Tipos de Folga"
        subtitle="Cadastro de tipos de ausência e suas regras · aplicados no módulo de ponto e folha."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm" onClick={() => setEditing({ novo: true })}><Icon name="plus" size={13}/> Novo tipo</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="list" label="Tipos cadastrados" value={tipos.length} sub="5 remunerados · 2 não"/>
          <Tile icon="calendar" label="Folgas em abril" value={tipos.reduce((t, x) => t + (x.usos > 10 ? Math.round(x.usos/6) : 1), 0)} sub="total solicitações"/>
          <Tile icon="check" label="Aprovações pendentes" value="4" sub="3 gerentes envolvidos" accent="rgba(245,158,11,.2)"/>
          <Tile icon="trending-up" label="Uso mais frequente" value="Consulta" sub="31 usos 12m"/>
        </div>

        <div className="table-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>Tipo</th>
                <th>Código</th>
                <th style={{ textAlign: 'center' }}>Dias</th>
                <th style={{ textAlign: 'center' }}>Remunerada</th>
                <th style={{ textAlign: 'center' }}>Aprovação</th>
                <th style={{ textAlign: 'center' }}>Antecedência</th>
                <th style={{ textAlign: 'center' }}>Documento</th>
                <th style={{ textAlign: 'right' }}>Usos 12m</th>
                <th style={{ textAlign: 'right' }}>Ações</th>
              </tr>
            </thead>
            <tbody>
              {tipos.map(t => (
                <tr key={t.id}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{ width: 10, height: 32, background: t.cor, borderRadius: 3 }}/>
                      <div>
                        <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 600 }}>{t.nome}</div>
                        <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 1 }}>{t.desc}</div>
                      </div>
                    </div>
                  </td>
                  <td><span className="chip" style={{ fontFamily: 'var(--font-mono)', background: t.cor + '22', color: t.cor, fontSize: 11, fontWeight: 600 }}>{t.codigo}</span></td>
                  <td style={{ textAlign: 'center', fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>{t.dias === null ? 'Variável' : t.dias === 0.5 ? '½ dia' : `${t.dias} dia${t.dias > 1 ? 's' : ''}`}</td>
                  <td style={{ textAlign: 'center' }}>
                    {t.remunerada ?
                      <span style={{ color: '#86efac', fontSize: 13 }}><Icon name="check" size={13}/></span> :
                      <span style={{ color: '#fca5a5', fontSize: 13 }}><Icon name="x" size={13}/></span>}
                  </td>
                  <td style={{ textAlign: 'center' }}>
                    {t.exige_aprov ?
                      <span className="chip" style={{ background: 'rgba(139,92,246,.14)', color: '#c4b5fd', fontSize: 10.5 }}>Obrigatória</span> :
                      <span className="chip" style={{ background: 'var(--bg-3)', color: 'var(--text-3)', fontSize: 10.5 }}>Automática</span>}
                  </td>
                  <td style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-2)' }}>{t.antecedencia === 0 ? 'Imediata' : `${t.antecedencia} dias`}</td>
                  <td style={{ textAlign: 'center' }}>
                    {t.doc ?
                      <span className="chip chip-brand" style={{ fontSize: 10.5 }}>Necessário</span> :
                      <span style={{ color: 'var(--text-4)', fontSize: 11 }}>—</span>}
                  </td>
                  <td style={{ textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>{t.usos}</td>
                  <td style={{ textAlign: 'right' }}>
                    <button onClick={() => setEditing(t)} className="btn btn-outline btn-sm" style={{ padding: '5px 8px' }}><Icon name="edit" size={11}/></button>
                    <button className="btn btn-outline btn-sm" style={{ padding: '5px 8px', marginLeft: 4 }}><Icon name="dots" size={11}/></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {editing && <TipoFolgaDrawer tipo={editing} onClose={() => setEditing(null)}/>}
      </PageContainer>
    </AppShell>
  );
};

const TipoFolgaDrawer = ({ tipo, onClose }) => {
  const isNew = tipo.novo;
  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.65)', zIndex: 100, backdropFilter: 'blur(4px)' }}/>
      <div style={{
        position: 'fixed', top: 0, right: 0, bottom: 0, width: 480, zIndex: 101,
        background: 'var(--bg-1)', borderLeft: '1px solid var(--line-2)',
        boxShadow: '-24px 0 60px rgba(0,0,0,.6)', overflowY: 'auto', padding: 24,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <h2 style={{ margin: 0, fontSize: 19, fontWeight: 700, color: 'var(--text-0)' }}>{isNew ? 'Novo tipo de folga' : 'Editar tipo'}</h2>
          <button onClick={onClose} className="shell-top-btn" style={{ width: 32, height: 32 }}><Icon name="x" size={14}/></button>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Field label="Nome"><input defaultValue={tipo.nome || ''} placeholder="Ex: Folga aniversário" className="inp"/></Field>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="Código"><input defaultValue={tipo.codigo || ''} maxLength="4" placeholder="FA" className="inp" style={{ fontFamily: 'var(--font-mono)' }}/></Field>
            <Field label="Cor">
              <div style={{ display: 'flex', gap: 6 }}>
                {['#3b82f6', '#8b5cf6', '#ec4899', '#f59e0b', '#22c55e', '#06b6d4', '#ef4444'].map(c => (
                  <button key={c} style={{ width: 28, height: 28, borderRadius: 6, background: c, border: tipo.cor === c ? '2px solid white' : '2px solid transparent' }}/>
                ))}
              </div>
            </Field>
          </div>
          <Field label="Descrição"><textarea defaultValue={tipo.desc || ''} rows="2" className="inp"/></Field>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="Duração (dias)"><input defaultValue={tipo.dias ?? ''} type="number" step="0.5" className="inp"/></Field>
            <Field label="Antecedência mínima"><input defaultValue={tipo.antecedencia ?? 0} type="number" className="inp"/></Field>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
            {[
              ['remunerada', 'Remunerada', 'Desconta ou não do salário', tipo.remunerada ?? true],
              ['exige_aprov', 'Exige aprovação do gerente', 'Solicitação vai para fluxo de aprovação', tipo.exige_aprov ?? true],
              ['doc', 'Exige documento comprobatório', 'Ex: atestado médico, comprovante', tipo.doc ?? false],
              ['desconta_dsr', 'Desconta DSR', 'Afeta o descanso semanal remunerado', false],
            ].map(([id, l, sub, checked]) => (
              <label key={id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, background: 'var(--bg-2)', borderRadius: 10, border: '1px solid var(--line-1)', cursor: 'pointer' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 500 }}>{l}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>{sub}</div>
                </div>
                <span style={{ width: 40, height: 22, borderRadius: 999, background: checked ? 'var(--accent-1)' : 'var(--bg-3)', position: 'relative', transition: '.2s' }}>
                  <span style={{ position: 'absolute', top: 2, left: checked ? 20 : 2, width: 18, height: 18, background: 'white', borderRadius: '50%', transition: '.2s' }}/>
                </span>
              </label>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 10, marginTop: 12, paddingTop: 16, borderTop: '1px solid var(--line-1)' }}>
            <button onClick={onClose} className="btn btn-outline" style={{ flex: 1 }}>Cancelar</button>
            <button className="btn btn-primary" style={{ flex: 2 }}>{isNew ? 'Criar tipo' : 'Salvar alterações'}</button>
          </div>
        </div>

        <style>{`
          .inp { width: 100%; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-0); }
          .inp:focus { outline: none; border-color: var(--accent-1); }
        `}</style>
      </div>
    </>
  );
};

const Field = ({ label, children }) => (
  <div>
    <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 5, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>{label}</div>
    {children}
  </div>
);

// =============================================================
// 5. Alocações
// =============================================================
const PageAlocacoes = ({ onNavigate }) => {
  // Alocações: funcionário → centro de custo / loja / projeto com % de tempo
  const alocacoes = [
    { empId: 1, items: [{ loc: 'Matriz · Gestão', pct: 100, tipo: 'admin' }] },
    { empId: 3, items: [{ loc: 'Matriz · Produção', pct: 70, tipo: 'producao' }, { loc: 'Filial Savassi · Produção', pct: 30, tipo: 'producao' }] },
    { empId: 4, items: [{ loc: 'Filial Savassi · Loja', pct: 100, tipo: 'vendas' }] },
    { empId: 5, items: [{ loc: 'Matriz · Produção', pct: 100, tipo: 'producao' }] },
    { empId: 6, items: [{ loc: 'Matriz · Produção', pct: 80, tipo: 'producao' }, { loc: 'Filial Savassi · Produção', pct: 20, tipo: 'producao' }] },
    { empId: 7, items: [{ loc: 'Filial Savassi · Loja', pct: 100, tipo: 'vendas' }] },
    { empId: 10, items: [{ loc: 'Logística · Matriz', pct: 60, tipo: 'logistica' }, { loc: 'Logística · Filial', pct: 40, tipo: 'logistica' }] },
    { empId: 13, items: [{ loc: 'Filial Savassi · Supervisão', pct: 100, tipo: 'vendas' }] },
    { empId: 16, items: [{ loc: 'Matriz · RH', pct: 100, tipo: 'admin' }] },
    { empId: 2, items: [{ loc: 'Matriz · Vendas', pct: 50, tipo: 'vendas' }, { loc: 'Projeto · B2B Restaurantes', pct: 50, tipo: 'projeto' }] },
  ];

  const tipoColor = {
    admin: '#3b82f6',
    producao: '#f59e0b',
    vendas: '#22c55e',
    logistica: '#06b6d4',
    projeto: '#8b5cf6',
  };

  const centros = [
    { nome: 'Matriz · Cristiano Machado', func: 11, custo: 38400, cor: '#3b82f6' },
    { nome: 'Filial Savassi', func: 5, custo: 14800, cor: '#8b5cf6' },
    { nome: 'Projeto B2B Restaurantes', func: 1, custo: 1900, cor: '#f59e0b' },
  ];

  return (
    <AppShell current="alocacoes" onNavigate={onNavigate}>
      <PageContainer
        title="Alocações"
        subtitle="Distribuição de funcionários por centro de custo, loja ou projeto."
        actions={<>
          <button className="btn btn-outline btn-sm"><Icon name="download" size={13}/> Exportar</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={13}/> Nova alocação</button>
        </>}
      >
        <div className="row-4" style={{ marginBottom: 18 }}>
          <Tile icon="map-pin" label="Centros de custo" value={centros.length} sub="2 lojas + 1 projeto"/>
          <Tile icon="users" label="Funcionários alocados" value={alocacoes.length} sub={`${alocacoes.filter(a => a.items.length > 1).length} com alocação mista`}/>
          <Tile icon="wallet" label="Custo matriz" value={BRL(38400)} sub="mensal (folha)"/>
          <Tile icon="wallet" label="Custo Savassi" value={BRL(14800)} sub="mensal (folha)"/>
        </div>

        {/* Centro de custo cards */}
        <div className="sect-title" style={{ marginBottom: 10 }}>Distribuição por centro de custo</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 18 }} className="gridI">
          <style>{`@media (max-width: 1000px) { .gridI { grid-template-columns: 1fr !important; } }`}</style>
          {centros.map((c, i) => (
            <div key={i} className="tile" style={{ padding: 16, borderLeft: `4px solid ${c.cor}` }}>
              <div style={{ fontSize: 10.5, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em' }}>{c.nome}</div>
              <div style={{ fontSize: 28, fontWeight: 700, color: 'var(--text-0)', marginTop: 6, letterSpacing: '-.01em', fontVariantNumeric: 'tabular-nums' }}>{c.func} <span style={{ fontSize: 13, color: 'var(--text-3)', fontWeight: 400 }}>funcionários</span></div>
              <div style={{ display: 'flex', gap: 12, marginTop: 8, paddingTop: 10, borderTop: '1px solid var(--line-1)' }}>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--text-3)' }}>Custo mensal</div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>{BRL(c.custo)}</div>
                </div>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--text-3)' }}>% do total</div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: c.cor, fontVariantNumeric: 'tabular-nums' }}>{((c.custo / 55100) * 100).toFixed(0)}%</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Allocation table with split bars */}
        <div className="tile" style={{ padding: 0 }}>
          <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--line-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <div className="sect-title">Alocações por funcionário</div>
            <span className="grow"/>
            {Object.entries(tipoColor).map(([k, v]) => (
              <span key={k} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--text-2)', textTransform: 'capitalize' }}>
                <span style={{ width: 10, height: 10, borderRadius: 3, background: v }}/>{k}
              </span>
            ))}
          </div>
          <div style={{ padding: '8px 0' }}>
            {alocacoes.map((a, i) => {
              const emp = EMPLOYEES.find(e => e.id === a.empId);
              return (
                <div key={a.empId} style={{ display: 'grid', gridTemplateColumns: '260px 1fr 100px', gap: 18, alignItems: 'center', padding: '12px 20px', borderBottom: i < alocacoes.length - 1 ? '1px solid var(--line-1)' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar name={emp.nome} size={30}/>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 13, color: 'var(--text-0)', fontWeight: 500 }}>{emp.nome}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{emp.cargo}</div>
                    </div>
                  </div>
                  <div>
                    <div style={{ display: 'flex', height: 28, borderRadius: 6, overflow: 'hidden', border: '1px solid var(--line-1)' }}>
                      {a.items.map((it, j) => (
                        <div key={j} style={{
                          width: it.pct + '%', background: tipoColor[it.tipo] + '30',
                          borderLeft: j > 0 ? '1px solid var(--bg-2)' : 'none',
                          display: 'flex', alignItems: 'center', paddingLeft: 10, gap: 8, minWidth: 0,
                        }}>
                          <span style={{ width: 6, height: 6, borderRadius: 999, background: tipoColor[it.tipo], flexShrink: 0 }}/>
                          <span style={{ fontSize: 11, color: 'var(--text-0)', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.loc}</span>
                          <span style={{ fontSize: 11, color: 'var(--text-2)', fontVariantNumeric: 'tabular-nums', fontWeight: 600, marginLeft: 'auto', paddingRight: 10 }}>{it.pct}%</span>
                        </div>
                      ))}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    {a.items.length > 1 ?
                      <span className="chip chip-brand" style={{ fontSize: 10.5 }}>Mista</span> :
                      <span className="chip" style={{ fontSize: 10.5, background: 'var(--bg-3)', color: 'var(--text-3)' }}>Única</span>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

// =============================================================
// 6. Relatórios RH
// =============================================================
const PageRHRelatorios = ({ onNavigate }) => {
  const [selected, setSelected] = React.useState('headcount');

  const reports = [
    { id: 'headcount', cat: 'Gestão', nome: 'Headcount & Turnover', desc: 'Evolução do quadro · admissões, desligamentos, turnover mensal', i: 'users' },
    { id: 'folha-mensal', cat: 'Folha', nome: 'Folha mensal resumida', desc: 'Proventos, descontos, encargos por centro de custo', i: 'wallet' },
    { id: 'folha-cc', cat: 'Folha', nome: 'Folha por centro de custo', desc: 'Rateio de custo de pessoal por loja/projeto', i: 'bar-chart' },
    { id: 'ferias-vencer', cat: 'Gestão', nome: 'Férias a vencer', desc: 'Funcionários com vencimento em 90 dias', i: 'calendar' },
    { id: 'absenteismo', cat: 'Gestão', nome: 'Absenteísmo', desc: 'Faltas, atestados, licenças por período', i: 'alert' },
    { id: 'ponto-divergencias', cat: 'Ponto', nome: 'Divergências de ponto', desc: 'Atrasos, faltas, horas extras não aprovadas', i: 'clock' },
    { id: 'inss', cat: 'Obrigações', nome: 'GPS · INSS', desc: 'Guia de previdência social para pagamento', i: 'doc' },
    { id: 'fgts', cat: 'Obrigações', nome: 'GRRF · FGTS', desc: 'Guia de recolhimento FGTS mensal', i: 'doc' },
    { id: 'rais', cat: 'Obrigações', nome: 'RAIS anual', desc: 'Relação anual de informações sociais', i: 'doc' },
    { id: 'dirf', cat: 'Obrigações', nome: 'DIRF', desc: 'Declaração de imposto retido na fonte', i: 'doc' },
    { id: 'comissoes', cat: 'Vendas', nome: 'Comissões apuradas', desc: 'Histórico de comissões por vendedor', i: 'trending-up' },
    { id: 'ajustes', cat: 'Gestão', nome: 'Ajustes salariais', desc: 'Histórico de mérito, promoção, dissídio', i: 'award' },
  ];
  const cats = [...new Set(reports.map(r => r.cat))];
  const filtered = reports;
  const sel = reports.find(r => r.id === selected);

  // Preview data for headcount
  const hcByDept = [
    { d: 'Produção', count: 7, salario: 18120 },
    { d: 'Vendas', count: 4, salario: 8520 },
    { d: 'Administrativo', count: 3, salario: 13300 },
    { d: 'Comercial', count: 2, salario: 6000 },
    { d: 'Logística', count: 1, salario: 2600 },
    { d: 'Diretoria', count: 1, salario: 9200 },
  ];

  return (
    <AppShell current="rh-relatorios" onNavigate={onNavigate}>
      <PageContainer
        title="Relatórios RH"
        subtitle="Dashboards e relatórios gerenciais · exportação PDF, Excel e CSV."
        maxWidth={1700}
        actions={<>
          <select style={rhSelectStyle}><option>Abril/2026</option></select>
          <button className="btn btn-outline btn-sm"><Icon name="calendar" size={13}/> Agendar</button>
          <button className="btn btn-primary btn-sm"><Icon name="download" size={13}/> Exportar</button>
        </>}
      >
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 16 }} className="gridJ">
          <style>{`@media (max-width: 1100px) { .gridJ { grid-template-columns: 1fr !important; } }`}</style>

          {/* Reports list */}
          <div className="tile" style={{ padding: 0, height: 'fit-content' }}>
            <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line-1)' }}>
              <div className="sect-title">Relatórios disponíveis</div>
            </div>
            <div style={{ padding: 8 }}>
              {cats.map(cat => (
                <div key={cat} style={{ marginBottom: 10 }}>
                  <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600, padding: '6px 10px' }}>{cat}</div>
                  {filtered.filter(r => r.cat === cat).map(r => (
                    <button key={r.id} onClick={() => setSelected(r.id)} style={{
                      display: 'flex', alignItems: 'start', gap: 10, padding: '10px 12px', width: '100%', textAlign: 'left',
                      background: selected === r.id ? 'var(--accent-soft-10)' : 'transparent',
                      borderLeft: `3px solid ${selected === r.id ? 'var(--accent-1)' : 'transparent'}`,
                      borderRadius: 6,
                    }}>
                      <Icon name={r.i} size={15} color={selected === r.id ? 'var(--accent-text)' : 'var(--text-3)'} style={{ marginTop: 1 }}/>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 12.5, fontWeight: 500, color: selected === r.id ? 'var(--text-0)' : 'var(--text-1)' }}>{r.nome}</div>
                        <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2, lineHeight: 1.4 }}>{r.desc}</div>
                      </div>
                    </button>
                  ))}
                </div>
              ))}
            </div>
          </div>

          {/* Preview */}
          <div className="tile">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18, paddingBottom: 16, borderBottom: '1px solid var(--line-1)' }}>
              <Icon name={sel.i} size={20} color="var(--accent-text)"/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--text-0)', letterSpacing: '-.01em' }}>{sel.nome}</div>
                <div style={{ fontSize: 12, color: 'var(--text-3)' }}>{sel.desc}</div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                <button className="btn btn-outline btn-sm"><Icon name="file" size={12}/> PDF</button>
                <button className="btn btn-outline btn-sm"><Icon name="doc" size={12}/> Excel</button>
                <button className="btn btn-outline btn-sm"><Icon name="download" size={12}/> CSV</button>
              </div>
            </div>

            {selected === 'headcount' && <>
              <div className="row-4" style={{ marginBottom: 18 }}>
                <MiniKPI label="Headcount ativo" value="17" sub="abril/2026"/>
                <MiniKPI label="Admissões 12m" value="6" sub="+35%"/>
                <MiniKPI label="Desligamentos 12m" value="3" sub="-25%"/>
                <MiniKPI label="Turnover anual" value="8,4%" sub="-1,2pp vs. 2024"/>
              </div>

              <div className="sect-title" style={{ marginBottom: 12 }}>Evolução headcount últimos 12 meses</div>
              <div style={{ height: 200, position: 'relative', marginBottom: 24 }}>
                <svg viewBox="0 0 800 180" style={{ width: '100%', height: '100%' }} preserveAspectRatio="none">
                  <defs>
                    <linearGradient id="hcGrad" x1="0" x2="0" y1="0" y2="1">
                      <stop offset="0" stopColor="var(--accent-1)" stopOpacity=".35"/>
                      <stop offset="1" stopColor="var(--accent-1)" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  {[0,45,90,135].map(y => <line key={y} x1="40" y1={y+10} x2="790" y2={y+10} stroke="var(--line-1)" strokeWidth=".5"/>)}
                  {(() => {
                    const hcVals = [13, 13, 14, 14, 15, 15, 16, 15, 16, 16, 17, 17];
                    const pts = hcVals.map((v, i) => [40 + i * (750 / 11), 160 - ((v - 12) / 8) * 140]);
                    const path = pts.map((p, i) => i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`).join(' ');
                    return <>
                      <path d={`${path} L${pts[11][0]},160 L${pts[0][0]},160 Z`} fill="url(#hcGrad)"/>
                      <path d={path} fill="none" stroke="var(--accent-1)" strokeWidth="2.5"/>
                      {pts.map((p, i) => <g key={i}>
                        <circle cx={p[0]} cy={p[1]} r="4" fill="var(--accent-1)" stroke="var(--bg-2)" strokeWidth="2"/>
                        <text x={p[0]} y={p[1] - 8} textAnchor="middle" fill="var(--text-1)" fontSize="10" fontFamily="var(--font-mono)" fontWeight="600">{hcVals[i]}</text>
                      </g>)}
                    </>;
                  })()}
                  {['Mai','Jun','Jul','Ago','Set','Out','Nov','Dez','Jan','Fev','Mar','Abr'].map((m, i) => (
                    <text key={i} x={40 + i * (750/11)} y="175" textAnchor="middle" fill="var(--text-3)" fontSize="10">{m}</text>
                  ))}
                </svg>
              </div>

              <div className="sect-title" style={{ marginBottom: 12 }}>Distribuição por departamento</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {hcByDept.map(d => (
                  <div key={d.d} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 100px 100px', gap: 12, alignItems: 'center', padding: '10px 14px', background: 'var(--bg-base)', borderRadius: 8 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span className="dot" style={{ background: deptColors[d.d], width: 8, height: 8 }}/>
                      <span style={{ fontSize: 12.5, color: 'var(--text-0)', fontWeight: 500 }}>{d.d}</span>
                    </div>
                    <div style={{ height: 8, background: 'var(--bg-3)', borderRadius: 999, overflow: 'hidden' }}>
                      <div style={{ width: (d.count / 18) * 100 + '%', height: '100%', background: deptColors[d.d] }}/>
                    </div>
                    <div style={{ textAlign: 'right', fontSize: 12.5, fontWeight: 600, color: 'var(--text-0)', fontVariantNumeric: 'tabular-nums' }}>{d.count} <span style={{ fontSize: 10, color: 'var(--text-3)', fontWeight: 400 }}>pessoas</span></div>
                    <div style={{ textAlign: 'right', fontSize: 12.5, fontWeight: 600, color: 'var(--text-1)', fontVariantNumeric: 'tabular-nums' }}>{BRL(d.salario)}</div>
                  </div>
                ))}
              </div>
            </>}

            {selected !== 'headcount' && <div style={{ padding: 60, textAlign: 'center', color: 'var(--text-3)' }}>
              <Icon name={sel.i} size={36} color="var(--text-4)"/>
              <div style={{ fontSize: 14, color: 'var(--text-2)', marginTop: 14, fontWeight: 500 }}>{sel.nome}</div>
              <div style={{ fontSize: 12, marginTop: 6, maxWidth: 380, margin: '6px auto 0' }}>Relatório pronto para geração. Use os botões acima para exportar em PDF, Excel ou CSV.</div>
              <button className="btn btn-primary" style={{ marginTop: 18 }}><Icon name="download" size={13}/> Gerar relatório</button>
            </div>}
          </div>
        </div>
      </PageContainer>
    </AppShell>
  );
};

const MiniKPI = ({ label, value, sub }) => (
  <div style={{ padding: '12px 14px', background: 'var(--bg-base)', borderRadius: 10, border: '1px solid var(--line-1)' }}>
    <div style={{ fontSize: 10.5, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>{label}</div>
    <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text-0)', marginTop: 4, letterSpacing: '-.01em', fontVariantNumeric: 'tabular-nums' }}>{value}</div>
    <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>{sub}</div>
  </div>
);

Object.assign(window, { PageComissoes, PageFerias, PageLicencas, PageTiposFolga, PageAlocacoes, PageRHRelatorios });