<section class="bg-[#FBF8F3] py-16 sm:py-10 lg:py-10"
  data-component-type="Content">

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

    <!-- Heading -->
    <div class="text-center max-w-3xl mx-auto mb-14">

      <!-- Small Label -->
      <div class="flex items-center justify-center gap-3 mb-4">
        <img src="../assets/leftline.png" class="w-[5%] md:w-[35%]" />

        <p class="text-sm tracking-wide uppercase text-[#193A3F]"
           data-node="small_label"
           data-node-type="text"
           data-node-label="Small Label"
           data-node-default="Your Travel Partner">
          {{small_label}}
        </p>

        <img src="../assets/rightline.png" class="w-[5%] md:w-[35%]" />
      </div>

      <!-- Heading -->
      <h2 class="font-serif text-3xl sm:text-4xl lg:text-5xl text-[#193A3F] leading-tight mb-4"
          data-node="section_heading"
          data-node-type="textarea"
          data-node-label="Section Heading"
          data-node-default="We Make Your Japan Trip Simple, Safe, and Truly Personal.">
        {{section_heading}}
      </h2>

      <!-- Description -->
      <p class="text-sm sm:text-base text-[#7E7E7E] max-w-2xl mx-auto"
         data-node="section_description"
         data-node-type="textarea"
         data-node-label="Section Description"
         data-node-default="We take care of everything — flights, stays, tours, and support so your Japan trip feels effortless and worry-free.">
        {{section_description}}
      </p>
    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] gap-12 items-start">

      <!-- Left Image -->
      <div class="overflow-hidden rounded-sm xl:max-w-[900px]">
        <img
          src="{{main_image}}"
          data-node="main_image"
          data-node-type="file"
          data-node-label="Main Image"
          data-node-default="../assets/japan-path.png"
          alt="Japan travel"
          class="w-full lg:h-[470px] xl:h-[400px] object-cover"
        />
      </div>

      <!-- Right Features -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Feature 1 (Active) -->
        <div class="bg-[#193A3F] text-white p-6 flex flex-col gap-3">
          <img src="{{feature_1_icon}}"
               data-node="feature_1_icon"
               data-node-type="file"
               data-node-label="Feature 1 Icon"
               data-node-default="../assets/end.png"
               class="w-10" />

          <h4 class="font-medium text-lg"
              data-node="feature_1_title"
              data-node-type="text"
              data-node-label="Feature 1 Title"
              data-node-default="End-to-End Planning">
            {{feature_1_title}}
          </h4>

          <p class="text-sm text-[#BDBDBD]"
             data-node="feature_1_desc"
             data-node-type="textarea"
             data-node-label="Feature 1 Description"
             data-node-default="Flights, hotels, tours, experiences — everything arranged seamlessly.">
            {{feature_1_desc}}
          </p>
        </div>

        <!-- Feature 2 -->
        <div class="border border-[#C7D2D1] p-6 flex flex-col gap-3">
          <img src="{{feature_2_icon}}"
               data-node="feature_2_icon"
               data-node-type="file"
               data-node-label="Feature 2 Icon"
               data-node-default="../assets/sec.png"
               class="w-10" />

          <h4 class="font-medium text-[#193A3F]"
              data-node="feature_2_title"
              data-node-type="text"
              data-node-label="Feature 2 Title"
              data-node-default="Curated Itineraries">
            {{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="We design travel plans based on your interests, schedule, and budget.">
            {{feature_2_desc}}
          </p>
        </div>

        <!-- Feature 3 -->
        <div class="border border-[#C7D2D1] p-6 flex flex-col gap-3">
          <img src="{{feature_3_icon}}"
               data-node="feature_3_icon"
               data-node-type="file"
               data-node-label="Feature 3 Icon"
               data-node-default="../assets/thir.png"
               class="w-10" />

          <h4 class="font-medium text-[#193A3F]"
              data-node="feature_3_title"
              data-node-type="text"
              data-node-label="Feature 3 Title"
              data-node-default="Local Insights">
            {{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="Explore Japan like a local with handpicked recommendations.">
            {{feature_3_desc}}
          </p>
        </div>

        <!-- Feature 4 -->
        <div class="border border-[#C7D2D1] p-6 flex flex-col gap-3">
          <img src="{{feature_4_icon}}"
               data-node="feature_4_icon"
               data-node-type="file"
               data-node-label="Feature 4 Icon"
               data-node-default="../assets/for.png"
               class="w-10" />

          <h4 class="font-medium text-[#193A3F]"
              data-node="feature_4_title"
              data-node-type="text"
              data-node-label="Feature 4 Title"
              data-node-default="24/7 Assistance">
            {{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="Our team is always available to help you throughout your journey.">
            {{feature_4_desc}}
          </p>
        </div>

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