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

{% block title %}Page introuvable{% endblock %}

{% block content %}
  <div class="error-404-page min-vh-100 d-flex flex-column">
    <section class="flex-grow-1 d-flex align-items-center justify-content-center px-3 py-5">
      <div class="error-404-shell text-center w-100">
        <div class="error-404-hero mx-auto">
          <div class="error-404-icon-wrap mb-4">
            <div class="error-404-icon-ring">
              <div class="error-404-icon-core">
                <i class="ti ti-route-2"></i>
              </div>
            </div>
          </div>

          <div class="error-404-code">404</div>
          <h1 class="error-404-title">Oups, cette page est introuvable</h1>
          <p class="error-404-text">
            Le lien que vous avez suivi est peut-être incorrect, expiré ou la page a été déplacée.
          </p>
          {% if fromPath %}
            <p class="error-404-origin">
              Chemin demandé : <span>{{ fromPath }}</span>
            </p>
          {% endif %}

          <div class="d-flex flex-column flex-sm-row justify-content-center gap-3 mt-4">
            <a href="{{ homeUrl }}" class="btn btn-success btn-lg px-4">
              <i class="ti ti-home me-2"></i>Retour à l'accueil
            </a>
            <button type="button" class="btn btn-light btn-lg px-4 border" onclick="window.history.back()">
              <i class="ti ti-arrow-left me-2"></i>Revenir en arrière
            </button>
          </div>

          <div class="error-404-support card border-0 shadow-sm mt-5 mx-auto text-start">
            <div class="card-body p-4 p-md-5">
              <div class="d-flex align-items-start gap-3">
                <div class="error-404-support-icon">
                  <i class="ti ti-lifebuoy"></i>
                </div>
                <div>
                  <h2 class="h5 fw-bold mb-2">Besoin d'aide ?</h2>
                  <p class="text-muted mb-3">
                    Si le problème persiste, notre équipe support peut vous aider.
                  </p>
                  <a href="mailto:{{ supportEmail }}" class="error-404-support-link">
                    Contacter le support <i class="ti ti-arrow-right ms-1"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>

          {% if quickLinks is not empty %}
            <div class="error-404-links mt-5 pt-4">
              <div class="text-muted small text-uppercase fw-semibold mb-3">Accès rapides</div>
              <div class="d-flex flex-wrap justify-content-center gap-3">
                {% for link in quickLinks %}
                  <a href="{{ link.url }}" class="error-404-quick-link">
                    <i class="ti ti-link me-1"></i>{{ link.label }}
                  </a>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </section>

    <footer class="error-404-footer border-top px-3 py-3">
      <div class="container-fluid d-flex flex-column flex-lg-row justify-content-between align-items-center gap-3">
        <div class="d-flex align-items-center gap-2 text-muted">
          <span class="error-404-brand-badge"><i class="ti ti-lifebuoy"></i></span>
          <span class="fw-semibold text-dark">FundUp</span>
          <span>© {{ "now"|date("Y") }} Tous droits réservés</span>
        </div>
        <div class="d-flex flex-wrap justify-content-center gap-3">
          <a href="mailto:{{ supportEmail }}" class="text-muted text-decoration-none">Contact</a>
        </div>
      </div>
    </footer>
  </div>

  <style>
    .error-404-page {
      background:
        radial-gradient(circle at top, rgba(22, 163, 74, .08), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 45%, #f8fafc 100%);
    }

    .error-404-shell {
      max-width: 960px;
    }

    .error-404-hero {
      max-width: 760px;
    }

    .error-404-icon-wrap {
      display: flex;
      justify-content: center;
    }

    .error-404-icon-ring {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(34, 197, 94, .08);
    }

    .error-404-icon-core {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(22, 163, 74, .12);
      color: #22c55e;
      font-size: 3rem;
    }

    .error-404-code {
      font-size: clamp(5rem, 15vw, 9rem);
      line-height: 1;
      font-weight: 800;
      color: #e5e7eb;
      letter-spacing: -.08em;
      margin-bottom: 1.25rem;
    }

    .error-404-title {
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 800;
      color: #1f2937;
      margin-bottom: 1rem;
    }

    .error-404-text {
      max-width: 620px;
      margin: 0 auto;
      color: #6b7280;
      font-size: 1.2rem;
      line-height: 1.6;
    }

    .error-404-origin {
      margin-top: 1rem;
      color: #94a3b8;
      font-size: .95rem;
    }

    .error-404-origin span {
      color: #475569;
      font-weight: 600;
    }

    .error-404-support {
      max-width: 720px;
      border-radius: 1.25rem;
    }

    .error-404-support-icon {
      width: 52px;
      height: 52px;
      border-radius: 1rem;
      background: #dcfce7;
      color: #16a34a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .error-404-support-link,
    .error-404-quick-link {
      color: #10b981;
      text-decoration: none;
      font-weight: 600;
    }

    .error-404-support-link:hover,
    .error-404-quick-link:hover {
      color: #059669;
    }

    .error-404-brand-badge {
      width: 32px;
      height: 32px;
      border-radius: .85rem;
      background: #10b981;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  </style>
{% endblock %}