// SimuladorScreen — "Quanto o meu imóvel rende por temporada?" // ──────────────────────────────────────────────────────────────────────────── // É a principal ferramenta de captação de proprietários do site. Em vez de // pedir o contato antes de entregar qualquer coisa, entrega primeiro a conta — // e só depois oferece a avaliação presencial. Quem chega até o resultado já é // um lead qualificado. // // Postura dos números: o simulador desconta a comissão da SBL E os custos que // ficam com o proprietário na temporada (condomínio, IPTU, água, luz, internet), // que no aluguel anual normalmente são do inquilino. Sem esse desconto a // comparação fica inflada a favor da temporada — e o proprietário descobre isso // depois de assinar, que é o pior momento possível. // // Todos os parâmetros do cálculo estão em seo/parametros-renda.js. // ──────────────────────────────────────────────────────────────────────────── const _SIM_TIPOS = ['Apartamento', 'Flat', 'Studio', 'Casa', 'Cobertura']; function moeda(v) { return 'R$ ' + Math.round(v).toLocaleString('pt-BR'); } function moedaCurta(v) { if (Math.abs(v) >= 1000) return 'R$ ' + (v / 1000).toFixed(v >= 10000 ? 0 : 1).replace('.', ',') + ' mil'; return moeda(v); } // ── Cálculo ─────────────────────────────────────────────────────────────── function calcularRenda(entrada) { const P = window.SBL_PARAMS_RENDA; const b = P.bairros[entrada.bairro]; if (!b) return null; const mTipo = P.tipos[entrada.tipo] || 1; const mQuartos = P.quartos[String(entrada.quartos)] || 1; const escolhidos = P.diferenciais.filter((d) => entrada.diferenciais.indexOf(d.id) !== -1); const bonusDiaria = escolhidos.reduce((a, d) => a + d.diaria, 0); const bonusOcup = escolhidos.reduce((a, d) => a + d.ocupacao, 0); const diaria = b.diariaBase * mTipo * mQuartos * (1 + bonusDiaria); const ocupacao = Math.min(P.ocupacaoMaxima, b.ocupacaoBase + bonusOcup); const noites = Math.round(365 * ocupacao); const brutoAnual = diaria * noites; const comissao = brutoAnual * P.comissaoSBL; const custosAnuais = entrada.custoMensal * 12; const liquidoTemporada = brutoAnual - comissao - custosAnuais; // Comparação: no aluguel anual o inquilino costuma arcar com condomínio, // IPTU e contas, então esses custos não entram aqui. const aluguelMensal = b.aluguelBase * mTipo * mQuartos; const liquidoAnual = aluguelMensal * P.mesesEfetivosAnual * (1 - P.taxaAdminAnual); const f = P.margemFaixa; return { diaria, diariaMin: diaria * (1 - f), diariaMax: diaria * (1 + f), ocupacao, noites, brutoAnual, comissao, custosAnuais, liquidoTemporada, liquidoTemporadaMin: liquidoTemporada * (1 - f), liquidoTemporadaMax: liquidoTemporada * (1 + f), aluguelMensal, liquidoAnual, diferenca: liquidoTemporada - liquidoAnual, vantagem: liquidoAnual > 0 ? liquidoTemporada / liquidoAnual : 0, }; } // ── Gráfico de sazonalidade ─────────────────────────────────────────────── // Barras verticais, uma série só: a altura já codifica a magnitude, e a cor // distingue apenas alta temporada do restante — rampa de uma matiz, dois // passos. Rótulo direto apenas no mês de pico; os demais valores saem no // tooltip e na tabela, para não poluir doze barras com doze números. function GraficoSazonalidade({ receitaAnual }) { const P = window.SBL_PARAMS_RENDA; const { isMobile } = window.useResponsive(); const [ativo, setAtivo] = React.useState(-1); const [tabela, setTabela] = React.useState(false); const meses = P.sazonalidade.map((m) => ({ ...m, valor: receitaAnual * m.peso / 12, })); const maximo = Math.max.apply(null, meses.map((m) => m.valor)); const iPico = meses.reduce((best, m, i) => (m.valor > meses[best].valor ? i : best), 0); const alturaGrafico = isMobile ? 132 : 168; return (

