const { Button: PgButton, Icon: PgIcon, Card: PgCard, Badge: PgBadge, TextField: PgTextField } = window.IPEPNexusDesignSystem_0e390f;

const pgBrl = v => (isFinite(v) ? v : 0).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
const pmt = (P, i, n) => i === 0 ? P / n : P * i / (1 - Math.pow(1 + i, -n));
const pv = (A, i, n) => i === 0 ? A * n : A * (1 - Math.pow(1 + i, -n)) / i;
const numBR = s => parseFloat(String(s).replace(/\./g, '').replace(',', '.')) || 0;

function PgSec({ selo, titulo, texto, white, children, id }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el || !('IntersectionObserver' in window)) return;
    el.classList.add('rc-reveal');
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { el.classList.add('rc-in'); io.disconnect(); } }), { threshold: 0.15 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return <section ref={ref} className={'rc-sec rc-psec' + (white ? ' rc-sec--white' : '')} id={id}><div className="rc-wrap">
    {(selo || titulo) && <div className="rc-psec-head" style={{ maxWidth: 760, marginBottom: 32 }}>
      {selo && <span className="rc-seal">{selo}</span>}
      {titulo && <h2 className="rc-h2">{titulo}</h2>}
      {texto && <p className="rc-p" style={{ margin: 0 }}>{texto}</p>}
    </div>}
    {children}
  </div></section>;
}

function PgCards({ items, cols }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el || !('IntersectionObserver' in window)) return;
    el.classList.add('rc-reveal');
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { el.classList.add('rc-in'); io.disconnect(); } }), { threshold: 0.15 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return <div ref={ref} className="rc-cards" style={cols ? { gridTemplateColumns: `repeat(auto-fit,minmax(min(100%,${cols}px),1fr))` } : undefined}>
    {items.map((b, n) => <PgCard key={b.t} className="rc-card rc-card--fx" padding={24} style={{ '--d': n * 80 + 'ms' }}>
      <div className="rc-card-ic"><PgIcon name={b.ic} size={24}></PgIcon></div>
      <h3>{b.t}</h3><p>{b.d}</p>
    </PgCard>)}
  </div>;
}

function PgSteps({ items }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el || !('IntersectionObserver' in window)) return;
    el.classList.add('rc-reveal');
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { el.classList.add('rc-in'); io.disconnect(); } }), { threshold: 0.2 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return <ol ref={ref} className="rc-steps rc-steps--row rc-steps--fx">{items.map((s, i) => <li key={i} style={{ '--i': i }}><span className="rc-num">{i + 1}</span><span><strong style={{ display: 'block', fontWeight: 600 }}>{s[0]}</strong><span className="rc-meta" style={{ fontSize: 14 }}>{s[1]}</span></span></li>)}</ol>;
}

function PgFaq({ items }) {
  const [ab, setAb] = React.useState(-1);
  const uid = React.useId ? React.useId() : 'faq';
  return <div className="rc-faq">{items.map((f, i) => { const on = ab === i, id = uid + '-' + i; return <div key={i} className={'rc-fq' + (on ? ' is-on' : '')} style={{ '--i': i }}>
    <h3 className="rc-fq-h"><button type="button" aria-expanded={on} aria-controls={id} onClick={() => setAb(on ? -1 : i)}>
      <span className="rc-fq-n">{String(i + 1).padStart(2, '0')}</span><span className="rc-fq-t">{f[0]}</span><span className="rc-fq-ic" aria-hidden="true"></span>
    </button></h3>
    <div className="rc-fq-b" id={id} role="region" aria-hidden={!on}><div><p>{f[1]}</p></div></div>
  </div>; })}</div>;
}

function PgCta({ setPage, titulo, texto, acao = 'Fale com um especialista', seta = true, destino = 'contato' }) {
  return <section className="rc-sec"><div className="rc-wrap">
    <div className="rc-cta">
      <div><h2 className="rc-h2" style={{ margin: '0 0 8px', color: '#fff' }}>{titulo}</h2><p style={{ margin: 0, color: 'rgba(255,255,255,.86)', font: '400 16px/1.55 var(--ipep-font)' }}>{texto}</p></div>
      <button className="rc-btn-green" style={{ padding: '0 24px', flex: 'none' }} onClick={() => setPage(destino)}>{acao}{seta && <PgIcon name="arrow-right" size={18}></PgIcon>}</button>
    </div>
  </div></section>;
}

/* ---------- RPPS (consignatária) ---------- */
const RPPS_GESTAO = [
  { ic: 'headset', t: 'Canais de atendimento', d: 'Atendimento especializado para tirar dúvidas e passar segurança aos beneficiários, sem sobrecarregar a equipe do RPPS.' },
  { ic: 'file-sign', t: 'Gestão dos contratos', d: 'Contratos 100% digitais, da emissão e assinatura até o arquivamento pelo prazo definido na norma.' },
  { ic: 'calculator-variant-outline', t: 'Gestão financeira, contábil e fiscal', d: 'Especialistas cuidam da segregação financeira e da contabilidade da carteira conforme a regulamentação vigente.' },
  { ic: 'cash-clock', t: 'Inadimplência e cobrança', d: 'Soluções de cobrança organizadas e efetivas, com avisos automáticos e oferta de refinanciamento.' },
  { ic: 'scale-balance', t: 'Apoio jurídico', d: 'Time jurídico pronto para assessorar e agir quando necessário, apoiando o RPPS em várias frentes.' },
  { ic: 'chart-box-outline', t: 'Monitoramento', d: 'Acompanhamento conforme o art. 32 da Portaria MTP 1.467/2022: atualizações atuariais, taxas de risco, inadimplência e rentabilidade.' },
];
const RPPS_ESTUDOS = [
  ['Estudo atuarial', 'Parâmetros de elegibilidade e risco do crédito para a realidade do RPPS.'],
  ['Matriz de risco', 'Fluxograma para constituição do fundo garantidor e do fundo de liquidez.'],
  ['Custo efetivo total', 'Definição das taxas que formam o CET, em conformidade com a Portaria MTP 1.467/2022.'],
  ['Adequações', 'Ajustes jurídicos, institucionais, financeiros e contábeis, com apoio operacional.'],
  ['Implantação', 'Processos mapeados e tecnologia configurada conforme as normas vigentes.'],
];
const RPPS_TIME = [
  { id: 'foto-pamela-machado-rpps', nome: 'Pamela Machado', cargo: 'Coordenadora', src: 'assets/pamela-machado.png', txt: 'Realizamos a gestão do consignado com analistas de crédito, contadores e programadores, para que os gestores do RPPS foquem no que é mais importante.' },
  { id: 'foto-ricardo-sgarbi', nome: 'Ricardo Sgarbi', cargo: 'Especialista em Crédito Consignado', txt: 'Acompanhamos a carteira de crédito para identificar riscos, buscar menor inadimplência e maior retorno para os investimentos do RPPS.' },
  { id: 'foto-leonardy', nome: 'Leonardy', cargo: 'Programador', src: 'assets/leonardy.png', txt: 'A melhoria contínua da tecnologia automatiza processos, reduz o tempo dos atendentes e garante mais segurança às informações.' },
];

