<section data-component-type="Content" class="bg-white" data-component-slug="ss-dental-features">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 py-16 lg:py-24">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
      <!-- Left Content -->
      <div>
        <!-- Badge -->
        <span data-node="features_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Our Promise" class="inline-block px-5 py-2 border border-gray-200 rounded-lg text-sm text-gray-500 mb-6">{{features_badge}}</span>

        <!-- Title -->
        <h2 data-node="features_title" data-node-type="textarea" data-node-label="Title" data-node-default="Comprehensive Care for Every Life Stage" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight mb-6">
          {{features_title}}
        </h2>

        <!-- Description -->
        <p data-node="features_description" data-node-type="textarea" data-node-label="Description" data-node-default="From preventive care to advanced treatments, we focus on complete well-being. Every patient receives personalized attention backed by clinical excellence." class="text-base md:text-lg text-[#575757] leading-relaxed mb-8">
          {{features_description}}
        </p>

        <!-- Feature List -->
        <div class="space-y-4 mb-8">
          <!-- Feature 1 -->
          <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-black flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            <span data-node="feature_1_text" data-node-type="text" data-node-label="Feature 1 Text" data-node-default="Trusted by families for accurate diagnosis and ethical care" class="text-black text-base">{{feature_1_text}}</span>
          </div>

          <!-- Feature 2 -->
          <div class="flex items-center gap-3">
            <svg class="w-5 h-5 text-black flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            <span data-node="feature_2_text" data-node-type="text" data-node-label="Feature 2 Text" data-node-default="Equipped with modern facilities and experienced specialists" class="text-black text-base">{{feature_2_text}}</span>
          </div>
        </div>

        <!-- CTA Button -->
        <a data-node="features_cta_url" data-node-type="url" data-node-label="CTA Button URL" data-node-default="#" href="{{features_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="features_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Explore Services">{{features_cta_text}}</span>
        </a>
      </div>

      <!-- Right Image -->
      <div class="flex justify-center lg:justify-end">
        <img data-node="features_image" data-node-type="file" data-node-label="Features Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053570/seltrix/templates/ss-dental-template/features-team.png" src="{{features_image}}" alt="Our team" class="w-auto h-full aspect-[854/552] rounded-xl object-cover shadow-lg">
      </div>
    </div>
  </div>
</section>