Como essa receita se distribui no ano

Receita bruta estimada por mês, segundo a sazonalidade de João Pessoa.

{/* Legenda — a identidade nunca depende só da cor: o texto nomeia cada classe. */}
{[['Alta temporada', P.coresGrafico.alta], ['Demais meses', P.coresGrafico.normal]].map(([rotulo, cor]) => ( {rotulo} ))}
{tabela ? ( {meses.map((m) => ( ))}
Mês Receita bruta estimada
{m.mes}{m.alta ? ' · alta' : ''} {moeda(m.valor)}
) : (
{meses.map((m, i) => { const h = Math.max(3, (m.valor / maximo) * (alturaGrafico - 22)); const cor = m.alta ? P.coresGrafico.alta : P.coresGrafico.normal; const on = ativo === i; return (
setAtivo(i)} onMouseLeave={() => setAtivo(-1)} onFocus={() => setAtivo(i)} onBlur={() => setAtivo(-1)} tabIndex={0} role="img" aria-label={`${m.mes}: ${moeda(m.valor)}`} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'center', height: '100%', cursor: 'default', position: 'relative', outline: 'none' }} > {/* Rótulo direto só no pico — o resto sai no hover e na tabela. */} {i === iPico && ( {moedaCurta(m.valor)} )}
{on && (
{m.mes} · {moeda(m.valor)}
)}
); })}
{/* Linha de base discreta + rótulos dos meses em tinta neutra. */}
{meses.map((m) => (
{m.mes}
))}
)}
); } // ── Controles ───────────────────────────────────────────────────────────── function CampoRadio({ label, valor, opcoes, onChange }) { return (
{label}
{opcoes.map((o) => { const on = String(o.valor) === String(valor); return ( ); })}
); } function SimuladorScreen({ onNav, seo }) { const { Button } = window.SBLImVeisDesignSystem_08a506; const { isMobile, isTablet } = window.useResponsive(); const P = window.SBL_PARAMS_RENDA; const bairros = (window.SBLRotas && window.SBLRotas.bairros) || []; const [bairro, setBairro] = React.useState('manaira'); const [tipo, setTipo] = React.useState('Apartamento'); const [quartos, setQuartos] = React.useState('2'); const [difs, setDifs] = React.useState(['garagem']); const [custoMensal, setCustoMensal] = React.useState(P.bairros['manaira'].custoMensal); const [custoEditado, setCustoEditado] = React.useState(false); // Enquanto o proprietário não mexer no campo, o custo acompanha o bairro // escolhido; a partir do primeiro ajuste, respeitamos o valor dele. React.useEffect(() => { if (!custoEditado && P.bairros[bairro]) setCustoMensal(P.bairros[bairro].custoMensal); }, [bairro, custoEditado]); const r = calcularRenda({ bairro, tipo, quartos, diferenciais: difs, custoMensal: Number(custoMensal) || 0 }); const nomeBairro = (bairros.find((b) => b.slug === bairro) || {}).nome || ''; function alternarDif(id) { setDifs((atual) => atual.indexOf(id) !== -1 ? atual.filter((x) => x !== id) : atual.concat([id])); } const resumoParaWhatsapp = r ? `Olá! Simulei meu imóvel no site da SBL: ${tipo} de ${quartos} quarto(s) em ${nomeBairro}. ` + `A estimativa foi de ${moeda(r.diaria)} por diária e cerca de ${moeda(r.liquidoTemporada)} líquidos por ano. ` + `Gostaria de uma avaliação real.` : ''; return (
{/* HERO */}
Para proprietários · João Pessoa

{seo ? seo.h1 : 'Quanto o seu imóvel pode render por temporada em João Pessoa'}

{seo ? seo.intro : 'Informe o bairro, o tipo e o tamanho do imóvel e veja uma estimativa da diária, da ocupação e da receita anual.'}

{/* SIMULADOR */}
{/* Entradas */}

Sobre o seu imóvel

Nenhum dado seu é solicitado para ver o resultado.

Bairro
({ valor: t, label: t }))} />
Diferenciais
{P.diferenciais.map((d) => { const on = difs.indexOf(d.id) !== -1; return ( ); })}
Custo mensal do imóvel

