<section data-component-type="Content" class="py-16 md:py-24 bg-white" data-component-slug="ss-amusement-park-promise-section">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Header Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-16 items-start border-t border-blue-500/30 pt-16 relative">
      <!-- Decorative Top dashed line container if needed by design, but image shows dashed lines. 
           Tailwind doesn't have partial borders easily, simplifying to clean layout first or using pseudo-elements.
           The image shows a specific layout grid with dashed blue lines maybe as a design guide or actual border?
           Assuming it's design guide lines (blue dotted) from the screenshot tool, but looking closer 
           they frame the content. I will implement a clean layout without the blue dotted lines unless requested.
      -->

      <!-- Label -->
      <div class="lg:col-span-3 flex items-center gap-3">
        <div class="w-2.5 h-2.5 rounded-full bg-black"></div>
        <span data-node="promise_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="OUR PROMISE" class="text-base font-bold tracking-widest text-gray-900 uppercase">{{promise_badge}}</span>
      </div>

      <!-- Title -->
      <div class="lg:col-span-5">
        <h2 data-node="promise_title" data-node-type="textarea" data-node-label="Title" data-node-default="Built For Joyful Experiences" class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
          {{promise_title}}
        </h2>
      </div>

      <!-- Description -->
      <div class="lg:col-span-4">
        <p data-node="promise_description" data-node-type="textarea" data-node-label="Description" data-node-default="We believe fun should feel effortless and inclusive. Every ride is a moment waiting to be shared." class="text-gray-500 text-base leading-relaxed">
          {{promise_description}}
        </p>
      </div>
    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-[1fr_1.5fr] gap-12 lg:gap-24 items-start">
      <!-- Left Image -->
      <div class="relative w-full">
        <!-- Aspect ratio from image ~ 563/728 = 0.77 -->
        <div class="aspect-[563/728] w-full bg-gray-100 rounded-sm overflow-hidden">
          <img data-node="promise_image" data-node-type="file" data-node-label="Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298133/seltrix/templates/ss-amusement-park-template/promise-image.png" src="{{promise_image}}" alt="Promise" class="w-full h-full object-cover">
        </div>
      </div>

      <!-- Right List -->
      <div class="flex flex-col w-full">
        <!-- Item 1 -->
        <div class="border-b border-gray-100 py-10 first:pt-0">
          <div class="flex items-baseline gap-8 mb-4">
            <span data-node="item_1_number" data-node-type="text" data-node-label="Item 1 Number" data-node-default="01" class="text-2xl font-medium text-gray-900 shrink-0">{{item_1_number}}</span>
            <h3 data-node="item_1_title" data-node-type="text" data-node-label="Item 1 Title" data-node-default="Pure Joy" class="text-2xl md:text-3xl font-medium text-gray-900">
              {{item_1_title}}
            </h3>
          </div>
          <p data-node="item_1_desc" data-node-type="textarea" data-node-label="Item 1 Description" data-node-default="Every attraction is crafted to spark excitement, laughter, and that unmistakable thrill of fun. Smiles, giggles, and joyful cheers shape every experience we create across the park. Laughter echoes through the park as people create moments." class="text-gray-500 text-base leading-relaxed pl-[3.5rem] md:pl-[4.5rem]">
            {{item_1_desc}}
          </p>
        </div>

        <!-- Item 2 -->
        <div class="border-b border-gray-100 py-10">
          <div class="flex items-baseline gap-8 mb-4">
            <span data-node="item_2_number" data-node-type="text" data-node-label="Item 2 Number" data-node-default="02" class="text-2xl font-medium text-gray-900 shrink-0">{{item_2_number}}</span>
            <h3 data-node="item_2_title" data-node-type="text" data-node-label="Item 2 Title" data-node-default="Genuine Care" class="text-2xl md:text-3xl font-medium text-gray-900">
              {{item_2_title}}
            </h3>
          </div>
          <p data-node="item_2_desc" data-node-type="textarea" data-node-label="Item 2 Description" data-node-default="From daily safety routines to warm, attentive staff, care is present at every step. Parents feel reassured while children enjoy welcoming spaces built with comfort and trust in mind. Rides are regularly inspected, and carefully supervised." class="text-gray-500 text-base leading-relaxed pl-[3.5rem] md:pl-[4.5rem]">
            {{item_2_desc}}
          </p>
        </div>

        <!-- Item 3 -->
        <div class="border-b border-gray-100 py-10 last:border-0 last:pb-0">
          <div class="flex items-baseline gap-8 mb-4">
            <span data-node="item_3_number" data-node-type="text" data-node-label="Item 3 Number" data-node-default="03" class="text-2xl font-medium text-gray-900 shrink-0">{{item_3_number}}</span>
            <h3 data-node="item_3_title" data-node-type="text" data-node-label="Item 3 Title" data-node-default="Inspired Wonder" class="text-2xl md:text-3xl font-medium text-gray-900">
              {{item_3_title}}
            </h3>
          </div>
          <p data-node="item_3_desc" data-node-type="textarea" data-node-label="Item 3 Description" data-node-default="Bold colours, playful sounds, and imaginative themes awaken curiosity at every turn. Simple rides transform into memorable adventures that encourage discovery and imagination. The joy and magic stay alive long after the rides stop." class="text-gray-500 text-base leading-relaxed pl-[3.5rem] md:pl-[4.5rem]">
            {{item_3_desc}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>