<section class="bg-[#FAF7F2] py-16 sm:py-20 md:py-24"
  data-component-type="Content">

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

    <!-- Top Heading Row -->
    <div class="grid grid-cols-1 lg:grid-cols-[1.5fr_2fr] gap-12 mb-16">

      <!-- Left Heading -->
      <h2 class="font-serif text-3xl sm:text-4xl md:text-5xl leading-tight text-[#193A3F]"
        data-node="section_heading"
        data-node-type="textarea"
        data-node-label="Section Heading"
        data-node-default="Start Your Japan Journey With These Must-See Destinations.">
        {{section_heading}}
      </h2>

      <!-- Right Description -->
      <p class="text-sm sm:text-base text-[#7E7E7E] max-w-md lg:ml-auto"
        data-node="section_description"
        data-node-type="textarea"
        data-node-label="Section Description"
        data-node-default="Japan’s diverse regions offer experiences for every kind of traveler — from vibrant cities to peaceful retreat towns. Explore iconic landmarks, cultural districts, scenic nature spots.">
        {{section_description}}
      </p>

    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-[1.5fr_2fr] lg:gap-[150px] gap-[50px] items-center">

      <!-- LEFT: Image Stack -->
      <div class="space-y-6">

        <img
          src="{{image_1}}"
          data-node="image_1"
          data-node-type="file"
          data-node-label="Destination Image 1"
          data-node-default="../assets/start1.png"
          alt="Destination Image 1"
          class="w-full lg:w-[500px] object-cover rounded-sm"
        />

        <img
          src="{{image_2}}"
          data-node="image_2"
          data-node-type="file"
          data-node-label="Destination Image 2"
          data-node-default="../assets/start2.png"
          alt="Destination Image 2"
          class="w-full lg:w-[500px] object-cover rounded-sm"
        />

        <img
          src="{{image_3}}"
          data-node="image_3"
          data-node-type="file"
          data-node-label="Destination Image 3"
          data-node-default="../assets/start3.png"
          alt="Destination Image 3"
          class="w-full lg:w-[500px] object-cover rounded-sm"
        />

      </div>

      <!-- RIGHT: Destination List -->
      <div class="space-y-12">

        <!-- Destination 1 -->
        <div>
          <p class="text-3xl sm:text-4xl md:text-5xl text-[#193A3F] mb-2"
            data-node="dest_1_number"
            data-node-type="text"
            data-node-label="Destination 1 Number"
            data-node-default="01">
            {{dest_1_number}}
          </p>

          <h3 class="text-lg font-semibold text-[#193A3F] mb-2"
            data-node="dest_1_title"
            data-node-type="text"
            data-node-label="Destination 1 Title"
            data-node-default="Tokyo">
            {{dest_1_title}}
          </h3>

          <p class="text-sm text-[#7E7E7E] leading-relaxed max-w-md"
            data-node="dest_1_desc"
            data-node-type="textarea"
            data-node-label="Destination 1 Description"
            data-node-default="A futuristic metropolis filled with culture, nightlife, shopping, and world-famous dining. Tokyo blends ancient traditions with cutting-edge experiences.">
            {{dest_1_desc}}
          </p>
        </div>

        <!-- Destination 2 -->
        <div>
          <p class="text-3xl sm:text-4xl md:text-5xl text-[#193A3F] mb-2"
            data-node="dest_2_number"
            data-node-type="text"
            data-node-label="Destination 2 Number"
            data-node-default="02">
            {{dest_2_number}}
          </p>

          <h3 class="text-lg font-semibold text-[#193A3F] mb-2"
            data-node="dest_2_title"
            data-node-type="text"
            data-node-label="Destination 2 Title"
            data-node-default="Kyoto">
            {{dest_2_title}}
          </h3>

          <p class="text-sm text-[#7E7E7E] leading-relaxed max-w-md"
            data-node="dest_2_desc"
            data-node-type="textarea"
            data-node-label="Destination 2 Description"
            data-node-default="The cultural heart of Japan, home to ancient temples, geisha districts, peaceful gardens, and centuries-old traditions.">
            {{dest_2_desc}}
          </p>
        </div>

        <!-- Destination 3 -->
        <div>
          <p class="text-3xl sm:text-4xl md:text-5xl text-[#193A3F] mb-2"
            data-node="dest_3_number"
            data-node-type="text"
            data-node-label="Destination 3 Number"
            data-node-default="03">
            {{dest_3_number}}
          </p>

          <h3 class="text-lg font-semibold text-[#193A3F] mb-2"
            data-node="dest_3_title"
            data-node-type="text"
            data-node-label="Destination 3 Title"
            data-node-default="Osaka">
            {{dest_3_title}}
          </h3>

          <p class="text-sm text-[#7E7E7E] leading-relaxed max-w-md"
            data-node="dest_3_desc"
            data-node-type="textarea"
            data-node-label="Destination 3 Description"
            data-node-default="The food capital of Japan, known for vibrant street eats, lively entertainment districts, and warm, welcoming locals.">
            {{dest_3_desc}}
          </p>
        </div>

      </div>
    </div>

  </div>
</section>
