<section data-component-type="Gallery" 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-collection">
  <div class>
    <!-- Centered Header -->
    <div class="flex flex-col items-center text-center max-w-2xl mx-auto mb-12 lg:mb-16">
      <!-- Tagline -->
      <p class="text-black bg-[#F8F9FA] text-base font-medium mb-4 px-4 py-2 rounded-xl w-fit" data-node="collection_tagline" data-node-type="text" data-node-label="Collection Tagline" data-node-default="Curated Surface Collections">
        {{collection_tagline}}
      </p>

      <!-- Title -->
      <h2 class="text-3xl md:text-4xl lg:text-[40px] font-bold text-gray-900 leading-tight mb-6" data-node="collection_title" data-node-type="text" data-node-label="Collection Title" data-node-default="Explore Versatile Flooring Styles for Every Space">
        {{collection_title}}
      </h2>

      <!-- Description -->
      <p class="text-[#4A6673] text-base leading-relaxed" data-node="collection_description" data-node-type="textarea" data-node-label="Collection Description" data-node-default="A versatile collection created for diverse interior moods and functions. From warm naturals to refined contemporary finishes.">
        {{collection_description}}
      </p>
    </div>

    <!-- Products Grid: 6 columns on desktop, 3 on tablet, 2 on mobile -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-6 lg:gap-8">
      <!-- Product 1 -->
      <a data-node="pc_1_link" data-node-type="url" data-node-label="Product 1 Link" data-node-default="products" href="{{pc_1_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_1_image" data-node-type="file" data-node-label="Product 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696160/seltrix/templates/ss-interior-flooring-template/product-1.png" src="{{pc_1_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_1_name" data-node-type="text" data-node-label="Product 1 Name" data-node-default="SPC Straight Plank - Oak">
          {{pc_1_name}}
        </p>
      </a>

      <!-- Product 2 -->
      <a data-node="pc_2_link" data-node-type="url" data-node-label="Product 2 Link" data-node-default="products" href="{{pc_2_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_2_image" data-node-type="file" data-node-label="Product 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696165/seltrix/templates/ss-interior-flooring-template/product-2.png" src="{{pc_2_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_2_name" data-node-type="text" data-node-label="Product 2 Name" data-node-default="SPC Plank - Chestnut">
          {{pc_2_name}}
        </p>
      </a>

      <!-- Product 3 -->
      <a data-node="pc_3_link" data-node-type="url" data-node-label="Product 3 Link" data-node-default="products" href="{{pc_3_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_3_image" data-node-type="file" data-node-label="Product 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696166/seltrix/templates/ss-interior-flooring-template/product-3.png" src="{{pc_3_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_3_name" data-node-type="text" data-node-label="Product 3 Name" data-node-default="Herringbone – Brown">
          {{pc_3_name}}
        </p>
      </a>

      <!-- Product 4 -->
      <a data-node="pc_4_link" data-node-type="url" data-node-label="Product 4 Link" data-node-default="products" href="{{pc_4_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_4_image" data-node-type="file" data-node-label="Product 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696168/seltrix/templates/ss-interior-flooring-template/product-4.png" src="{{pc_4_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_4_name" data-node-type="text" data-node-label="Product 4 Name" data-node-default="Herringbone – Light Ash">
          {{pc_4_name}}
        </p>
      </a>

      <!-- Product 5 -->
      <a data-node="pc_5_link" data-node-type="url" data-node-label="Product 5 Link" data-node-default="products" href="{{pc_5_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_5_image" data-node-type="file" data-node-label="Product 5 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696169/seltrix/templates/ss-interior-flooring-template/product-5.png" src="{{pc_5_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_5_name" data-node-type="text" data-node-label="Product 5 Name" data-node-default="Vinyl Plank – Urban Grey">
          {{pc_5_name}}
        </p>
      </a>

      <!-- Product 6 -->
      <a data-node="pc_6_link" data-node-type="url" data-node-label="Product 6 Link" data-node-default="products" href="{{pc_6_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_6_image" data-node-type="file" data-node-label="Product 6 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696170/seltrix/templates/ss-interior-flooring-template/product-6.png" src="{{pc_6_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_6_name" data-node-type="text" data-node-label="Product 6 Name" data-node-default="Vinyl Plank – Soft Beige">
          {{pc_6_name}}
        </p>
      </a>

      <!-- Product 7 -->
      <a data-node="pc_7_link" data-node-type="url" data-node-label="Product 7 Link" data-node-default="products" href="{{pc_7_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_7_image" data-node-type="file" data-node-label="Product 7 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696171/seltrix/templates/ss-interior-flooring-template/product-7.png" src="{{pc_7_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_7_name" data-node-type="text" data-node-label="Product 7 Name" data-node-default="Vinyl Tile – Concrete Stone">
          {{pc_7_name}}
        </p>
      </a>

      <!-- Product 8 -->
      <a data-node="pc_8_link" data-node-type="url" data-node-label="Product 8 Link" data-node-default="products" href="{{pc_8_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_8_image" data-node-type="file" data-node-label="Product 8 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696172/seltrix/templates/ss-interior-flooring-template/product-8.png" src="{{pc_8_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_8_name" data-node-type="text" data-node-label="Product 8 Name" data-node-default="Vinyl Tile – Marble White">
          {{pc_8_name}}
        </p>
      </a>

      <!-- Product 9 -->
      <a data-node="pc_9_link" data-node-type="url" data-node-label="Product 9 Link" data-node-default="products" href="{{pc_9_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_9_image" data-node-type="file" data-node-label="Product 9 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696174/seltrix/templates/ss-interior-flooring-template/product-9.png" src="{{pc_9_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_9_name" data-node-type="text" data-node-label="Product 9 Name" data-node-default="Rigid Flooring – Walnut">
          {{pc_9_name}}
        </p>
      </a>

      <!-- Product 10 -->
      <a data-node="pc_10_link" data-node-type="url" data-node-label="Product 10 Link" data-node-default="products" href="{{pc_10_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_10_image" data-node-type="file" data-node-label="Product 10 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696161/seltrix/templates/ss-interior-flooring-template/product-10.png" src="{{pc_10_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_10_name" data-node-type="text" data-node-label="Product 10 Name" data-node-default="Rigid Flooring – Pine">
          {{pc_10_name}}
        </p>
      </a>

      <!-- Product 11 -->
      <a data-node="pc_11_link" data-node-type="url" data-node-label="Product 11 Link" data-node-default="products" href="{{pc_11_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_11_image" data-node-type="file" data-node-label="Product 11 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696163/seltrix/templates/ss-interior-flooring-template/product-11.png" src="{{pc_11_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_11_name" data-node-type="text" data-node-label="Product 11 Name" data-node-default="Waterproof Vinyl">
          {{pc_11_name}}
        </p>
      </a>

      <!-- Product 12 -->
      <a data-node="pc_12_link" data-node-type="url" data-node-label="Product 12 Link" data-node-default="products" href="{{pc_12_link}}" class="flex flex-col items-center text-center group">
        <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden mb-4 bg-[#F8F9FA] group-hover:ring-2 group-hover:ring-[#965C00] transition-all">
          <img data-node="pc_12_image" data-node-type="file" data-node-label="Product 12 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696164/seltrix/templates/ss-interior-flooring-template/product-12.png" src="{{pc_12_image}}" alt="Product" class="w-full h-full object-cover">
        </div>
        <p class="text-base font-medium text-black group-hover:text-[#965C00] transition-colors" data-node="pc_12_name" data-node-type="text" data-node-label="Product 12 Name" data-node-default="Designer Vinyl – Oak">
          {{pc_12_name}}
        </p>
      </a>
    </div>
  </div>
</section>