const CTA = () => {
  return (
    <section className="cta" id="cta" data-screen-label="06 CTA">
      <div className="cta-bg">
        <picture>
          <source media="(max-width: 700px)" srcSet="assets/real/cta-detail-mobile.webp" />
          <img src="assets/real/cta-detail.webp" alt="" width="1920" height="720" aria-hidden="true" loading="lazy" decoding="async" />
        </picture>
        <div className="cta-vignette"></div>
      </div>

      <div className="cta-content">
        <div className="eyebrow">Ready for your</div>
        <h2 className="cta-headline"><span className="it">Transformation?</span></h2>
        <p className="cta-sub">Book your appointment and experience grooming like never before.</p>
      </div>

      <a href="https://www.fresha.com/a/hayre-grooming-salon-abu-dhabi-hayre-grooming-salon-united-square-gwywnytl/booking" target="_blank" rel="noopener noreferrer" className="cta-btn">
        Book Appointment
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </a>
    </section>
  );
};

window.CTA = CTA;