<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-products">
  <div class>
    <!-- Header Row: Title left, Description right -->
    <div class="flex flex-col lg:flex-row justify-between gap-6 mb-12 lg:mb-16">
      <h2 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-gray-900 leading-tight max-w-md" data-node="products_title" data-node-type="text" data-node-label="Products Title" data-node-default="Discover Floors Made for Your Lifestyle.">
        {{products_title}}
      </h2>
      <p class="text-[#535353] text-base leading-relaxed max-w-md" data-node="products_description" data-node-type="textarea" data-node-label="Products Description" data-node-default="Choose from a curated selection of surfaces crafted for beauty and resilience, blending refined aesthetics with enduring strength to create floors that enhance your environment and age gracefully over time.">
        {{products_description}}
      </p>
    </div>

    <!-- Main Grid: Uses CSS order for proper mobile sequencing -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-8 xl:gap-10">
      <!-- Product 1 - order-1 on mobile, left column on desktop -->
      <div class="flex items-start gap-4 order-1 xl:order-none xl:col-start-1 xl:row-start-1">
        <span class="text-4xl font-light flex items-center justify-center bg-[#F8F8F8] rounded-lg h-[120px] w-[120px] shrink-0 text-black" data-node="product_1_number" data-node-type="text" data-node-label="Product 1 Number" data-node-default="1">{{product_1_number}}</span>
        <div>
          <h3 class="text-lg font-bold text-gray-900 mb-2" data-node="product_1_title" data-node-type="text" data-node-label="Product 1 Title" data-node-default="Engineered Hardwood">
            {{product_1_title}}
          </h3>
          <p class="text-[#535353] text-base leading-relaxed" data-node="product_1_description" data-node-type="textarea" data-node-label="Product 1 Description" data-node-default="Natural wood beauty with enhanced stability for modern homes, offering warmth and long-lasting performance.">
            {{product_1_description}}
          </p>
        </div>
      </div>

      <!-- Product 2 - order-2 on mobile, right column on desktop -->
      <div class="flex items-start gap-4 order-2 xl:order-none xl:col-start-3 xl:row-start-1 xl:flex-row-reverse">
        <span class="text-4xl font-light flex items-center justify-center bg-[#F8F8F8] rounded-lg h-[120px] w-[120px] shrink-0 text-black" data-node="product_2_number" data-node-type="text" data-node-label="Product 2 Number" data-node-default="2">{{product_2_number}}</span>
        <div class>
          <h3 class="text-lg font-bold text-gray-900 mb-2" data-node="product_2_title" data-node-type="text" data-node-label="Product 2 Title" data-node-default="StoneCore Tiles">
            {{product_2_title}}
          </h3>
          <p class="text-[#535353] text-base leading-relaxed" data-node="product_2_description" data-node-type="textarea" data-node-label="Product 2 Description" data-node-default="Elegant stone-finish tiles built for durability in high-traffic spaces, ensuring reliable performance.">
            {{product_2_description}}
          </p>
        </div>
      </div>

      <!-- Product 3 - order-3 on mobile, left column on desktop -->
      <div class="flex items-start gap-4 order-3 xl:order-none xl:col-start-1 xl:row-start-2">
        <span class="text-4xl font-light flex items-center justify-center bg-[#F8F8F8] rounded-lg h-[120px] w-[120px] shrink-0 text-black" data-node="product_3_number" data-node-type="text" data-node-label="Product 3 Number" data-node-default="3">{{product_3_number}}</span>
        <div>
          <h3 class="text-lg font-bold text-gray-900 mb-2" data-node="product_3_title" data-node-type="text" data-node-label="Product 3 Title" data-node-default="Laminate Flooring">
            {{product_3_title}}
          </h3>
          <p class="text-[#535353] text-base leading-relaxed" data-node="product_3_description" data-node-type="textarea" data-node-label="Product 3 Description" data-node-default="A stylish, scratch-resistant choice that blends affordability with premium texture for everyday living.">
            {{product_3_description}}
          </p>
        </div>
      </div>

      <!-- Product 4 - order-4 on mobile, right column on desktop -->
      <div class="flex items-start gap-4 order-4 xl:order-none xl:col-start-3 xl:row-start-2 xl:flex-row-reverse">
        <span class="text-4xl font-light flex items-center justify-center bg-[#F8F8F8] rounded-lg h-[120px] w-[120px] shrink-0 text-black" data-node="product_4_number" data-node-type="text" data-node-label="Product 4 Number" data-node-default="4">{{product_4_number}}</span>
        <div class>
          <h3 class="text-lg font-bold text-gray-900 mb-2" data-node="product_4_title" data-node-type="text" data-node-label="Product 4 Title" data-node-default="SoftStep Vinyl Planks">
            {{product_4_title}}
          </h3>
          <p class="text-[#535353] text-base leading-relaxed" data-node="product_4_description" data-node-type="textarea" data-node-label="Product 4 Description" data-node-default="Waterproof, versatile, and ideal for kitchens, hallways, and busy areas, resisting daily wear.">
            {{product_4_description}}
          </p>
        </div>
      </div>

      <!-- Product 5 - order-5 on mobile, left column on desktop -->
      <div class="flex items-start gap-4 order-5 xl:order-none xl:col-start-1 xl:row-start-3">
        <span class="text-4xl font-light flex items-center justify-center bg-[#F8F8F8] rounded-lg h-[120px] w-[120px] shrink-0 text-black" data-node="product_5_number" data-node-type="text" data-node-label="Product 5 Number" data-node-default="5">{{product_5_number}}</span>
        <div>
          <h3 class="text-lg font-bold text-gray-900 mb-2" data-node="product_5_title" data-node-type="text" data-node-label="Product 5 Title" data-node-default="EcoBamboo Panels">
            {{product_5_title}}
          </h3>
          <p class="text-[#535353] text-base leading-relaxed" data-node="product_5_description" data-node-type="textarea" data-node-label="Product 5 Description" data-node-default="Sustainable bamboo flooring that brings warmth and organic charm to contemporary spaces.">
            {{product_5_description}}
          </p>
        </div>
      </div>

      <!-- Product 6 - order-6 on mobile, right column on desktop -->
      <div class="flex items-start gap-4 order-6 xl:order-none xl:col-start-3 xl:row-start-3 xl:flex-row-reverse">
        <span class="text-4xl font-light flex items-center justify-center bg-[#F8F8F8] rounded-lg h-[120px] w-[120px] shrink-0 text-black" data-node="product_6_number" data-node-type="text" data-node-label="Product 6 Number" data-node-default="6">{{product_6_number}}</span>
        <div class>
          <h3 class="text-lg font-bold text-gray-900 mb-2" data-node="product_6_title" data-node-type="text" data-node-label="Product 6 Title" data-node-default="TerraMat Cork Flooring">
            {{product_6_title}}
          </h3>
          <p class="text-[#535353] text-base leading-relaxed" data-node="product_6_description" data-node-type="textarea" data-node-label="Product 6 Description" data-node-default="Soft underfoot, sound-absorbent, and perfect for cozy, quiet interiors with gentle comfort.">
            {{product_6_description}}
          </p>
        </div>
      </div>

      <!-- Center Column: Image - spans all 3 rows on desktop -->
      <div class="flex items-center justify-center order-first xl:order-none xl:col-start-2 xl:row-start-1 xl:row-span-3">
        <img data-node="products_image" data-node-type="file" data-node-label="Products Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696180/seltrix/templates/ss-interior-flooring-template/products-image.jpg" src="{{products_image}}" alt="Interior design showcase" class="w-full h-[350px] md:h-[400px] xl:h-full object-cover rounded-lg">
      </div>
    </div>
  </div>
</section>