<section data-component-type="Features" 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-products-features">
  <div class>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
      <!-- Left Column: Tagline, Title, Description -->
      <div class="flex flex-col">
        <!-- Tagline -->
        <p class="bg-[#F8F9FA] w-fit px-4 py-2 rounded-xl text-[#535353] text-base font-medium mb-4" data-node="products_features_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="Crafted. Modern. Durable.">
          {{products_features_tagline}}
        </p>

        <!-- Title -->
        <h2 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-black leading-tight mb-6" data-node="products_features_title" data-node-type="text" data-node-label="Title" data-node-default="Designed for Contemporary Interiors">
          {{products_features_title}}
        </h2>

        <!-- Description -->
        <p class="text-[#4A6673] text-base leading-relaxed" data-node="products_features_description" data-node-type="textarea" data-node-label="Description" data-node-default="Our flooring solutions blend design precision with everyday performance. Built to complement modern spaces.">
          {{products_features_description}}
        </p>
      </div>

      <!-- Right Column: 4 Feature Cards in 2x2 Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <!-- Feature Card 1: Durability -->
        <div class="bg-[#F8F9FA] rounded-xl p-6 border border-[#DCDCDC]">
          <h3 class="text-base font-bold text-black mb-3" data-node="pf_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Durability">
            {{pf_1_title}}
          </h3>
          <p class="text-[#4A6673] text-base leading-relaxed" data-node="pf_1_description" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Engineered to withstand daily wear without losing visual integrity. Built to perform consistently.">
            {{pf_1_description}}
          </p>
        </div>

        <!-- Feature Card 2: Water-Resistant -->
        <div class="bg-[#F8F9FA] rounded-xl p-6 border border-[#DCDCDC]">
          <h3 class="text-base font-bold text-black mb-3" data-node="pf_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Water-Resistant">
            {{pf_2_title}}
          </h3>
          <p class="text-[#4A6673] text-base leading-relaxed" data-node="pf_2_description" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Ideal for kitchens, living spaces, and high-use interiors. Protects against spills, moisture, and humidity.">
            {{pf_2_description}}
          </p>
        </div>

        <!-- Feature Card 3: Easy Install -->
        <div class="bg-[#F8F9FA] rounded-xl p-6 border border-[#DCDCDC]">
          <h3 class="text-base font-bold text-black mb-3" data-node="pf_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Easy Install">
            {{pf_3_title}}
          </h3>
          <p class="text-[#4A6673] text-base leading-relaxed" data-node="pf_3_description" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Smart click systems ensure seamless, hassle-free fitting. Reduces installation time.">
            {{pf_3_description}}
          </p>
        </div>

        <!-- Feature Card 4: Low Maintenance -->
        <div class="bg-[#F8F9FA] rounded-xl p-6 border border-[#DCDCDC]">
          <h3 class="text-base font-bold text-black mb-3" data-node="pf_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Low Maintenance">
            {{pf_4_title}}
          </h3>
          <p class="text-[#4A6673] text-base leading-relaxed" data-node="pf_4_description" data-node-type="textarea" data-node-label="Feature 4 Description" data-node-default="Minimal upkeep, maximum long-term aesthetic value. Designed to stay clean, and polished.">
            {{pf_4_description}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>