<section data-component-type="Content" class="bg-white py-16 md:py-24" data-component-slug="ss-amusement-park-cta-section">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Text Content -->
    <div class="text-center max-w-3xl mx-auto mb-24">
      <!-- Title -->
      <h2 data-node="cta_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Ready To Explore A World Of Smiles, Rides, Laughter, And Endless Family Fun Together" class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 !leading-[1.1] mb-6">
        {{cta_title}}
      </h2>
      <!-- Description -->
      <p data-node="cta_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="Step into a place where laughter never stops and adventures wait around every turn. Your perfect family day starts right here." class="text-gray-500 text-base leading-relaxed mb-8">
        {{cta_description}}
      </p>
      <!-- CTA Button -->
      <a data-node="cta_button_url" data-node-type="url" data-node-label="Button URL" data-node-default="explore" href="{{cta_button_url}}" class="inline-block bg-[#006EFF] hover:bg-[#0056CC] text-white font-medium px-8 py-3 transition-colors">
        <span data-node="cta_button_text" data-node-type="text" data-node-label="Button Text" data-node-default="Start Exploring Now">{{cta_button_text}}</span>
      </a>
    </div>

    <!-- Full Width Image -->
    <div class="w-full overflow-hidden aspect-[1726/997]">
      <img data-node="cta_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298064/seltrix/templates/ss-amusement-park-template/cta-section.png" src="{{cta_image}}" alt="Family fun at the park" class="w-full h-auto object-cover">
    </div>
  </div>
</section>