<!-- 
  Contact Form Component
  Dark background with form and runner image
-->
<section data-component-type="Form" class="relative py-16 md:py-24 bg-black overflow-hidden">
  <!-- Background Runner Image -->
  <img
    data-node="contact_bg_image"
    data-node-type="file"
    data-node-label="Background Image"
    data-node-default="../assets/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"
              placeholder="First Name"
              class="w-full px-4 py-4 border border-gray-400 text-gray-600 focus:outline-none focus:border-red-600"
            />
            <input
              type="text"
              placeholder="Last Name"
              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"
            placeholder="Enter your email"
            class="w-full px-4 py-4 border border-gray-400 text-gray-600 focus:outline-none focus:border-red-600"
          />
          <input
            type="tel"
            placeholder="Phone Number"
            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="contact_button"
            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"
          >
            {{contact_button}}
          </button>
        </form>
      </div>

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