<section class="bg-[#FBF8F3] px-6 py-10 lg:px-16 lg:py-16" data-component-type="Content" data-component-slug="ss-tourism-template-travel_packages">

  <div class="max-w-[90%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-10 items-center bg-[#143C40] p-[30px]">

    <!-- LEFT CONTENT -->
    <div class="text-white space-y-8">

      <!-- Heading -->
      <div>
        <h2 class="text-3xl lg:text-4xl font-serif mb-2" data-node="package_section_title" data-node-type="text" data-node-label="Package Section Title" data-node-default="Travel Packages">
          {{package_section_title}}
        </h2>

        <p class="text-sm lg:text-base text-gray-200 max-w-md" data-node="package_section_desc" data-node-type="textarea" data-node-label="Package Section Description" data-node-default="Great for tourism businesses offering services.">
          {{package_section_desc}}
        </p>
      </div>

      <!-- Packages Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">

        <!-- Package 1 -->
        <div>
          <h4 class="text-lg font-semibold mb-1" data-node="package_1_title" data-node-type="text" data-node-label="Package 1 Title" data-node-default="Day Trips">
            {{package_1_title}}
          </h4>

          <p class="text-sm text-gray-200" data-node="package_1_desc" data-node-type="textarea" data-node-label="Package 1 Description" data-node-default="Quick, guided local adventures">
            {{package_1_desc}}
          </p>
        </div>

        <!-- Package 2 -->
        <div>
          <h4 class="text-lg font-semibold mb-1" data-node="package_2_title" data-node-type="text" data-node-label="Package 2 Title" data-node-default="Multi-Day Packages">
            {{package_2_title}}
          </h4>

          <p class="text-sm text-gray-200" data-node="package_2_desc" data-node-type="textarea" data-node-label="Package 2 Description" data-node-default="Complete experiences with stays and tours">
            {{package_2_desc}}
          </p>
        </div>

        <!-- Package 3 -->
        <div>
          <h4 class="text-lg font-semibold mb-1" data-node="package_3_title" data-node-type="text" data-node-label="Package 3 Title" data-node-default="Custom Itineraries">
            {{package_3_title}}
          </h4>

          <p class="text-sm text-gray-200" data-node="package_3_desc" data-node-type="textarea" data-node-label="Package 3 Description" data-node-default="Fully personalized travel planning">
            {{package_3_desc}}
          </p>
        </div>

        <!-- Package 4 -->
        <div>
          <h4 class="text-lg font-semibold mb-1" data-node="package_4_title" data-node-type="text" data-node-label="Package 4 Title" data-node-default="Group Tours">
            {{package_4_title}}
          </h4>

          <p class="text-sm text-gray-200" data-node="package_4_desc" data-node-type="textarea" data-node-label="Package 4 Description" data-node-default="The food capital of Japan, known for vibrant street eats">
            {{package_4_desc}}
          </p>
        </div>

      </div>
    </div>

    <!-- RIGHT IMAGE -->
    <div class="w-full">
      <img src="{{package_image}}" data-node="package_image" data-node-type="file" data-node-label="Package Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740014/seltrix/templates/ss-tourism-template/travel-package.png" alt="Travel Package" class="w-full h-[260px] sm:h-[340px] lg:h-[420px] object-cover rounded-sm">
    </div>

  </div>
</section>