{% extends "base.html" %}
{% load vite_tags %}
{% load cta_tags %}

{% block title %}Gobii - Pre-qualification{% endblock %}

{% block head_extras %}
  {{ block.super }}
  <meta name="description" content="Share a few details about your deployment and we will follow up with a scheduling link if it is a fit.">
{% endblock %}

{% block content %}
<section class="relative overflow-hidden py-16 sm:py-20">
  <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
    <div class="absolute -top-32 left-1/2 h-80 w-[520px] -translate-x-1/2 rounded-full bg-gradient-to-r from-blue-100 via-indigo-100 to-sky-100 blur-3xl opacity-70"></div>
    <div class="absolute bottom-0 right-0 h-64 w-64 translate-x-1/3 rounded-full bg-gradient-to-br from-sky-100 via-transparent to-transparent blur-2xl opacity-70"></div>
  </div>

  <div class="relative max-w-5xl mx-auto px-6">
    <div class="text-center max-w-3xl mx-auto">
      <p class="text-xs uppercase tracking-[0.3em] text-blue-600 font-medium">Enterprise pre-qualification</p>
      <h1 class="mt-4 text-3xl sm:text-4xl font-normal text-slate-900">Let's design your deployment.</h1>
      <p class="mt-4 text-lg text-slate-600">
        Share a few details about your team and goals. If it is a fit, we will send a scheduling link.
      </p>
    </div>

    <div class="mt-12 gobii-card-base p-8 sm:p-10">
      <div class="grid gap-10 lg:grid-cols-[0.9fr_1.1fr]">
        <div>
          <p class="text-sm font-medium text-slate-900">What happens next</p>
          <p class="mt-3 text-sm text-slate-600">
            We use this to prioritize teams with clear production needs. Expect a response within 1-2 business days.
          </p>
          <div class="mt-6 space-y-4 text-sm text-slate-600">
            <div class="flex items-start gap-3">
              <span class="mt-2 size-2 rounded-full bg-blue-600"></span>
              <p>We review every request and match you to the right plan.</p>
            </div>
            <div class="flex items-start gap-3">
              <span class="mt-2 size-2 rounded-full bg-blue-600"></span>
              <p>If it is a fit, you will receive a scheduling link by email.</p>
            </div>
            <div class="flex items-start gap-3">
              <span class="mt-2 size-2 rounded-full bg-blue-600"></span>
              <p>If not, we will suggest a faster async path or resources.</p>
            </div>
          </div>
          <div class="mt-8 text-sm text-slate-600">
            <p class="font-medium text-slate-900">Questions?</p>
            {% if settings.PUBLIC_CONTACT_EMAIL %}
              <p class="mt-2">Reach us anytime at <a href="mailto:{{ settings.PUBLIC_CONTACT_EMAIL }}" class="text-blue-600 hover:text-blue-700 font-medium">{{ settings.PUBLIC_CONTACT_EMAIL }}</a>.</p>
            {% elif settings.PUBLIC_SUPPORT_EMAIL %}
              <p class="mt-2">Reach us anytime at <a href="mailto:{{ settings.PUBLIC_SUPPORT_EMAIL }}" class="text-blue-600 hover:text-blue-700 font-medium">{{ settings.PUBLIC_SUPPORT_EMAIL }}</a>.</p>
            {% else %}
              <p class="mt-2">Reach us anytime at <a href="mailto:{{ settings.SUPPORT_EMAIL }}" class="text-blue-600 hover:text-blue-700 font-medium">{{ settings.SUPPORT_EMAIL }}</a>.</p>
            {% endif %}
          </div>
        </div>

        <div>
          {% if success_message %}
            <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 mb-6" role="status">
              {{ success_message }}
            </div>
          {% endif %}
          {% if error_messages %}
            <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 mb-6" role="alert">
              <p class="font-medium">Please correct the following:</p>
              <ul class="mt-2 list-disc list-inside">
                {% for message in error_messages %}
                  <li>{{ message }}</li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}

          <form class="space-y-4" data-prequal-form method="post" action="{% url 'proprietary:prequalify' %}">
            {% csrf_token %}
            <div class="grid gap-4 sm:grid-cols-2">
              <div class="sm:col-span-1">
                <label for="prequal-name" class="block text-sm font-medium text-slate-700">Full name</label>
                <input type="text" id="prequal-name" name="name" autocomplete="name" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
              </div>
              <div class="sm:col-span-1">
                <label for="prequal-email" class="block text-sm font-medium text-slate-700">Work email</label>
                <input type="email" id="prequal-email" name="email" autocomplete="email" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
              </div>
              <div class="sm:col-span-1">
                <label for="prequal-company" class="block text-sm font-medium text-slate-700">Company</label>
                <input type="text" id="prequal-company" name="company" autocomplete="organization" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
              </div>
              <div class="sm:col-span-1">
                <label for="prequal-role" class="block text-sm font-medium text-slate-700">Role or title</label>
                <input type="text" id="prequal-role" name="role" autocomplete="organization-title" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
              </div>
              <div class="sm:col-span-1">
                <label for="prequal-team-size" class="block text-sm font-medium text-slate-700">Team size</label>
                <select id="prequal-team-size" name="team_size" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                  {% for value, label in form.TEAM_SIZE_CHOICES %}
                    <option value="{{ value }}"{% if not value %} disabled selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="sm:col-span-1">
                <label for="prequal-volume" class="block text-sm font-medium text-slate-700">Monthly automation volume</label>
                <select id="prequal-volume" name="monthly_volume" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                  {% for value, label in form.VOLUME_CHOICES %}
                    <option value="{{ value }}"{% if not value %} disabled selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="sm:col-span-1">
                <label for="prequal-budget" class="block text-sm font-medium text-slate-700">Budget range</label>
                <select id="prequal-budget" name="budget_range" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                  {% for value, label in form.BUDGET_CHOICES %}
                    <option value="{{ value }}"{% if not value %} disabled selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="sm:col-span-1">
                <label for="prequal-timeline" class="block text-sm font-medium text-slate-700">Timeline</label>
                <select id="prequal-timeline" name="timeline" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                  {% for value, label in form.TIMELINE_CHOICES %}
                    <option value="{{ value }}"{% if not value %} disabled selected{% endif %}>{{ label }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="sm:col-span-2">
                <label for="prequal-use-case" class="block text-sm font-medium text-slate-700">Primary use case</label>
                <textarea id="prequal-use-case" name="use_case" rows="4" required
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"></textarea>
              </div>
              <div class="sm:col-span-2">
                <label for="prequal-website" class="block text-sm font-medium text-slate-700">Website or LinkedIn (optional)</label>
                <input type="text" id="prequal-website" name="website" autocomplete="url" maxlength="254"
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
              </div>
              <div class="sm:col-span-2">
                <label for="prequal-notes" class="block text-sm font-medium text-slate-700">Anything else we should know? (optional)</label>
                <textarea id="prequal-notes" name="notes" rows="3"
                  class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-100"></textarea>
              </div>
            </div>

            {% if settings.TURNSTILE_ENABLED and form.turnstile %}
              <div class="flex justify-start">
                {{ form.turnstile }}
              </div>
            {% endif %}

            <div class="flex flex-col sm:flex-row sm:items-center gap-4">
              <button type="submit" data-prequal-submit
                class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-6 py-3 text-sm font-medium text-white hover:bg-blue-700 transition">
                {% cta_text "cta_enterprise_request_call" fallback="Request a call" %}
              </button>
              <p class="text-xs text-slate-500">We respond within 1-2 business days.</p>
            </div>
            <div data-prequal-response class="text-left" aria-live="polite"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}

{% block extra_js %}
  {{ block.super }}
  {% vite_asset 'src/prequal.ts' %}
{% endblock %}