{% 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-3xl mx-auto px-4">

    <!-- Card -->
    <div class="bg-white shadow-sm rounded-md p-10">

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

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

        <!-- First Name -->
        <div>
          <label class="block text-sm font-medium mb-1">
            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">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">
            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">
            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">
            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">
            Category <span class="text-red-500">*</span>
          </label>

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

        <!-- Club -->
        <div>
          <label class="block text-sm font-medium mb-1">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">Device Information</label>
          <p class="text-xs text-gray-500 mb-1">
            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">System</label>
          <p class="text-xs text-gray-500 mb-1">
            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">File upload</label>
          <input type="file"
            class="block w-full text-sm text-gray-600
                   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>

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

{% endblock %}