function rcEquipe() {
  const id = window.__rcTenantId || 'rppsconsig'; const draft = new URLSearchParams(location.search).get('previa') === '1';
  let s = null; try { s = (draft && JSON.parse(sessionStorage.getItem('rc-site-' + id + '-rascunho'))) || JSON.parse(localStorage.getItem('rc-site-' + id)); } catch (e) {}
  let e = s && s.equipe;
  if (!e || !Array.isArray(e.membros)) return { selo: 'Equipe', titulo: 'Especialistas na gestão do consignado', membros: RPPS_TIME };
  return { selo: e.selo || 'Equipe', titulo: e.titulo || 'Especialistas na gestão do consignado', membros: e.membros.filter(m => m && (m.nome || '').trim()).map((m, i) => ({ id: 'eq-' + i, nome: m.nome, cargo: m.cargo, txt: m.txt, src: m.foto || (m.nome === 'Leonardy' ? 'assets/leonardy.png' : null), fx: m.fx, fy: m.fy, fz: m.fz })) };
}
function RpHero() {
  const v = [['finance', 'Aumenta a rentabilidade do RPPS'], ['chart-bell-curve', 'Baixa volatilidade do investimento'], ['account-group-outline', 'Aumenta o vínculo com os servidores'], ['percent-outline', 'Juros menores para os servidores']];
  return <section className="rc-hero pf-hero"><div className="rc-wrap pf-hero-grid">
    <div className="pf-hero-txt">
      <span className="rc-seal">Consignatária</span>
      <h1 className="rc-h1 pf-h1">O RPPS como <em>consignatária</em> do crédito</h1>
      <p className="rc-lead" style={{ margin: 0 }}>O regime concede empréstimos aos seus beneficiários com recursos do próprio fundo e recebe as parcelas com juros, descontadas em folha.</p>
      <ul className="pf-chips"><li><PgIcon name="scale-balance" size={16}></PgIcon>Portaria MTP 1.467/2022</li><li><PgIcon name="scale-balance" size={16}></PgIcon>Resolução CMN nº 5.272/2025</li></ul>
    </div>
    <div className="pf-panel" aria-label="Principais vantagens para o RPPS">
      <div className="pf-panel-hd"><PgIcon name="star-circle-outline" size={22}></PgIcon><b>Principais vantagens para o RPPS</b></div>
      <ul className="pf-panel-ls">{v.map((x, i) => <li key={x[1]} style={{ '--d': 200 + i * 100 + 'ms' }}><span className="pf-panel-ic"><PgIcon name={x[0]} size={18}></PgIcon></span><span>{x[1]}</span><span className="pf-on" aria-hidden="true"><PgIcon name="check-circle" size={18}></PgIcon></span></li>)}</ul>
    </div>
  </div></section>;
}
function RpAutoPag() {
  const passos = [['file-sign', 'Contrato assinado', 'Aprovação digital pela consignante e pela consignatária.'], ['bank-transfer-out', 'Pagamento automático', 'Valor liberado ao segurado sem intervenção manual.'], ['file-document-outline', 'Desconto em folha', 'Parcelas descontadas na remuneração ou no benefício.'], ['bank-transfer-in', 'Retorno ao fundo', 'Parcelas com juros voltam para a carteira do RPPS.']];
  return <div className="ap-box">
    <div className="ap-txt">
      <span className="ap-tag"><PgIcon name="lightning-bolt-outline" size={16}></PgIcon>Diferencial RPPSConsig</span>
      <h3>Pagamento <em>automatizado</em></h3>
      <p>Uma vez definidos os parâmetros, a equipe do RPPS passa do operacional para a estratégia e as decisões sobre o consignado. Da assinatura do contrato à liberação do valor, o pagamento é processado pela plataforma.</p>
      <ul className="ap-ok"><li><PgIcon name="check-circle" size={18}></PgIcon>Sem trabalho manual na equipe do RPPS</li><li><PgIcon name="check-circle" size={18}></PgIcon>Menos risco de erro operacional</li><li><PgIcon name="check-circle" size={18}></PgIcon>Cada etapa registrada para auditoria</li><li><PgIcon name="check-circle" size={18}></PgIcon>Dinheiro liberado mais rápido para quem precisa</li></ul>
    </div>
    <ol className="ap-flow">{passos.map((p, i) => <li key={p[1]} style={{ '--d': 150 + i * 140 + 'ms' }}>
      <span className="ap-ic"><PgIcon name={p[0]} size={22}></PgIcon></span>
      <span className="ap-b"><b>{p[1]}</b><small>{p[2]}</small></span>
      {i === 1 && <span className="ap-auto">Automático</span>}
    </li>)}</ol>
  </div>;
}
function RcPaginaRPPS({ setPage }) {
  return <>
    <RpHero></RpHero>
    <PgSec white selo="Investimento" titulo="Baixo risco e rentabilidade para a carteira" texto="Comparado à variação da SELIC e do IBOVESPA, o consignado apresenta baixa volatilidade e rentabilidade acima da renda fixa e variável, o que favorece o alcance da meta atuarial.">
      <PgCards items={[
        { ic: 'chart-line', t: 'Meta atuarial', d: 'Os juros das parcelas retornam ao fundo e contribuem para a meta atuarial dos próprios beneficiários.' },
        { ic: 'shield-check-outline', t: 'Risco controlado', d: 'Desconto em folha, fundo garantidor, fundo de liquidez e possibilidade de seguro para cobertura do risco de crédito.' },
        { ic: 'swap-horizontal', t: 'Portabilidade para o RPPS', d: 'Contratos de outras instituições financeiras podem ser transferidos para o RPPS. O contrário não é permitido.' },
      ]}></PgCards>
    </PgSec>
    <PgSec selo="Estudos" titulo="Estudos atuariais para controle de riscos" texto="Os estudos atendem aos requisitos atuariais da Secretaria de Previdência e oferecem as adequações necessárias para a concessão a servidores, aposentados e pensionistas.">
      <PgSteps items={RPPS_ESTUDOS}></PgSteps>
    </PgSec>
    <PgSec white selo="Gestão" titulo="Gestão do consignado para o RPPS" texto="Atendimento especializado na gestão do consignado, sem sobrecarregar os servidores do RPPS e dentro da taxa de administração prevista na Portaria MTP 1.467/2022.">
      <RpAutoPag></RpAutoPag>
      <PgCards items={RPPS_GESTAO} cols={300}></PgCards>
    </PgSec>
    <PgSec selo="Elegibilidade" titulo="Quem pode contratar">
      <div className="rc-cards" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,320px),1fr))' }}>
        <PgCard padding={24}><PgBadge tone="success">CAPAG nota A</PgBadge><p className="rc-p" style={{ margin: '12px 0 0' }}>Servidores, aposentados e pensionistas vinculados ao RPPS.</p></PgCard>
        <PgCard padding={24}><PgBadge tone="warning">CAPAG nota B, C ou D</PgBadge><p className="rc-p" style={{ margin: '12px 0 0' }}>Somente aposentados e pensionistas. Com segregação de massa, apenas os vinculados ao fundo em capitalização.</p></PgCard>
        <PgCard padding={24}><PgBadge tone="info">Dependentes</PgBadge><p className="rc-p" style={{ margin: '12px 0 0' }}>Permitido somente quando estiverem em gozo de pensão por morte.</p></PgCard>
      </div>
      <div className="rc-strip"><PgIcon name="information-outline" size={20} color="var(--ipep-info)"></PgIcon><span>Assessoria complementar: melhoria do Pró-Gestão e melhoria da nota CAPAG do município.</span></div>
    </PgSec>
    <PgCta setPage={setPage} titulo="Toda a operação do consignado em uma só plataforma." texto="Do pedido do segurado ao repasse ao fundo, com segurança certificada ISO 27001 e 27701." acao="Conheça a plataforma" destino="plataforma"></PgCta>
  </>;
}

