<section data-component-type="Content" class="bg-white pt-16 md:pt-24" data-component-slug="ss-amusement-park-about-content">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12">
      <!-- Our Story Text -->
      <div class="lg:col-span-1">
        <h2 data-node="story_title" data-node-type="text" data-node-label="Story Title" data-node-default="Our Story" class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
          {{story_title}}
        </h2>
        <p data-node="story_description" data-node-type="textarea" data-node-label="Story Description" data-node-default="We create joyful escapes where laughter leads the way. Every corner is designed to spark smiles and shared memories." class="text-gray-500 text-base leading-relaxed">
          {{story_description}}
        </p>
      </div>

      <!-- Feature Card 1 -->
      <div class="bg-white border border-gray-100 p-6">
        <div class="w-12 h-12 bg-gray-100 flex items-center justify-center mb-4">
          <img data-node="card_1_icon" data-node-type="file" data-node-label="Card 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303818/seltrix/templates/ss-amusement-park-template/icon-person.svg" src="{{card_1_icon}}" alt="Icon" class="w-6 h-6">
        </div>
        <h3 data-node="card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Imaginative Play" class="text-lg font-bold text-gray-900 mb-2">
          {{card_1_title}}
        </h3>
        <p data-node="card_1_description" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="Creative zones and themed attractions that spark curiosity." class="text-gray-500 text-base leading-relaxed">
          {{card_1_description}}
        </p>
      </div>

      <!-- Feature Card 2 -->
      <div class="bg-white border border-gray-100 p-6">
        <div class="w-12 h-12 bg-gray-100 flex items-center justify-center mb-4">
          <img data-node="card_2_icon" data-node-type="file" data-node-label="Card 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303805/seltrix/templates/ss-amusement-park-template/icon-comfort.svg" src="{{card_2_icon}}" alt="Icon" class="w-6 h-6">
        </div>
        <h3 data-node="card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Family Comfort" class="text-lg font-bold text-gray-900 mb-2">
          {{card_2_title}}
        </h3>
        <p data-node="card_2_description" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="Thoughtful layouts, rest areas, and amenities that keep visits relaxed." class="text-gray-500 text-base leading-relaxed">
          {{card_2_description}}
        </p>
      </div>

      <!-- Feature Card 3 -->
      <div class="bg-white border border-gray-100 p-6">
        <div class="w-12 h-12 bg-gray-100 flex items-center justify-center mb-4">
          <img data-node="card_3_icon" data-node-type="file" data-node-label="Card 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303808/seltrix/templates/ss-amusement-park-template/icon-energy.svg" src="{{card_3_icon}}" alt="Icon" class="w-6 h-6">
        </div>
        <h3 data-node="card_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Endless Energy" class="text-lg font-bold text-gray-900 mb-2">
          {{card_3_title}}
        </h3>
        <p data-node="card_3_description" data-node-type="textarea" data-node-label="Card 3 Description" data-node-default="A balance of gentle fun and thrilling excitement for every age." class="text-gray-500 text-base leading-relaxed">
          {{card_3_description}}
        </p>
      </div>
    </div>
  </div>
</section><section data-component-type="Content" class="py-16 md:py-24 relative overflow-hidden">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <div class="relative bg-[#EAF3FF] overflow-hidden">
      <!-- Content Container -->
      <div class="p-8 lg:p-12 xl:p-16 py-24 relative z-10">
        <h2 data-node="section_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Where Fun Meets Imagination Daily" class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-6">
          {{section_title}}
        </h2>
        <p data-node="section_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="A place where families come together through play and adventure. Every experience is crafted to excite, comfort, and inspire." class="text-gray-500 text-base leading-relaxed max-w-md mb-12">
          {{section_description}}
        </p>

        <!-- Feature Cards Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8">
          <!-- Card 4 -->
          <div class="bg-white p-6 shadow-lg">
            <div class="w-12 h-12 bg-gray-100 flex items-center justify-center mb-4">
              <img data-node="card_4_icon" data-node-type="file" data-node-label="Card 4 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303818/seltrix/templates/ss-amusement-park-template/icon-person.svg" src="{{card_4_icon}}" alt="Icon" class="w-6 h-6">
            </div>
            <h3 data-node="card_4_title" data-node-type="text" data-node-label="Card 4 Title" data-node-default="Family First" class="text-lg font-bold text-gray-900 mb-2">
              {{card_4_title}}
            </h3>
            <p data-node="card_4_description" data-node-type="textarea" data-node-label="Card 4 Description" data-node-default="Thoughtfully designed for kids, parents, and everyone to enjoy together." class="text-gray-500 text-base leading-relaxed">
              {{card_4_description}}
            </p>
          </div>

          <!-- Card 5 -->
          <div class="bg-white p-6 shadow-lg">
            <div class="w-12 h-12 bg-gray-100 flex items-center justify-center mb-4">
              <img data-node="card_5_icon" data-node-type="file" data-node-label="Card 5 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303818/seltrix/templates/ss-amusement-park-template/icon-person.svg" src="{{card_5_icon}}" alt="Icon" class="w-6 h-6">
            </div>
            <h3 data-node="card_5_title" data-node-type="text" data-node-label="Card 5 Title" data-node-default="Creative Worlds" class="text-lg font-bold text-gray-900 mb-2">
              {{card_5_title}}
            </h3>
            <p data-node="card_5_description" data-node-type="textarea" data-node-label="Card 5 Description" data-node-default="Bright, immersive themes that instantly ignite imagination." class="text-gray-500 text-base leading-relaxed">
              {{card_5_description}}
            </p>
          </div>

          <!-- Card 6 -->
          <div class="bg-white p-6 shadow-lg">
            <div class="w-12 h-12 bg-gray-100 flex items-center justify-center mb-4">
              <img data-node="card_6_icon" data-node-type="file" data-node-label="Card 6 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768303818/seltrix/templates/ss-amusement-park-template/icon-person.svg" src="{{card_6_icon}}" alt="Icon" class="w-6 h-6">
            </div>
            <h3 data-node="card_6_title" data-node-type="text" data-node-label="Card 6 Title" data-node-default="Trusted Care" class="text-lg font-bold text-gray-900 mb-2">
              {{card_6_title}}
            </h3>
            <p data-node="card_6_description" data-node-type="textarea" data-node-label="Card 6 Description" data-node-default="Carefully maintained attractions operated by trained teams." class="text-gray-500 text-base leading-relaxed">
              {{card_6_description}}
            </p>
          </div>
        </div>
      </div>

      <!-- Decorative Image -->
      <div class="absolute right-0 top-0 h-full py-10 hidden lg:block">
        <img data-node="decorative_image" data-node-type="file" data-node-label="Decorative Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298053/seltrix/templates/ss-amusement-park-template/about-decoration.png" src="{{decorative_image}}" alt="Decorative" class="h-full w-auto object-contain object-right">
      </div>
    </div>
  </div>
</section>