<section data-component-type="Content" class="bg-white py-16 lg:py-24" data-component-slug="ss-dental-about-values">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Header -->
    <div class="text-center mb-10">
      <!-- Badge -->
      <span data-node="about_values_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Values" class="inline-block px-4 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-700 mb-6">{{about_values_badge}}</span>

      <!-- Title -->
      <h2 data-node="about_values_title" data-node-type="textarea" data-node-label="Title" data-node-default="Principles That Shape Our Approach to Healthcare" class="text-2xl md:text-3xl lg:text-4xl font-medium text-gray-900 leading-tight max-w-2xl mx-auto">
        {{about_values_title}}
      </h2>
    </div>

    <!-- Value Tags -->
    <div class="flex flex-wrap justify-center gap-4">
      <!-- Tag 1: Patient-First Care -->
      <div class="flex items-center gap-3 px-2 py-2 border border-gray-200 rounded-lg bg-[#F9F9F9] hover:border-gray-300 transition-colors">
        <img data-node="value_1_icon" data-node-type="file" data-node-label="Value 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053624/seltrix/templates/ss-dental-template/value-icon-1.svg" src="{{value_1_icon}}" alt="Icon" class="w-10 h-10">
        <span data-node="value_1_text" data-node-type="text" data-node-label="Value 1 Text" data-node-default="Patient-First Care" class="text-sm font-medium text-gray-800">{{value_1_text}}</span>
      </div>

      <!-- Tag 2: Clinical Excellence Standards -->
      <div class="flex items-center gap-3 px-2 py-2 border border-gray-200 rounded-lg bg-[#F9F9F9] hover:border-gray-300 transition-colors">
        <img data-node="value_2_icon" data-node-type="file" data-node-label="Value 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053626/seltrix/templates/ss-dental-template/value-icon-2.svg" src="{{value_2_icon}}" alt="Icon" class="w-10 h-10">
        <span data-node="value_2_text" data-node-type="text" data-node-label="Value 2 Text" data-node-default="Clinical Excellence Standards" class="text-sm font-medium text-gray-800">{{value_2_text}}</span>
      </div>

      <!-- Tag 3: Ethical Medical Practice -->
      <div class="flex items-center gap-3 px-2 py-2 border border-gray-200 rounded-lg bg-[#F9F9F9] hover:border-gray-300 transition-colors">
        <img data-node="value_3_icon" data-node-type="file" data-node-label="Value 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053628/seltrix/templates/ss-dental-template/value-icon-3.svg" src="{{value_3_icon}}" alt="Icon" class="w-10 h-10">
        <span data-node="value_3_text" data-node-type="text" data-node-label="Value 3 Text" data-node-default="Ethical Medical Practice" class="text-sm font-medium text-gray-800">{{value_3_text}}</span>
      </div>

      <!-- Tag 4: Advanced Care Systems -->
      <div class="flex items-center gap-3 px-2 py-2 border border-gray-200 rounded-lg bg-[#F9F9F9] hover:border-gray-300 transition-colors">
        <img data-node="value_4_icon" data-node-type="file" data-node-label="Value 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053630/seltrix/templates/ss-dental-template/value-icon-4.svg" src="{{value_4_icon}}" alt="Icon" class="w-10 h-10">
        <span data-node="value_4_text" data-node-type="text" data-node-label="Value 4 Text" data-node-default="Advanced Care Systems" class="text-sm font-medium text-gray-800">{{value_4_text}}</span>
      </div>

      <!-- Tag 5: Compassionate Service Culture -->
      <div class="flex items-center gap-3 px-2 py-2 border border-gray-200 rounded-lg bg-[#F9F9F9] hover:border-gray-300 transition-colors">
        <img data-node="value_5_icon" data-node-type="file" data-node-label="Value 5 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053632/seltrix/templates/ss-dental-template/value-icon-5.svg" src="{{value_5_icon}}" alt="Icon" class="w-10 h-10">
        <span data-node="value_5_text" data-node-type="text" data-node-label="Value 5 Text" data-node-default="Compassionate Service Culture" class="text-sm font-medium text-gray-800">{{value_5_text}}</span>
      </div>
    </div>
  </div>
</section>