/* ---------- Prefeituras (consignante) ---------- */
function RcPaginaPrefeituras({ setPage }) {
  return <>
    <RcPageHero pg={{ selo: 'Consignante', t: 'O papel da prefeitura como consignante', d: 'A prefeitura firma o convênio com o RPPS, informa a margem dos servidores, desconta as parcelas em folha e repassa os valores ao fundo.' }}></RcPageHero>
    <PgSec white selo="Operação" titulo="Como a prefeitura participa">
      <PgSteps items={[
        ['Convênio', 'Acordo entre prefeitura e RPPS para desconto em folha.'],
        ['Margem consignável', 'Envio dos dados da folha para cálculo da margem de cada servidor.'],
        ['Aprovação', 'A consignante acompanha e aprova as operações na plataforma.'],
        ['Desconto em folha', 'As parcelas são descontadas mensalmente da remuneração.'],
        ['Repasse', 'Os valores descontados são repassados ao RPPS.'],
      ]}></PgSteps>
    </PgSec>
    <PgSec selo="Benefícios" titulo="O que a prefeitura e os servidores ganham com o consignado pelo RPPS">
      <PgCards items={[
        { ic: 'account-heart-outline', t: 'Servidor menos endividado', d: 'Taxas menores e portabilidade ajudam a reduzir o endividamento do quadro de pessoal.' },
        { ic: 'bank-outline', t: 'Fundo previdenciário fortalecido', d: 'O retorno das operações contribui para a meta atuarial do regime do município.' },
        { ic: 'monitor-dashboard', t: 'Margem controlada', d: 'Critérios de elegibilidade e limites de parcelas verificados automaticamente.' },
        { ic: 'chart-timeline-variant', t: 'Nota CAPAG', d: 'Assessoria para melhoria da nota CAPAG, que amplia quem pode contratar.' },
      ]}></PgCards>
    </PgSec>
    <PgCta setPage={setPage} titulo="A prefeitura firma o convênio; o RPPS opera o consignado." texto="Veja como o RPPS concede o crédito, administra a carteira e transforma os juros em retorno ao fundo." acao="Conheça as vantagens" destino="rpps"></PgCta>
  </>;
}

/* ---------- Servidores ---------- */
const RC_CRED_PADRAO = { taxa: 1.5, taxaPort: 1.35, prazoMax: 84, valorMin: 1000, valorMax: 100000, margem: 35 };
function rcCredito() {
  const id = window.__rcTenantId || 'rppsconsig';
  let s = null; try { s = JSON.parse(localStorage.getItem('rc-credito-' + id)); } catch (e) {}
  const c = { ...RC_CRED_PADRAO, ...(s || {}) };
  c.prazos = [12, 24, 36, 48, 60, 72, 84, 96, 120].filter(n => n <= c.prazoMax);
  if (!c.prazos.includes(c.prazoMax)) c.prazos.push(c.prazoMax);
  return c;
}
const pctBR = v => v.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '% a.m.';
function PgSimServidor({ onContratar }) {
  const [modo, setModo] = React.useState('novo');
  const [valor, setValor] = React.useState(10000);
  const [prazo, setPrazo] = React.useState(36);
  const cp = rcCredito();
  const [parcAtual, setParcAtual] = React.useState('450,00');
  const [prazoAtual, setPrazoAtual] = React.useState('48');
  const [taxaAtual, setTaxaAtual] = React.useState('2,05');
  const i = (modo === 'novo' ? cp.taxa : cp.taxaPort) / 100;
  const vMin = cp.valorMin, vMax = Math.max(cp.valorMin + 500, cp.valorMax);
  const val = Math.min(vMax, Math.max(vMin, valor));
  const prz = cp.prazos.includes(prazo) ? prazo : cp.prazos[Math.min(2, cp.prazos.length - 1)];
  let res;
  if (modo === 'novo') {
    const p = pmt(val, i, prz);
    res = [['Parcela mensal estimada', pgBrl(p)], ['Total a pagar', pgBrl(p * prz)]];
  } else {
    const A = numBR(parcAtual), n = Math.max(1, Math.round(numBR(prazoAtual))), ia = numBR(taxaAtual) / 100;
    const saldo = pv(A, ia, n), nova = pmt(saldo, i, n);
    res = [['Saldo devedor atual', pgBrl(saldo)], ['Nova parcela estimada', pgBrl(nova)], ['Economia mensal', pgBrl(A - nova)], ['Economia total', pgBrl((A - nova) * n)]];
  }
  return <div className="rc-sim" style={{ animation: 'none' }}>
    <div className="rc-seg" role="group" aria-label="Tipo de simulação" style={{ gridTemplateColumns: '1fr 1fr' }}>
      <button type="button" aria-pressed={modo === 'novo'} onClick={() => setModo('novo')}>Novo empréstimo</button>
      <button type="button" aria-pressed={modo === 'port'} onClick={() => setModo('port')}>Portabilidade</button>
    </div>
    {modo === 'novo' ? <>
      <div className="rc-q">
        <label htmlFor="pg-valor">Valor do empréstimo</label>
        <div className="rc-val">{pgBrl(val)}</div>
        <input id="pg-valor" className="rc-range" type="range" min={vMin} max={vMax} step="500" value={val} onChange={e => setValor(+e.target.value)}></input>
        <div className="rc-scale"><span>{pgBrl(vMin).replace(',00', '')}</span><span>{pgBrl(vMax).replace(',00', '')}</span></div>
      </div>
      <div className="rc-q" role="group" aria-label="Prazo">
        <span className="rc-ql">Prazo (meses)</span>
        <div className="rc-chips">{cp.prazos.map(n => <button key={n} className="rc-chip" aria-pressed={prz === n} onClick={() => setPrazo(n)}>{prz === n && <PgIcon name="check" size={16}></PgIcon>}{n}</button>)}</div>
      </div>
    </> : <div style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit,minmax(140px,1fr))' }}>
      <PgTextField label="Parcela atual (R$)" inputMode="decimal" value={parcAtual} onChange={e => setParcAtual(e.target.value)}></PgTextField>
      <PgTextField label="Prazo restante (meses)" inputMode="numeric" value={prazoAtual} onChange={e => setPrazoAtual(e.target.value)}></PgTextField>
      <PgTextField label="Taxa atual (% a.m.)" inputMode="decimal" value={taxaAtual} onChange={e => setTaxaAtual(e.target.value)}></PgTextField>
    </div>}
    <div className="rc-taxa"><PgIcon name="percent-outline" size={18} color="var(--rc-link)"></PgIcon><span>Taxa {modo === 'novo' ? 'média do crédito' : 'da portabilidade'}: <b className="rc-num-t">{pctBR(modo === 'novo' ? cp.taxa : cp.taxaPort)}</b></span><small>definida no regulamento de crédito</small></div>
    <div className="rc-result" style={{ animation: 'none' }} aria-live="polite">
      <div className="rc-result-grid">{res.map(r => <div key={r[0]}><small>{r[0]}</small><strong key={r[1]} className="rc-pulse">{r[1]}</strong></div>)}</div>
    </div>
    <p className="rc-note">Simulação informativa pela Tabela Price. A taxa efetiva é definida na análise de crédito, conforme o regulamento de cada RPPS. O CET é obrigatório na proposta (Resolução CMN nº 5.272/2025).</p>
    {onContratar && <PgButton variant="primary" onClick={onContratar} style={{ width: '100%', justifyContent: 'center' }}>Quero fazer empréstimo</PgButton>}
  </div>;
}

