/* global React */
function BookingCTA() {
  const { t } = window.useT();
  return (
    <section className="vsc-cta-wrap" id="reservar" data-screen-label="Final booking CTA" style={{padding: '40px 0 96px', background: 'var(--vsc-ivory)'}}>
      <div className="vsc-cta">
        <div className="vsc-cta-bg" aria-hidden="true"></div>
        <div className="vsc-cta-inner">
          <div>
            <div className="vsc-eyebrow is-light">{t("cta.eyebrow")}</div>
            <h2>
              {t("cta.h2.a")}<br/>
              <em>{t("cta.h2.b")}</em>
            </h2>
          </div>
          <div className="vsc-cta-side">
            <p className="lead">{t("cta.lead")}</p>
            <div className="actions">
              <BookBtn className="vsc-btn vsc-btn-primary vsc-btn-lg">{t("common.book_now")}</BookBtn>
              <a className="vsc-btn vsc-btn-ghost-light" href="https://wa.me/59995279021" target="_blank" rel="noopener noreferrer">
                {t("common.whatsapp_short")}
              </a>
            </div>
            <div className="meta">
              <span className="ey">{t("cta.address.eyebrow")}</span>
              <span><strong>{t("cta.address.line1")}</strong> &nbsp;·&nbsp; {t("cta.address.line2")}</span>
              <span>{t("cta.hours")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.BookingCTA = BookingCTA;