function CapRateCalc({ deal, calc, update }) {
  const c = deal.capRate;
  const set = (k, v) => update({ capRate: { ...c, [k]: v } });
  const r = computeCapRate(deal, calc);
  const onePctPass = c.monthlyRent >= r.onePctTarget;

  const Row = ({ label, sub, children }) => (
    <div className="fs-row"><label>{label}{sub ? <small>{sub}</small> : null}</label>{children}</div>
  );

  return (
    <div>
      <div className="fin-wrap">
        <div className="card">
          <div className="card-head"><h3>Rental &amp; Operating Inputs</h3></div>
          <div className="card-body">
            <div className="field-stack">
              <Row label="Monthly Rent" sub="From rental estimates"><MoneyInput value={c.monthlyRent} onChange={(v) => set('monthlyRent', v)} /></Row>
              <Row label="Vacancy"><NumInput value={c.vacancyPct} onChange={(v) => set('vacancyPct', v || 0)} suffix="%" /></Row>
              <Row label="Property Tax" sub="Annual"><MoneyInput value={c.propTaxAnnual} onChange={(v) => set('propTaxAnnual', v)} /></Row>
              <Row label="Insurance" sub="Annual"><MoneyInput value={c.insuranceAnnual} onChange={(v) => set('insuranceAnnual', v)} /></Row>
              <Row label="Maintenance" sub="% of rent"><NumInput value={c.maintenancePct} onChange={(v) => set('maintenancePct', v || 0)} suffix="%" /></Row>
              <Row label="Management" sub="% of rent"><NumInput value={c.managementPct} onChange={(v) => set('managementPct', v || 0)} suffix="%" /></Row>
              <Row label="CapEx Reserve" sub="% of rent"><NumInput value={c.capexPct} onChange={(v) => set('capexPct', v || 0)} suffix="%" /></Row>
              <Row label="HOA" sub="Monthly"><MoneyInput value={c.hoaMonthly} onChange={(v) => set('hoaMonthly', v)} /></Row>
              <Row label="Other" sub="Monthly"><MoneyInput value={c.otherMonthly} onChange={(v) => set('otherMonthly', v)} /></Row>
              <Row label="Value Basis">
                <select className="in" style={{ width: 168 }} value={c.valueBasis} onChange={(e) => set('valueBasis', e.target.value)}>
                  <option>After Repair Value</option><option>All-In Cost</option>
                </select>
              </Row>
            </div>
          </div>
        </div>

        <div>
          <div className="fin-result">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16 }}>
              <div>
                <div className="big-lbl">Cap Rate</div>
                <div className="big-num">{fmtPct(r.capRate, 2)}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="big-lbl">Net Operating Income</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30 }}>{fmtMoney(r.noi)}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,.6)' }}>on {c.valueBasis} {fmtMoney(r.value)}</div>
              </div>
            </div>
            <div className="fin-breakdown">
              <div className="fb"><span className="fl">Gross annual rent</span><span className="fv">{fmtMoney(r.grossAnnual)}</span></div>
              <div className="fb"><span className="fl">Vacancy loss ({c.vacancyPct}%)</span><span className="fv">−{fmtMoney(r.vacancyLoss)}</span></div>
              <div className="fb"><span className="fl">Effective gross income</span><span className="fv">{fmtMoney(r.egi)}</span></div>
              <div className="fb"><span className="fl">Operating expenses</span><span className="fv">−{fmtMoney(r.opex)}</span></div>
              <div className="fb total"><span className="fl">Net operating income</span><span className="fv">{fmtMoney(r.noi)}</span></div>
            </div>
          </div>

          <div className="kpi-strip" style={{ gridTemplateColumns: '1fr 1fr' }}>
            <div className={'kpi' + (r.monthlyCashFlow >= 0 ? ' accent' : '')}>
              <div className="l">Monthly Cash Flow</div>
              <div className={'v' + (r.monthlyCashFlow < 0 ? ' neg' : '')}>{fmtMoney(r.monthlyCashFlow)}</div>
              <div className="hint">After debt service {fmtMoney(r.annualDebt / 12)}/mo</div>
            </div>
            <div className="kpi accent">
              <div className="l">Cash-on-Cash</div>
              <div className={'v' + (r.coc < 0 ? ' neg' : '')}>{fmtPct(r.coc, 1)}</div>
              <div className="hint">On {fmtMoney(r.cashInvested)} invested</div>
            </div>
            <div className="kpi">
              <div className="l">Gross Rent Multiplier</div>
              <div className="v">{r.grm.toFixed(1)}×</div>
              <div className="hint">Value ÷ annual rent</div>
            </div>
            <div className="kpi">
              <div className="l">DSCR</div>
              <div className="v">{isFinite(r.dscr) ? r.dscr.toFixed(2) : '—'}</div>
              <div className="hint">NOI ÷ debt service</div>
            </div>
          </div>

          <div className="card" style={{ marginTop: 14 }}>
            <div className="card-body" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 16 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, flex: 'none', display: 'grid', placeItems: 'center', background: onePctPass ? 'var(--sage-soft)' : 'var(--coral-soft)', color: onePctPass ? 'var(--green-700)' : 'var(--coral)' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">{onePctPass ? <path d="M20 6L9 17l-5-5" /> : <path d="M18 6L6 18M6 6l12 12" />}</svg>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 14.5 }}>1% Rule {onePctPass ? 'passes' : 'falls short'}</div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 2 }}>
                  Rent {fmtMoney(c.monthlyRent)} vs target {fmtMoney(r.onePctTarget)} (1% of {fmtMoney(deal.terms.acceptedPrice)})
                </div>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: onePctPass ? 'var(--green-700)' : 'var(--coral)' }}>
                {fmtPct((c.monthlyRent / (deal.terms.acceptedPrice || 1)) * 100, 2)}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="footnote" style={{ marginTop: 18 }}>
        Cap rate models a buy-&-hold / BRRRR scenario using the rent above. Debt service comes from the Mortgage tab. Excludes flip selling costs.
      </div>
    </div>
  );
}

window.CapRateCalc = CapRateCalc;