// Traction Forecasting . Liquidity section (Section 03)
function TractionLiquidity({ data, onChange }) {
  const liq = data.liquidity;
  return (
    <section className="lm-page">
      <div className="lm-section-num">Section 03</div>
      <h2 className="lm-h2">Liquidity.</h2>
      <p className="lm-body" style={{maxWidth:680, marginBottom:8}}>Liquidity is what separates a marketplace from a directory. If a buyer searches and gets matched within hours, you have a marketplace. If they get matched after days, or never, you have a listings site that someone is calling a marketplace.</p>

      <div className="lm-page-section">
        <h4 className="lm-h4">Match metrics</h4>
        <div className="lm-input-grid cols-3">
          <div className="lm-input">
            <label className="lm-input-label">Match rate <span className="lm-input-hint">% of searches that book</span></label>
            <div className="lm-input-suffix">
              <input type="number" min="0" max="100" step="1" value={liq.matchRate} onChange={(e) => onChange(['liquidity','matchRate'], parseFloat(e.target.value)||0)}/>
              <span className="lm-input-suffix-tag">%</span>
            </div>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Average booking value <span className="lm-input-hint">$ per transaction</span></label>
            <div className="lm-input-suffix">
              <input type="number" min="0" step="10" value={liq.avgBookingValue} onChange={(e) => onChange(['liquidity','avgBookingValue'], parseFloat(e.target.value)||0)}/>
              <span className="lm-input-suffix-tag">$</span>
            </div>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Time to match <span className="lm-input-hint">hours, search → booking</span></label>
            <div className="lm-input-suffix">
              <input type="number" min="0" step="0.5" value={liq.timeToMatchHours} onChange={(e) => onChange(['liquidity','timeToMatchHours'], parseFloat(e.target.value)||0)}/>
              <span className="lm-input-suffix-tag">hr</span>
            </div>
          </div>
        </div>
      </div>

      <div className="lm-callout">
        <div className="lm-callout-head">Marketplace POV</div>
        <p>The Cold Start Problem benchmark: <strong>match rate above 60% within 24 hours</strong> is healthy. Below 40% means demand is leaving for a substitute. The fix is rarely "more demand" . It is denser supply in the geographies and categories where buyers are actually looking. Solve liquidity before you solve growth.</p>
      </div>
    </section>
  );
}

Object.assign(window, { TractionLiquidity });