// Traction Forecasting . Unit Economics section (Section 04)
function TractionUnitEcon({ data, onChange, computed }) {
  const ue = data.unitEconomics;
  return (
    <section className="lm-page">
      <div className="lm-section-num">Section 04</div>
      <h2 className="lm-h2">Unit economics.</h2>
      <p className="lm-body" style={{maxWidth:680, marginBottom:8}}>The fundamental question for any marketplace: does the take per acquired user pay back the cost of acquiring them, with margin to spare? We model both sides separately because the answer is rarely the same.</p>

      <div className="lm-page-section">
        <h4 className="lm-h4">Per-transaction economics</h4>
        <div className="lm-input-grid cols-4">
          <div className="lm-input">
            <label className="lm-input-label">Average margin <span className="lm-input-hint">% take rate (net)</span></label>
            <div className="lm-input-suffix">
              <input type="number" min="0" max="50" step="0.5" value={ue.avgMargin} onChange={(e) => onChange(['unitEconomics','avgMargin'], parseFloat(e.target.value)||0)}/>
              <span className="lm-input-suffix-tag">%</span>
            </div>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Payment processing <span className="lm-input-hint">% of GMV</span></label>
            <div className="lm-input-suffix">
              <input type="number" min="0" max="10" step="0.1" value={ue.paymentProcessing} onChange={(e) => onChange(['unitEconomics','paymentProcessing'], parseFloat(e.target.value)||0)}/>
              <span className="lm-input-suffix-tag">%</span>
            </div>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Support cost per transaction <span className="lm-input-hint">$ blended</span></label>
            <div className="lm-input-suffix">
              <input type="number" min="0" step="0.5" value={ue.supportCostPerTx} onChange={(e) => onChange(['unitEconomics','supportCostPerTx'], parseFloat(e.target.value)||0)}/>
              <span className="lm-input-suffix-tag">$</span>
            </div>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Refund rate <span className="lm-input-hint">% of bookings</span></label>
            <div className="lm-input-suffix">
              <input type="number" min="0" max="20" step="0.1" value={ue.refundRate} onChange={(e) => onChange(['unitEconomics','refundRate'], parseFloat(e.target.value)||0)}/>
              <span className="lm-input-suffix-tag">%</span>
            </div>
          </div>
        </div>
      </div>

      <div className="lm-page-section">
        <h4 className="lm-h4">Computed unit economics</h4>
        <div className="lm-kpis">
          <div className="lm-kpi"><div className="lm-kpi-l">Net contribution / tx</div><div className="lm-kpi-v">{fmtCurrency(computed.contributionPerTx, 0)}</div><div className="lm-kpi-d">After processing, support, refunds</div></div>
          <div className="lm-kpi"><div className="lm-kpi-l">Supply LTV</div><div className="lm-kpi-v">{fmtCurrency(computed.supplyLTV, 0)}</div><div className="lm-kpi-d">{computed.supplySubLTV>0 ? `Tx ${fmtCurrency(computed.supplyTxLTV,0)} + sub ${fmtCurrency(computed.supplySubLTV,0)}` : 'Lifetime contribution'}</div></div>
          <div className="lm-kpi"><div className="lm-kpi-l">Demand LTV</div><div className="lm-kpi-v">{fmtCurrency(computed.demandLTV, 0)}</div><div className="lm-kpi-d">{computed.demandSubLTV>0 ? `Tx ${fmtCurrency(computed.demandTxLTV,0)} + sub ${fmtCurrency(computed.demandSubLTV,0)}` : 'Lifetime contribution'}</div></div>
          <div className="lm-kpi"><div className="lm-kpi-l">Blended LTV / CAC</div><div className="lm-kpi-v">{computed.ltvCac.toFixed(1)}×</div><div className="lm-kpi-d">Both sides combined</div></div>
        </div>
      </div>

      <div className="lm-callout">
        <div className="lm-callout-head">Marketplace POV</div>
        <p>For a venture-fundable marketplace, target <strong>LTV/CAC of 3× or higher within 18 months</strong>, with payback under 12 months on at least one side. Pre-seed and seed founders often inflate LTV by assuming retention curves they have not earned yet . Model conservatively, then beat your model.</p>
      </div>
    </section>
  );
}

Object.assign(window, { TractionUnitEcon });