<section
  class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800"
>
  <div class="container mx-auto px-4 py-6 md:py-12">
    <div class="max-w-5xl mx-auto">
      <!-- Header avec bannière et bouton retour -->
      <div class="relative rounded-2xl overflow-hidden shadow-xl mb-8 animate-fade-in">
        <div class="h-48 md:h-64 bg-cover bg-center bg-auth relative">
          <!-- Overlay gradient -->
          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>

          <!-- Boutons en haut -->
          <div class="relative z-10 p-4 flex justify-between items-start">
            <!-- Bouton retour -->
            <a
              [routerLink]="['/profiles']"
              class="group flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-white/20 backdrop-blur-md rounded-full hover:bg-white/30 transition-all duration-300 hover:scale-110"
              aria-label="Retour à la liste des profils"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="w-6 h-6 text-white group-hover:text-white transition-transform group-hover:-translate-x-1"
              >
                <title>Retour</title>
                <path
                  fill-rule="evenodd"
                  d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>

            <!-- Conteneur pour badge vérifié et bouton partage -->
            <div class="flex items-center gap-2">
              <!-- Badge vérifié -->
              @if (profile()!.estVerifier) {
                <div
                  class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow"
                  data-testid="verified-badge"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="w-5 h-5 md:w-6 md:h-6 text-purple-300"
                  >
                    <title>Profil vérifié</title>
                    <path
                      fill-rule="evenodd"
                      d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  <span class="text-white text-sm font-medium hidden md:inline">Vérifié</span>
                </div>
              }

              <!-- Bouton partage -->
              <button
                (click)="onShare()"
                class="group flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-indigo-500/20 backdrop-blur-md rounded-full hover:bg-indigo-500/30 transition-all duration-300 hover:scale-110"
                aria-label="Partager ce profil"
                data-testid="share-button"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  class="w-5 h-5 md:w-6 md:h-6 text-white"
                >
                  <title>Partager</title>
                  <path
                    fill-rule="evenodd"
                    d="M15.75 4.5a3 3 0 11.825 2.066l-8.421 4.679a3.002 3.002 0 010 1.51l8.421 4.679a3 3 0 11-.729 1.31l-8.421-4.678a3 3 0 110-4.132l8.421-4.679a3 3 0 01-.096-.755z"
                    clip-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
          </div>
        </div>

        <!-- Avatar positionné sur le bord de la bannière -->
        <div class="relative -mt-16 md:-mt-20 px-4 md:px-8 pb-6">
          <div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6">
            <!-- Avatar avec animation -->
            <div class="relative group animate-slide-up">
              <div
                class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300"
              >
                <div class="w-full h-full rounded-full overflow-hidden bg-white">
                  <img
                    alt="{{ user().name }}"
                    class="object-cover w-full h-full"
                    src="{{ profile().avatarUrl }}"
                    loading="lazy"
                  />
                </div>
              </div>
              <!-- Indicateur en ligne (optionnel) -->
              <div
                class="absolute bottom-2 right-2 w-4 h-4 md:w-5 md:h-5 bg-green-500 rounded-full border-4 border-white shadow-lg"
              ></div>
            </div>

            <!-- Nom et profession -->
            <div
              class="flex-1 text-center md:text-left mb-4 md:mb-0 animate-slide-up animation-delay-100"
            >
              <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
                {{ user().name }}
              </h1>

              <p class="text-lg md:text-xl text-indigo-600 dark:text-indigo-400 font-semibold">
                {{ profile()!.profession }}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Contenu principal -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
        <!-- Colonne gauche - Informations -->
        <div class="lg:col-span-1 space-y-6 animate-slide-up animation-delay-200">
          <!-- Card Biographie -->
          <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
          >
            <h3
              class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-indigo-500"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                  clip-rule="evenodd"
                />
              </svg>
              Biographie
            </h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              {{ profile()!.bio }}
            </p>
          </div>

          <!-- Card Secteur -->
          @if (profile()!.secteur) {
            <div
              class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
            >
              <h3
                class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5 text-indigo-500"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
                  />
                </svg>
                Secteur
              </h3>
              <app-chips [sectorId]="profile()!.secteur" />
            </div>
          }

          <!-- Card Réseaux -->
          @if (profile()!.reseaux) {
            <div
              class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
            >
              <h3
                class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5 text-indigo-500"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"
                  />
                  <path
                    d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"
                  />
                </svg>
                Réseaux
              </h3>
              <app-reseaux [reseaux]="profile()!.reseaux" />
            </div>
          }
        </div>

        <!-- Colonne droite - À propos et Projets -->
        <div class="lg:col-span-2 space-y-6 animate-slide-up animation-delay-300">
          <!-- Card À propos -->
          @if (profile()!.apropos) {
            <div
              class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
            >
              <h2
                class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6 text-indigo-500"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <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 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                    clip-rule="evenodd"
                  />
                </svg>
                À propos
              </h2>
              <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
                {{ profile()!.apropos }}
              </p>
            </div>
          }

          <!-- Card Projets -->
          <div
            class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
          >
            <!-- Header -->
            <div class="flex items-center gap-3 pb-6 mb-8 border-b-2 border-indigo-500">
              <div
                class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="w-7 h-7 text-indigo-600 dark:text-indigo-400"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
                </svg>
              </div>
              <div class="flex-1">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                  Explorer les projets
                </h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  Découvrez les réalisations de la communauté
                </p>
              </div>
            </div>
            <app-project-list [userProjectId]="profile().utilisateur" />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
