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

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

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

      <h2
        class="text-[#193A3F] text-3xl md:text-4xl lg:text-5xl font-serif mb-4"
        data-node="services_title"
        data-node-type="text"
        data-node-label="Services Section Title"
        data-node-default="Everything You Need for a Perfect Japan Experience.">
        {{services_title}}
      </h2>

      <p
        class="text-[#7E7E7E] text-base md:text-lg"
        data-node="services_description"
        data-node-type="text"
        data-node-label="Services Section Description"
        data-node-default="We curate every trip with precision, ensuring you explore Japan’s highlights without the stress of planning.">
        {{services_description}}
      </p>

    </div>

    <!-- Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Card 1 -->
      <div class="group">

        <div class="overflow-hidden mb-4">
          <img
            src="{{service_1_image}}"
            data-node="service_1_image"
            data-node-type="file"
            data-node-label="Service 1 Image"
            data-node-default="../assets/service-1.png"
            alt="Service Image"
            class="w-full lg:h-[280px] h-[200px] object-cover transition-transform duration-500 group-hover:scale-105"
          />
        </div>

        <h3
          class="text-[#193A3F] font-medium mb-2"
          data-node="service_1_title"
          data-node-type="text"
          data-node-label="Service 1 Title"
          data-node-default="Flight & Hotel Booking">
          {{service_1_title}}
        </h3>

        <p
          class="text-sm text-[#7E7E7E]"
          data-node="service_1_desc"
          data-node-type="text"
          data-node-label="Service 1 Description"
          data-node-default="Best deals on flights, luxury stays, villas, and authentic ryokans.">
          {{service_1_desc}}
        </p>

      </div>

      <!-- Card 2 -->
      <div class="group">

        <div class="overflow-hidden mb-4">
          <img
            src="{{service_2_image}}"
            data-node="service_2_image"
            data-node-type="file"
            data-node-label="Service 2 Image"
            data-node-default="../assets/service-2.png"
            alt="Service Image"
            class="w-full lg:h-[280px] h-[200px] object-cover transition-transform duration-500 group-hover:scale-105"
          />
        </div>

        <h3
          class="text-[#193A3F] font-medium mb-2"
          data-node="service_2_title"
          data-node-type="text"
          data-node-label="Service 2 Title"
          data-node-default="Custom Itineraries">
          {{service_2_title}}
        </h3>

        <p
          class="text-sm text-[#7E7E7E]"
          data-node="service_2_desc"
          data-node-type="text"
          data-node-label="Service 2 Description"
          data-node-default="Designed around your interests — culture, food, nature, or adventure.">
          {{service_2_desc}}
        </p>

      </div>

      <!-- Card 3 -->
      <div class="group">

        <div class="overflow-hidden mb-4">
          <img
            src="{{service_3_image}}"
            data-node="service_3_image"
            data-node-type="file"
            data-node-label="Service 3 Image"
            data-node-default="../assets/service-3.png"
            alt="Service Image"
            class="w-full lg:h-[280px] h-[200px] object-cover transition-transform duration-500 group-hover:scale-105"
          />
        </div>

        <h3
          class="text-[#193A3F] font-medium mb-2"
          data-node="service_3_title"
          data-node-type="text"
          data-node-label="Service 3 Title"
          data-node-default="Guided Tours">
          {{service_3_title}}
        </h3>

        <p
          class="text-sm text-[#7E7E7E]"
          data-node="service_3_desc"
          data-node-type="text"
          data-node-label="Service 3 Description"
          data-node-default="City tours, heritage walks, food experiences, theme parks, and more.">
          {{service_3_desc}}
        </p>

      </div>

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