const SERV_FAQ = [
  ['O que é margem consignável?', 'É a porcentagem máxima do salário líquido ou do benefício que pode ser comprometida com parcelas descontadas em folha.'],
  ['Qual é a margem máxima consignável?', 'Até 30% da remuneração mensal ou do benefício, conforme o regulamento de crédito do RPPS.'],
  ['Posso fazer portabilidade?', 'Sim, de instituições financeiras para o RPPS. O contrário não é permitido (Portaria MTP 1.467/2022).'],
  ['Quando e como o dinheiro é liberado?', 'Após a assinatura do contrato, na mesma conta em que você recebe a remuneração ou o benefício. O prazo consta no regulamento do RPPS.'],
  ['Tem carência para começar a pagar?', 'Não. A primeira parcela é cobrada no mês seguinte à concessão.'],
  ['Quais encargos compõem a operação?', 'Taxa administrativa, juros reais, correção monetária, quitação por morte, fundo de liquidez e IOF.'],
  ['Qual é o sistema de amortização?', 'Tabela Price: as parcelas permanecem iguais durante todo o prazo.'],
  ['Qual é o prazo máximo?', 'Até 84 meses (7 anos), quando o tomador cumpre todos os requisitos da Política de Investimentos e do regulamento.'],
  ['Como o contrato é formalizado?', 'Eletronicamente, com assinatura digital, em contrato específico ou contrato único para futuras concessões.'],
  ['Posso ter mais de um empréstimo?', 'Sim, enquanto houver margem consignável disponível, limitado a 2 (dois) empréstimos. Também é possível renovar por refinanciamento.'],
];

function SvHero({ go }) {
  const cp = rcCredito();
  const v = [['calendar-sync-outline', 'Desconto automático em folha'], ['calendar-range', 'Prazo de até ' + cp.prazoMax + ' meses'], ['cellphone-check', 'Contratação 100% digital'], ['swap-horizontal', 'Vantagens para Portabilidade']];
  const simular = () => { const el = document.getElementById('simulador-servidor'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); };
  return <section className="rc-hero pf-hero"><div className="rc-wrap pf-hero-grid">
    <div className="pf-hero-txt">
      <span className="rc-seal">Servidores, aposentados e pensionistas</span>
      <h1 className="rc-h1 pf-h1">Crédito com <em>taxas menores</em>, direto do seu RPPS</h1>
      <p className="rc-lead" style={{ margin: 0 }}>Empréstimo com recursos da sua própria previdência, desconto em folha e taxas menores que as de instituições financeiras. Os juros que você paga voltam para o seu fundo.</p>
      <div className="sv-acts"><button type="button" className="rc-btn-green" style={{ padding: '0 22px' }} onClick={simular}>Simular minha parcela<PgIcon name="arrow-down" size={18}></PgIcon></button></div>
    </div>
    <div className="pf-panel" aria-label="Vantagens do crédito pelo RPPS">
      <div className="sv-rate"><small>Taxa média do crédito</small><span>Conforme os parâmetros definidos pelo seu RPPS.</span></div>
      <ul className="pf-panel-ls">{v.map((x, i) => <li key={x[1]} style={{ '--d': 200 + i * 110 + 'ms' }}><span className="pf-panel-ic"><PgIcon name={x[0]} size={18}></PgIcon></span><span>{x[1]}</span><span className="pf-on" aria-hidden="true"><PgIcon name="check-circle" size={18}></PgIcon></span></li>)}</ul>
    </div>
  </div></section>;
}
function RcPaginaServidores({ setPage, go }) {
  return <>
    <SvHero go={go}></SvHero>
    <PgSec white selo="Modalidades" titulo="Como podemos te ajudar">
      <PgCards cols={280} items={[
        { ic: 'cash-multiple', t: 'Empréstimo consignado', d: 'Desconto automático em folha, parcelas fixas pela Tabela Price e prazo de até 84 meses.' },
        { ic: 'swap-horizontal', t: 'Portabilidade', d: 'Transfira o consignado de outra instituição para o RPPS. O RPPS quita o saldo devedor anterior.' },
        { ic: 'autorenew', t: 'Refinanciamento', d: 'Reestruture contratos vigentes com o RPPS à medida que contratar novos empréstimos.' },
      ]}></PgCards>
    </PgSec>
    <section className="rc-sec" id="simulador-servidor"><div className="rc-wrap rc-final" style={{ alignItems: 'center' }}>
      <div>
        <span className="rc-seal">Simulador</span>
        <h2 className="rc-h2">Simule sua parcela ou a economia da portabilidade</h2>
        <p className="rc-p">Com base na sua margem, defina valor e prazo. Na portabilidade, informe o contrato atual e veja quanto pode economizar.</p>
        <PgSteps items={[
          ['Entre com seu CPF', 'Acesse o Portal do Segurado.'],
          ['Simule valores e prazos', 'Conforme sua margem disponível.'],
          ['Análise de crédito', 'Automática, com base na margem consignável.'],
          ['Assine digitalmente', 'Contrato eletrônico, sem papel.'],
          ['Receba em conta', 'Na conta onde recebe o salário ou benefício.'],
          ['Acompanhe os descontos em folha', 'Veja no portal cada parcela descontada e o saldo devedor.'],
        ]}></PgSteps>
      </div>
      <PgSimServidor onContratar={() => go('login')}></PgSimServidor>
    </div></section>
    <PgSec white selo="Vantagens" titulo="Por que o RPPS é melhor para o seu bolso">
      <PgCards cols={300} items={[
        { ic: 'trending-down', t: 'Taxas menores', d: 'Juros menores que os de outras instituições do mesmo segmento. A taxa final varia conforme o risco atuarial de cada RPPS.' },
        { ic: 'account-heart-outline', t: 'Menos endividamento', d: 'A portabilidade permite trocar dívidas caras por parcelas menores.' },
        { ic: 'shield-lock-outline', t: 'Segurança', d: 'Antifraude em todos os processos, dados criptografados e monitoramento de IPs.' },
        { ic: 'cellphone-check', t: 'Totalmente digital', d: 'Solicitação, análise, assinatura e acompanhamento online, sem filas e sem papel.' },
        { ic: 'bank-outline', t: 'Seu fundo mais forte', d: 'Os juros pagos retornam ao fundo de previdência dos próprios beneficiários.' },
        { ic: 'book-open-variant-outline', t: 'Educação financeira', d: 'Conteúdo para usar o crédito de forma consciente.' },
      ]}></PgCards>
      <div className="rc-strip"><PgIcon name="lightbulb-on-outline" size={20} color="var(--ipep-info)"></PgIcon><span><strong>Como aumentar suas chances:</strong> mantenha as contas em dia e conecte a conta em que recebe o salário para uma análise mais completa.</span></div>
      <div className="rc-strip rc-strip--ef"><PgIcon name="school-outline" size={20} color="var(--rc-link)"></PgIcon><span style={{ flex: 1 }}><strong>Crédito bom é crédito planejado.</strong> Aprenda em minutos a organizar o orçamento da família e a trocar dívidas caras por parcelas que cabem no bolso, com cursos gratuitos.</span><button type="button" className="rc-strip-link" onClick={() => setPage('planejamento')}>Conhecer a Educação Financeira<PgIcon name="arrow-right" size={18}></PgIcon></button></div>
    </PgSec>
    <PgSec selo="Dúvidas frequentes" titulo="Ficou alguma dúvida?"><PgFaq items={SERV_FAQ}></PgFaq></PgSec>
  </>;
}

