function Calculator() {
  const [units, setUnits] = React.useState(36);
  const [current, setCurrent] = React.useState(1100);

  const condominize = 450;
  const monthlySavings = Math.max(0, current - condominize);
  const annual = monthlySavings * 12;

  const fmt = (n) => n.toLocaleString("pt-BR", { style: "currency", currency: "BRL", maximumFractionDigits: 0 });

  return (
    <section className="section" id="calc">
      <div className="container">
        <div className="calc-card">
          <div className="calc-form">
            <div className="h-eyebrow on-dark" style={{ marginBottom: 20 }}>
              Simulação de proposta
            </div>
            <h2>
              Quanto seu condomínio pode <em>economizar</em>?
            </h2>
            <p className="sub">
              Ajuste os valores conforme a realidade do seu condomínio e veja uma estimativa.
              A proposta final é sempre personalizada — esta calculadora serve apenas como referência inicial.
            </p>

            <label className="calc-label">Quantas unidades tem o condomínio</label>
            <div className="calc-slider-row">
              <div className="calc-slider-val">{units} <small style={{ fontFamily: "var(--font-sans)", fontSize: 13, opacity: 0.6 }}>unid.</small></div>
              <input className="calc-slider" type="range" min="8" max="200" step="2"
                value={units} onChange={(e) => setUnits(+e.target.value)} />
            </div>

            <label className="calc-label">Valor mensal da administradora atual</label>
            <div className="calc-slider-row">
              <div className="calc-slider-val">{fmt(current)}</div>
              <input className="calc-slider" type="range" min="500" max="2500" step="50"
                value={current} onChange={(e) => setCurrent(+e.target.value)} />
            </div>
          </div>

          <div className="calc-result">
            <div className="h-eyebrow on-dark" style={{ marginBottom: 18 }}>
              Estimativa
            </div>
            <div className="calc-row"><span className="k">Administradora atual</span><span className="v">{fmt(current)}<small style={{ fontFamily:"var(--font-sans)", fontSize:12, opacity:0.6, marginLeft: 4 }}>/mês</small></span></div>
            <div className="calc-row"><span className="k">Plano Profissional Condominize</span><span className="v">{fmt(condominize)}<small style={{ fontFamily:"var(--font-sans)", fontSize:12, opacity:0.6, marginLeft: 4 }}>/mês</small></span></div>
            <div className="calc-row"><span className="k">Diferença mensal</span><span className="v" style={{ color: "var(--gold-500)" }}>{monthlySavings > 0 ? "−" : ""}{fmt(monthlySavings)}</span></div>
            <div className="calc-savings">
              <div>
                <div className="k">Estimativa em 12 meses</div>
                <div style={{ fontSize: 11.5, color: "rgba(10, 30, 61, 0.7)", marginTop: 4 }}>
                  Valor que pode ser revertido em manutenção e reservas
                </div>
              </div>
              <div className="v">{fmt(annual)}</div>
            </div>

            <a className="btn btn-ghost-light" style={{ marginTop: 26, width: "100%", justifyContent: "center" }}
              href="https://wa.me/5522992072619?text=Ol%C3%A1%2C%20tenho%20interesse%20no%20Condominize.%20Gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank">
              Pedir uma proposta personalizada
              <Icon name="arrow" size={16} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Calculator = Calculator;