<div class="page-container min-h-[calc(100vh-theme(spacing.32))] flex items-center justify-center">
  <div class="w-full max-w-2xl mx-auto text-center space-y-8 px-4 sm:px-6 py-12 sm:py-16">
    <!-- Illustration 404 animée -->
    <div class="relative">
      <!-- Cercles décoratifs en arrière-plan -->
      <div class="absolute inset-0 flex items-center justify-center">
        <div
          class="w-64 h-64 sm:w-80 sm:h-80 bg-purple-100 dark:bg-purple-900/20 rounded-full blur-3xl opacity-50 animate-pulse"
        ></div>
      </div>

      <!-- Nombre 404 -->
      <div class="relative">
        <h1
          class="text-8xl sm:text-9xl lg:text-[12rem] font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600 animate-gradient-x drop-shadow-lg"
        >
          404
        </h1>

        <!-- Icône décoratives -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="w-16 h-16 sm:w-24 sm:h-24 text-purple-600/20 dark:text-purple-400/20 animate-bounce"
          >
            <path
              fill-rule="evenodd"
              d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
      </div>
    </div>

    <!-- Message d'erreur -->
    <div class="space-y-3 sm:space-y-4">
      <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white">
        Oups ! Page introuvable
      </h2>
      <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400 max-w-md mx-auto">
        La page que vous recherchez n'existe pas ou a été déplacée. Retournez à l'accueil ou
        explorez nos profils.
      </p>
    </div>

    <!-- Suggestions et actions -->
    <div class="space-y-6">
      <!-- Boutons d'action -->
      <div class="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
        <a
          [routerLink]="['/']"
          class="group w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-3.5 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium text-sm sm:text-base transition-all hover:scale-105 hover:shadow-lg"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="w-5 h-5 group-hover:-translate-x-1 transition-transform"
          >
            <path
              fill-rule="evenodd"
              d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
              clip-rule="evenodd"
            />
          </svg>
          Retour à l'accueil
        </a>

        <a
          [routerLink]="['/profiles']"
          class="group w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-3.5 border-2 border-purple-600 dark:border-purple-500 text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg font-medium text-sm sm:text-base transition-all hover:scale-105"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="w-5 h-5 group-hover:rotate-12 transition-transform"
          >
            <path
              d="M10 9a3 3 0 100-6 3 3 0 000 6zM6 8a2 2 0 11-4 0 2 2 0 014 0zM1.49 15.326a.78.78 0 01-.358-.442 3 3 0 014.308-3.516 6.484 6.484 0 00-1.905 3.959c-.023.222-.014.442.025.654a4.97 4.97 0 01-2.07-.655zM16.44 15.98a4.97 4.97 0 002.07-.654.78.78 0 00.357-.442 3 3 0 00-4.308-3.517 6.484 6.484 0 011.907 3.96 2.32 2.32 0 01-.026.654zM18 8a2 2 0 11-4 0 2 2 0 014 0zM5.304 16.19a.844.844 0 01-.277-.71 5 5 0 019.947 0 .843.843 0 01-.277.71A6.975 6.975 0 0110 18a6.974 6.974 0 01-4.696-1.81z"
            />
          </svg>
          Explorer les profils
        </a>
      </div>

      <!-- Liens rapides -->
      <div class="pt-8 border-t border-gray-200 dark:border-gray-800">
        <p class="text-sm text-gray-500 dark:text-gray-500 mb-4">Liens rapides :</p>
        <div class="flex flex-wrap justify-center gap-4 sm:gap-6 text-sm">
          <a
            [routerLink]="['/profiles']"
            class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 hover:underline transition-colors"
          >
            Profils
          </a>
          <span class="text-gray-300 dark:text-gray-700">•</span>
          <a
            [routerLink]="['/auth']"
            class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 hover:underline transition-colors"
          >
            Se connecter
          </a>
          <span class="text-gray-300 dark:text-gray-700">•</span>
          <a
            href="mailto:contact@technostrea.fr"
            class="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 hover:underline transition-colors"
          >
            Support
          </a>
        </div>
      </div>
    </div>

    <!-- Message d'aide -->
    <div class="pt-6">
      <div
        class="inline-flex items-start gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-800 text-left max-w-md"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="w-5 h-5 text-purple-600 dark:text-purple-400 flex-shrink-0 mt-0.5"
        >
          <path
            fill-rule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
            clip-rule="evenodd"
          />
        </svg>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white mb-1">Besoin d'aide ?</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">
            Si vous pensez qu'il s'agit d'une erreur, contactez notre équipe support à
            <a
              href="mailto:contact@technostrea.fr"
              class="text-purple-600 dark:text-purple-400 hover:underline"
            >
              contact&commat;technostrea.fr
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
