<section data-component-type="Form" class="relative py-16 md:py-24 bg-black overflow-hidden" data-component-slug="ss-sports-running-contact-form">
  <!-- Background Runner Image -->
  <img data-node="contact_bg_image" data-node-type="file" data-node-label="Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527168/seltrix/templates/ss-sports-running/runner-silhouette.png" src="{{contact_bg_image}}" alt="Runner silhouette" class="absolute right-0 top-0 h-full w-auto opacity-30 lg:opacity-100 object-contain">

  <div class="container mx-auto px-4 relative z-10">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
      <!-- Form Section -->
      <div class="bg-white p-8 md:p-12 max-w-xl">
        <div class="flex justify-between items-start mb-2">
          <h2 data-node="contact_title" data-node-type="text" data-node-label="Form Title" data-node-default="Get in Touch" class="text-2xl md:text-3xl font-semibold text-black">
            {{contact_title}}
          </h2>
          <div class="flex items-center gap-1">
            <div class="w-1 h-4 bg-red-600"></div>
            <div class="w-4 h-4 bg-black rounded-full"></div>
            <div class="w-1 h-4 bg-red-600"></div>
          </div>
        </div>

        <p data-node="contact_subtitle" data-node-type="text" data-node-label="Form Subtitle" data-node-default="Find your perfect running pace." class="text-gray-600 text-lg mb-8">
          {{contact_subtitle}}
        </p>

        <form class="space-y-4">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <input type="text" data-node="input_1_placeholder" data-node-type="text" data-node-label="Input 1 Placeholder" data-node-default="First Name" placeholder="{{input_1_placeholder}}" class="w-full px-4 py-4 border border-gray-400 text-gray-600 focus:outline-none focus:border-red-600">
            <input type="text" data-node="input_2_placeholder" data-node-type="text" data-node-label="Input 2 Placeholder" data-node-default="Last Name" placeholder="{{input_2_placeholder}}" class="w-full px-4 py-4 border border-gray-400 text-gray-600 focus:outline-none focus:border-red-600">
          </div>
          <input type="email" data-node="input_3_placeholder" data-node-type="text" data-node-label="Input 3 Placeholder" data-node-default="Enter your email" placeholder="{{input_3_placeholder}}" class="w-full px-4 py-4 border border-gray-400 text-gray-600 focus:outline-none focus:border-red-600">
          <input type="tel" data-node="input_4_placeholder" data-node-type="text" data-node-label="Input 4 Placeholder" data-node-default="Phone Number" placeholder="{{input_4_placeholder}}" class="w-full px-4 py-4 border border-gray-400 text-gray-600 focus:outline-none focus:border-red-600">
          <button type="submit" data-node="submit_button_text" data-node-type="text" data-node-label="Submit Button Text" data-node-default="Become a Member" class="bg-red-600 text-white px-8 py-4 font-medium hover:bg-red-700 transition-colors">
            {{submit_button_text}}
          </button>
        </form>
      </div>

      <!-- Empty space for background image on desktop -->
      <div class="hidden lg:block"></div>
    </div>
  </div>
</section>