<section data-component-type="Content" class="bg-white py-16 lg:py-24" data-component-slug="ss-dental-about-carousel">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Section Title -->
    <h2 data-node="about_carousel_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Built on Experience, Trust, and Medical Excellence" class="text-2xl md:text-3xl lg:text-4xl font-medium text-gray-900 leading-tight mb-10 max-w-lg">
      {{about_carousel_title}}
    </h2>

    <!-- Tab Navigation -->
    <div class="flex flex-wrap justify-between gap-8 mb-10 border-b border-gray-200" data-tabs-nav>
      <button data-tab="1" class="tab-btn pb-4 text-base font-medium text-[#007C8A] border-b-2 border-[#007C8A] transition-colors">
        <span data-node="tab_1_label" data-node-type="text" data-node-label="Tab 1 Label" data-node-default="Expertise">{{tab_1_label}}</span>
      </button>
      <button data-tab="2" class="tab-btn pb-4 text-base font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 transition-colors">
        <span data-node="tab_2_label" data-node-type="text" data-node-label="Tab 2 Label" data-node-default="Infrastructure">{{tab_2_label}}</span>
      </button>
      <button data-tab="3" class="tab-btn pb-4 text-base font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 transition-colors">
        <span data-node="tab_3_label" data-node-type="text" data-node-label="Tab 3 Label" data-node-default="Processes">{{tab_3_label}}</span>
      </button>
      <button data-tab="4" class="tab-btn pb-4 text-base font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 transition-colors">
        <span data-node="tab_4_label" data-node-type="text" data-node-label="Tab 4 Label" data-node-default="Responsibility">{{tab_4_label}}</span>
      </button>
    </div>

    <!-- Tab Content Panels -->
    <div data-tabs-content>
      <!-- Tab 1 Content -->
      <div data-tab-panel="1" class="tab-panel">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center mb-10">
          <img data-node="tab_1_image" data-node-type="file" data-node-label="Tab 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053553/seltrix/templates/ss-dental-template/carousel-1.png" src="{{tab_1_image}}" alt="Expertise" class="w-full h-auto rounded-2xl object-cover aspect-[4/3]">
          <div>
            <h3 data-node="tab_1_title" data-node-type="text" data-node-label="Tab 1 Title" data-node-default="Medical Expertise You Can Rely On" class="text-xl md:text-2xl lg:text-3xl font-medium text-gray-900 mb-4">
              {{tab_1_title}}
            </h3>
            <p data-node="tab_1_description" data-node-type="textarea" data-node-label="Tab 1 Description" data-node-default="Our hospital brings together experienced doctors, surgeons, and specialists across multiple disciplines. Each clinician follows evidence-based practices supported by continuous training and clinical reviews. This ensures accurate diagnosis, effective treatment plans, and consistent patient outcomes." class="text-[#575757] text-base leading-relaxed mb-6">
              {{tab_1_description}}
            </p>
            <a data-node="tab_1_cta_url" data-node-type="url" data-node-label="Tab 1 CTA URL" data-node-default="#" href="{{tab_1_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 shadow-[0_8px_30px_rgba(0,124,138,0.4)]">
              <span data-node="tab_1_cta_text" data-node-type="text" data-node-label="Tab 1 CTA Text" data-node-default="Meet Our Doctors">{{tab_1_cta_text}}</span>
            </a>
          </div>
        </div>
      </div>

      <!-- Tab 2 Content -->
      <div data-tab-panel="2" class="tab-panel hidden">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center mb-10">
          <img data-node="tab_2_image" data-node-type="file" data-node-label="Tab 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053553/seltrix/templates/ss-dental-template/carousel-1.png" src="{{tab_2_image}}" alt="Infrastructure" class="w-full h-auto rounded-2xl object-cover aspect-[4/3]">
          <div>
            <h3 data-node="tab_2_title" data-node-type="text" data-node-label="Tab 2 Title" data-node-default="Modern Facilities Built for Care" class="text-xl md:text-2xl lg:text-3xl font-medium text-gray-900 mb-4">
              {{tab_2_title}}
            </h3>
            <p data-node="tab_2_description" data-node-type="textarea" data-node-label="Tab 2 Description" data-node-default="Our hospital features state-of-the-art medical equipment, spacious patient rooms, and advanced diagnostic centers. Every facility is designed with patient comfort and clinical efficiency in mind." class="text-[#575757] text-base leading-relaxed mb-6">
              {{tab_2_description}}
            </p>
            <a data-node="tab_2_cta_url" data-node-type="url" data-node-label="Tab 2 CTA URL" data-node-default="#" href="{{tab_2_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 shadow-[0_8px_30px_rgba(0,124,138,0.4)]">
              <span data-node="tab_2_cta_text" data-node-type="text" data-node-label="Tab 2 CTA Text" data-node-default="View Our Facilities">{{tab_2_cta_text}}</span>
            </a>
          </div>
        </div>
      </div>

      <!-- Tab 3 Content -->
      <div data-tab-panel="3" class="tab-panel hidden">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center mb-10">
          <img data-node="tab_3_image" data-node-type="file" data-node-label="Tab 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053553/seltrix/templates/ss-dental-template/carousel-1.png" src="{{tab_3_image}}" alt="Processes" class="w-full h-auto rounded-2xl object-cover aspect-[4/3]">
          <div>
            <h3 data-node="tab_3_title" data-node-type="text" data-node-label="Tab 3 Title" data-node-default="Streamlined Healthcare Processes" class="text-xl md:text-2xl lg:text-3xl font-medium text-gray-900 mb-4">
              {{tab_3_title}}
            </h3>
            <p data-node="tab_3_description" data-node-type="textarea" data-node-label="Tab 3 Description" data-node-default="From appointment booking to discharge, our processes are designed to minimize wait times and maximize care quality. Digital records, coordinated departments, and clear communication ensure a seamless experience." class="text-[#575757] text-base leading-relaxed mb-6">
              {{tab_3_description}}
            </p>
            <a data-node="tab_3_cta_url" data-node-type="url" data-node-label="Tab 3 CTA URL" data-node-default="#" href="{{tab_3_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 shadow-[0_8px_30px_rgba(0,124,138,0.4)]">
              <span data-node="tab_3_cta_text" data-node-type="text" data-node-label="Tab 3 CTA Text" data-node-default="Learn Our Process">{{tab_3_cta_text}}</span>
            </a>
          </div>
        </div>
      </div>

      <!-- Tab 4 Content -->
      <div data-tab-panel="4" class="tab-panel hidden">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center mb-10">
          <img data-node="tab_4_image" data-node-type="file" data-node-label="Tab 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053553/seltrix/templates/ss-dental-template/carousel-1.png" src="{{tab_4_image}}" alt="Responsibility" class="w-full h-auto rounded-2xl object-cover aspect-[4/3]">
          <div>
            <h3 data-node="tab_4_title" data-node-type="text" data-node-label="Tab 4 Title" data-node-default="Committed to Ethical Healthcare" class="text-xl md:text-2xl lg:text-3xl font-medium text-gray-900 mb-4">
              {{tab_4_title}}
            </h3>
            <p data-node="tab_4_description" data-node-type="textarea" data-node-label="Tab 4 Description" data-node-default="We uphold the highest standards of medical ethics and patient rights. Transparency, informed consent, and compassionate decision-making guide every interaction in our hospital." class="text-[#575757] text-base leading-relaxed mb-6">
              {{tab_4_description}}
            </p>
            <a data-node="tab_4_cta_url" data-node-type="url" data-node-label="Tab 4 CTA URL" data-node-default="#" href="{{tab_4_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 shadow-[0_8px_30px_rgba(0,124,138,0.4)]">
              <span data-node="tab_4_cta_text" data-node-type="text" data-node-label="Tab 4 CTA Text" data-node-default="Our Commitment">{{tab_4_cta_text}}</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Full Width Bottom Image -->
    <img data-node="about_carousel_bottom_image" data-node-type="file" data-node-label="Bottom Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053554/seltrix/templates/ss-dental-template/carousel-bottom.png" src="{{about_carousel_bottom_image}}" alt="Healthcare Team" class="w-full h-auto rounded-2xl object-cover aspect-[16/7]">
  </div>
</section>