/* ---------- Planejamento financeiro ---------- */
const PF_TEMAS = [
  { ic: 'school-outline', t: 'O que é educação financeira', d: 'Entender como o dinheiro entra e sai é a base para decidir melhor.', dicas: ['Anote a renda líquida e todos os gastos do mês.', 'Separe necessidades de desejos antes de comprar.', 'Defina metas com valor e prazo.'] },
  { ic: 'wallet-outline', t: 'Orçamento familiar', d: 'Uma parcela só cabe no bolso quando o mês está mapeado.', dicas: ['Liste gastos fixos e variáveis da família.', 'Trate a parcela do consignado como gasto fixo.', 'Guarde uma reserva para imprevistos.'] },
  { ic: 'percent-outline', t: 'Juros simples, compostos e taxas', d: 'Comparar o custo total evita surpresas no fim do contrato.', dicas: ['Compare pelo CET, não só pela taxa de juros.', 'Prazos longos reduzem a parcela, mas aumentam o total pago.', 'Confira IOF e demais encargos na proposta.'] },
  { ic: 'alert-outline', t: 'Superendividamento', d: 'Como evitar e como sair quando as dívidas passam do limite.', dicas: ['Priorize a quitação das dívidas mais caras.', 'Avalie a portabilidade para reduzir juros.', 'Evite comprometer toda a margem consignável.'] },
  { ic: 'hand-coin-outline', t: 'Como o consignado pode ajudar', d: 'Crédito com taxa menor pode substituir dívidas caras.', dicas: ['Use o consignado para trocar dívida cara por barata.', 'Simule antes de contratar.', 'Lembre que os juros retornam ao seu fundo.'] },
  { ic: 'shield-alert-outline', t: 'Golpes e fraudes financeiras', d: 'Fique alerta a ofertas e contatos suspeitos.', dicas: ['O RPPS não cobra para liberar empréstimo.', 'Não informe senhas ou códigos por telefone.', 'Use apenas os canais oficiais do seu RPPS.'] },
];

