{# Step 9: Contact Details — final submit #}
<form method="post" action="{{ url_for('leads.quote_request') }}">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  {# Expand accumulated data into individual hidden fields for the POST handler #}
  {% for key, val in data.items() %}
    {% if key != 'services_needed' %}
    <input type="hidden" name="{{ key }}" value="{{ val }}">
    {% endif %}
  {% endfor %}
  {% for svc in data.get('services_needed', []) %}
  <input type="hidden" name="services_needed" value="{{ svc }}">
  {% endfor %}

  <h2 class="q-step-title">{{ t.q9_heading }}</h2>
  <p class="q-step-sub">{{ t.q9_subheading }}</p>

  <div class="q-privacy-box">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M11.5 7V5a3.5 3.5 0 10-7 0v2M4 7h8a1 1 0 011 1v5a1 1 0 01-1 1H4a1 1 0 01-1-1V8a1 1 0 011-1z" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <span>{{ t.q9_privacy_msg }}</span>
  </div>

  <div class="q-field-group">
    <label class="q-label" for="contact_name">{{ t.q9_name_label }} <span class="required">*</span></label>
    {% if 'contact_name' in errors %}<p class="q-error-hint">{{ t.q9_error_name }}</p>{% endif %}
    <input type="text" id="contact_name" name="contact_name" class="q-input {% if 'contact_name' in errors %}q-input--error{% endif %}" value="{{ data.get('contact_name', '') }}" required>
  </div>

  <div class="q-field-group">
    <label class="q-label" for="contact_email">{{ t.q9_email_label }} <span class="required">*</span></label>
    {% if 'contact_email' in errors %}<p class="q-error-hint">{{ t.q9_error_email }}</p>{% endif %}
    <input type="email" id="contact_email" name="contact_email" class="q-input {% if 'contact_email' in errors %}q-input--error{% endif %}" value="{{ data.get('contact_email', '') }}" required>
  </div>

  <div class="q-field-group">
    <label class="q-label" for="contact_phone">{{ t.q9_phone_label }} <span class="required">*</span></label>
    {% if 'contact_phone' in errors %}<p class="q-error-hint">{{ t.q9_error_phone }}</p>{% endif %}
    <input type="tel" id="contact_phone" name="contact_phone" class="q-input {% if 'contact_phone' in errors %}q-input--error{% endif %}" value="{{ data.get('contact_phone', '') }}" required>
  </div>

  <div class="q-field-group">
    <label class="q-label" for="contact_company">{{ t.q9_company_label }} <span style="color:#94A3B8;font-weight:400">{{ t.q9_company_note }}</span></label>
    <input type="text" id="contact_company" name="contact_company" class="q-input" value="{{ data.get('contact_company', '') }}">
  </div>

  <div class="q-consent">
    <label>
      <input type="checkbox" name="consent" value="1" required>
      <span>{{ t.q9_consent_text }} <a href="{{ url_for('public.privacy') }}">{{ t.q9_consent_privacy }}</a> &middot; <a href="{{ url_for('public.terms') }}">{{ t.q9_consent_terms }}</a></span>
    </label>
  </div>

  <div class="q-nav">
    <button type="button" class="q-btn-back"
            hx-get="{{ url_for('leads.quote_step', step=8, _accumulated=data | tojson) }}"
            hx-target="#quote-step" hx-swap="innerHTML">{{ t.q_btn_back }}</button>
    <button type="submit" class="q-btn-submit">{{ t.q_btn_submit }}</button>
  </div>

  <p style="text-align: center; font-size: 11px; color: #94A3B8; margin-top: 1rem;">{{ t.q9_no_obligation }}</p>
</form>

<div id="q-progress" hx-swap-oob="innerHTML">
  <div class="q-progress__meta">
    <span class="q-progress__label">{{ steps[step - 1].title }}</span>
    <span class="q-progress__count">{{ t.q_step_counter | tformat(step=step, total=steps|length) }}</span>
  </div>
  <div class="q-progress__track">
    <div class="q-progress__fill" style="width: {{ (step / steps|length * 100) | round }}%"></div>
  </div>
</div>
