<section data-section data-component-type="Form" class="relative pt-16 pb-18 md:pt-24 pb-28 lg:pt-32 bg-[#5C2A2A] overflow-visible" data-component-slug="marathon-registration-form">
  <!-- Background Image -->
  <div class="absolute inset-0 overflow-hidden">
    <img data-node="registration_bg_image" data-node-type="file" data-node-label="Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024197/seltrix/templates/marathon-template/registration-bg.png" src="{{registration_bg_image}}" alt="Registration Background" class="w-full h-full object-cover opacity-60">
    <div class="absolute inset-0 bg-[#5C2A2A]/70"></div>
  </div>

  <div class="relative z-10 px-6 lg:px-16 xl:px-[95px]">
    <div class="grid lg:grid-cols-[45%_1fr] gap-8 lg:gap-12 items-start">
      <!-- Left Column - Content -->
      <div class="text-white">
        <p data-node="registration_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="REGISTER NOW" class="text-sm tracking-[0.3em] text-[#DCFC62] uppercase mb-4 font-bold">
          {{registration_tagline}}
        </p>
        <h2 data-node="registration_title" data-node-type="text" data-node-label="Title" data-node-default="Start Your Journey With a Community That Runs Together" class="text-3xl md:text-4xl lg:text-5xl text-white mb-6 font-['Racing_Sans_One'] leading-tight">
          {{registration_title}}
        </h2>
        <p data-node="registration_description" data-node-type="textarea" data-node-label="Description" data-node-default="Take the first step toward a healthier, stronger, more confident version of yourself. Your race, your pace, your moment awaits." class="text-white/80 text-lg mb-8 max-w-md">
          {{registration_description}}
        </p>
        <a data-node="registration_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{registration_cta_link}}" class="inline-flex items-center gap-3 bg-[#DCFC62] text-black px-6 py-4 xl:px-8 xl:pr-10 xl:py-5 text-sm xl:text-lg font-bold hover:bg-lime-500 transition-colors uppercase tracking-wider w-fit" style="clip-path: polygon(0 0, 100% 0, 100% 65%, 88% 100%, 0 100%)">
          <span data-node="registration_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="SIGN UP TODAY">{{registration_cta_text}}</span>
        </a>
      </div>

      <!-- Right Column - Form -->
      <div class="relative bg-white p-8 lg:p-10 shadow-xl">
        <form data-registration-form class="space-y-5">
          <!-- First Name & Last Name -->
          <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="reg_first_name_label" data-node-type="text" data-node-label="First Name Label" data-node-default="First Name">{{reg_first_name_label}}</label>
              <input type="text" name="first_name" placeholder="{{reg_first_name_placeholder}}" data-node="reg_first_name_placeholder" data-node-type="text" data-node-label="First Name Placeholder" data-node-default="First Name" class="w-full px-4 py-3 border border-gray-300 focus:border-[#DCFC62] focus:ring-1 focus:ring-[#DCFC62] outline-none transition-colors" required>
            </div>
            <div>
              <label class="block text-sm font-medium text-[#131416] mb-2" data-node="reg_last_name_label" data-node-type="text" data-node-label="Last Name Label" data-node-default="Last Name">{{reg_last_name_label}}</label>
              <input type="text" name="last_name" placeholder="{{reg_last_name_placeholder}}" data-node="reg_last_name_placeholder" data-node-type="text" data-node-label="Last Name Placeholder" data-node-default="Last Name" class="w-full px-4 py-3 border border-gray-300 focus:border-[#DCFC62] focus:ring-1 focus:ring-[#DCFC62] outline-none transition-colors" required>
            </div>
          </div>

          <!-- Phone & Email -->
          <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="reg_phone_label" data-node-type="text" data-node-label="Phone Label" data-node-default="Phone">{{reg_phone_label}}</label>
              <input type="tel" name="phone" placeholder="{{reg_phone_placeholder}}" data-node="reg_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-[#DCFC62] focus:ring-1 focus:ring-[#DCFC62] outline-none transition-colors">
            </div>
            <div>
              <label class="block text-sm font-medium text-[#131416] mb-2" data-node="reg_email_label" data-node-type="text" data-node-label="Email Label" data-node-default="Email">{{reg_email_label}}</label>
              <input type="email" name="email" placeholder="{{reg_email_placeholder}}" data-node="reg_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-[#DCFC62] focus:ring-1 focus:ring-[#DCFC62] outline-none transition-colors" required>
            </div>
          </div>

          <!-- Gender & Activity -->
          <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="reg_gender_label" data-node-type="text" data-node-label="Gender Label" data-node-default="Gender">{{reg_gender_label}}</label>
              <select name="gender" class="w-full px-4 py-3 border border-gray-300 focus:border-[#DCFC62] focus:ring-1 focus:ring-[#DCFC62] outline-none transition-colors bg-white appearance-none cursor-pointer">
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
                <option value="prefer_not">Prefer not to say</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-[#131416] mb-2" data-node="reg_activity_label" data-node-type="text" data-node-label="Activity Label" data-node-default="Activity">{{reg_activity_label}}</label>
              <input type="text" name="activity" placeholder="{{reg_activity_placeholder}}" data-node="reg_activity_placeholder" data-node-type="text" data-node-label="Activity Placeholder" data-node-default="Activity" class="w-full px-4 py-3 border border-gray-300 focus:border-[#DCFC62] focus:ring-1 focus:ring-[#DCFC62] outline-none transition-colors">
            </div>
          </div>

          <!-- Notes -->
          <div>
            <label class="block text-sm font-medium text-[#131416] mb-2" data-node="reg_notes_label" data-node-type="text" data-node-label="Notes Label" data-node-default="Notes">{{reg_notes_label}}</label>
            <textarea name="notes" rows="4" placeholder="{{reg_notes_placeholder}}" data-node="reg_notes_placeholder" data-node-type="text" data-node-label="Notes Placeholder" data-node-default="Notes (Additional)" class="w-full px-4 py-3 border border-gray-300 focus:border-[#DCFC62] focus:ring-1 focus:ring-[#DCFC62] outline-none transition-colors resize-none"></textarea>
          </div>

          <!-- Submit Button -->
          <button type="submit" class="w-full bg-[#DCFC62] text-black font-bold uppercase py-4 hover:bg-[#c8e855] transition-colors">
            <span data-node="registration_submit_text" data-node-type="text" data-node-label="Submit Button Text" data-node-default="REGISTER NOW">{{registration_submit_text}}</span>
          </button>

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