/* Calculadora da Real — componente principal
   Mostra custo real da dívida vs cenário Lei 14.181.
   Stack: React 18 via CDN + Babel Standalone (compila JSX inline).

   Taxas BACEN (referência: SGS, jan/2026):
   - Cartão rotativo: 14% a.m. (média histórica BACEN, varia 10-18%)
   - Cheque especial: 7,5% a.m. (limite regulatório de 8% após Res. 4.765/2020)
   - Empréstimo pessoal: 5% a.m. (média BACEN bancos comerciais)
   - Consignado INSS: 1,76% a.m. (teto regulatório CMN)
   - Parcelamento "sem juros" varejo: 3% a.m. embutido no preço (estimativa)

   Lei 14.181: planos homologados costumam suspender juros pós-vencimento.
   Total pago tende a ser 100-130% do principal (mining DJEN, 20k processos).

   IMPORTANTE: cálculos são estimativas educativas, não compromissos.
   Disclaimer explícito na UI.
*/

const { useState, useMemo } = React;

const TIPOS = [
  {
    id: "rotativo",
    label: "Cartão (rotativo)",
    taxaMensal: 0.14,
    descricao: "Quando você paga só o mínimo da fatura",
    fonteBACEN: "BACEN SGS 20.741",
    avisoEspecifico:
      "Após 1 mês no rotativo, por lei (Res. BACEN 4.549/2017), o banco é obrigado a oferecer parcelamento da fatura — taxa um pouco menor (~10% a.m.), mas ainda cara. Esta simulação mostra o efeito de seguir pagando mínimo.",
  },
  {
    id: "cheque-especial",
    label: "Cheque especial",
    taxaMensal: 0.075,
    descricao: "Limite negativo da conta corrente",
    fonteBACEN: "BACEN SGS 20.745 — limite Res. 4.765/2020",
    avisoEspecifico:
      "Cheque especial não tem 'parcela'. Os juros correm todo mês sobre o saldo negativo. Banco debita automaticamente quando entra dinheiro na conta. A pergunta abaixo é: em quantos meses você consegue zerar?",
  },
  {
    id: "emprestimo",
    label: "Empréstimo pessoal",
    taxaMensal: 0.05,
    descricao: "Crédito pessoal sem garantia",
    fonteBACEN: "BACEN SGS 20.715",
    avisoEspecifico: null,
  },
  {
    id: "consignado",
    label: "Consignado INSS",
    taxaMensal: 0.0176,
    descricao: "Desconto direto na aposentadoria",
    fonteBACEN: "Teto CMN Res. 5.121/2024",
    avisoEspecifico:
      "Consignado tem juros baixos por lei. Comparativo Lei 14.181 só ganha quando você tem MAIS dívidas além dessa.",
  },
  {
    id: "parcelado",
    label: 'Parcelado "sem juros"',
    taxaMensal: 0.03,
    descricao: "Lojas, financeiras, varejo (juros embutidos)",
    fonteBACEN: "Estimativa de mercado",
    avisoEspecifico:
      "'Sem juros' é mito quase sempre. A loja embute ~3% a.m. no preço — você só não vê. Comparado ao preço à vista, esses 'juros disfarçados' aparecem na conta abaixo.",
  },
];

// Lei 14.181 — fator médio observado em planos homologados (mining DJEN)
const FATOR_LEI_14181 = 1.15; // total pago = 115% do principal (média)
const PARCELAS_LEI_14181 = 24; // duração média de plano

// Equivalências contextuais (aprox. CRBL/IBGE 2026)
const VALOR_CESTA_BASICA = 760; // SP/RJ médio
const VALOR_ALUGUEL_MEDIO = 1400; // Brasil interior médio
const SALARIO_MINIMO = 1518;

function formatBRL(n) {
  return n.toLocaleString("pt-BR", {
    style: "currency",
    currency: "BRL",
    minimumFractionDigits: 2,
  });
}

