/* Mesh website — Why Mesh testimonial band, customer quote, closing CTA */

function StatsBand({ onCta }) {
  return (
    <section className="section dark-band">
      <div className="wrap">
        <div className="section-head">
          <h2>Why Mesh? </h2>
          <p className="sub">Hear it straight from the teams who made the switch.</p>
        </div>
        <TestimonialRow />
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="section">
      <div className="wrap">
        <Reveal className="quote">
          <span style={{ display: 'inline-flex', width: 34, height: 34, color: 'var(--blue-300)', marginBottom: 14 }}>
            <Icon name="quote" className="ic" />
          </span>
          <blockquote>
            “We cut three full days off our close. The first time an auditor asked
            ‘where did this number come from,’ I just clicked it.”
          </blockquote>
          <div className="by">
            <span className="av">DR</span>
            <div className="who">
              <div className="nm">Dana Reyes</div>
              <div className="rl">Corporate Controller, Northwind</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CTA({ onCta }) {
  return (
    <section className="section" id="book-demo">
      <div className="wrap">
        <div className="cta">
          <div className="cta-glow"></div>
          <h2>Retire the <span className="hl">accrual spreadsheet.</span></h2>
          <p className="sub">Learn how Mesh can help get your variable spend under control, and keep your teams under budget.</p>
          <div className="row">
            <button className="btn btn-white btn-lg" onClick={onCta}>Get a demo <Icon name="arrow-right" className="ic" /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StatsBand, Quote, CTA });