{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-3xl rounded-2xl border border-slate-200 bg-white p-6 shadow-soft">
  <h1 class="text-2xl font-semibold">Request Professional Service</h1>
  <p class="mt-1 text-sm text-slate-500">Submit your requirement. The platform team will review and assign it to a suitable Audit Firm.</p>
  <form method="post" class="mt-5 grid gap-4 md:grid-cols-2">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label class="text-sm">Your Name<input name="lead_name" required class="mt-1 w-full rounded-xl border px-3 py-2"></label>
    <label class="text-sm">Business Name<input name="business_name" class="mt-1 w-full rounded-xl border px-3 py-2"></label>
    <label class="text-sm">Email<input name="email" type="email" class="mt-1 w-full rounded-xl border px-3 py-2"></label>
    <label class="text-sm">Mobile<input name="mobile" required class="mt-1 w-full rounded-xl border px-3 py-2"></label>
    <label class="text-sm">City<input name="city" class="mt-1 w-full rounded-xl border px-3 py-2"></label>
    <label class="text-sm">State<input name="state" class="mt-1 w-full rounded-xl border px-3 py-2"></label>
    <label class="text-sm">Category<select name="service_category" class="mt-1 w-full rounded-xl border px-3 py-2"><option value="">Select</option>{% for c in service_categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}</select></label>
    <label class="text-sm">Service Required<input name="service_requested" required class="mt-1 w-full rounded-xl border px-3 py-2"></label>
    <label class="text-sm md:col-span-2">Message<textarea name="message" rows="4" class="mt-1 w-full rounded-xl border px-3 py-2"></textarea></label>
    <div class="md:col-span-2"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Submit Request</button></div>
  </form>
</div>
{% endblock %}