<section class="bg-white py-16 md:py-24 px-6 lg:px-16 xl:px-[95px] relative overflow-hidden" data-component-slug="marathon-contact-info">
  <!-- Right Image - Absolute positioned on right side -->
  <div class="absolute top-0 left-0 bottom-0 z-0 w-full py-8 md:py-16 px-6 lg:px-16 xl:px-[95px]">
    <img src="{{contact_info_image}}" alt="Runner in starting position" class="h-full w-full object-cover object-center grayscale " data-node="contact_info_image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024143/seltrix/templates/marathon-template/contact-runner.png">
  </div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <!-- Left Content -->
      <div>
        <!-- Title -->
        <h2 class="font-['Racing_Sans_One'] text-3xl md:text-4xl lg:text-5xl text-white mb-6" data-node="contact_info_title" data-node-default="Get in touch with us">
          {{contact_info_title}}
        </h2>

        <!-- Description -->
        <p class="text-white text-base md:text-lg mb-10 max-w-xl" data-node="contact_info_description" data-node-default="Whether you're preparing for your first run or gearing up for your next big race, our team is here to guide you. Reach out anytime, we're ready to support your journey.">
          {{contact_info_description}}
        </p>

        <!-- Contact Items -->
        <div class="space-y-8">
          <!-- Location -->
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-[#BFFF00] rounded-lg flex items-center justify-center flex-shrink-0">
              <img src="{{contact_location_icon}}" alt="Location icon" data-node="contact_location_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053051/seltrix/templates/marathon-template/location-icon.svg">
            </div>
            <div>
              <h3 class="font-['Racing_Sans_One'] text-white text-lg font-bold mb-1" data-node="contact_location_title" data-node-default="Our Studio">
                {{contact_location_title}}
              </h3>
              <p class="text-white text-sm" data-node="contact_location_line1" data-node-default="Jl Cempaka Wangi No 22">
                {{contact_location_line1}}
              </p>
              <p class="text-white text-sm" data-node="contact_location_line2" data-node-default="Jakarta - Indonesia">
                {{contact_location_line2}}
              </p>
            </div>
          </div>

          <!-- Phone -->
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-[#BFFF00] rounded-lg flex items-center justify-center flex-shrink-0">
              <img src="{{contact_phone_icon}}" alt="Phone icon" data-node="contact_phone_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053057/seltrix/templates/marathon-template/phone-icon-black.svg">
            </div>
            <div>
              <h3 class="font-['Racing_Sans_One'] text-white text-lg font-bold mb-1" data-node="contact_phone_title" data-node-default="Phone Number">
                {{contact_phone_title}}
              </h3>
              <p class="text-white text-sm" data-node="contact_phone_line1" data-node-default="+6221.2002.2012">
                {{contact_phone_line1}}
              </p>
              <p class="text-white text-sm" data-node="contact_phone_line2" data-node-default="+6221.2002.2021">
                {{contact_phone_line2}}
              </p>
            </div>
          </div>

          <!-- Email -->
          <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-[#BFFF00] rounded-lg flex items-center justify-center flex-shrink-0">
              <img src="{{contact_email_icon}}" alt="Email icon" data-node="contact_email_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053036/seltrix/templates/marathon-template/email-icon-black.svg">
            </div>
            <div>
              <h3 class="font-['Racing_Sans_One'] text-white text-lg font-bold mb-1" data-node="contact_email_title" data-node-default="Email">
                {{contact_email_title}}
              </h3>
              <p class="text-white text-sm" data-node="contact_email_line1" data-node-default="hello@yourdomain.tld">
                {{contact_email_line1}}
              </p>
              <p class="text-white text-sm" data-node="contact_email_line2" data-node-default="support@yourdomain.tld">
                {{contact_email_line2}}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>