<section class="bg-white max-w-[90%] mx-auto w-full py-10 rounded-lg" data-component-type="Content" data-component-slug="sports-template-contact-form">

  <div class="bg-black pl-10 py-10 pr-10 flex flex-col md:flex-row gap-8 overflow-hidden">

    <!-- MAP -->
    <div class="w-full md:w-1/2 h-64 md:h-auto">
      <iframe data-node="contact_map" data-node-type="text" data-node-label="Google Map Embed URL" data-node-default="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2510.834133378373!2d8.682127315747618!3d50.11092297942802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bd0f94be2b07df%3A0xed8d6b4c6c0d6e14!2sFrankfurt%2C%20Germany!5e0!3m2!1sen!2s!4v1700000000000" src="{{contact_map}}" class="w-full h-full rounded-lg" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade">
      </iframe>
    </div>

    <!-- FORM -->
    <div class="w-full md:w-1/2 flex flex-col gap-4">

      <!-- Heading -->
      <h2 class="text-4xl font-semibold text-white uppercase tracking-tight" data-node="contact_title" data-node-type="text" data-node-label="Contact Title" data-node-default="Get in touch">
        {{contact_title}}
      </h2>

      <!-- Name Input -->
      <input type="text" data-node="contact_name_placeholder" data-node-type="text" data-node-label="Name Placeholder" data-node-default="Your Name" placeholder="{{contact_name_placeholder}}" class="w-full py-3 px-4 bg-gray-800 text-white rounded outline-none focus:ring-2 focus:ring-red-700">

      <!-- Email Input -->
      <input type="email" data-node="contact_email_placeholder" data-node-type="text" data-node-label="Email Placeholder" data-node-default="Your Email" placeholder="{{contact_email_placeholder}}" class="w-full py-3 px-4 bg-gray-800 text-white rounded outline-none focus:ring-2 focus:ring-red-700">

      <!-- Message Area -->
      <textarea data-node="contact_message_placeholder" data-node-type="text" data-node-label="Message Placeholder" data-node-default="Your Message" placeholder="{{contact_message_placeholder}}" class="w-full h-32 py-3 px-4 bg-gray-800 text-white rounded outline-none resize-none focus:ring-2 focus:ring-red-700"></textarea>

      <!-- Button -->
      <button class="bg-red-700 hover:bg-red-800 text-white font-semibold py-3 px-6 rounded uppercase w-fit" data-node="contact_button" data-node-type="text" data-node-label="Contact Button Text" data-node-default="Send Message">
        {{contact_button}}
      </button>

    </div>

  </div>
</section>