function Pricing() {
  return (
    <section id="pricing">
      <div className="container">
        <div className="section-head" style={{ alignItems: "center", textAlign: "center", margin: "0 auto 40px", maxWidth: 720 }}>
          <div className="eyebrow">Pricing</div>
          <h2 style={{ textAlign: "center" }}>Pay once, or every month. Same Flik.</h2>
          <p className="lede" style={{ textAlign: "center" }}>
            Same app, two ways to pay. The lifetime price pays for itself after
            about eight months — and then it's yours forever.
          </p>
        </div>

        <div className="pricing-grid">
          <div className="price-card glass">
            <div className="price-name">Monthly</div>
            <div>
              <span className="price">$3</span>
              <span className="price-suffix">&nbsp;/ month</span>
            </div>
            <p className="price-desc">
              For trying it on, or just keeping it casual.
            </p>
            <ul className="price-features">
              <li>The full app — every feature, no gates</li>
              <li>Free updates for as long as you're subscribed</li>
              <li>Cancel anytime</li>
              <li>Use on a small number of personal Macs</li>
            </ul>
            <span className="btn btn-soon" role="text" aria-disabled="true" style={{ justifyContent: "center" }}>
              <span className="soon-dot" aria-hidden="true"></span>
              Coming soon
            </span>
          </div>

          <div className="price-card glass">
            <span className="price-tag">Best value</span>
            <div className="price-name">Lifetime</div>
            <div>
              <span className="price">$24</span>
              <span className="price-suffix">&nbsp;one-time</span>
            </div>
            <p className="price-desc">
              Pays for itself after eight months. Yours forever.
            </p>
            <ul className="price-features">
              <li>Everything in Monthly</li>
              <li>One year of free updates included</li>
              <li>Two activations — your laptop &amp; desktop</li>
              <li>14-day refund, no questions asked</li>
              <li>Email support — usually replies the same day</li>
            </ul>
            <span className="btn btn-soon" role="text" aria-disabled="true" style={{ justifyContent: "center" }}>
              <span className="soon-dot" aria-hidden="true"></span>
              Coming soon
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;