/* global React */
function Numbers() {
  return (
    <section className="section tight">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="num">06 ——</span> By the numbers</span>
          <h2>Operations,<br /><span className="accent">measured</span> against agencies.</h2>
        </div>
        <div className="numbers-row">
          <div className="num-cell">
            <div className="big">94<span className="blk" style={{ fontSize: "0.5em", verticalAlign: "0.4em", marginLeft: 4, color: "var(--ink-3)" }}>sec</span></div>
            <div className="lbl">Average time from prompt to a live, paying-customer-ready storefront.</div>
          </div>
          <div className="num-cell">
            <div className="big">42<span className="blk" style={{ fontSize: "0.5em", verticalAlign: "0.4em", marginLeft: 4, color: "var(--ink-3)" }}>%</span></div>
            <div className="lbl">Median checkout-conversion uplift after 30 days of continuous optimization.</div>
          </div>
          <div className="num-cell">
            <div className="big">9.4<span className="blk" style={{ fontSize: "0.5em", verticalAlign: "0.4em", marginLeft: 4, color: "var(--ink-3)" }}>hrs</span></div>
            <div className="lbl">Operator time replaced per week, on average, across stores live on Dispatch.</div>
          </div>
          <div className="num-cell">
            <div className="big">$0<span className="blk" style={{ fontSize: "0.5em", verticalAlign: "0.4em", marginLeft: 4, color: "var(--ink-3)" }}>agency</span></div>
            <div className="lbl">Spent on design, dev, or operations vendors. Replaced by one operator that knows the business.</div>
          </div>
        </div>
      </div>
    </section>);

}

window.Numbers = Numbers;