<section class="bg-[#FBF8F3] py-[100px]"
  data-component-type="Content">

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

    <!-- Top Content -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-12">

      <h2
        class="text-[#193A3F] text-3xl md:text-4xl lg:text-5xl font-serif leading-tight"
        data-node="discover_title"
        data-node-type="text"
        data-node-label="Discover Section Title"
        data-node-default="Discover the Heart of Japan Through Unforgettable">
        {{discover_title}}
      </h2>

      <p
        class="text-[#7E7E7E] text-base md:text-lg max-w-lg md:ml-auto"
        data-node="discover_description"
        data-node-type="text"
        data-node-label="Discover Section Description"
        data-node-default="Immerse yourself in Japan’s culture, nature, and traditions with thoughtfully curated journeys designed to inspire every traveller.">
        {{discover_description}}
      </p>

    </div>

    <!-- Image -->
    <div class="mb-16">
      <img
        src="{{discover_main_image}}"
        data-node="discover_main_image"
        data-node-type="file"
        data-node-label="Discover Main Image"
        data-node-default="../assets/japan-hero.png"
        alt="Discover Japan"
        class="w-full h-[260px] sm:h-[360px] lg:h-[460px] object-cover"
      />
    </div>

    <!-- Features -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">

      <!-- Feature 1 -->
      <div>
        <div class="mb-4 text-[#193A3F]">
          <img
            src="{{discover_1_icon}}"
            data-node="discover_1_icon"
            data-node-type="file"
            data-node-label="Discover Feature 1 Icon"
            data-node-default="../assets/person.png"
            class="w-[50px]"
          />
        </div>

        <h3
          class="text-[#193A3F] font-medium mb-2"
          data-node="discover_1_title"
          data-node-type="text"
          data-node-label="Discover Feature 1 Title"
          data-node-default="Cultural Connections">
          {{discover_1_title}}
        </h3>

        <p
          class="text-sm text-[#7E7E7E] leading-relaxed"
          data-node="discover_1_desc"
          data-node-type="text"
          data-node-label="Discover Feature 1 Description"
          data-node-default="Experience tea ceremonies, local festivals, and authentic village life guided by cultural experts.">
          {{discover_1_desc}}
        </p>
      </div>

      <!-- Feature 2 -->
      <div>
        <div class="mb-4 text-[#193A3F]">
          <img
            src="{{discover_2_icon}}"
            data-node="discover_2_icon"
            data-node-type="file"
            data-node-label="Discover Feature 2 Icon"
            data-node-default="../assets/note.png"
            class="w-[50px]"
          />
        </div>

        <h3
          class="text-[#193A3F] font-medium mb-2"
          data-node="discover_2_title"
          data-node-type="text"
          data-node-label="Discover Feature 2 Title"
          data-node-default="Scenic Excursions">
          {{discover_2_title}}
        </h3>

        <p
          class="text-sm text-[#7E7E7E] leading-relaxed"
          data-node="discover_2_desc"
          data-node-type="text"
          data-node-label="Discover Feature 2 Description"
          data-node-default="Explore serene gardens, mountain retreats, and breathtaking coastlines known for their timeless beauty.">
          {{discover_2_desc}}
        </p>
      </div>

      <!-- Feature 3 -->
      <div>
        <div class="mb-4 text-[#193A3F]">
          <img
            src="{{discover_3_icon}}"
            data-node="discover_3_icon"
            data-node-type="file"
            data-node-label="Discover Feature 3 Icon"
            data-node-default="../assets/pers2.png"
            class="w-[50px]"
          />
        </div>

        <h3
          class="text-[#193A3F] font-medium mb-2"
          data-node="discover_3_title"
          data-node-type="text"
          data-node-label="Discover Feature 3 Title"
          data-node-default="Seamless Travel Coordination">
          {{discover_3_title}}
        </h3>

        <p
          class="text-sm text-[#7E7E7E] leading-relaxed"
          data-node="discover_3_desc"
          data-node-type="text"
          data-node-label="Discover Feature 3 Description"
          data-node-default="From transport to daily planning, we handle the details so you can enjoy Japan without the stress.">
          {{discover_3_desc}}
        </p>
      </div>

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