function HoldingTab({ deal, calc, update }) {
  const h = deal.holding;
  const b = calc.holdingBreakdown;
  const months = deal.terms.holdingMonths;
  const setH = (k, v) => update({ holding: { ...h, [k]: v } });
  const setCap = (k, v) => update({ capRate: { ...deal.capRate, [k]: v } });
  const setTerm = (k, v) => update({ terms: { ...deal.terms, [k]: v } });

  const lines = [
    { label: 'Mortgage / loan carry', sub: deal.terms.purchaseType === 'Cash' ? 'Cash purchase — no carry' : 'From Mortgage tab', monthly: b.carryMo, locked: true },
    { label: 'Property taxes', sub: 'Annual ÷ 12', monthly: b.taxMo, editAnnual: 'propTaxAnnual', annual: deal.capRate.propTaxAnnual, cap: true },
    { label: 'Insurance', sub: 'Annual ÷ 12', monthly: b.insMo, editAnnual: 'insuranceAnnual', annual: deal.capRate.insuranceAnnual, cap: true },
    { label: 'Utilities', sub: 'Power, water, gas while vacant', monthly: b.utilMo, edit: 'utilitiesMonthly' },
    { label: 'HOA', sub: 'Monthly dues', monthly: b.hoaMo, edit: 'hoaMonthly' },
    { label: 'Other carry', sub: 'Lawn, security, misc.', monthly: b.otherMo, edit: 'otherMonthly' },
  ];
  const maxMo = Math.max(...lines.map((l) => l.monthly), 1);

  return (
    <div>
      <div className="comps-head">
        <div>
          <h2 className="tab-title">Holding Costs</h2>
          <div className="tab-desc">Monthly carry while you own the property — flows straight into Net Profit and the cost tables.</div>
        </div>
        <div className="hold-period">
          <span>Hold period</span>
          <NumInput value={months} onChange={(v) => setTerm('holdingMonths', v || 0)} suffix="mo" />
        </div>
      </div>

      <div className="fin-wrap">
        <div className="card">
          <div className="card-head"><h3>Monthly Carry</h3><span className="head-total">{fmtMoney(calc.monthlyHolding)}/mo</span></div>
          <div className="card-body">
            {lines.map((l, i) => (
              <div className="hold-row" key={i}>
                <div className="hold-meta">
                  <div className="hold-label">{l.label}</div>
                  <div className="hold-sub">{l.sub}</div>
                </div>
                <div className="hold-bar-wrap">
                  <div className="hold-bar" style={{ width: (l.monthly / maxMo) * 100 + '%' }}></div>
                </div>
                {l.locked ? (
                  <div className="hold-val locked">{fmtMoney(l.monthly)}</div>
                ) : l.cap ? (
                  <MoneyInput value={l.annual} onChange={(v) => setCap(l.editAnnual, v)} />
                ) : (
                  <MoneyInput value={h[l.edit]} onChange={(v) => setH(l.edit, v)} />
                )}
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="fin-result">
            <div className="big-lbl">Total Holding Cost</div>
            <div className="big-num">{fmtMoney(calc.holdingCost)}</div>
            <div className="fin-breakdown">
              <div className="fb"><span className="fl">Monthly carry</span><span className="fv">{fmtMoney(calc.monthlyHolding)}</span></div>
              <div className="fb"><span className="fl">Hold period</span><span className="fv">{months} months</span></div>
              <div className="fb"><span className="fl">Loan carry portion</span><span className="fv">{fmtMoney(b.carryMo * months)}</span></div>
              <div className="fb total"><span className="fl">Total over hold</span><span className="fv">{fmtMoney(calc.holdingCost)}</span></div>
            </div>
          </div>
          <div className="kpi-strip" style={{ gridTemplateColumns: '1fr 1fr' }}>
            <div className="kpi"><div className="l">% of All-In Cost</div><div className="v">{fmtPct(calc.allInCost ? (calc.holdingCost / calc.allInCost) * 100 : 0)}</div><div className="hint">Holding ÷ total cost</div></div>
            <div className="kpi"><div className="l">Cost per extra month</div><div className="v">{fmtMoney(calc.monthlyHolding)}</div><div className="hint">Every month on market</div></div>
          </div>
          <div className="amort-note" style={{ marginTop: 14 }}>Property taxes &amp; insurance are shared with the Cap Rate tab. Edits here update everywhere. Loan carry comes from the Mortgage tab.</div>
        </div>
      </div>
    </div>
  );
}

window.HoldingTab = HoldingTab;