/* global React */
function PricingTease() {
  return (
    <section className="section section--alt" id="pricing-tease">
      <div className="section__top">
        <div className="section__num">08</div>
        <div className="section__label">
          <span className="eyebrow">Pricing · coming soon</span>
          <h2 className="display h2">Priced per user. <em style={{ fontStyle: "normal", background: "linear-gradient(90deg, var(--blue-2), var(--sky))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Not per truck.</em></h2>
        </div>
      </div>
      <div className="pricing-tease">
        <div className="price-card">
          <div className="tier">Starter</div>
          <div className="amount">Coming soon<span className="unit">Per-user pricing · CAD</span></div>
          <p style={{ color: "var(--muted)" }}>For growing carriers &amp; dispatchers getting started.</p>
          <ul>
            <li>Dispatch board</li>
            <li>WhatsApp-native comms</li>
            <li>Invoicing + QuickBooks</li>
            <li>POD capture</li>
          </ul>
          <a href="#waitlist" className="btn" onClick={(e) => { e.preventDefault(); window.__scrollToId && window.__scrollToId("waitlist"); }} style={{ marginTop: "auto" }}>Join the waitlist <Arrow /></a>
        </div>
        <div className="price-card price-card--feature">
          <div className="tier" style={{ color: "var(--paper)" }}>Fleet · most popular</div>
          <div className="amount">Coming soon<span className="unit">Per-user pricing · CAD</span></div>
          <p style={{ color: "var(--paper)", opacity: 0.8 }}>For established carriers, brokers &amp; 3PLs. Cross-border included.</p>
          <ul>
            <li>Everything in Starter</li>
            <li>ACE / ACI / PARS / PAPS</li>
            <li>Driver settlement + pay</li>
            <li>Customer portal, branded</li>
            <li>BI + lane profitability</li>
          </ul>
          <a href="#waitlist" className="btn btn--solid" onClick={(e) => { e.preventDefault(); window.__scrollToId && window.__scrollToId("waitlist"); }} style={{ marginTop: "auto" }}>Join the waitlist <Arrow /></a>
        </div>
        <div className="price-card">
          <div className="tier">Enterprise</div>
          <div className="amount">Custom<span className="unit">Multi-entity &amp; large networks</span></div>
          <p style={{ color: "var(--muted)" }}>Volume pricing, dedicated success manager, Canadian implementation team.</p>
          <ul>
            <li>Everything in Fleet</li>
            <li>SSO, SCIM, audit logs</li>
            <li>Custom EDI + API</li>
            <li>On-site training</li>
          </ul>
          <a href="/contact" className="btn" onClick={(e) => { e.preventDefault(); window.__navigate && window.__navigate("contact"); }} style={{ marginTop: "auto" }}>Talk to us <Arrow /></a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PricingTease });