Remove filter chips, add continent display, add expert count badge, search includes location

index.html

@@ -223,7 +223,7 @@
       </button>
     </div>
 
-    <!-- Filters -->
+    <!-- Search -->
     <div class="flex flex-wrap items-center justify-between gap-6 mb-12">
     <div class="flex-1 max-w-lg">
       <div style="position:relative;">
@@ -231,11 +231,9 @@
         <input type="text" id="expertSearch" placeholder="Buscar por nombre, habilidades, módulos..." oninput="searchExperts(this.value)" style="width:100%;padding:12px 16px 12px 46px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;font-family:'Inter',sans-serif;font-size:0.9375rem;color:#0f172a;outline:none;transition:border-color 0.2s;" onfocus="this.style.borderColor='#4338ca'" onblur="this.style.borderColor='#e2e8f0'">
       </div>
     </div>
-    <div class="flex flex-wrap gap-3" id="filters">
+    <div style="display:flex;align-items:center;gap:8px;" id="expertCount">
-      <button class="filter-chip active" data-filter="all" onclick="filterExperts('all')">Todos</button>
+      <span style="color:#64748b;font-size:0.875rem;">Expertos disponibles:</span>
-      <button class="filter-chip" data-filter="certified" onclick="filterExperts('certified')">Certificados</button>
+      <span style="background:#4338ca;color:#fff;font-size:0.8125rem;font-weight:600;padding:4px 12px;border-radius:100px;" id="expertCountValue">0</span>
-      <button class="filter-chip" data-filter="funcional" onclick="filterExperts('funcional')">Consultores funcionales</button>
-      <button class="filter-chip" data-filter="developer" onclick="filterExperts('developer')">Desarrolladores</button>
     </div>
 
     <!-- Expert grid -->
@@ -562,6 +560,9 @@
     }
 
     grid.innerHTML = experts.map(ex => {
+      // Update count
+      const countEl = document.getElementById('expertCountValue');
+      if (countEl) countEl.textContent = experts.length;
       const initials = ex.name ? ex.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase() : '??';
       const skills = ex.skills ? ex.skills.split(',').map(s => s.trim()) : [];
       const modules = ex.modules ? ex.modules.split(',').map(s => s.trim()) : [];
@@ -595,7 +596,8 @@
           ${prefVersion === 'enterprise' ? '<span style="background:rgba(59,130,246,0.1);color:#3b82f6;font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Enterprise</span>' : prefVersion === 'both' ? '<span style="background:rgba(16,185,129,0.1);color:#10b981;font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Community + Enterprise</span>' : '<span class="badge-community" style="font-size:0.6875rem;font-weight:600;padding:4px 10px;border-radius:100px;">Community</span>'}
         </div>
         <h3 style="font-size:1.125rem;font-weight:600;color:#0f172a;margin-bottom:4px;">${ex.name || 'Sin nombre'}</h3>
-        ${ex.languages ? `<div style="font-size:0.8125rem;color:#64748b;margin-bottom:12px;">${ex.languages.split(',').map(l => l.trim() === 'spanish' ? 'Español' : l.trim() === 'english' ? 'Inglés' : l.trim()).join(' / ')}</div>` : ''}
+        ${ex.languages ? `<div style="font-size:0.8125rem;color:#64748b;margin-bottom:4px;">${ex.languages.split(',').map(l => l.trim() === 'spanish' ? 'Español' : l.trim() === 'english' ? 'Inglés' : l.trim()).join(' / ')}</div>` : ''}
+        ${ex.location ? `<div style="font-size:0.8125rem;color:#64748b;margin-bottom:12px;">${ex.location.charAt(0).toUpperCase() + ex.location.slice(1)}</div>` : ''}
         <p style="color:#475569;font-size:0.875rem;line-height:1.7;margin-bottom:16px;">${ex.summary || 'Sin descripción disponible.'}</p>
         ${tags.length > 0 ? `<div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;">${tags.map(t => `<span style="background:rgba(67,56,202,0.08);color:#4338ca;font-size:0.6875rem;font-weight:500;padding:3px 10px;border-radius:100px;">${t}</span>`).join('')}</div>` : ''}
         <div style="border-top:1px solid #e2e8f0;padding-top:16px;display:flex;flex-direction:column;gap:8px;">
@@ -672,28 +674,22 @@
   });
 
   // ===== EXPERT SEARCH =====
-  let currentFilter = 'all';
-
   function searchExperts(query) {
     const q = query.toLowerCase().trim();
     let filtered = allExperts;
 
-    // Apply current filter
-    if (currentFilter === 'certified') {
-      filtered = filtered.filter(ex => ex.certified === 'yes' || ex.certified === true);
-    }
-
-    // Apply search query
     if (q.length > 0) {
-      filtered = filtered.filter(ex => {
+      filtered = allExperts.filter(ex => {
         const name = (ex.name || '').toLowerCase();
         const skills = (ex.skills || '').toLowerCase();
         const modules = (ex.modules || '').toLowerCase();
         const extra = (ex.extra || '').toLowerCase();
         const summary = (ex.summary || '').toLowerCase();
         const languages = (ex.languages || '').toLowerCase();
+        const location = (ex.location || '').toLowerCase();
         return name.includes(q) || skills.includes(q) || modules.includes(q) ||
                extra.includes(q) || summary.includes(q) || languages.includes(q) ||
+               location.includes(q) ||
                (ex.certified === 'yes' && 'certificado'.includes(q));
       });
     }
@@ -701,16 +697,6 @@
     renderExperts(filtered);
   }
 
-  // Update filterExperts to store current filter and search together
-  function filterExperts(filter) {
-    currentFilter = filter;
-    document.querySelectorAll('.filter-chip').forEach(chip => {
-      chip.classList.toggle('active', chip.dataset.filter === filter);
-    });
-    const searchInput = document.getElementById('expertSearch');
-    if (searchInput) searchExperts(searchInput.value);
-  }
-
   // Load experts on page load
   loadExperts();