<section data-component-type="Hero" class="bg-gradient-to-b from-white to-[#007C8A50]" data-component-slug="ss-dental-hero">
  <!-- Hero Content -->
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24 lg:py-20 py-12">
    <div class="text-center max-w-2xl mx-auto">
      <!-- Badge -->
      <span data-node="hero_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Trusted Care" class="inline-block px-5 py-2 border border-gray-200 rounded-lg text-sm text-gray-500 mb-6">{{hero_badge}}</span>

      <!-- Title -->
      <h1 data-node="hero_title" data-node-type="textarea" data-node-label="Title" data-node-default="Quality Healthcare Backed by Medical Excellence" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight mb-5">
        {{hero_title}}
      </h1>

      <!-- Description -->
      <p data-node="hero_description" data-node-type="textarea" data-node-label="Description" data-node-default="Delivering expert medical care with compassion, precision, and modern technology. Your health journey begins with experienced doctors and patient-first treatment." class="text-base md:text-lg text-gray-500 leading-relaxed mb-8 max-w-xl mx-auto">
        {{hero_description}}
      </p>

      <!-- CTA Button -->
      <a data-node="hero_cta_url" data-node-type="url" data-node-label="CTA Button URL" data-node-default="#" href="{{hero_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="hero_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Book an Appointment">{{hero_cta_text}}</span>
      </a>
    </div>

    <!-- Hero Image -->
    <div class="mt-12 flex justify-center">
      <div class="bg-white rounded-xl p-2 max-w-5xl w-full">
        <img data-node="hero_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053576/seltrix/templates/ss-dental-template/hero-team.png" src="{{hero_image}}" alt="Our dental team" class="w-full h-auto rounded-xl object-cover">
      </div>
    </div>
  </div>
</section>