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

{% block title %}Book an Appointment - RegisterYourStartup.com{% endblock %}
{% block meta_description %}Schedule a consultation with our business experts. Book an appointment for personalized guidance on incorporation, compliance, and business growth strategies.{% endblock %}

{% block content %}

 <section class="bg-black py-16">

    <div class="w-full mx-auto text-center py-20 px-4">
    <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
      Create Support Ticket
    </h1>
    <p class="text-white/90 max-w-5xl mx-auto text-base md:text-lg">
     Are you experiencing issues with the B-42 solution or do you have other questions regarding youticketr B-42 account? You're in the right place! Please complete the form, and we'll get in touch with you as soon as possible!
    </p>
  </div>

  <div class="max-w-5xl mx-auto px-4">

    <!-- Card -->
    <div class="bg-[#303033] shadow-sm rounded-md p-10">

      <!-- Title -->
      <h1 class="text-xl font-semibold mb-8 text-white">
        Support-Ticket erstellen
      </h1>

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

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

        <!-- 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 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
        </div>

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

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

        <!-- Category -->
        <div>
          <label class="block text-sm font-medium mb-3 text-white">
            Category <span class="text-red-500">*</span>
          </label>

          <div class="space-y-2 text-sm">
            <label class="flex items-center gap-2 text-white">
              <input type="checkbox" class="rounded border-gray-300 ">
              Technical Issue
            </label>
            <label class="flex items-center gap-2 text-white">
              <input type="checkbox" class="rounded border-gray-300 ">
              Feature Request
            </label>
            <label class="flex items-center gap-2 text-white">
              <input type="checkbox" class="rounded border-gray-300 ">
              Billing Issue
            </label>
            <label class="flex items-center gap-2 text-white">
              <input type="checkbox" class="rounded border-gray-300 ">
              General Inquiry
            </label>
          </div>
        </div>

        <!-- Club -->
        <div>
          <label class="block text-sm font-medium mb-1 text-white">Club / Company</label>
          <input type="text"
            class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
        </div>

        <!-- Device Info -->
        <div>
          <label class="block text-sm font-medium mb-1 text-white">Device Information</label>
          <p class="text-xs text-gray-500 mb-1 text-white">
            Information on the device used (e.g. model name)
          </p>
          <input type="text"
            class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
        </div>

        <!-- System -->
        <div>
          <label class="block text-sm font-medium mb-1 text-white">System</label>
          <p class="text-xs text-gray-500 mb-1 text-white">
            The current version of your operating system
          </p>
          <input type="text"
            class="w-full bg-gray-100 border border-gray-200 rounded px-4 py-2">
        </div>

        <!-- File Upload -->
        <div>
          <label class="block text-sm font-medium mb-2 text-white">File upload</label>
          <input type="file"
            class="block w-full text-sm text-white
                   file:mr-4 file:py-2 file:px-4
                   file:rounded file:border-0
                   file:bg-gray-200 file:text-gray-700
                   hover:file:bg-gray-300">
        </div>

                  <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>
</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 text-white">
     Ready to start your B-42 journey?
    </p>

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

    <!-- Subheading -->
    <p class="text-white/90 text-sm md:text-base font-semibold mb-10 uppercase text-white">
      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 %}