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

  <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="../assets/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="../assets/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="../assets/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="../assets/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>