const PF_CURSOS = [
  { id: 'curso-credito-direto', img: 'assets/curso-credito-direto.png', t: 'Planejamento Financeiro Familiar', d: 'Conheça a metodologia 4G: gastar, guardar, ganhar e gerir o orçamento da família.', cat: 'Orçamento' },
  { id: 'curso-reforma-tributaria', img: 'assets/curso-reforma-tributaria.png', t: 'O poder dos juros nas nossas vidas', d: 'Por que trocar uma dívida cara por uma mais barata pode ser uma boa saída para o desendividamento.', cat: 'Juros e crédito' },
  { id: 'curso-patrimonio', img: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?fm=jpg&q=70&w=1200&auto=format&fit=crop', t: 'Portabilidade de crédito', d: 'Leve sua dívida para uma taxa menor: parcela menor, quitação antecipada ou mais recursos, com menos endividamento.', cat: 'Juros e crédito' },
  { id: 'curso-golpes', img: null, stock: { src: 'https://images.unsplash.com/photo-1633486294753-a3f90a19e2ee?fm=jpg&q=70&w=1200&auto=format&fit=crop', credit: 'Photo by Erik Mclean on Unsplash', href: 'https://unsplash.com/@introspectivedsgn' }, t: 'Golpes e fraudes financeiras', d: 'Como reconhecer ofertas falsas, proteger seus dados e usar apenas os canais oficiais do seu RPPS.', cat: 'Segurança' },
];

const PF_TRILHAS = [
  { ic: 'wallet-outline', t: 'Orçamento familiar', l: 'Gastar · Guardar · Ganhar · Gerir' },
  { ic: 'percent-outline', t: 'Juros e crédito', l: 'Consignado · Portabilidade · CET' },
  { ic: 'swap-horizontal', t: 'Portabilidade: as vantagens', l: 'Taxa menor · Parcela menor · Economia' },
  { ic: 'shield-lock-outline', t: 'Segurança financeira', l: 'Golpes · Dados pessoais · Canais oficiais' },
];
const pfSeg = s => { const p = String(s || '').split(':').map(n => +n || 0); return p.length === 3 ? p[0] * 3600 + p[1] * 60 + p[2] : p.length === 2 ? p[0] * 60 + p[1] : 0; };
const pfHms = n => { const h = Math.floor(n / 3600), m = Math.floor(n % 3600 / 60); return h ? h + 'h' + String(m).padStart(2, '0') : m + 'min'; };
function rcAcademy() {
  const id = window.__rcTenantId || 'rppsconsig'; const k = id === 'guarujaprev' ? 'gp-academy-v1' : 'gp-academy-v1-' + id;
  let L = null; try { L = JSON.parse(localStorage.getItem(k)); } catch (e) {}
  if (!Array.isArray(L)) return { cursos: PF_CURSOS.map(c => ({ ...c, gratuito: true })), aulas: null, dur: null };
  const pfNv = PF_CURSOS.find(x => x.id === 'curso-patrimonio');
  L = L.map(c => c && c.id === 'curso-patrimonio' && /Sucess/.test(c.t || '') && pfNv ? { ...c, t: pfNv.t, d: pfNv.d, cat: pfNv.cat || c.cat, capa: pfNv.img } : c);
  const V = L.filter(c => c.publico && c.publico.site);
  const aulas = c => (c.modulos || []).flatMap(m => m.aulas || []);
  return { cursos: V.map(c => { const fixo = PF_CURSOS.find(x => x.t === c.t); return { id: c.id, img: c.capa || null, stock: !c.capa && fixo ? fixo.stock : null, t: c.t, d: c.d, cat: c.cat, selo: c.selo, gratuito: c.gratuito }; }),
    aulas: V.reduce((s, c) => s + aulas(c).length, 0), dur: V.reduce((s, c) => s + aulas(c).reduce((x, a) => x + pfSeg(a.dur), 0), 0) };
}
if (!document.getElementById('pf-ac-css')) document.head.insertAdjacentHTML('beforeend', '<style id="pf-ac-css">.pf-ac{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;padding:40px;border-radius:12px;background:var(--rc-dark,#102B5C);color:#fff;align-items:center;margin-bottom:24px}@media (max-width:1024px){.pf-ac{grid-template-columns:1fr;padding:28px 20px}}.pf-ac-k{font:700 12px/1 var(--ipep-font);letter-spacing:.08em;text-transform:uppercase;opacity:.85}.pf-ac h2{font:700 clamp(26px,3.2vw,36px)/1.15 var(--ipep-font);margin:12px 0;color:#fff;text-wrap:balance}.pf-ac p{font:400 16px/1.6 var(--ipep-font);margin:0 0 24px;opacity:.9;max-width:520px;text-wrap:pretty}.pf-ac-acts{display:flex;gap:12px;flex-wrap:wrap}.pf-ac-out{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.6);border-radius:8px;font:600 15px/1 var(--ipep-font);color:#fff}.pf-ac-out:hover{background:rgba(255,255,255,.1)}.pf-ac-out:focus-visible{outline:2px solid #fff;outline-offset:2px}.pf-ac-tr{display:grid;gap:8px}.pf-ac-t{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.22);border-radius:8px;background:rgba(255,255,255,.06)}.pf-ac-t>.mdi{flex:none}.pf-ac-t>span:last-child{flex:1;min-width:0}.pf-ac-t b{display:block;font:600 14px/1.3 var(--ipep-font)}.pf-ac-t small{display:block;font:400 12px/1.4 var(--ipep-font);opacity:.85}.pf-ac-tot{display:flex;gap:16px;flex-wrap:wrap;font:400 13px/1 var(--ipep-font);margin-top:8px}.pf-ac-tot>span{white-space:nowrap}.pf-ac-tot b{font-weight:700}.rc-curso-img{position:relative}.pf-selo{position:absolute;right:10px;top:10px;font:700 12px/1 var(--ipep-font);padding:6px 8px;border-radius:6px;color:#fff;z-index:1}.pf-selo--novo{background:#0E7490}.pf-selo--pop{background:#15803D}.pf-grat{position:absolute;left:10px;bottom:10px;font:700 11px/1 var(--ipep-font);letter-spacing:.04em;text-transform:uppercase;padding:6px 8px;border-radius:6px;background:var(--rc-dark,#102B5C);color:#fff;z-index:1}</style>');
function PgAcademy({ go }) {
  const A = rcAcademy(); const ref = React.useRef(null);
  const ver = () => { const el = ref.current; if (el) window.scrollTo({ top: el.getBoundingClientRect().top + scrollY - 96, behavior: 'smooth' }); };
  return <>
    <div className="pf-ac">
      <div>
        <span className="pf-ac-k">Academy Finanças</span>
        <h2>Crédito bom é crédito planejado.</h2>
        <p>Cursos gratuitos sobre orçamento, juros, patrimônio e segurança financeira, pensados para quem tem o RPPS como previdência.</p>
        <div className="pf-ac-acts"><button type="button" className="rc-btn-green" style={{ padding: '0 20px', flex: 'none' }} onClick={ver}>Ver catálogo completo</button></div>
      </div>
      <div style={{ display: 'grid', gap: 8 }}>
        <div className="pf-ac-tr">{PF_TRILHAS.map(t => <div key={t.t} className="pf-ac-t"><PgIcon name={t.ic} size={22}></PgIcon><span><b>{t.t}</b><small>{t.l}</small></span></div>)}</div>
        <div className="pf-ac-tot rc-num-t"><span><b>{A.cursos.length}</b> cursos</span>{A.aulas != null && <span><b>{A.aulas}</b> aulas</span>}{A.dur != null && A.dur > 0 && <span><b>{pfHms(A.dur)}</b> de conteúdo</span>}</div>
      </div>
    </div>
    <div ref={ref}><PgCursos go={go} lista={A.cursos}></PgCursos></div>
  </>;
}

function PgCursos({ go, lista }) {
  return <div className="rc-cursos">{(lista || PF_CURSOS).map(c => <button key={c.id} className="rc-curso" onClick={() => go('login')} aria-label={c.t + ' — entrar para acessar'}>
    <span className="rc-curso-img">{c.selo && <span className={'pf-selo pf-selo--' + (c.selo === 'Popular' ? 'pop' : 'novo')}>{c.selo}</span>}{c.gratuito !== false && <span className="pf-grat">Gratuito</span>}{c.img ? <img src={c.img} alt=""></img> : <image-slot id={'img-' + c.id} shape="rect" placeholder="Capa do curso" src={c.stock && c.stock.src} credit={c.stock && c.stock.credit} credit-href={c.stock && c.stock.href} style={{ width: '100%', height: '100%' }}></image-slot>}</span>
    <span className="rc-curso-body">
      <span className="rc-curso-kicker">Curso</span>
      <span className="rc-curso-t">{c.t}</span>
      <span className="rc-curso-d">{c.d}</span>
    </span>
    <span className="rc-curso-foot">
      <span>{c.cat}</span>
      <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}><PgIcon name="school-outline" size={16}></PgIcon>Gratuito</span>
    </span>
    <span className="rc-curso-cta"><PgIcon name="lock-outline" size={16}></PgIcon>Entrar para acessar<PgIcon name="arrow-right" size={16}></PgIcon></span>
  </button>)}</div>;
}

