/* Finance Family — interactive borrowing-power teaser */
(function () {
  const fmt = (n) => "$" + Math.round(n).toLocaleString("en-AU");

  function CalcTeaser() {
    const { Button } = window.FinanceFamilyDesignSystem_66efc3;
    const Icon = window.Icon;
    const [income, setIncome] = React.useState(130000);
    const [deposit, setDeposit] = React.useState(80000);
    const [deps, setDeps] = React.useState(0);

    // Indicative only — simple serviceability heuristic
    const factor = 5.4 - deps * 0.35;
    const borrow = Math.max(0, income * factor - deps * 12000);
    const budget = borrow + deposit;
    const repay = (borrow * (0.0594 / 12)) / (1 - Math.pow(1 + 0.0594 / 12, -360));

    const Slider = ({ label, value, set, min, max, step, format }) => (
      <div>
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600, color: "var(--text-strong)" }}>{label}</span>
          <span style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "var(--brand-primary)" }}>{format(value)}</span>
        </div>
        <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => set(Number(e.target.value))} className="ff-range" />
      </div>
    );

    return (
      <section id="calculator" className="section bg-dark" style={{ position: "relative", overflow: "hidden" }}>
        <div className="container">
          <div className="calc-teaser-grid">
            <div className="reveal">
              <window.Eyebrow style={{ color: "var(--mint-100)" }}>Try it now</window.Eyebrow>
              <h2 className="ff-h1" style={{ color: "#fff", margin: "14px 0 16px" }}>See what you could borrow — in seconds.</h2>
              <p className="ff-lead" style={{ color: "rgba(255,255,255,0.8)", marginBottom: 26, maxWidth: 440 }}>
                Drag the sliders for a ballpark. When you're ready, we'll turn this into a real, lender-checked number — free.
              </p>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {["No credit check to get started", "A real broker reviews your numbers", "Honest advice, zero pressure"].map((t) => (
                  <li key={t} style={{ display: "flex", alignItems: "center", gap: 12, fontFamily: "var(--font-body)", fontSize: 15.5, color: "rgba(255,255,255,0.85)" }}>
                    <Icon name="checkCircle" size={20} color="var(--mint-100)" /> {t}
                  </li>
                ))}
              </ul>
            </div>

            <div className="reveal" data-delay="1" style={{ background: "#fff", borderRadius: "var(--radius-xl)", padding: "clamp(24px,3vw,36px)", boxShadow: "var(--shadow-xl)" }}>
              <div className="stack" style={{ gap: 22 }}>
                <Slider label="Household income (per year)" value={income} set={setIncome} min={50000} max={400000} step={5000} format={fmt} />
                <Slider label="Deposit saved" value={deposit} set={setDeposit} min={0} max={400000} step={5000} format={fmt} />
                <Slider label="Dependants" value={deps} set={setDeps} min={0} max={5} step={1} format={(v) => String(v)} />
              </div>
              <div style={{ marginTop: 26, padding: 22, borderRadius: "var(--radius-lg)", background: "var(--blue-10)", border: "1.5px solid var(--blue-20)" }}>
                <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end" }}>
                  <div>
                    <div style={{ fontFamily: "var(--font-eyebrow)", fontWeight: 700, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--blue-deep)" }}>Estimated borrowing</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(30px,4vw,40px)", color: "var(--text-strong)", lineHeight: 1, marginTop: 4 }}>{fmt(borrow)}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--text-muted)" }}>Property budget</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--brand-primary)" }}>{fmt(budget)}</div>
                  </div>
                </div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--text-muted)", marginTop: 10 }}>≈ {fmt(repay)}/mo over 30 yrs at 5.94% p.a. · indicative only</div>
              </div>
              <a href="/calculators" style={{ textDecoration: "none", display: "block", marginTop: 18 }}>
                <Button block size="lg" iconRight={<Icon name="arrowRight" size={18} />}>Get my personalised assessment</Button>
              </a>
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.CalcTeaser = CalcTeaser;
})();