Condomínio, IPTU, água, luz e internet. Na temporada esse custo é seu; no aluguel anual costuma ser do inquilino.

R$ { setCustoEditado(true); setCustoMensal(e.target.value); }} style={{ flex: 1, height: 46, padding: '0 14px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', fontFamily: 'var(--font-body)', fontSize: 14.5, color: 'var(--text-strong)' }} /> / mês
{/* Resultado */}
{r && (
Estimativa para {nomeBairro}
{moeda(r.diaria)}
diária média
{moeda(r.diariaMin)} a {moeda(r.diariaMax)}
{Math.round(r.ocupacao * 100)}%
ocupação anual
cerca de {r.noites} noites
{moedaCurta(r.liquidoTemporada)}
líquido por ano
{moedaCurta(r.liquidoTemporadaMin)} a {moedaCurta(r.liquidoTemporadaMax)}
{/* A conta aberta. É o que separa uma estimativa de uma promessa. */}

A conta, aberta

{[ ['Receita bruta das diárias', moeda(r.brutoAnual), false], ['Comissão SBL (20%)', '− ' + moeda(r.comissao), false], ['Condomínio, IPTU e contas', '− ' + moeda(r.custosAnuais), false], ['Resultado líquido no ano', moeda(r.liquidoTemporada), true], ].map(([rotulo, valor, forte]) => (
{rotulo} {valor}
))}
No aluguel anual, o mesmo imóvel renderia cerca de {moeda(r.aluguelMensal)}/mês, ou {moedaCurta(r.liquidoAnual)} líquidos no ano — já descontadas a taxa de administração e uma vacância média entre contratos.
= 0 ? 'var(--color-success)' : 'var(--color-warning)', marginTop: 10 }}> {r.diferenca >= 0 ? `A temporada rende cerca de ${moedaCurta(r.diferenca)} a mais por ano neste cenário.` : `Neste cenário, o aluguel anual rende cerca de ${moedaCurta(-r.diferenca)} a mais — e dá menos trabalho.`}

Isto é uma estimativa, não uma promessa de receita. Os valores partem de médias de mercado em João Pessoa (atualizadas em {P.atualizadoEm}) e não consideram o estado de conservação, a mobília, a qualidade das fotos, a concorrência dentro do seu edifício nem a política de preços adotada. A avaliação presencial é gratuita e chega a um número com pé no chão.

)}
{/* CAPTAÇÃO */}
Próximo passo

Quer o número real do seu imóvel?

Agendamos uma visita sem custo, avaliamos o imóvel de perto e apresentamos uma projeção de diária e ocupação baseada no desempenho real da nossa carteira no seu bairro — incluindo o que precisa ser ajustado antes de anunciar.

    {['Avaliação presencial gratuita', 'Sem taxa de cadastro ou mensalidade', 'Comissão de 20% só sobre o que você receber'].map((t) => (
  • {t}
    • ))}
{/* CONTEÚDO + FAQ */} {seo && (
{(seo.secoes || []).map((s) => (

{s.h2}

{(s.p || []).map((p, i) => (

{p}

))}
))} {seo.faq && seo.faq.length > 0 && (

Perguntas frequentes

)}
)}
); } window.SimuladorScreen = SimuladorScreen; window.calcularRenda = calcularRenda;