{% extends "base.html" %}
{% block title %}{{ t.qs_title }} - {{ config.APP_NAME }}{% endblock %}

{% block head %}
<style>
  .submitted-flow { max-width: 580px; margin: 0 auto; text-align: center; }
  .check-circle {
    width: 64px; height: 64px; border-radius: 50%;
    background: #D1FAE5; display: inline-flex; align-items: center;
    justify-content: center; margin-bottom: 1rem;
  }
  .check-circle svg { width: 32px; height: 32px; color: #059669; }
  .next-steps {
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px;
    padding: 1.25rem 1.5rem; text-align: left; margin: 1.5rem 0;
  }
  .next-steps h3 { font-size: 0.875rem; font-weight: 700; color: #334155; margin-bottom: 0.75rem; }
  .next-steps ol { padding-left: 0; list-style: none; margin: 0; }
  .next-steps li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 8px 0; font-size: 0.8125rem; color: #475569;
    border-bottom: 1px solid #F1F5F9;
  }
  .next-steps li:last-child { border-bottom: none; }
  .next-steps .step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: #EFF6FF; color: #3B82F6; font-weight: 700;
    font-size: 0.75rem; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
  }
  .next-steps .step-time {
    margin-left: auto; font-size: 0.6875rem; color: #94A3B8;
    white-space: nowrap; padding-left: 8px;
  }
  .email-box {
    background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 10px;
    padding: 14px 16px; text-align: left; margin: 1rem 0;
    font-size: 0.8125rem; color: #9A3412;
  }
  .signup-box {
    background: white; border: 1px solid #E2E8F0; border-radius: 12px;
    padding: 1.25rem 1.5rem; text-align: center; margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .signup-box h3 { font-size: 0.9375rem; font-weight: 700; color: #334155; margin-bottom: 0.25rem; }
  .signup-box p { font-size: 0.8125rem; color: #64748B; margin-bottom: 1rem; }
</style>
{% endblock %}

{% block content %}
<main style="background: linear-gradient(180deg, #F1F5F9, #F8FAFC); min-height: 80vh;">
  <div class="container-page py-12">
    <div class="submitted-flow">
      <div class="check-circle">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
      </div>

      <h1 class="text-2xl" style="margin-bottom: 0.5rem;">{{ t.qs_title }}</h1>
      <p style="color: #64748B; font-size: 0.9375rem;">
        {{ t.qs_matched_pre }}
        {% if court_count %}{{ court_count }}{{ t.qs_matched_court_suffix }}{% endif %}
        {% if facility_type %}{{ t.qs_matched_facility_fmt | tformat(type=facility_type) }}{% endif %}
        {{ t.qs_matched_project }}
        {% if country %}in {{ country }}{% endif %}
        {{ t.qs_matched_post }}
      </p>

      <div class="next-steps">
        <h3>{{ t.qs_next_h2 }}</h3>
        <ol>
          <li>
            <span class="step-num">1</span>
            <span>{{ t.qs_step_1 }}</span>
            <span class="step-time">{{ t.qs_step_1_time }}</span>
          </li>
          <li>
            <span class="step-num">2</span>
            <span>{{ t.qs_step_2 }}</span>
            <span class="step-time">{{ t.qs_step_2_time }}</span>
          </li>
          <li>
            <span class="step-num">3</span>
            <span>{{ t.qs_step_3 }}</span>
            <span class="step-time">{{ t.qs_step_3_time }}</span>
          </li>
          <li>
            <span class="step-num">4</span>
            <span>{{ t.qs_step_4 }}</span>
            <span class="step-time">{{ t.qs_step_4_time }}</span>
          </li>
        </ol>
      </div>

      {% if contact_email %}
      <div class="email-box">
        &#128231; Your email <strong>{{ contact_email }}</strong> has been verified.
      </div>
      {% endif %}

      {% if not user %}
      <div class="signup-box">
        <h3>{{ t.qs_signup_h3 }}</h3>
        <p>{{ t.qs_signup_text }}</p>
        <a href="{{ url_for('auth.signup') }}?next={{ url_for('planner.index') }}" class="btn">{{ t.qs_signup_btn }}</a>
      </div>
      {% else %}
      <div style="margin-top: 1.5rem;">
        <a href="{{ url_for('planner.index') }}" class="btn">{{ t.qs_back_planner }}</a>
      </div>
      {% endif %}
    </div>
  </div>
</main>
{% endblock %}
