<section class="relative w-full min-h-[420px] md:min-h-[520px]"
  data-component-type="Content">

  <!-- Background Image -->
  <div class="absolute inset-0">
    <img
      src="{{cta_bg_image}}"
      data-node="cta_bg_image"
      data-node-type="file"
      data-node-label="CTA Background Image"
      data-node-default="../assets/cta-bg.png"
      alt="Japan Cherry Blossom"
      class="w-full h-full object-cover object-center"
    />
  </div>

  <!-- Content -->
  <div class="relative z-10 max-w-[90%] mx-auto px-6 py-20 md:py-28 flex items-center">
    <div class="max-w-xl text-white">

      <!-- Heading -->
      <h2 class="font-serif text-3xl sm:text-4xl md:text-5xl leading-tight mb-6"
        data-node="cta_heading"
        data-node-type="textarea"
        data-node-label="CTA Heading"
        data-node-default="Your Japan Adventure Starts With One Click.">
        {{cta_heading}}
      </h2>

      <!-- Description -->
      <p class="text-white/90 text-sm sm:text-base md:text-lg leading-relaxed mb-8"
        data-node="cta_description"
        data-node-type="textarea"
        data-node-label="CTA Description"
        data-node-default="Explore iconic cities, stunning landscapes, and rich cultural moments. We plan your Japan trip with care, expertise.">
        {{cta_description}}
      </p>

      <!-- CTA Button -->
      <a
        href="{{cta_button_link}}"
        data-node="cta_button_link"
        data-node-type="text"
        data-node-label="CTA Button Link"
        data-node-default="#"
        class="inline-flex items-center justify-center
               px-8 sm:px-10 py-3 sm:py-4
               border border-white
               text-white text-sm sm:text-base
               hover:bg-white hover:text-[#0F3D3E]
               transition-all duration-300"
      >
        <span
          data-node="cta_button_text"
          data-node-type="text"
          data-node-label="CTA Button Text"
          data-node-default="Get in Touch">
          {{cta_button_text}}
        </span>
      </a>

    </div>
  </div>
</section>
