<section data-component-type="Content" class="py-16 lg:py-24" data-component-slug="ss-dental-about">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <div class="bg-[#FBFBFB] rounded-2xl p-6 lg:p-12 grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-start border border-gray-200">
      <!-- Left: Image -->
      <div class="order-2 lg:order-1">
        <img data-node="about_image" data-node-type="file" data-node-label="About Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053532/seltrix/templates/ss-dental-template/about-image.png" src="{{about_image}}" alt="Doctor with patient" class="w-full h-auto aspect-[815/864] rounded-xl object-cover">
      </div>

      <!-- Right: Content -->
      <div class="order-1 lg:order-2 lg:py-8">
        <!-- Badge -->
        <div class="mb-6">
          <span data-node="about_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Care Philosophy" class="inline-block px-4 py-2 text-sm text-gray-600 border border-gray-400 rounded-lg">{{about_badge}}</span>
        </div>

        <!-- Title -->
        <h2 data-node="about_title" data-node-type="textarea" data-node-label="Title" data-node-default="Putting Patients at the Heart of Care" class="text-3xl md:text-4xl lg:text-[42px] font-medium text-gray-900 leading-tight mb-6">
          {{about_title}}
        </h2>

        <!-- Description -->
        <p data-node="about_description" data-node-type="textarea" data-node-label="Description" data-node-default="We go beyond treatment by building trust, comfort, and confidence. Our approach blends medical excellence with human understanding." class="text-[#575757] text-base leading-relaxed mb-10">
          {{about_description}}
        </p>

        <!-- Feature Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10">
          <!-- Feature 1 -->
          <div>
            <div class="w-12 h-12 mb-4 flex items-center justify-center rounded-lg">
              <img data-node="feature_1_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053525/seltrix/templates/ss-dental-template/about-icon-1.svg" src="{{feature_1_icon}}" alt="Feature icon">
            </div>
            <h3 data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Experienced Team" class="text-lg font-semibold text-gray-900 mb-2">
              {{feature_1_title}}
            </h3>
            <p data-node="feature_1_description" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Doctors with years of hands-on clinical expertise and specialization." class="text-[#575757] text-sm leading-relaxed">
              {{feature_1_description}}
            </p>
          </div>

          <!-- Feature 2 -->
          <div>
            <div class="w-12 h-12 mb-4 flex items-center justify-center rounded-lg">
              <img data-node="feature_2_icon" data-node-type="file" data-node-label="Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053527/seltrix/templates/ss-dental-template/about-icon-2.svg" src="{{feature_2_icon}}" alt="Feature icon">
            </div>
            <h3 data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Ethical Practices" class="text-lg font-semibold text-gray-900 mb-2">
              {{feature_2_title}}
            </h3>
            <p data-node="feature_2_description" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Transparent diagnosis, clear and honest medical guidance." class="text-[#575757] text-sm leading-relaxed">
              {{feature_2_description}}
            </p>
          </div>
        </div>

        <!-- CTA Button -->
        <a data-node="about_cta_url" data-node-type="url" data-node-label="CTA Button URL" data-node-default="#" href="{{about_cta_url}}" class="inline-flex items-center px-6 py-3 bg-[#007C8A] text-white font-semibold rounded-lg hover:bg-[#006670] transition-all text-sm md:text-base shadow-[0_8px_30px_rgba(0,124,138,0.4)]">
          <span data-node="about_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Talk to a Specialist">{{about_cta_text}}</span>
        </a>
      </div>
    </div>
  </div>
</section>