function PgTemas({ go }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el || !('IntersectionObserver' in window)) return;
    el.classList.add('rc-reveal');
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { el.classList.add('rc-in'); io.disconnect(); } }), { threshold: 0.12 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return <div ref={ref} className="rc-temas">
    <div className="rc-cards" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,320px),1fr))' }}>{PF_TEMAS.map((t, n) => <PgCard key={t.t} className="rc-card rc-tema" padding={24} style={{ '--i': n }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div className="rc-card-ic rc-tema-ic"><PgIcon name={t.ic} size={24}></PgIcon></div>
        <span className="rc-tema-n rc-num-t">{String(n + 1).padStart(2, '0')}</span>
      </div>
      <h3>{t.t}</h3><p>{t.d}</p>
      <ul className="rc-checks">{t.dicas.map((d, k) => <li key={d} style={{ '--k': k }}><PgIcon name="check-circle-outline" size={16} color="var(--rc-link)"></PgIcon><span>{d}</span></li>)}</ul>
    </PgCard>)}</div>
    <div className="rc-temas-cta">
      <p>Crie o controle do orçamento familiar de forma simples e cuide da sua previdência.</p>
      <button className="rc-btn-green" style={{ padding: '0 24px', flex: 'none' }} onClick={() => { const el = document.getElementById('guia-pdf'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); }}><PgIcon name="file-pdf-box" size={18}></PgIcon>Acessar a plataforma<PgIcon name="arrow-down" size={18}></PgIcon></button>
    </div>
  </div>;
}

