<!-- reserve-table-cta.html -->
<section
  id="reserve-table-cta"
  class="w-full bg-white py-20"
  data-component-type="Content"
>
  <div class="max-w-[1920px] mx-auto px-[96px] text-center reserve-table-cta-container max-md:px-4">

    <!-- CONTACT US LABEL -->
    <p
      data-node="reserve_cta_label"
      data-node-type="text"
      data-node-label="Reserve CTA Label"
      data-node-default="CONTACT US"
      class="font-mont font-medium text-[23.64px] uppercase text-[#534931] leading-[38px]
             max-md:text-[18px] max-md:leading-[28px]"
    >
      {{reserve_cta_label}}
    </p>

    <!-- TITLE -->
    <h2
      data-node="reserve_cta_title"
      data-node-type="text"
      data-node-label="Reserve CTA Title"
      data-node-default="Book Your Reservation Today"
      class="font-raleway font-semibold text-[70.93px] leading-[85px] text-[#534931] mt-4
             max-xl:text-[60px] max-xl:leading-[72px]
             max-lg:text-[50px] max-lg:leading-[62px]
             max-md:text-[36px] max-md:leading-[44px]"
    >
      {{reserve_cta_title}}
    </h2>

    <!-- DESCRIPTION -->
    <p
      data-node="reserve_cta_description"
      data-node-type="text"
      data-node-label="Reserve CTA Description"
      data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet maecenas sed consectetur feugiat ut sed. Mi neque tortor netus amet ultrices risus. Tristique neque leo senectus molestie adipiscing."
      class="font-mont font-normal text-[29.45px] leading-[47px] text-[#5C5C5C]
             max-w-[1055px] mx-auto mt-6
             max-xl:text-[24px] max-xl:leading-[36px]
             max-lg:text-[22px] max-lg:leading-[34px]
             max-md:text-[16px] max-md:leading-[26px] px-4"
    >
      {{reserve_cta_description}}
    </p>

    <!-- BUTTON -->
    <a
      data-node="reserve_cta_button_link"
      data-node-type="page_links"
      data-node-label="Reserve CTA Button Link"
      data-node-default="/reservation"
      href="{{reserve_cta_button_link}}"
    >
      <button
        class="reserve-table-cta-btn mt-10 w-[284px] h-[88px] rounded-full bg-[#B38E6A] text-white 
               font-mont font-semibold text-[20.69px] uppercase transition-all duration-300 hover:opacity-90
               max-lg:w-[240px] max-lg:h-[70px] max-lg:text-[18px]
               max-md:w-[200px] max-md:h-[55px] max-md:text-[15px]"
      >
        <span
          data-node="reserve_cta_button_text"
          data-node-type="text"
          data-node-label="Reserve CTA Button Text"
          data-node-default="RESERVE A TABLE"
        >
          {{reserve_cta_button_text}}
        </span>
      </button>
    </a>

  </div>
</section>


<style>
  /* reserve-table-cta.css */

/* Font helpers */
.font-mont {
  font-family: 'Montserrat', sans-serif;
}

.font-raleway {
  font-family: 'Raleway', sans-serif;
}

/* Button hover smoothing (optional) */
.reserve-table-cta-btn:hover {
  transform: translateY(-1px);
}


</style>