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

  <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="../assets/travel-package.png"
        alt="Travel Package"
        class="w-full h-[260px] sm:h-[340px] lg:h-[420px] object-cover rounded-sm"
      />
    </div>

  </div>
</section>
