{% extends '@App/partials/base_light.html.twig' %}

{% block title %}Partenariat accepté{% endblock %}

{% block styles %}
  {{ parent() }}
  <style>
    .partner-confirmation-page {
      min-height: 100vh;
      background:
        radial-gradient(circle at top left, rgba(32, 201, 151, 0.08), transparent 28%),
        linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
      color: #1f2937;
    }
    .partner-confirmation-header,
    .partner-confirmation-footer {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(8px);
    }
    .partner-confirmation-header {
      border-bottom: 1px solid #e5e7eb;
    }
    .partner-confirmation-footer {
      border-top: 1px solid #e5e7eb;
    }
    .partner-confirmation-brand {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: #1cc28a;
      color: #fff;
    }
    .partner-confirmation-card {
      background: #fff;
      border: 1px solid #e8edf3;
      border-radius: 28px;
      box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
      overflow: hidden;
    }
    .partner-confirmation-check {
      width: 82px;
      height: 82px;
      border-radius: 999px;
      background: #cff7e3;
      color: #12b981;
    }
    .partner-confirmation-steps,
    .partner-confirmation-contact {
      border-radius: 20px;
      padding: 1.5rem;
    }
    .partner-confirmation-steps {
      background: #f7f9fc;
      border: 1px solid #eef2f7;
    }
    .partner-confirmation-contact {
      background: linear-gradient(180deg, #d9f9e8 0%, #cbf4df 100%);
      border: 1px solid #bcebcf;
    }
    .partner-confirmation-step-index {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 700;
    }
    .partner-confirmation-step-index.is-active {
      background: #14b981;
      color: #fff;
    }
    .partner-confirmation-step-index.is-muted {
      background: #d1d5db;
      color: #fff;
    }
    .partner-confirmation-button {
      min-height: 62px;
      border-radius: 16px;
      font-weight: 700;
    }
    .partner-confirmation-button.btn-success {
      background: #18b981;
      border-color: #18b981;
    }
    .partner-confirmation-button.btn-success:hover {
      background: #12a271;
      border-color: #12a271;
    }
    .partner-confirmation-summary {
      background: #f8fafc;
      border-top: 1px solid #edf2f7;
    }
    .partner-confirmation-help a {
      color: #16a574;
      text-decoration: none;
      font-weight: 500;
    }
    .partner-confirmation-help a:hover {
      text-decoration: underline;
    }
  </style>
{% endblock %}

{% block content %}
  {% set mecene = proposition.prospection ? proposition.prospection.mecene : null %}
  {% set formule = proposition.formule %}
  {% set initials = '' %}
  {% set contactName = contact ? ((contact.prenom|default('') ~ ' ' ~ contact.nom|default(''))|trim) : 'Equipe partenariats' %}
  {% for part in contactName|split(' ')|slice(0, 2) %}
    {% if part %}
      {% set initials = initials ~ part|slice(0, 1)|upper %}
    {% endif %}
  {% endfor %}

  <div class="partner-confirmation-page d-flex flex-column">

    <main class="flex-grow-1 d-flex align-items-center py-5">
      <div class="container">
        <div class="mx-auto" style="max-width: 820px;">
          <div class="partner-confirmation-card">
            <div class="p-4 p-md-5 text-center">
              <div class="partner-confirmation-check d-inline-flex align-items-center justify-content-center mb-4">
                <i class="ti ti-check fs-9"></i>
              </div>

              <h1 class="fw-bold mb-3" style="font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08;">
                Merci d'avoir accepté le partenariat !
              </h1>

              <p class="text-secondary fs-3 mx-auto mb-5" style="max-width: 650px; line-height: 1.5;">
                Votre engagement est précieux pour nous. Vous serez très vite recontacté{% if mecene and mecene.contact %}{% else %}e{% endif %} par notre équipe pour finaliser les détails de notre collaboration.
              </p>

              <div class="partner-confirmation-steps mb-4 text-start">
                <h3 class="fw-bold text-center mb-4">
                  <i class="ti ti-clock-hour-4 text-success me-2"></i>Prochaines étapes
                </h3>

                <div class="d-flex flex-column gap-3">
                  <div class="d-flex align-items-start gap-3">
                    <div class="partner-confirmation-step-index is-active d-inline-flex align-items-center justify-content-center">1</div>
                    <div>
                      <div class="fw-semibold fs-5">Validation des détails</div>
                      <div class="text-secondary">Sous 24-48h</div>
                    </div>
                  </div>

                  <div class="d-flex align-items-start gap-3">
                    <div class="partner-confirmation-step-index is-muted d-inline-flex align-items-center justify-content-center">2</div>
                    <div>
                      <div class="fw-semibold fs-5">Signature de la convention</div>
                      <div class="text-secondary">Dans les 7 jours</div>
                    </div>
                  </div>

                  <div class="d-flex align-items-start gap-3">
                    <div class="partner-confirmation-step-index is-muted d-inline-flex align-items-center justify-content-center">3</div>
                    <div>
                      <div class="fw-semibold fs-5">Activation du partenariat</div>
                      <div class="text-secondary">Dès signature</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="partner-confirmation-contact mb-4">
                <h3 class="fw-bold mb-3">
                  <i class="ti ti-mail text-success me-2"></i>Contact dédié
                </h3>
                <p class="text-secondary mb-3">Pour toute question, contactez directement :</p>
                <div class="fw-semibold fs-5">
                  <i class="ti ti-user me-2"></i>{{ contactName }}
                  {% if contact and contact.fonction %} - {{ contact.fonction }}{% endif %}
                </div>
                {% if contact and contact.telephone %}
                  <div class="text-secondary fs-5 mt-2">
                    <i class="ti ti-phone me-2"></i>{{ contact.telephone }}
                  </div>
                {% endif %}
                {% if contact and contact.email %}
                  <div class="text-secondary fs-5 mt-1">
                    <i class="ti ti-mail me-2"></i>{{ contact.email }}
                  </div>
                {% endif %}
              </div>

            </div>

            <div class="partner-confirmation-summary px-4 px-md-5 py-4">
              <div class="row g-3">
                <div class="col-md-6">
                  <div class="fw-semibold">Projet concerné</div>
                  <div class="text-secondary">{{ projet ? projet.titre : 'Projet' }}</div>
                </div>
                <div class="col-md-6 text-md-end">
                  <div class="fw-semibold">Type de partenariat</div>
                  <div class="text-success fw-semibold">
                    {% if formule %}
                      {{ formule.type|capitalize }}{% if formule.nom %} {{ formule.nom }}{% endif %}
                    {% else %}
                      Partenariat
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </main>

  </div>
{% endblock %}