// Mortgage payment calculator (homepage hero variant + standalone)
const { useState: useStateC, useMemo: useMemoC } = React;

function MortgageCalc({ initial }) {
  const [price, setPrice] = useStateC(initial?.price ?? 685000);
  const [downPct, setDownPct] = useStateC(initial?.downPct ?? 20);
  const [term, setTerm] = useStateC(initial?.term ?? 30);
  const [rate, setRate] = useStateC(initial?.rate ?? 6.390);
  const [taxAnnual, setTaxAnnual] = useStateC(initial?.tax ?? 8800);
  const [insAnnual, setInsAnnual] = useStateC(initial?.ins ?? 1800);
  const [hoa, setHoa] = useStateC(initial?.hoa ?? 120);

  const calc = useMemoC(() => {
    const down = price * (downPct / 100);
    const principal = price - down;
    const i = rate / 100 / 12;
    const n = term * 12;
    const pi = i === 0 ? principal / n : principal * (i * Math.pow(1 + i, n)) / (Math.pow(1 + i, n) - 1);
    const tax = taxAnnual / 12;
    const ins = insAnnual / 12;
    const pmi = downPct < 20 ? (principal * 0.0055) / 12 : 0;
    const total = pi + tax + ins + hoa + pmi;
    return { down, principal, pi, tax, ins, pmi, hoa, total };
  }, [price, downPct, term, rate, taxAnnual, insAnnual, hoa]);

  const segs = [
    { k: "P&I",       v: calc.pi,  c: "b1", l: "l1" },
    { k: "Tax",       v: calc.tax, c: "b2", l: "l2" },
    { k: "Insurance", v: calc.ins, c: "b3", l: "l3" },
    { k: "HOA",       v: calc.hoa, c: "b4", l: "l4" },
  ];
  if (calc.pmi > 0) segs.push({ k: "PMI", v: calc.pmi, c: "b4", l: "l4" });
  const sumWidths = segs.map(s => (s.v / calc.total) * 100);

  return (
    <div className="calc-wrap">
      <div className="calc-form">
        <h3>Estimate your monthly payment</h3>

        <div className="field">
          <label>Home price <span className="v">{fmtUSD(price)}</span></label>
          <input type="range" min="100000" max="3000000" step="5000" value={price} onChange={e => setPrice(+e.target.value)} />
        </div>

        <div className="field">
          <label>Down payment <span className="v">{downPct}% · {fmtUSD(price * downPct / 100)}</span></label>
          <input type="range" min="3" max="50" step="1" value={downPct} onChange={e => setDownPct(+e.target.value)} />
        </div>

        <div className="field">
          <label>Loan term</label>
          <div className="field-pills">
            {[10, 15, 20, 30].map(t => (
              <button key={t} className={term === t ? "active" : ""} onClick={() => setTerm(t)}>{t}-year</button>
            ))}
          </div>
        </div>

        <div className="field">
          <label>Interest rate <span className="v">{rate.toFixed(3)}%</span></label>
          <input type="range" min="3" max="10" step="0.125" value={rate} onChange={e => setRate(+e.target.value)} />
        </div>

        <div className="field-row">
          <div className="field">
            <label>Property tax / yr <span className="v">{fmtUSD(taxAnnual)}</span></label>
            <input type="range" min="0" max="30000" step="100" value={taxAnnual} onChange={e => setTaxAnnual(+e.target.value)} />
          </div>
          <div className="field">
            <label>Insurance / yr <span className="v">{fmtUSD(insAnnual)}</span></label>
            <input type="range" min="0" max="6000" step="50" value={insAnnual} onChange={e => setInsAnnual(+e.target.value)} />
          </div>
        </div>

        <div className="field">
          <label>HOA / mo <span className="v">{fmtUSD(hoa)}</span></label>
          <input type="range" min="0" max="1500" step="10" value={hoa} onChange={e => setHoa(+e.target.value)} />
        </div>
      </div>

      <div className="calc-out">
        <div className="label">Estimated monthly payment</div>
        <div className="big">{fmtUSD(calc.total)}</div>
        <div className="sub">Principal {fmtUSD(calc.principal)} · {term}-yr fixed · {rate.toFixed(3)}% APR (illustrative)</div>

        <div className="calc-bar">
          {segs.map((s, i) => <span key={i} className={s.c} style={{ width: sumWidths[i] + "%" }} />)}
        </div>
        <div className="calc-legend">
          <span className="l1">Principal & Interest</span>
          <span className="l2">Property Tax</span>
          <span className="l3">Insurance</span>
          <span className="l4">HOA{calc.pmi > 0 ? " + PMI" : ""}</span>
        </div>

        <div className="calc-breakdown">
          <dl>
            <dt>Principal & interest</dt><dd>{fmtUSD(calc.pi, 2)}</dd>
            <dt>Property tax</dt><dd>{fmtUSD(calc.tax, 2)}</dd>
            <dt>Homeowners insurance</dt><dd>{fmtUSD(calc.ins, 2)}</dd>
            {calc.pmi > 0 && (<><dt>Mortgage insurance (PMI)</dt><dd>{fmtUSD(calc.pmi, 2)}</dd></>)}
            <dt>HOA</dt><dd>{fmtUSD(calc.hoa, 2)}</dd>
            <dt style={{fontWeight:600,color:"var(--ink)",paddingTop:8,borderTop:"1px solid var(--rule-2)",marginTop:4}}>Total monthly</dt>
            <dd style={{fontWeight:600,color:"var(--ink)",paddingTop:8,borderTop:"1px solid var(--rule-2)",marginTop:4}}>{fmtUSD(calc.total, 2)}</dd>
          </dl>
        </div>

        <div style={{marginTop:24,display:"flex",gap:10,flexWrap:"wrap"}}>
          <a className="btn btn-primary" href="apply.html">Get pre-qualified <span className="arr">→</span></a>
          <a className="btn btn-ghost" href="rates.html">See today's rates</a>
        </div>
      </div>
    </div>
  );
}

window.MortgageCalc = MortgageCalc;