<section data-component-type="Content" class="py-16 lg:py-24 bg-white" data-component-slug="ss-dental-services-benefits">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Hero Image -->
    <div class="mb-12">
      <img data-node="services_benefits_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053534/seltrix/templates/ss-dental-template/ambulance.png" src="{{services_benefits_image}}" alt="Ambulance Fleet" class="w-full aspect-[1729/865] object-cover rounded-2xl">
    </div>

    <!-- Header -->
    <div class="text-center mb-12">
      <!-- Badge -->
      <span data-node="services_benefits_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Benefits" class="inline-block px-4 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-700 mb-6">{{services_benefits_badge}}</span>

      <!-- Title -->
      <h2 data-node="services_benefits_title" data-node-type="textarea" data-node-label="Title" data-node-default="Why Our Medical Services Stand Apart" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight max-w-3xl mx-auto">
        {{services_benefits_title}}
      </h2>
    </div>

    <!-- Benefits Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
      <!-- Benefit 1 - Accuracy -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_1_icon" data-node-type="file" data-node-label="Benefit 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053535/seltrix/templates/ss-dental-template/benefit-icon-1.svg" src="{{benefit_1_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_1_title" data-node-type="text" data-node-label="Benefit 1 Title" data-node-default="Accuracy" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_1_title}}
          </h3>
          <p data-node="benefit_1_description" data-node-type="text" data-node-label="Benefit 1 Description" data-node-default="Precise diagnosis" class="text-[#575757] text-sm">
            {{benefit_1_description}}
          </p>
        </div>
      </div>

      <!-- Benefit 2 - Safety -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_2_icon" data-node-type="file" data-node-label="Benefit 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053538/seltrix/templates/ss-dental-template/benefit-icon-2.svg" src="{{benefit_2_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_2_title" data-node-type="text" data-node-label="Benefit 2 Title" data-node-default="Safety" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_2_title}}
          </h3>
          <p data-node="benefit_2_description" data-node-type="text" data-node-label="Benefit 2 Description" data-node-default="Strict care protocols" class="text-[#575757] text-sm">
            {{benefit_2_description}}
          </p>
        </div>
      </div>

      <!-- Benefit 3 - Expertise -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_3_icon" data-node-type="file" data-node-label="Benefit 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053539/seltrix/templates/ss-dental-template/benefit-icon-3.svg" src="{{benefit_3_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_3_title" data-node-type="text" data-node-label="Benefit 3 Title" data-node-default="Expertise" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_3_title}}
          </h3>
          <p data-node="benefit_3_description" data-node-type="text" data-node-label="Benefit 3 Description" data-node-default="Skilled specialists" class="text-[#575757] text-sm">
            {{benefit_3_description}}
          </p>
        </div>
      </div>

      <!-- Benefit 4 - Technology -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_4_icon" data-node-type="file" data-node-label="Benefit 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053541/seltrix/templates/ss-dental-template/benefit-icon-4.svg" src="{{benefit_4_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_4_title" data-node-type="text" data-node-label="Benefit 4 Title" data-node-default="Technology" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_4_title}}
          </h3>
          <p data-node="benefit_4_description" data-node-type="text" data-node-label="Benefit 4 Description" data-node-default="Modern equipment" class="text-[#575757] text-sm">
            {{benefit_4_description}}
          </p>
        </div>
      </div>

      <!-- Benefit 5 - Comfort -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_5_icon" data-node-type="file" data-node-label="Benefit 5 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053543/seltrix/templates/ss-dental-template/benefit-icon-5.svg" src="{{benefit_5_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_5_title" data-node-type="text" data-node-label="Benefit 5 Title" data-node-default="Comfort" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_5_title}}
          </h3>
          <p data-node="benefit_5_description" data-node-type="text" data-node-label="Benefit 5 Description" data-node-default="Patient-friendly spaces" class="text-[#575757] text-sm">
            {{benefit_5_description}}
          </p>
        </div>
      </div>

      <!-- Benefit 6 - Access -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_6_icon" data-node-type="file" data-node-label="Benefit 6 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053545/seltrix/templates/ss-dental-template/benefit-icon-6.svg" src="{{benefit_6_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_6_title" data-node-type="text" data-node-label="Benefit 6 Title" data-node-default="Access" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_6_title}}
          </h3>
          <p data-node="benefit_6_description" data-node-type="text" data-node-label="Benefit 6 Description" data-node-default="Easy scheduling" class="text-[#575757] text-sm">
            {{benefit_6_description}}
          </p>
        </div>
      </div>

      <!-- Benefit 7 - Guidance -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_7_icon" data-node-type="file" data-node-label="Benefit 7 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053547/seltrix/templates/ss-dental-template/benefit-icon-7.svg" src="{{benefit_7_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_7_title" data-node-type="text" data-node-label="Benefit 7 Title" data-node-default="Guidance" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_7_title}}
          </h3>
          <p data-node="benefit_7_description" data-node-type="text" data-node-label="Benefit 7 Description" data-node-default="Clear communication" class="text-[#575757] text-sm">
            {{benefit_7_description}}
          </p>
        </div>
      </div>

      <!-- Benefit 8 - Ethics -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_8_icon" data-node-type="file" data-node-label="Benefit 8 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053549/seltrix/templates/ss-dental-template/benefit-icon-8.svg" src="{{benefit_8_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_8_title" data-node-type="text" data-node-label="Benefit 8 Title" data-node-default="Ethics" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_8_title}}
          </h3>
          <p data-node="benefit_8_description" data-node-type="text" data-node-label="Benefit 8 Description" data-node-default="Responsible practice" class="text-[#575757] text-sm">
            {{benefit_8_description}}
          </p>
        </div>
      </div>

      <!-- Benefit 9 - Follow-up -->
      <div class="flex items-start gap-4">
        <div class="flex-shrink-0">
          <img data-node="benefit_9_icon" data-node-type="file" data-node-label="Benefit 9 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053551/seltrix/templates/ss-dental-template/benefit-icon-9.svg" src="{{benefit_9_icon}}" alt="Benefit Icon" class="w-16 h-16">
        </div>
        <div>
          <h3 data-node="benefit_9_title" data-node-type="text" data-node-label="Benefit 9 Title" data-node-default="Follow-up" class="text-lg font-semibold text-gray-900 mb-1">
            {{benefit_9_title}}
          </h3>
          <p data-node="benefit_9_description" data-node-type="text" data-node-label="Benefit 9 Description" data-node-default="Continuity of care" class="text-[#575757] text-sm">
            {{benefit_9_description}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>