/* global React */
function CTA() {
  return (
    <section className="section cta" id="cta">
      <div className="wrap" style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
        <span className="eyebrow">
          <span className="dot" />
          <span>Start building</span>
        </span>
        <h2 style={{ marginTop: 18, fontSize: "64px" }}>
          The store you've been<br />
          meaning to start,<br />
          <span className="accent" style={{ fontSize: "64px" }}>begins with a sentence.</span>
        </h2>
        <p className="lede" style={{ marginTop: 22 }}>Open a project, type what you want to sell, and let Dispatch take it from there.</p>

        <div className="cta-bar cta-bar-ghost" id="cta-bar-anchor" aria-hidden="true">
          <HeroChatBar />
        </div>

        <div className="cta-foot">
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ember)" }} />
            Free to start. $0 until your first paid order.
          </span>
          <span className="dot" />
          <span>Migrate from Shopify in one prompt</span>
          <span className="dot" />
          <span>SOC 2 · GDPR · PCI</span>
        </div>
      </div>
    </section>);

}

window.CTA = CTA;