{% extends 'public_base.html' %}
{% load crispy_forms_tags %}

{% block title %}Contact Us - RegisterYourStartup.com{% endblock %}
{% block meta_description %}Get in touch with RegisterYourStartup.com. Contact our global offices in India, UAE, USA, UK, Saudi Arabia, Malaysia, Singapore, Indonesia, Kenya, and Bangalore.{% endblock %}

{% block content %}
<section class="bg-black">

  <!-- Top Header -->
  <div class="max-w-5xl mx-auto text-center py-20 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
      Contact
    </h1>
    <p class="text-white/90 max-w-2xl mx-auto text-base md:text-lg">
      Do you have a general question about B-42? Then you're in the right place!
      Contact us using the form below, and we'll get back to you shortly!
    </p>
  </div>

  <!-- Form Card -->
  <div class="bg-black">
    <div class="max-w-3xl mx-auto px-6 py-12">
      <div class="bg-[#303033] shadow-lg rounded-lg p-8">

        <h2 class="text-xl font-semibold mb-6 text-white">Contact Form</h2>

        <form class="space-y-5">

          <!-- Email -->
          <div>
            <label class="block text-sm font-medium mb-1 text-white">
              Email<span class="text-red-500 ">*</span>
            </label>
            <input
              type="email"
              class="w-full bg-gray-100 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            />
          </div>

          <!-- First Name -->
          <div>
            <label class="block text-sm font-medium mb-1 text-white">First Name</label>
            <input
              type="text"
              class="w-full bg-gray-100 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            />
          </div>

          <!-- Last Name -->
          <div>
            <label class="block text-sm font-medium mb-1 text-white">Last Name</label>
            <input
              type="text"
              class="w-full bg-gray-100 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            />
          </div>

          <!-- Message -->
          <div>
            <label class="block text-sm font-medium mb-1 text-white">
              Message<span class="text-red-500 ">*</span>
            </label>
            <textarea
              rows="4"
              class="w-full bg-gray-100 border border-gray-200 rounded-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            ></textarea>
          </div>

          <!-- reCAPTCHA placeholder -->
          <div class="flex justify-center">
            <div class="border border-gray-300 rounded-md px-4 py-3 text-sm text-gray-500 text-white">
              protected by reCAPTCHA
            </div>
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            class="w-full bg-lime-400 hover:bg-lime-500 text-black font-semibold py-3 rounded-md transition"
          >
            Submit
          </button>

        </form>
      </div>
    </div>
  </div>

 

</section>
<section class="bg-[#6f7df5] w-full">

  <div class="max-w-6xl mx-auto px-4 py-28 text-center">

    <!-- Small top text -->
    <p class="text-white text-sm font-semibold tracking-wide uppercase mb-4">
      READY TO START YOUR B-42 JOURNEY?
    </p>

    <!-- Main heading -->
    <h1 class="text-white text-4xl md:text-5xl font-extrabold mb-4">
      The Soccer Training Platform
    </h1>

    <!-- Subheading -->
    <p class="text-white/90 text-sm md:text-base font-semibold mb-10 uppercase">
      GET EVERYTHING YOU NEED FOR TEAM SUCCESS
    </p>

    <!-- CTA Button -->
    <a
      href="#"
      class="inline-flex items-center gap-3 bg-lime-400 hover:bg-lime-500 text-black font-semibold px-8 py-3 rounded-full transition"
    >
      <span class="inline-flex items-center justify-center w-5 h-5 bg-black rounded-full">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3 text-lime-400 ml-[1px]"
          fill="currentColor"
          viewBox="0 0 16 16"
        >
          <path d="M6 4l6 4-6 4V4z" />
        </svg>
      </span>
      Start now
    </a>

  </div>

</section>

{% endblock %}