<section data-component-type="Content">
  <div class="bg-[#193A3F] py-16 sm:py-20 md:py-24">
    <div class="container mx-auto px-4" data-component-type="Content">
      <!-- Centered Content -->
      <div class="lg:max-w-[70%] max-w-[90%] mx-auto text-center text-white">
        <!-- Top Label -->
        <div class="flex items-center justify-center gap-4 mb-6">
          <img src="../assets/leftline.png" class="w-[5%] md:w-[35%] h-full object-fit rounded-sm" />

          <p
            class="text-sm tracking-wide uppercase text-white/80"
            data-node="top_label"
            data-node-type="text"
            data-node-label="Top Label"
            data-node-default="Japan, Defined for Travelers"
          >
            {{top_label}}
          </p>

          <img src="../assets/rightline.png" class="w-[5%] md:w-[35%] h-full object-fit rounded-sm" />
        </div>

        <!-- Main Heading -->
        <h2
          class="font-serif font-medium leading-tight text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6"
          data-node="description"
          data-node-type="textarea"
          data-node-label="Description"
          data-node-default=" Japan: A Journey of Culture, Beauty,
        and Endless Exploration."
        >
          {{description}}
        </h2>

        <!-- Description -->
        <p
          class="text-sm sm:text-base md:text-lg text-[#BDBDBD] max-w-2xl mx-auto mb-10"
          data-node="description2"
          data-node-type="textarea"
          data-node-label="Description2"
          data-node-default=" A land of culture, cuisine, and breathtaking beauty — Japan offers refined experiences for every kind of traveller."
        >
          {{description2}}
        </p>

        <!-- CTA Button -->
        <a
          href="{{cta_link}}"
          data-node="cta_link"
          data-node-type="text"
          data-node-label="CTA Link"
          data-node-default="#"
          class="inline-flex items-center justify-center px-10 sm:px-12 py-3 sm:py-4 border border-[#BDBDBD] text-[#BDBDBD] text-sm sm:text-base md:text-lg font-medium hover:bg-white hover:text-[#0F3D3E] transition-all duration-300"
        >
          <span
            data-node="cta_text"
            data-node-type="text"
            data-node-label="CTA Text"
            data-node-default="Ongoing Offers"
          >
            {{cta_text}}
          </span>
        </a>
      </div>
    </div>
  </div>
</section>
