<section data-component-type="CTA" class="w-full bg-[#965C00] font-manrope py-16 md:py-20 lg:py-24 px-6 md:px-12 lg:px-20" data-component-slug="ss-interior-flooring-template-products-cta">
  <div class>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
      <!-- Left Column: Title, Description, CTA Button -->
      <div class="flex flex-col">
        <!-- Title -->
        <h2 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-[#ffffff] leading-tight mb-6" data-node="products_cta_title" data-node-type="text" data-node-label="CTA Title" data-node-default="Made for Real Living with Style and Strength">
          {{products_cta_title}}
        </h2>

        <!-- Description -->
        <p class="text-[#ffffff] text-base leading-relaxed mb-8" data-node="products_cta_description" data-node-type="textarea" data-node-label="CTA Description" data-node-default="Our floors are crafted for spaces that evolve with your lifestyle. Performance materials meet refined design language.">
          {{products_cta_description}}
        </p>

        <!-- CTA Button (Outlined) -->
        <a data-node="products_cta_link" data-node-type="url" data-node-label="CTA Link" data-node-default="products" href="{{products_cta_link}}" class="inline-block w-fit bg-[#ffffff] text-[#965C00] px-8 py-3.5 rounded-lg text-[15px] font-semibold hover:bg-[#7a5410] transition-colors shadow-md hover:shadow-lg">
          <span data-node="products_cta_button_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="View Flooring Details">{{products_cta_button_text}}</span>
        </a>
      </div>

      <!-- Right Column: Single Image -->
      <div class>
        <img data-node="products_cta_image" data-node-type="file" data-node-label="CTA Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696175/seltrix/templates/ss-interior-flooring-template/products-cta.png" src="{{products_cta_image}}" alt="Interior flooring showcase" class="w-full h-[280px] md:h-[360px] lg:h-[420px] xl:h-[496px] object-cover rounded-xl">
      </div>
    </div>
  </div>
</section>