/* global React */

function FinalCTA() {
  return (
    <section className="at-final" id="contact">
      <div className="at-final-inner">
        <div className="at-final-eyebrow">
          <span className="dot"></span>
          Take 30 minutes
        </div>
        <h2 className="at-final-title">
          Let's find the <span style={{ color: 'var(--at-red)' }}>10 hours</span><br />you're losing this week.
        </h2>
        <div className="at-final-ctas">
          <a href="/booking" className="at-btn at-btn--on-red" data-cursor-label="book audit">
            Book a 30-min audit
            <i data-lucide="arrow-right"></i>
          </a>
          <a href="/booking" className="at-btn at-btn--ghost-on-red" data-cursor-label="see calendar">
            See open slots
          </a>
        </div>
        <div className="at-final-meta">
          <span>
            <i data-lucide="mail" style={{ width: 12, height: 12 }}></i>
            zian@ansartech.net
          </span>
          <span>
            <i data-lucide="map-pin" style={{ width: 12, height: 12 }}></i>
            Multan, Pakistan
          </span>
          <span>
            <i data-lucide="clock" style={{ width: 12, height: 12 }}></i>
            Reply within 24h
          </span>
        </div>
      </div>
    </section>
  );
}

window.FinalCTA = FinalCTA;