<section class="bg-[#FBF7F3] px-6 py-14 lg:px-16" data-component-type="Content" data-component-slug="ss-tourism-template-rating">

  <div class="max-w-[90%] mx-auto">

    <!-- Top Content -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-start mb-14">

      <!-- Rating + Avatars -->
      <div class="flex items-center gap-4">

        <!-- Avatars -->
        <div class="flex -space-x-3">
          <img src="{{user_avatar_1}}" data-node="user_avatar_1" data-node-type="file" data-node-label="User Avatar 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740018/seltrix/templates/ss-tourism-template/user1.jpg" class="w-10 h-10 rounded-full border-2 border-white">
          <img src="{{user_avatar_2}}" data-node="user_avatar_2" data-node-type="file" data-node-label="User Avatar 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740020/seltrix/templates/ss-tourism-template/user2.jpg" class="w-10 h-10 rounded-full border-2 border-white">
          <img src="{{user_avatar_3}}" data-node="user_avatar_3" data-node-type="file" data-node-label="User Avatar 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740021/seltrix/templates/ss-tourism-template/user3.jpg" class="w-10 h-10 rounded-full border-2 border-white">
          <img src="{{user_avatar_4}}" data-node="user_avatar_4" data-node-type="file" data-node-label="User Avatar 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740022/seltrix/templates/ss-tourism-template/user4.jpg" class="w-10 h-10 rounded-full border-2 border-white">
        </div>

        <!-- Rating -->
        <div class="flex items-center gap-1 text-[#193A3F]">
          <span class="text-lg font-semibold" data-node="rating_value" data-node-type="text" data-node-label="Rating Value" data-node-default="4.5/5">
            {{rating_value}}
          </span>

          <!-- Star icon (static) -->
          <svg class="w-5 h-5 text-[#F59E0B]" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.34 8.719c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"/>
          </svg>
        </div>
      </div>

      <!-- Testimonial -->
      <div>
        <p class="text-lg lg:text-xl text-[#7E7E7E] leading-relaxed" data-node="testimonial_text" data-node-type="text" data-node-label="Testimonial Text" data-node-default="“We explored Japan without any stress. The itinerary was thoughtful and perfectly timed. An unforgettable journey.”">
          {{testimonial_text}}
        </p>

        <p class="mt-4 text-gray-600 font-medium" data-node="testimonial_author" data-node-type="text" data-node-label="Testimonial Author" data-node-default="— Emily Carter">
          {{testimonial_author}}
        </p>
      </div>

    </div>

    <!-- Stats -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-8 text-center lg:text-left">

      <div>
        <h3 class="text-3xl font-bold text-[#193A3F]" data-node="stat_1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="150+">
          {{stat_1_value}}
        </h3>
        <p class="text-sm text-gray-600 mt-2" data-node="stat_1_label" data-node-type="text" data-node-label="Stat 1 Label" data-node-default="Curated Experiences">
          {{stat_1_label}}
        </p>
      </div>

      <div>
        <h3 class="text-3xl font-bold text-[#193A3F]" data-node="stat_2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="25+">
          {{stat_2_value}}
        </h3>
        <p class="text-sm text-gray-600 mt-2" data-node="stat_2_label" data-node-type="text" data-node-label="Stat 2 Label" data-node-default="Local Experts">
          {{stat_2_label}}
        </p>
      </div>

      <div>
        <h3 class="text-3xl font-bold text-[#193A3F]" data-node="stat_3_value" data-node-type="text" data-node-label="Stat 3 Value" data-node-default="12">
          {{stat_3_value}}
        </h3>
        <p class="text-sm text-gray-600 mt-2" data-node="stat_3_label" data-node-type="text" data-node-label="Stat 3 Label" data-node-default="Cultural Regions">
          {{stat_3_label}}
        </p>
      </div>

      <div>
        <h3 class="text-3xl font-bold text-[#193A3F]" data-node="stat_4_value" data-node-type="text" data-node-label="Stat 4 Value" data-node-default="4.5/5">
          {{stat_4_value}}
        </h3>
        <p class="text-sm text-gray-600 mt-2" data-node="stat_4_label" data-node-type="text" data-node-label="Stat 4 Label" data-node-default="Traveler Rating">
          {{stat_4_label}}
        </p>
      </div>

    </div>

  </div>
</section>