<section class="bg-[#FAF7F3] py-16 md:py-[50px]"
  data-component-type="Content">

  <div class="max-w-[90%] mx-auto px-4 ">
    <div class="grid lg:grid-cols-2 lg:gap-12 md:gap-2 gap-3 items-start ">

      <!-- LEFT IMAGE -->
      <div class="w-[100%] lg:w-[80%]  lg:py-0 py-10 ">
        <img
          src="{{left_image}}"
          data-node="left_image"
          data-node-type="file"
          data-node-label="Left Image"
          data-node-default="../assets/japan-castle.png"
          alt="Japan Castle"
          class="w-full md:h-[650px]  h-[300px] object-fit rounded-sm"
        />
      </div>

      <!-- RIGHT CONTENT -->
      <div class="max-w-[100%]">

        <!-- Small label -->
        <div class="flex gap-5">
          <p class="text-sm tracking-wide text-[#193A3F] uppercase mb-3 flex items-center gap-2"
             data-node="small_label"
             data-node-type="text"
             data-node-label="Small Label"
             data-node-default="Trusted Travel Experts">
            {{small_label}}
          </p>

          <img
            src="../assets/line.png"
          
            class="w-[50%] mt-[3px] h-full object-fit rounded-sm"
          />
        </div>

        <!-- Title -->
        <h2 class="text-3xl md:text-4xl lg:text-5xl text-[#193A3F] mb-10"
            data-node="section_title"
            data-node-type="text"
            data-node-label="Section Title"
            data-node-default="Your Journey to Japan Begins With the Right Travel Partner.">
         {{section_title}}
        </h2>

        <!-- FEATURES GRID -->
        <div class="grid sm:grid-cols-2 gap-8">

          <!-- Feature 1 -->
          <div class="flex flex-col gap-4">
            <img src="{{feature_1_icon}}"
              data-node="feature_1_icon"
              data-node-type="file"
              data-node-label="Feature 1 Icon"
              data-node-default="../assets/person.png"
              class="w-[50px]" />

            <h4 class="font-semibold text-[#193A3F]"
              data-node="feature_1_title"
              data-node-type="text"
              data-node-label="Feature 1 Title"
              data-node-default="Expert-Guided Planning">
             {{feature_1_title}}
            </h4>

            <p class="text-sm text-[#7E7E7E]"
              data-node="feature_1_desc"
              data-node-type="textarea"
              data-node-label="Feature 1 Description"
              data-node-default="We curate every trip with precision, ensuring you explore Japan’s highlights without the stress of planning.">
              {{feature_1_desc}}
            </p>
          </div>

          <!-- Feature 2 -->
          <div class="flex flex-col gap-4">
            <img src="{{feature_2_icon}}"
              data-node="feature_2_icon"
              data-node-type="file"
              data-node-label="Feature 2 Icon"
              data-node-default="../assets/note.png"
              class="w-[50px]" />

            <h4 class="font-semibold text-[#193A3F]"
              data-node="feature_2_title"
              data-node-type="text"
              data-node-label="Feature 2 Title"
              data-node-default="Tailored Travel Experiences">
             {{feature_2_title}}
            </h4>

            <p class="text-sm text-[#7E7E7E]"
              data-node="feature_2_desc"
              data-node-type="textarea"
              data-node-label="Feature 2 Description"
              data-node-default="Every itinerary is customized — culture, nature, luxury stays, or adventure.">
           {{feature_2_desc}}
            </p>
          </div>

          <!-- Feature 3 -->
          <div class="flex flex-col gap-4">
            <img src="{{feature_3_icon}}"
              data-node="feature_3_icon"
              data-node-type="file"
              data-node-label="Feature 3 Icon"
              data-node-default="../assets/pers2.png"
              class="w-[50px]" />

            <h4 class="font-semibold text-[#193A3F]"
              data-node="feature_3_title"
              data-node-type="text"
              data-node-label="Feature 3 Title"
              data-node-default="Hassle-Free Support">
              {{feature_3_title}}
            </h4>

            <p class="text-sm text-[#7E7E7E]"
              data-node="feature_3_desc"
              data-node-type="textarea"
              data-node-label="Feature 3 Description"
              data-node-default="From bookings to on-ground assistance, we support you from start to finish.">
           {{feature_3_desc}}
            </p>
          </div>

          <!-- Feature 4 -->
          <div class="flex flex-col gap-4">
            <img src="{{feature_4_icon}}"
              data-node="feature_4_icon"
              data-node-type="file"
              data-node-label="Feature 4 Icon"
              data-node-default="../assets/verify.png"
              class="w-[50px]" />

            <h4 class="font-semibold text-[#193A3F]"
              data-node="feature_4_title"
              data-node-type="text"
              data-node-label="Feature 4 Title"
              data-node-default="Trusted by Thousands">
              {{feature_4_title}}
            </h4>

            <p class="text-sm text-[#7E7E7E]"
              data-node="feature_4_desc"
              data-node-type="textarea"
              data-node-label="Feature 4 Description"
              data-node-default="Families, couples, and solo travelers rely on us for seamless Japan journeys.">
              {{feature_4_desc}}
            </p>
          </div>

        </div>
      </div>

    </div>
  </div>
</section>
