// Traction Forecasting . Topbar + Cover

function MonetCard({ on, onToggle, label, hint, tag, children }) {
  return (
    <div className={`lm-monet-card ${on ? 'is-on' : 'is-off'}`}>
      <div className="lm-monet-head">
        <button type="button" className={`lm-monet-toggle ${on ? 'is-on' : ''}`} onClick={() => onToggle(!on)} aria-pressed={on}>
          <span className="lm-monet-toggle-knob"/>
        </button>
        <div className="lm-monet-label-wrap">
          <div className="lm-monet-label">{label}</div>
          <div className="lm-monet-hint">{hint}</div>
        </div>
        <span className="lm-monet-tag">{tag}</span>
      </div>
      <div className="lm-monet-body">{children}</div>
    </div>
  );
}

function TractionTopbar({ onPrint, onReset, onClear }) {
  return (
    <div className="lm-topbar lm-no-print">
      <div className="lm-topbar-inner">
        <a className="lm-topbar-logo" href="Marketplace Studio.html">
          <svg viewBox="0 0 32 32" fill="none"><path d="M5 27V5H12L16 18L20 5H27V27H22V13L17.5 27H14.5L10 13V27H5Z" fill="currentColor"/></svg>
          Marketplace Studio
        </a>
        <span className="lm-topbar-meta">Traction Forecasting Template · v1.0</span>
        <div className="lm-topbar-actions">
          <button className="lm-topbar-btn" onClick={onClear}>Clear example</button>
          <button className="lm-topbar-btn" onClick={onReset}>Reset to example</button>
          <button className="lm-topbar-btn lm-topbar-btn-primary" onClick={onPrint}>Save as PDF</button>
        </div>
      </div>
    </div>
  );
}

