<section data-section data-component-type="Form" class="bg-white py-16 md:py-24 px-6 lg:px-16 xl:px-[95px]" data-component-slug="marathon-contact-form-map">
  <div class="grid grid-cols-1 lg:grid-cols-2">
    <!-- Left Column - Google Map -->
    <div class="relative h-[400px] lg:h-auto min-h-[500px]">
      <div id="contact-map" class="w-full h-full" data-google-map>
        <!-- Fallback/Placeholder -->
        <iframe src="{{map_embed_url}}" width="100%" height="100%" style="border: 0" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade" data-node="map_embed_url" data-node-type="url" data-node-label="Google Maps Embed URL" data-node-default="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d64873.22066967637!2d-0.1375137333623063!3d51.50210798787574!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604b900d26973%3A0x4291f3172409ea92!2sLondon%20Eye!5e0!3m2!1sen!2sin!4v1767984401791!5m2!1sen!2sin"></iframe>
      </div>
    </div>

    <!-- Right Column - Contact Form -->
    <div class="py-12 px-6 lg:py-16 lg:px-12 xl:px-16 shadow-lg">
      <!-- Header -->
      <div class="mb-8">
        <div class="flex items-center gap-4 mb-4">
          <h2 data-node="contact_form_title" data-node-type="text" data-node-label="Form Title" data-node-default="We're Here to Help" class="text-2xl md:text-3xl lg:text-4xl text-[#131416] font-['Racing_Sans_One']">
            {{contact_form_title}}
          </h2>
          <div class="w-16 h-1 bg-[#FD6326]"></div>
        </div>
        <p data-node="contact_form_description" data-node-type="textarea" data-node-label="Form Description" data-node-default="We ensure you get the assistance you need quickly and clearly. Drop us a message, and we'll respond with the right support." class="text-[#656A74] text-base max-w-md">
          {{contact_form_description}}
        </p>
      </div>

      <!-- Contact Form -->
      <form data-contact-form class="space-y-5">
        <!-- Name & Phone -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label class="block text-sm font-medium text-[#131416] mb-2" data-node="form_name_label" data-node-type="text" data-node-label="Name Label" data-node-default="Name">{{form_name_label}}</label>
            <input type="text" name="name" placeholder="{{form_name_placeholder}}" data-node="form_name_placeholder" data-node-type="text" data-node-label="Name Placeholder" data-node-default="Name" class="w-full px-4 py-3 border border-gray-300 focus:border-[#BFFF00] focus:ring-1 focus:ring-[#BFFF00] outline-none transition-colors" required>
          </div>
          <div>
            <label class="block text-sm font-medium text-[#131416] mb-2" data-node="form_phone_label" data-node-type="text" data-node-label="Phone Label" data-node-default="Phone">{{form_phone_label}}</label>
            <input type="tel" name="phone" placeholder="{{form_phone_placeholder}}" data-node="form_phone_placeholder" data-node-type="text" data-node-label="Phone Placeholder" data-node-default="Phone" class="w-full px-4 py-3 border border-gray-300 focus:border-[#BFFF00] focus:ring-1 focus:ring-[#BFFF00] outline-none transition-colors">
          </div>
        </div>

        <!-- Email & Subject -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label class="block text-sm font-medium text-[#131416] mb-2" data-node="form_email_label" data-node-type="text" data-node-label="Email Label" data-node-default="Email">{{form_email_label}}</label>
            <input type="email" name="email" placeholder="{{form_email_placeholder}}" data-node="form_email_placeholder" data-node-type="text" data-node-label="Email Placeholder" data-node-default="Email" class="w-full px-4 py-3 border border-gray-300 focus:border-[#BFFF00] focus:ring-1 focus:ring-[#BFFF00] outline-none transition-colors" required>
          </div>
          <div>
            <label class="block text-sm font-medium text-[#131416] mb-2" data-node="form_subject_label" data-node-type="text" data-node-label="Subject Label" data-node-default="Subject">{{form_subject_label}}</label>
            <input type="text" name="subject" placeholder="{{form_subject_placeholder}}" data-node="form_subject_placeholder" data-node-type="text" data-node-label="Subject Placeholder" data-node-default="Subject" class="w-full px-4 py-3 border border-gray-300 focus:border-[#BFFF00] focus:ring-1 focus:ring-[#BFFF00] outline-none transition-colors">
          </div>
        </div>

        <!-- Message -->
        <div>
          <label class="block text-sm font-medium text-[#131416] mb-2" data-node="form_message_label" data-node-type="text" data-node-label="Message Label" data-node-default="Message">{{form_message_label}}</label>
          <textarea name="message" rows="4" placeholder="{{form_message_placeholder}}" data-node="form_message_placeholder" data-node-type="text" data-node-label="Message Placeholder" data-node-default="Message" class="w-full px-4 py-3 border border-gray-300 focus:border-[#BFFF00] focus:ring-1 focus:ring-[#BFFF00] outline-none transition-colors resize-none" required></textarea>
        </div>

        <!-- Submit Button -->
        <button type="submit" class="w-full bg-[#BFFF00] text-black font-bold uppercase py-4 hover:bg-[#a8e600] transition-colors flex items-center justify-center gap-2">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
          </svg>
          <span data-node="contact_submit_text" data-node-type="text" data-node-label="Submit Button Text" data-node-default="SEND MESSAGE">{{contact_submit_text}}</span>
        </button>

        <!-- Status Message -->
        <div id="contact-form-status" class="hidden py-3 px-4 rounded-lg text-center font-medium"></div>
      </form>
    </div>
  </div>
</section>