function formatBRLNoSym(n) {
  return n.toLocaleString("pt-BR", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
}

/* Calcula juros compostos com tabela price (parcelas iguais).
   Se pagaMinimo=true, simula rotativo: paga 15% do saldo todo mês,
   resto rola com juros. Calcula até 24 meses ou quando saldo <= 1. */
function calcularCusto({ tipo, valor, parcelas, pagaMinimo }) {
  const taxa = tipo.taxaMensal;

  if (pagaMinimo) {
    // Simulação de rotativo: paga 15% do saldo (mínimo legal típico)
    let saldo = valor;
    let totalPago = 0;
    let meses = 0;
    const limiteMeses = 24;

    while (saldo > 1 && meses < limiteMeses) {
      saldo = saldo * (1 + taxa);
      const parcela = saldo * 0.15;
      totalPago += parcela;
      saldo -= parcela;
      meses++;
    }
    // Se ainda sobrou saldo após 24 meses, soma ao total (visualização honesta)
    totalPago += saldo;

    return {
      total: totalPago,
      juros: totalPago - valor,
      meses,
      parcelaMedia: totalPago / meses,
    };
  }

  // Tabela price padrão
  const n = parcelas;
  if (n <= 0 || taxa === 0) {
    return { total: valor, juros: 0, meses: n, parcelaMedia: valor / n };
  }
  const fator = (taxa * Math.pow(1 + taxa, n)) / (Math.pow(1 + taxa, n) - 1);
  const parcela = valor * fator;
  const total = parcela * n;

  return {
    total,
    juros: total - valor,
    meses: n,
    parcelaMedia: parcela,
  };
}

function calcularLei14181({ valor }) {
  const total = valor * FATOR_LEI_14181;
  return {
    total,
    juros: total - valor,
    meses: PARCELAS_LEI_14181,
    parcelaMedia: total / PARCELAS_LEI_14181,
  };
}

function gerarEquivalencia(totalReais) {
  const cestas = Math.round(totalReais / VALOR_CESTA_BASICA);
  const alugueis = Math.round(totalReais / VALOR_ALUGUEL_MEDIO);
  const salarios = (totalReais / SALARIO_MINIMO).toFixed(1).replace(".", ",");
  return { cestas, alugueis, salarios };
}

function App() {
  const [tipoId, setTipoId] = useState("rotativo");
  const [valorStr, setValorStr] = useState("");
  const [parcelasStr, setParcelasStr] = useState("12");
  const [pagaMinimo, setPagaMinimo] = useState(true);

  const tipo = TIPOS.find((t) => t.id === tipoId);
  const valor = parseFloat(
    valorStr.replace(/\./g, "").replace(",", ".")
  ) || 0;
  const parcelas = parseInt(parcelasStr, 10) || 0;

  // Pra rotativo, default é "paga mínimo". Pra outros, padrão é parcelado.
  const ehRotativo = tipoId === "rotativo";
  const usarMinimo = ehRotativo && pagaMinimo;

  const resultado = useMemo(() => {
    if (valor <= 0) return null;
    if (!usarMinimo && parcelas <= 0) return null;

    const ruim = calcularCusto({
      tipo,
      valor,
      parcelas,
      pagaMinimo: usarMinimo,
    });
    const bom = calcularLei14181({ valor });
    const equiv = gerarEquivalencia(ruim.total);

    return { ruim, bom, equiv };
  }, [tipoId, valor, parcelas, usarMinimo]);

  const handleValorChange = (e) => {
    // Permite só números, ponto, vírgula
    const clean = e.target.value.replace(/[^0-9,]/g, "");
    setValorStr(clean);
  };

  return (
    <div>
      <div className="topstrip">
        <span className="topstrip-icon">§</span>
        <strong>Pela Lei 14.181/2021</strong> · Lei do Superendividamento · com advogado OAB
      </div>
      <nav className="head">
        <a href="/">← renegocia.ai</a>
        <span className="nav-right">
          <a href="/blog">Blog</a>
        </span>
      </nav>

      <main className="calc-wrap">
        <div className="calc-eyebrow">Calculadora da Real</div>
        <h1>
          Quanto você vai pagar <em>de verdade?</em>
        </h1>
        <p className="calc-sub">
          Calcule o custo real da sua dívida em 30 segundos. Veja quanto vai pagar
          de juros, e compare com o que pagaria se fosse pela Lei do Superendividamento.
        </p>

        <div className="calc-card">
          <label className="calc-q">
            Que tipo de dívida você tem?
            <span className="helper">{tipo.descricao}</span>
          </label>
          <div className="calc-types">
            {TIPOS.map((t) => (
              <button
                key={t.id}
                type="button"
                className={"calc-type-btn" + (t.id === tipoId ? " active" : "")}
                onClick={() => setTipoId(t.id)}
              >
                {t.label}
              </button>
            ))}
          </div>
        </div>

        <div className="calc-card">
          <label className="calc-q" htmlFor="valor">
            Quanto você deve hoje?
            <span className="helper">Saldo atual da dívida (R$)</span>
          </label>
          <input
            id="valor"
            type="text"
            inputMode="decimal"
            className="calc-input-money"
            placeholder="R$ 5.000,00"
            value={valorStr}
            onChange={handleValorChange}
          />
        </div>

        {ehRotativo ? (
          <div className="calc-card">
            <label className="calc-q">Como você está pagando?</label>
            <label className="calc-toggle">
              <input
                type="checkbox"
                checked={pagaMinimo}
                onChange={(e) => setPagaMinimo(e.target.checked)}
              />
              <span className="calc-toggle-label">
                Pago só o mínimo da fatura todo mês
              </span>
            </label>
            {!pagaMinimo && (
              <div className="calc-parcelas" style={{ marginTop: 16 }}>
                <input
                  type="number"
                  min="1"
                  max="60"
                  value={parcelasStr}
                  onChange={(e) => setParcelasStr(e.target.value)}
                />
                <span className="calc-parcelas-label">parcelas no cartão</span>
              </div>
            )}
            {tipo.avisoEspecifico && (
              <p
                style={{
                  fontSize: 13,
                  color: "var(--ink-3)",
                  marginTop: 14,
                  lineHeight: 1.5,
                  background: "var(--bg-2)",
                  padding: "12px 14px",
                  borderRadius: 8,
                  borderLeft: "3px solid var(--gold)",
                }}
              >
                {tipo.avisoEspecifico}
              </p>
            )}
          </div>
        ) : (
          <div className="calc-card">
            <label className="calc-q" htmlFor="parcelas">
              {tipoId === "cheque-especial"
                ? "Em quantos meses você consegue zerar?"
                : "Em quantas parcelas?"}
              <span className="helper">
                {tipoId === "cheque-especial"
                  ? "Você decide. Quanto mais meses, mais juros acumulam."
                  : "Quantas faltam pra terminar"}
              </span>
            </label>
            <div className="calc-parcelas">
              <input
                id="parcelas"
                type="number"
                min="1"
                max="120"
                value={parcelasStr}
                onChange={(e) => setParcelasStr(e.target.value)}
              />
              <span className="calc-parcelas-label">
                {tipoId === "cheque-especial" ? "meses" : "parcelas mensais"}
              </span>
            </div>
            {tipo.avisoEspecifico && (
              <p
                style={{
                  fontSize: 13,
                  color: "var(--ink-3)",
                  marginTop: 14,
                  lineHeight: 1.5,
                  background: "var(--bg-2)",
                  padding: "12px 14px",
                  borderRadius: 8,
                  borderLeft: "3px solid var(--gold)",
                }}
              >
                {tipo.avisoEspecifico}
              </p>
            )}
          </div>
        )}

        {resultado && (
          <>
            <div className="calc-result-bad">
              <div className="calc-result-bad-title">
                Do jeito que está hoje, você vai pagar:
              </div>
              <div className="total">{formatBRL(resultado.ruim.total)}</div>
              <div className="breakdown">
                Disso, <strong>{formatBRL(resultado.ruim.juros)} são juros</strong>{" "}
                — {((resultado.ruim.juros / valor) * 100).toFixed(0)}% sobre o
                que você deve hoje.
                {usarMinimo &&
                  ` Em ${resultado.ruim.meses} meses pagando só o mínimo.`}
                {!usarMinimo && ` Parcela média: ${formatBRL(resultado.ruim.parcelaMedia)}/mês.`}
              </div>
            </div>

            <div className="calc-equiv">
              <div className="calc-equiv-title">Pra você ter ideia:</div>
              {formatBRL(resultado.ruim.total)} dá pra pagar{" "}
              <strong>{resultado.equiv.cestas} cestas básicas</strong> (família de 4),
              ou <strong>{resultado.equiv.alugueis} aluguéis</strong> de apartamento
              médio no interior, ou <strong>{resultado.equiv.salarios} salários
              mínimos</strong> inteiros.
            </div>

            <div className="calc-result-good">
              <div className="calc-result-good-title">
                E se fosse pela Lei 14.181?
              </div>
              <div className="total">{formatBRL(resultado.bom.total)}</div>
              {resultado.ruim.total > resultado.bom.total ? (
                <div className="breakdown">
                  Em {resultado.bom.meses} parcelas de aproximadamente{" "}
                  <strong>{formatBRL(resultado.bom.parcelaMedia)}/mês</strong>, com o juiz
                  suspendendo juros pós-vencimento e fixando parcela que cabe na sua renda.
                  <div className="economia">
                    Economia estimada: {formatBRL(resultado.ruim.total - resultado.bom.total)}
                  </div>
                </div>
              ) : (
                <div className="breakdown">
                  Em {resultado.bom.meses} parcelas de aproximadamente{" "}
                  <strong>{formatBRL(resultado.bom.parcelaMedia)}/mês</strong>.{" "}
                  <strong>Pra essa dívida sozinha, a Lei 14.181 não é mais barata</strong>{" "}
                  — esse tipo já tem juros baixos. Mas a Lei 14.181 funciona quando você{" "}
                  <strong>junta TODAS suas dívidas</strong> num plano único. Se você tem mais
                  dívidas além dessa, o impacto real aparece no quadro completo.
                </div>
              )}
            </div>

            <div>
              <a className="calc-cta" href="/#quiz">
                Ver se meu caso cabe na Lei 14.181 →
              </a>
              <a className="calc-cta-secondary" href="/blog">
                Ler mais antes
              </a>
            </div>
          </>
        )}

        <div className="calc-disclaimer">
          <strong>Como a gente calcula?</strong> Taxas de juros são médias do{" "}
          <a
            href="https://www.bcb.gov.br/estatisticas/sgs"
            target="_blank"
            rel="noopener"
          >
            Banco Central
          </a>{" "}
          (séries SGS — atualizado em jan/2026). Cartão rotativo: 14% ao mês. Cheque
          especial: 7,5% (limite Res. 4.765/2020). Empréstimo pessoal: 5%. Consignado
          INSS: 1,76% (teto CMN). Estimativa Lei 14.181 baseada em mining próprio de{" "}
          <strong>20.022 processos</strong> homologados (DJEN/CNJ). Cálculos são{" "}
          <strong>educativos</strong> — seu caso real depende de análise.
        </div>
      </main>

      <footer>
        Renegocia.ai · Pela lei, não por promessa de banco · <a href="/">renegocia.ai</a>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);