// Traction Forecasting . Investor summary card (Section 07)
function TractionSummary({ data, projection, computed, onBook }) {
  const horizon = data.meta.horizonMonths;
  const m11n = data.meta.monetization || {};
  const monetLabels = [];
  if (m11n.takeRateOn) monetLabels.push(`Take ${m11n.takeRate}%`);
  if (m11n.supplySubOn) monetLabels.push(`Supply $${m11n.supplySubMonthly}/mo`);
  if (m11n.demandSubOn) monetLabels.push(`Demand $${m11n.demandSubMonthly}/mo`);
  const monetSummary = monetLabels.join(' · ') || 'No monetization';
  return (
    <>
      <section className="lm-page">
        <div className="lm-section-num">Section 07</div>
        <h2 className="lm-h2">Investor summary.</h2>
        <p className="lm-body" style={{maxWidth:680, marginBottom:8}}>One-page snapshot. Drop this into a board update or include it as a slide in your seed deck.</p>

        <div className="lm-page-section" style={{padding:'32px', background:'var(--ms-ink-1)', borderRadius:'16px', color:'var(--ms-surface-0)'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:'16px', gap:'24px'}}>
            <div>
              <div style={{fontFamily:'var(--ms-font-mono)', fontSize:'11px', color:'rgba(255,255,255,.5)', letterSpacing:'.1em', textTransform:'uppercase'}}>Marketplace forecast · {horizon}-month horizon</div>
              <div style={{fontFamily:'var(--ms-font-display)', fontSize:'32px', fontWeight:600, marginTop:'4px', letterSpacing:'-0.02em'}}>{data.meta.name}</div>
              <div style={{fontSize:'14px', color:'rgba(255,255,255,.7)', marginTop:'2px'}}>{data.meta.category} · {data.meta.geography}</div>
            </div>
            <div style={{textAlign:'right', fontFamily:'var(--ms-font-mono)', fontSize:'11px', color:'rgba(255,255,255,.5)', letterSpacing:'.1em', textTransform:'uppercase', maxWidth:280}}>{monetSummary}</div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'16px', marginTop:'24px'}}>
            <SummaryCard label="Cum. GMV" value={fmtCurrency(projection.cumGMV)} sub={`across ${horizon} mo`}/>
            <SummaryCard label="Cum. net revenue" value={fmtCurrency(projection.cumNetTake)} sub="all streams"/>
            <SummaryCard label="Exit ARR" value={fmtCurrency((projection.netTake[horizon-1]||0) * 12)} sub={`M${horizon} run rate`}/>
            <SummaryCard label="LTV / CAC" value={`${computed.ltvCac.toFixed(1)}×`} sub="blended both sides"/>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'16px', marginTop:'12px'}}>
            <SummaryCard label="Active suppliers" value={fmt(projection.supply[horizon-1]?.active||0)} sub={`at M${horizon}`}/>
            <SummaryCard label="Active buyers" value={fmt(projection.demand[horizon-1]?.active||0)} sub={`at M${horizon}`}/>
            <SummaryCard label="Match rate" value={`${data.liquidity.matchRate}%`} sub="search → booking"/>
            <SummaryCard label="Avg booking" value={fmtCurrency(data.liquidity.avgBookingValue)} sub="per transaction"/>
          </div>
        </div>
      </section>

      <section className="lm-end-cta">
        <div className="lm-eyebrow" style={{color:'rgba(255,255,255,.75)'}}><span className="lm-dot" style={{background:'#fff'}}/> Want a second pair of eyes?</div>
        <h2 className="lm-h2">A model is only as good as its assumptions.</h2>
        <p>Book thirty minutes with us. We will pressure-test the retention curves, match-rate assumptions, and CAC numbers , for free, no strings , and tell you which inputs we would push back on if we were the lead investor on your round.</p>
        <button className="lm-btn lm-no-print" onClick={onBook}>Book a Discovery Call →</button>
        <div style={{marginTop:'24px', fontFamily:'var(--ms-font-mono)', fontSize:'11px', color:'rgba(255,255,255,.6)', letterSpacing:'.06em', textTransform:'uppercase'}}>marketplacestudio.io · hello@marketplacestudio.io</div>
      </section>
    </>
  );
}

function SummaryCard({ label, value, sub }) {
  return (
    <div style={{background:'rgba(255,255,255,.06)', borderRadius:'12px', padding:'14px 16px'}}>
      <div style={{fontFamily:'var(--ms-font-mono)', fontSize:'10px', color:'rgba(255,255,255,.5)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom:'4px'}}>{label}</div>
      <div style={{fontFamily:'var(--ms-font-display)', fontSize:'24px', fontWeight:600, letterSpacing:'-0.015em', fontVariantNumeric:'tabular-nums'}}>{value}</div>
      <div style={{fontSize:'11px', color:'rgba(255,255,255,.55)', marginTop:'2px'}}>{sub}</div>
    </div>
  );
}

Object.assign(window, { TractionSummary });