function TractionCover({ data, onChange }) {
  return (
    <section className="lm-page">
      <div className="lm-eyebrow"><span className="lm-dot"/> A Marketplace Studio template · For founders raising or building a model</div>
      <h1 className="lm-h1">Marketplace traction <em>forecasting model.</em></h1>
      <p className="lm-lead">Most marketplace models break for the same reason: founders project demand without modeling supply, or model both without modeling liquidity. This template gives you a cohort-based, two-sided projection . Ready for a board meeting or seed deck . Across a 24-month horizon.</p>

      <div className="lm-callout">
        <div className="lm-callout-head">How this template works</div>
        <p>Fill in the inputs across each section. Numbers update live. The example shown is a fictional marketplace . <strong>RigShare</strong>, a B2B heavy equipment rental , and you can clear it at any time using the topbar. When you are done, save as PDF for your data room.</p>
      </div>

      <div className="lm-page-section">
        <h3 className="lm-h3">Your marketplace</h3>
        <div className="lm-input-grid cols-3">
          <div className="lm-input">
            <label className="lm-input-label">Marketplace name</label>
            <input type="text" value={data.meta.name} onChange={(e) => onChange(['meta','name'], e.target.value)}/>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Category</label>
            <input type="text" value={data.meta.category} onChange={(e) => onChange(['meta','category'], e.target.value)}/>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Geography</label>
            <input type="text" value={data.meta.geography} onChange={(e) => onChange(['meta','geography'], e.target.value)}/>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Stage</label>
            <input type="text" value={data.meta.stage} onChange={(e) => onChange(['meta','stage'], e.target.value)}/>
          </div>
          <div className="lm-input">
            <label className="lm-input-label">Forecast horizon <span className="lm-input-hint">months</span></label>
            <div className="lm-input-suffix">
              <input type="number" min="6" max="60" step="1" value={data.meta.horizonMonths} onChange={(e) => onChange(['meta','horizonMonths'], parseInt(e.target.value)||24)}/>
              <span className="lm-input-suffix-tag">mo</span>
            </div>
          </div>
        </div>
      </div>

      <div className="lm-page-section">
        <h3 className="lm-h3">Monetization model</h3>
        <p className="lm-body" style={{maxWidth:720, marginBottom:16}}>Toggle on any combination. Most marketplaces start with take rate; mature platforms layer subscriptions on the side that values predictability (usually supply). The model below computes each stream independently, then sums them.</p>
        <div className="lm-monet-grid">
          <MonetCard
            on={data.meta.monetization.takeRateOn}
            onToggle={(v) => onChange(['meta','monetization','takeRateOn'], v)}
            label="Take rate"
            hint="% of GMV per transaction"
            tag="Transactional"
          >
            <div className="lm-input-suffix">
              <input type="number" min="0" max="50" step="0.5" value={data.meta.monetization.takeRate} disabled={!data.meta.monetization.takeRateOn} onChange={(e) => onChange(['meta','monetization','takeRate'], parseFloat(e.target.value)||0)}/>
              <span className="lm-input-suffix-tag">%</span>
            </div>
          </MonetCard>
          <MonetCard
            on={data.meta.monetization.supplySubOn}
            onToggle={(v) => onChange(['meta','monetization','supplySubOn'], v)}
            label="Supply subscription"
            hint={`$/month per active ${data.supply?.label?.toLowerCase() || 'supplier'}`}
            tag="Recurring"
          >
            <div className="lm-monet-money">
              <span className="lm-monet-money-pre">$</span>
              <input type="number" min="0" step="1" value={data.meta.monetization.supplySubMonthly} disabled={!data.meta.monetization.supplySubOn} onChange={(e) => onChange(['meta','monetization','supplySubMonthly'], parseFloat(e.target.value)||0)}/>
              <span className="lm-monet-money-suf">/mo</span>
            </div>
          </MonetCard>
          <MonetCard
            on={data.meta.monetization.demandSubOn}
            onToggle={(v) => onChange(['meta','monetization','demandSubOn'], v)}
            label="Demand subscription"
            hint={`$/month per active ${data.demand?.label?.toLowerCase() || 'buyer'}`}
            tag="Recurring"
          >
            <div className="lm-monet-money">
              <span className="lm-monet-money-pre">$</span>
              <input type="number" min="0" step="1" value={data.meta.monetization.demandSubMonthly} disabled={!data.meta.monetization.demandSubOn} onChange={(e) => onChange(['meta','monetization','demandSubMonthly'], parseFloat(e.target.value)||0)}/>
              <span className="lm-monet-money-suf">/mo</span>
            </div>
          </MonetCard>
        </div>
      </div>

      <div className="lm-page-section">
        <h4 className="lm-h4">What this template covers</h4>
        <div className="lm-toc">
          <div className="lm-toc-item"><span className="lm-toc-num">01</span><span className="lm-toc-text"><span className="lm-toc-t">Supply cohorts</span><span className="lm-toc-d">Acquisition, activation, retention curves for the supply side</span></span></div>
          <div className="lm-toc-item"><span className="lm-toc-num">02</span><span className="lm-toc-text"><span className="lm-toc-t">Demand cohorts</span><span className="lm-toc-d">Buyer acquisition and frequency, modeled the same way</span></span></div>
          <div className="lm-toc-item"><span className="lm-toc-num">03</span><span className="lm-toc-text"><span className="lm-toc-t">Liquidity</span><span className="lm-toc-d">Match rate, fill time, average booking value</span></span></div>
          <div className="lm-toc-item"><span className="lm-toc-num">04</span><span className="lm-toc-text"><span className="lm-toc-t">Unit economics</span><span className="lm-toc-d">CAC, LTV, payback by side</span></span></div>
          <div className="lm-toc-item"><span className="lm-toc-num">05</span><span className="lm-toc-text"><span className="lm-toc-t">24-month projection</span><span className="lm-toc-d">Auto-rolled GMV, take, transactions, active users</span></span></div>
          <div className="lm-toc-item"><span className="lm-toc-num">06</span><span className="lm-toc-text"><span className="lm-toc-t">Sensitivity scenarios</span><span className="lm-toc-d">Pessimistic, base, optimistic . Side by side</span></span></div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TractionTopbar, TractionCover, MonetCard });