<section data-component-type="Content" class="bg-white py-16 lg:py-24" data-component-slug="ss-dental-about-commitment">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Header Row -->
    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-12 lg:mb-16">
      <!-- Left: Label -->
      <div class="flex items-center gap-3 lg:w-1/4">
        <span class="w-2 h-2 bg-gray-900 rounded-full"></span>
        <span data-node="commitment_label" data-node-type="text" data-node-label="Section Label" data-node-default="Commitment" class="text-xl font-medium text-gray-900">{{commitment_label}}</span>
      </div>

      <!-- Center: Title -->
      <h2 data-node="commitment_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Care That Extends Beyond Treatment" class="text-2xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight lg:w-2/4 lg:text-left">
        {{commitment_title}}
      </h2>

      <!-- Right: Description -->
      <p data-node="commitment_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="We aim to build long-term trust through responsible healthcare delivery and continuous improvement. Our focus remains on safety, and transparency." class="text-[#617280] text-base leading-relaxed lg:w-1/4 lg:text-left">
        {{commitment_description}}
      </p>
    </div>

    <!-- Content Grid: Image + Items -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
      <!-- Left: Image -->
      <div class="relative">
        <img data-node="commitment_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053558/seltrix/templates/ss-dental-template/commitment-building.png" src="{{commitment_image}}" alt="Hospital Building" class="w-full h-auto rounded-2xl object-cover aspect-[4/5]">
      </div>

      <!-- Right: Numbered Items -->
      <div class="flex flex-col justify-center space-y-10 lg:space-y-16">
        <!-- Item 1 -->
        <div class="border-b border-gray-200 pb-8">
          <div class="flex items-start gap-6">
            <span data-node="item_1_number" data-node-type="text" data-node-label="Item 1 Number" data-node-default="01" class="text-3xl lg:text-5xl font-light text-black">{{item_1_number}}</span>
            <div>
              <h3 data-node="item_1_title" data-node-type="text" data-node-label="Item 1 Title" data-node-default="Patient Safety" class="text-xl lg:text-5xl font-medium text-black mb-3">
                {{item_1_title}}
              </h3>
              <p data-node="item_1_description" data-node-type="textarea" data-node-label="Item 1 Description" data-node-default="Infection control protocols, clinical checklists, and round-the-clock monitoring ensure a safe environment at every stage of care. From admission to recovery, patient safety remains our highest non-negotiable priority." class="text-[#617280] text-sm lg:text-base leading-relaxed">
                {{item_1_description}}
              </p>
            </div>
          </div>
        </div>

        <!-- Item 2 -->
        <div class="border-b border-gray-200 pb-8">
          <div class="flex items-start gap-6">
            <span data-node="item_2_number" data-node-type="text" data-node-label="Item 2 Number" data-node-default="02" class="text-3xl lg:text-5xl font-light text-black">{{item_2_number}}</span>
            <div>
              <h3 data-node="item_2_title" data-node-type="text" data-node-label="Item 2 Title" data-node-default="Clinical Quality" class="text-xl lg:text-5xl font-medium text-black mb-3">
                {{item_2_title}}
              </h3>
              <p data-node="item_2_description" data-node-type="textarea" data-node-label="Item 2 Description" data-node-default="Our treatments are guided by medical evidence, specialist oversight, and advanced diagnostic support. Regular audits, modern infrastructure, and skilled teams help us deliver consistent, high-quality outcomes." class="text-[#617280] text-sm lg:text-base leading-relaxed">
                {{item_2_description}}
              </p>
            </div>
          </div>
        </div>

        <!-- Item 3 -->
        <div>
          <div class="flex items-start gap-6">
            <span data-node="item_3_number" data-node-type="text" data-node-label="Item 3 Number" data-node-default="03" class="text-3xl lg:text-5xl font-light text-black">{{item_3_number}}</span>
            <div>
              <h3 data-node="item_3_title" data-node-type="text" data-node-label="Item 3 Title" data-node-default="Continuity Of Care" class="text-xl lg:text-5xl font-medium text-black mb-3">
                {{item_3_title}}
              </h3>
              <p data-node="item_3_description" data-node-type="textarea" data-node-label="Item 3 Description" data-node-default="We provide coordinated treatment plans, clear follow-ups, and post-discharge support for complete recovery. Patients benefit from seamless care across departments without gaps or uncertainty." class="text-[#617280] text-sm lg:text-base leading-relaxed">
                {{item_3_description}}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>