const RC_MAT = { titulo: 'Educação financeira para segurados do RPPS', itens: [] };
const RC_MAT_TENANT = { guarujaprev: { titulo: 'Educação financeira para segurados da GuarujáPrev', itens: [{ rotulo: 'Baixar guia de educação financeira', arq: 'assets/guarujaprev-educacao-financeira.pdf', nome: 'GuarujaPrev_Educacao_Financeira.pdf' }] } };
function rcMateriais() {
  const id = window.__rcTenantId || 'rppsconsig'; const draft = new URLSearchParams(location.search).get('previa') === '1';
  let s = null; try { s = (draft && JSON.parse(sessionStorage.getItem('rc-site-' + id + '-rascunho'))) || JSON.parse(localStorage.getItem('rc-site-' + id)); } catch (e) {}
  const pad = RC_MAT_TENANT[id] || RC_MAT; const m = s && s.materiais;
  return m && Array.isArray(m.itens) && m.itens.some(x => x.arq) ? { titulo: m.titulo || pad.titulo, itens: m.itens } : pad;
}
const rcArqTipo = x => /^https:\/\/docs\.google\.com\/spreadsheets\//i.test(x.arq || '') || /\.(xlsx|xls|ods|csv)$/i.test(x.nome || x.arq) || /^data:(application\/vnd|text\/csv)/.test(x.arq) ? 'Planilha' : 'PDF';
function rcBaixarArq(x) {
  if (/^https?:/i.test(x.arq)) { window.open(x.arq, '_blank', 'noopener'); return; }
  if (!/^data:/.test(x.arq)) { if (/\.pdf([?#].*)?$/i.test(x.arq) && window.rcPdfVer) { window.rcPdfVer(x.arq, x.rotulo); return; } const el = document.createElement('a'); el.href = x.arq; el.download = x.nome || ''; document.body.appendChild(el); el.click(); el.remove(); return; }
  const [cab, b64] = x.arq.split(','); const tipo = (cab.match(/^data:([^;]+)/) || [])[1] || 'application/octet-stream';
  const b = atob(b64); const u = new Uint8Array(b.length); for (let i = 0; i < b.length; i++) u[i] = b.charCodeAt(i);
  const url = URL.createObjectURL(new Blob([u], { type: tipo })); const a = document.createElement('a'); a.href = url; a.download = x.nome || (x.rotulo + (rcArqTipo(x) === 'Planilha' ? '.xlsx' : '.pdf')); document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 4000);
}
function RcPaginaPlanejamento({ setPage, go }) {
  return <>
    <RcPageHero pg={{ selo: 'Educação financeira', t: 'Planejamento financeiro', d: 'Organize o orçamento, entenda juros e taxas, evite o superendividamento e use o crédito consignado de forma inteligente.' }}></RcPageHero>
    <PgSec white selo="Conteúdo" titulo="Entenda a importância de cuidar das suas finanças" texto="Material gratuito com conteúdo prático sobre planejamento financeiro para servidores, aposentados e pensionistas.">
      <PgTemas go={go}></PgTemas>
    </PgSec>
    <PgSec selo="Cursos" titulo="Cursos gratuitos" texto="Os cursos ficam na área logada. Entre com seu CPF para assistir às aulas e acompanhar seu progresso.">
      <PgAcademy go={go}></PgAcademy>
    </PgSec>
    <PgSec white id="guia-pdf" selo="Material gratuito" titulo="Guia de educação financeira">
      <PgCard padding={24}>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
          {(() => { const M = rcMateriais(); const its = M.itens.filter(x => x.arq && x.rotulo); const tipos = [...new Set(its.map(x => rcArqTipo(x)))]; return <>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
            <div className="rc-card-ic" style={{ margin: 0 }}><PgIcon name="file-download-outline" size={24}></PgIcon></div>
            <div><div style={{ font: '600 16px/1.3 var(--ipep-font)' }}>{M.titulo}</div><div className="rc-meta">{its.length ? tipos.join(' · ') + ' para download' : 'Material em preparação'}</div></div>
          </div>
          {its.length > 0 && <div className="rc-actions">{its.map((x, i) => <PgButton key={i} variant={i === its.length - 1 ? 'primary' : 'secondary'} icon={rcArqTipo(x) === 'Planilha' ? 'file-excel-outline' : 'download'} onClick={() => rcBaixarArq(x)}>{x.rotulo}</PgButton>)}</div>}
          </>; })()}
        </div>
      </PgCard>
    </PgSec>
  </>;
}

/* ---------- Plataforma ---------- */
const PF_SEG = [
  { ic: 'shield-search', t: 'Antifraude', d: 'Verificações integradas em todos os processos.' },
  { ic: 'lock-outline', t: 'Criptografia', d: 'Tráfego de dados criptografado de ponta a ponta.' },
  { ic: 'ip-network-outline', t: 'Monitoramento de IPs', d: 'Acessos acompanhados em tempo real.' },
  { ic: 'history', t: 'Auditoria', d: 'Entradas, falhas e trocas de RPPS registradas.' },
];
function PfHero() {
  const linhas = [['face-recognition', 'Biometria facial'], ['lock-outline', 'Criptografia de ponta a ponta'], ['ip-network-outline', 'Monitoramento de IPs'], ['history', 'Trilha de auditoria']];
  return <section className="rc-hero pf-hero"><div className="rc-wrap pf-hero-grid">
    <div className="pf-hero-txt">
      <span className="rc-seal">Tecnologia</span>
      <h1 className="rc-h1 pf-h1">Para operar o consignado o RPPS conta com <em>tecnologia de ponta</em> e a melhor infraestrutura em segurança.</h1>
      <p className="rc-lead" style={{ margin: 0 }}>Estudos, estrutura tecnológica, suporte, atendimento e melhoria contínua para oferecer empréstimos com segurança.</p>
      <ul className="pf-chips"><li><PgIcon name="certificate-outline" size={16}></PgIcon>ISO/IEC 27001</li><li><PgIcon name="certificate-outline" size={16}></PgIcon>ISO/IEC 27701</li><li><PgIcon name="scale-balance" size={16}></PgIcon>LGPD</li></ul>
    </div>
    <div className="pf-panel" aria-label="Camadas de proteção da plataforma">
      <div className="pf-panel-hd"><PgIcon name="shield-check-outline" size={22}></PgIcon><b>Camadas de proteção</b></div>
      <ul className="pf-panel-ls">{linhas.map((l, i) => <li key={l[1]} style={{ '--d': 200 + i * 120 + 'ms' }}><span className="pf-panel-ic"><PgIcon name={l[0]} size={18}></PgIcon></span><span>{l[1]}</span><span className="pf-on"><i></i>Ativo</span></li>)}</ul>
      <div className="pf-panel-ft"><img src="assets/selos-iso-27001-27701.png" alt="Certificações ISO/IEC 27001 e ISO/IEC 27701"></img><span>Segurança da informação e privacidade certificadas</span></div>
    </div>
  </div></section>;
}
function PfSeguranca() {
  return <section className="rc-sec pf-seg"><div className="rc-wrap">
    <div className="pf-seg-head">
      <div><span className="rc-seal">Segurança</span><h2 className="rc-h2">Segurança por padrão</h2></div>
      <p>Proteção aplicada em cada etapa: do acesso do segurado à aprovação do contrato.</p>
    </div>
    <div className="pf-seg-grid">{PF_SEG.map((c, i) => <article key={c.t} className="pf-seg-card">
      <div className="pf-seg-top"><span className="pf-seg-ic"><PgIcon name={c.ic} size={24}></PgIcon></span><span className="pf-seg-n rc-num-t">{String(i + 1).padStart(2, '0')}</span></div>
      <h3>{c.t}</h3><p>{c.d}</p>
    </article>)}</div>
  </div></section>;
}
function RcPaginaPlataforma({ setPage, go }) {
  const eq = rcEquipe();
  return <>
    <PfHero></PfHero>
    <PgSec white selo="Backoffice" titulo="O que a plataforma faz" texto="Desenvolvida para controlar margem, elegibilidade e riscos na realidade do RPPS, parametrizada conforme os estudos atuariais e a Portaria MTP 1.467/2022.">
      <PgCards cols={300} items={[
        { ic: 'face-recognition', t: 'Biometria Facial', d: 'Ferramenta altamente eficaz para bloquear fraudes de identidade.' },
        { ic: 'format-list-numbered', t: 'Simulação online', d: 'Ranking ordenado para comparação pela taxa de juros ou pelo custo efetivo total.' },
        { ic: 'umbrella-outline', t: 'Integração com seguradoras', d: 'Fundos ou seguro para cobertura do risco de crédito, conforme a Portaria.' },
        { ic: 'tune-variant', t: 'Controle da margem', d: 'Elegibilidade verificada automaticamente, com pré-aprovações e limites de parcelas e valores.' },
        { ic: 'draw-pen', t: 'Assinatura digital', d: 'Aprovações acompanhadas pela consignante e pela consignatária, com saldo devedor até a liquidação.' },
        { ic: 'bell-alert-outline', t: 'Controle da inadimplência', d: 'Avisos automáticos de parcelas em atraso e ofertas de refinanciamento.' },
      ]}></PgCards>
    </PgSec>
    <PfSeguranca></PfSeguranca>
    <PgSec white selo="Acesso" titulo="Portais e aplicativo">
      <div className="rc-short" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,300px),1fr))' }}>
        {[['Portal do Segurado', 'Simule, contrate e acompanhe parcelas', 'account-outline'], ['Aplicativo', 'Seu crédito na palma da mão', 'cellphone'], ['Portal do Gestor', 'Carteira, margem, atendimento e cobrança', 'view-dashboard-outline']].map(x =>
          <button key={x[0]} onClick={() => x[0] === 'Aplicativo' ? setPage('contato') : go('login')}><span style={{ flex: 1 }}><b>{x[0]}</b><small>{x[1]}</small></span><PgIcon name={x[2]} size={24} color="var(--rc-accent-dark)"></PgIcon></button>)}
      </div>
    </PgSec>
    {eq.membros.length > 0 && <PgSec selo={eq.selo} titulo={eq.titulo}>
      <div className="rc-cards" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(min(100%,300px),1fr))' }}>{eq.membros.map(p => <PgCard key={p.id} padding={24}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 16 }}>
          {p.src ? <span style={{ width: 64, height: 64, flex: 'none', borderRadius: '50%', overflow: 'hidden', display: 'block' }}><img src={p.src} alt={'Foto de ' + p.nome} style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover', objectPosition: (p.fx ?? 50) + '% ' + (p.fy ?? 20) + '%', transform: 'scale(' + (p.fz ?? 1) + ')', transformOrigin: (p.fx ?? 50) + '% ' + (p.fy ?? 20) + '%' }}></img></span> : <span className="rc-eq-ini" aria-hidden="true">{p.nome.split(' ').filter(Boolean).map(x => x[0]).slice(0, 2).join('').toUpperCase()}</span>}
          <div><div style={{ font: '600 16px/1.3 var(--ipep-font)' }}>{p.nome}</div><div className="rc-meta">{p.cargo}</div></div>
        </div>
        <p className="rc-p" style={{ margin: 0, fontSize: 14 }}>{p.txt}</p>
      </PgCard>)}</div>
    </PgSec>}
    <PgCta setPage={setPage} titulo="Fale com a equipe de suporte" texto="Tire suas dúvidas sobre a plataforma RPPSConsig." acao="Equipe de suporte" seta={false}></PgCta>
  </>;
}

function RcSimSegurado() {
  return <div className="rc-sim" id="simulador">
    <div><h2 className="rc-h3" style={{ margin: '0 0 4px', font: '700 20px/1.3 var(--ipep-font)' }}>Simule seu empréstimo</h2><p className="rc-meta" style={{ margin: 0 }}>Sem cadastro. Veja a parcela ou quanto economiza com a portabilidade.</p></div>
    <PgSimServidor></PgSimServidor>
  </div>;
}
Object.assign(window, { rcCredito, RC_CRED_PADRAO, RcSimSegurado, RcPaginaRPPS, RcPaginaPrefeituras, RcPaginaServidores, RcPaginaPlanejamento, RcPaginaPlataforma });