<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-floor-types">
  <div class>
    <div class="flex flex-col gap-6">
      <!-- Floor Type 1: Cork Flooring -->
      <div class="bg-[#F8F8F8] rounded-xl p-4">
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 lg:gap-10 items-center">
          <!-- Image -->
          <img data-node="floor_1_image" data-node-type="file" data-node-label="Floor Type 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696147/seltrix/templates/ss-interior-flooring-template/floor-cork.png" src="{{floor_1_image}}" alt="Cork flooring" class="w-full aspect-[4/3] object-cover rounded-xl md:col-span-2">
          <!-- Content -->
          <div class="md:col-span-3">
            <h3 class="text-2xl md:text-3xl font-bold mb-4" data-node="floor_1_title" data-node-type="text" data-node-label="Floor Type 1 Title" data-node-default="Cork Flooring">
              {{floor_1_title}}
            </h3>
            <p class="text-[#535353] text-base leading-relaxed mb-6" data-node="floor_1_description" data-node-type="textarea" data-node-label="Floor Type 1 Description" data-node-default="Experience a warm, cushioned surface that naturally absorbs sound, creating peaceful, comforting spaces perfect for relaxation, reading, and everyday living. Enjoy a floor that's gentle underfoot and beautifully suited for family homes, wellness rooms, and serene interiors.">
              {{floor_1_description}}
            </p>
            <!-- Color Swatches -->
            <div class="flex items-center gap-2 mb-6">
              <span class="text-sm font-semibold">Colour:</span>
              <div class="flex gap-2">
                <span class="w-8 h-8 rounded-full bg-[{{floor_1_color_1}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_1_color_2}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_1_color_3}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_1_color_4}}]"></span>
              </div>
            </div>
            <!-- CTA Button -->
            <a data-node="floor_1_cta_link" data-node-type="url" data-node-label="Floor Type 1 CTA Link" data-node-default="products" href="{{floor_1_cta_link}}" class="inline-block bg-[#965C00] text-white px-8 py-3.5 rounded-xl text-[15px] font-semibold hover:bg-[#7a5410] transition-colors shadow-md hover:shadow-lg">
              <span data-node="floor_1_cta_text" data-node-type="text" data-node-label="Floor Type 1 CTA Text" data-node-default="Explore Floors">{{floor_1_cta_text}}</span>
            </a>
          </div>
        </div>
      </div>

      <!-- Floor Type 2: Hardwood Flooring -->
      <div class="bg-[#F8F8F8] rounded-xl p-4">
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 lg:gap-10 items-center">
          <!-- Image -->
          <img data-node="floor_2_image" data-node-type="file" data-node-label="Floor Type 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696149/seltrix/templates/ss-interior-flooring-template/floor-hardwood.png" src="{{floor_2_image}}" alt="Hardwood flooring" class="w-full aspect-[4/3] object-cover rounded-xl md:col-span-2">
          <!-- Content -->
          <div class="md:col-span-3">
            <h3 class="text-2xl md:text-3xl font-bold mb-4" data-node="floor_2_title" data-node-type="text" data-node-label="Floor Type 2 Title" data-node-default="Hardwood Flooring">
              {{floor_2_title}}
            </h3>
            <p class="text-[#535353] text-base leading-relaxed mb-6" data-node="floor_2_description" data-node-type="textarea" data-node-label="Floor Type 2 Description" data-node-default="Celebrate timeless craftsmanship with authentic grains, rich finishes, and natural character that brings depth, elegance, and lasting sophistication to any interior. Each plank ages gracefully, adding even more beauty over time and becoming a defining feature of your home's identity.">
              {{floor_2_description}}
            </p>
            <!-- Color Swatches -->
            <div class="flex items-center gap-2 mb-6">
              <span class="text-sm font-semibold">Colour:</span>
              <div class="flex gap-2">
                <span class="w-8 h-8 rounded-full bg-[{{floor_2_color_1}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_2_color_2}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_2_color_3}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_2_color_4}}]"></span>
              </div>
            </div>
            <!-- CTA Button -->
            <a data-node="floor_2_cta_link" data-node-type="url" data-node-label="Floor Type 2 CTA Link" data-node-default="products" href="{{floor_2_cta_link}}" class="inline-block bg-[#965C00] text-white px-8 py-3.5 rounded-xl text-[15px] font-semibold hover:bg-[#7a5410] transition-colors shadow-md hover:shadow-lg">
              <span data-node="floor_2_cta_text" data-node-type="text" data-node-label="Floor Type 2 CTA Text" data-node-default="Explore Floors">{{floor_2_cta_text}}</span>
            </a>
          </div>
        </div>
      </div>

      <!-- Floor Type 3: Bamboo Flooring -->
      <div class="bg-[#F8F8F8] rounded-xl p-4">
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 lg:gap-10 items-center">
          <!-- Image -->
          <img data-node="floor_3_image" data-node-type="file" data-node-label="Floor Type 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767696146/seltrix/templates/ss-interior-flooring-template/floor-bamboo.png" src="{{floor_3_image}}" alt="Bamboo flooring" class="w-full aspect-[4/3] object-cover rounded-xl md:col-span-2">
          <!-- Content -->
          <div class="md:col-span-3">
            <h3 class="text-2xl md:text-3xl font-bold mb-4" data-node="floor_3_title" data-node-type="text" data-node-label="Floor Type 3 Title" data-node-default="Bamboo Flooring">
              {{floor_3_title}}
            </h3>
            <p class="text-[#535353] text-base leading-relaxed mb-6" data-node="floor_3_description" data-node-type="textarea" data-node-label="Floor Type 3 Description" data-node-default="Choose an eco-friendly, ultra-durable material that blends modern design with organic beauty ideal for homes that embrace nature, sustainability, and contemporary style. Its resilient structure stands strong against daily wear, offering a long-lasting foundation for warm, breathable, modern living.">
              {{floor_3_description}}
            </p>
            <!-- Color Swatches -->
            <div class="flex items-center gap-2 mb-6">
              <span class="text-sm font-semibold">Colour:</span>
              <div class="flex gap-2">
                <span class="w-8 h-8 rounded-full bg-[{{floor_3_color_1}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_3_color_2}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_3_color_3}}]"></span>
                <span class="w-8 h-8 rounded-full bg-[{{floor_3_color_4}}]"></span>
              </div>
            </div>
            <!-- CTA Button -->
            <a data-node="floor_3_cta_link" data-node-type="url" data-node-label="Floor Type 3 CTA Link" data-node-default="products" href="{{floor_3_cta_link}}" class="inline-block bg-[#965C00] text-white px-8 py-3.5 rounded-xl text-[15px] font-semibold hover:bg-[#7a5410] transition-colors shadow-md hover:shadow-lg">
              <span data-node="floor_3_cta_text" data-node-type="text" data-node-label="Floor Type 3 CTA Text" data-node-default="Explore Floors">{{floor_3_cta_text}}</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>