<section
  class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-16"
>
  <!-- Hero Section avec recherche -->
  <div class="relative overflow-hidden">
    <!-- Décorations de fond -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div
        class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"
      ></div>
      <div
        class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"
      ></div>
      <div
        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"
      ></div>
    </div>

    <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-12">
      <!-- Titre de la page -->
      <div class="text-center mb-8 animate-fade-in">
        <h1
          class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4"
        >
          Découvrez les
          <span
            class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600"
          >
            meilleurs profils
          </span>
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
          Explorez notre communauté de talents et trouvez le profil parfait pour votre projet
        </p>
      </div>

      <!-- Barre de recherche améliorée -->
      <div class="max-w-3xl mx-auto animate-slide-up animation-delay-200">
        <div
          class="flex flex-col space-y-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 hover:shadow-2xl transition-shadow duration-300"
        >
          <div>
            <app-search (onSearchChange)="showNewQuery($event)" />
          </div>

          <div>
            <app-filter (onFilterChange)="onFilterChange($event)" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Toggle Vue Liste / Carte -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Tous les profils</h2>

      <!-- Boutons de switch de vue -->
      <div class="view-switcher">
        <button
          type="button"
          class="view-btn"
          [class.active]="viewMode() === 'list'"
          (click)="switchToListView()"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-5 h-5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"
            />
          </svg>
          Liste
        </button>
        <button
          type="button"
          class="view-btn"
          [class.active]="viewMode() === 'map'"
          (click)="switchToMapView()"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-5 h-5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z"
            />
          </svg>
          Carte
        </button>
      </div>
    </div>

    @if (loading().isLoading) {
      <app-loading message="Chargement des profils..." />
    } @else {
      <!-- Vue Liste (existante) -->
      @if (viewMode() === 'list') {
        <div class="mb-6 flex items-center justify-between animate-fade-in">
          <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
              />
            </svg>
            @if (profilePaginated().items) {
              <span>{{ profilePaginated().items.length }} profil(s)</span>
            } @else {
              <span> 0 profil(s)</span>
            }
          </div>
        </div>

        <div class="animate-slide-up animation-delay-100">
          <app-vertical-profile-list [profiles]="profilePaginated().items" />
        </div>

        <div class="animate-slide-up animation-delay-100">
          <app-pagination [filters]="searchFilters()" (onPageChange)="onPageChange($event)" />
        </div>
      }

      <!-- Vue Carte (nouvelle) -->
      @if (viewMode() === 'map') {
        <div class="animate-fade-in">
          @if (loading().isLoading) {
            <app-loading message="Chargement de la carte..." />
          } @else {
            <app-profile-list-map [profiles]="profilePaginated().items" />
          }
        </div>
      }
    }
  </div>
</section>
