function ScenariosTab({ deal, calc, update }) {
  const sc = computeScenarios(deal, calc);
  const s = deal.scenarios;
  const setS = (k, v) => update({ scenarios: { ...s, [k]: v || 0 } });
  const cols = [
    { id: 'worst', label: 'Worst Case', tone: 'bad', d: sc.worst },
    { id: 'base', label: 'Base Case', tone: 'base', d: sc.base },
    { id: 'best', label: 'Best Case', tone: 'good', d: sc.best },
  ];
  const rows = [
    ['After Repair Value', (d) => fmtMoney(d.arv)],
    ['Rehab Budget', (d) => fmtMoney(d.rehab)],
    ['Hold Period', (d) => d.months + ' mo'],
    ['Holding Cost', (d) => fmtMoney(d.holding)],
    ['Net Profit', (d) => fmtMoney(d.netProfit), true],
    ['Net Margin', (d) => fmtPct(d.margin)],
    ['ROI', (d) => fmtPct(d.roi)],
  ];

  return (
    <div>
      <div className="card" style={{ marginBottom: 18 }}>
        <div className="card-head"><h3>Scenario Assumptions</h3></div>
        <div className="card-body">
          <div className="assume-row">
            <div className="assume"><label>ARV swing</label><NumInput value={s.arvDeltaPct} onChange={(v) => setS('arvDeltaPct', v)} suffix="± %" /><small>Best lifts / worst cuts the sale price</small></div>
            <div className="assume"><label>Rehab swing</label><NumInput value={s.rehabDeltaPct} onChange={(v) => setS('rehabDeltaPct', v)} suffix="± %" /><small>Overrun risk on the rehab budget</small></div>
            <div className="assume"><label>Hold swing</label><NumInput value={s.holdDeltaMonths} onChange={(v) => setS('holdDeltaMonths', v)} suffix="± mo" /><small>Extra / fewer months on market</small></div>
          </div>
        </div>
      </div>

      <div className="scn-grid">
        {cols.map((c) => (
          <div className={'scn-card ' + c.tone} key={c.id}>
            <div className="scn-head">{c.label}</div>
            <div className={'scn-profit' + (c.d.netProfit < 0 ? ' neg' : '')}>{fmtMoney(c.d.netProfit)}</div>
            <div className="scn-sub">{fmtPct(c.d.margin)} margin · {fmtPct(c.d.roi)} ROI</div>
          </div>
        ))}
      </div>

      <div className="card" style={{ marginTop: 18 }}>
        <div className="card-head"><h3>Side-by-Side</h3></div>
        <div className="card-body" style={{ padding: 0 }}>
          <table className="cmp-tbl">
            <thead>
              <tr><th>Metric</th><th>Worst</th><th>Base</th><th>Best</th></tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} className={r[2] ? 'cmp-em' : ''}>
                  <td>{r[0]}</td>
                  <td className="bad-c">{r[1](sc.worst)}</td>
                  <td>{r[1](sc.base)}</td>
                  <td className="good-c">{r[1](sc.best)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="be-grid">
        <div className="be-card">
          <div className="be-l">Break-even sale price</div>
          <div className="be-v">{fmtMoney(sc.breakevenSale)}</div>
          <div className="be-s">Sale price where profit = $0 (covers purchase, rehab, holding &amp; selling costs). Your ARV: {fmtMoney(deal.terms.sellingPrice)} — cushion of {fmtMoney(deal.terms.sellingPrice - sc.breakevenSale)}.</div>
        </div>
        <div className="be-card">
          <div className="be-l">Downside protection</div>
          <div className={'be-v' + (sc.worst.netProfit < 0 ? ' neg' : '')}>{sc.worst.netProfit < 0 ? fmtMoney(sc.worst.netProfit) : 'Profitable'}</div>
          <div className="be-s">{sc.worst.netProfit < 0
            ? 'Even the worst case loses money — tighten your offer or rehab budget.'
            : 'Deal stays profitable even in the worst case. Strong margin of safety.'}</div>
        </div>
      </div>
    </div>
  );
}

window.ScenariosTab = ScenariosTab;