<section data-component-type="Content" class="w-full bg-white 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-spaces-features">
  <div class>
    <div class="flex flex-col lg:flex-row lg:items-center gap-10 lg:gap-16">
      <!-- Left: Text Content -->
      <div class="flex-1 max-w-xl">
        <!-- Tagline -->
        <p class="bg-[#F8F9FA] w-fit px-4 py-2 rounded-xl text-[#535353] text-base font-medium mb-4" data-node="sf_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="Space. Style. Purpose.">
          {{sf_tagline}}
        </p>

        <!-- Title -->
        <h2 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-black leading-tight mb-6" data-node="sf_title" data-node-type="textarea" data-node-label="Title" data-node-default="Tailored Flooring for Distinct Interior Needs">
          {{sf_title}}
        </h2>

        <!-- Description -->
        <p class="text-[#4A6673] text-base leading-relaxed mb-8" data-node="sf_description" data-node-type="textarea" data-node-label="Description" data-node-default="Every space demands a unique balance of performance and design. Our collections are curated to match lifestyles.">
          {{sf_description}}
        </p>

        <!-- CTA Button -->
        <a data-node="sf_cta_link" data-node-type="url" data-node-label="CTA Link" data-node-default="products" href="{{sf_cta_link}}" class="inline-flex bg-[#965C00] text-white px-6 py-3 rounded-lg text-base font-medium hover:bg-[#8B6620] transition-colors">
          <span data-node="sf_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Explore Spaces">{{sf_cta_text}}</span>
        </a>
      </div>

      <!-- Right: Two Images -->
      <div class="flex-1 flex flex-col md:flex-row gap-4 lg:gap-6">
        <!-- Image 1 -->
        <div class="flex-1 overflow-hidden rounded-xl">
          <img data-node="sf_image_1" data-node-type="file" data-node-label="Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696198/seltrix/templates/ss-interior-flooring-template/spaces-feature-1.jpg" src="{{sf_image_1}}" alt="Flooring installation" class="w-full h-[280px] md:h-[350px] lg:h-[400px] xl:h-[448px] object-cover rounded-xl">
        </div>

        <!-- Image 2 -->
        <div class="flex-1 overflow-hidden rounded-xl">
          <img data-node="sf_image_2" data-node-type="file" data-node-label="Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696199/seltrix/templates/ss-interior-flooring-template/spaces-feature-2.jpg" src="{{sf_image_2}}" alt="Interior flooring" class="w-full h-[280px] md:h-[350px] lg:h-[400px] xl:h-[448px] object-cover rounded-xl">
        </div>
      </div>
    </div>
  </div>
</section>