feat: Implement dynamic specialization search in the hero section and parse URL filters on the profiles page.

src/app/(user)/user/profiles/page.tsx

@@ -405,6 +405,7 @@ function ProfilesPageContent() {
   const typeFromUrl = searchParams.get('type');
   const nameFromUrl = searchParams.get('name') || '';
   const locationFromUrl = searchParams.get('location') || '';
+  const filtersFromUrl = searchParams.get('filters') || '';
 
   // State for API data
   const [agents, setAgents] = useState<PublicAgentProfile[]>([]);
@@ -422,13 +423,29 @@ function ProfilesPageContent() {
   const [activeTypeId, setActiveTypeId] = useState<string | null>(typeFromUrl);
   const [listingType, setListingType] = useState<'agents' | 'lenders'>('agents');
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-  const [filters, setFilters] = useState<FilterState>({});
+  const [filters, setFilters] = useState<FilterState>(() => {
+    if (filtersFromUrl) {
+      try {
+        return JSON.parse(filtersFromUrl) as FilterState;
+      } catch {
+        return {};
+      }
+    }
+    return {};
+  });
 
   // Sync state when URL params change (e.g., browser back/forward, client-side navigation)
   useEffect(() => {
     setActiveTypeId(typeFromUrl);
     setSearchQuery(nameFromUrl);
-  }, [typeFromUrl, nameFromUrl]);
+    if (filtersFromUrl) {
+      try {
+        setFilters(JSON.parse(filtersFromUrl) as FilterState);
+      } catch {
+        // ignore invalid JSON
+      }
+    }
+  }, [typeFromUrl, nameFromUrl, filtersFromUrl]);
 
   // Fetch agent types and filter fields on mount
   useEffect(() => {

src/components/home/HeroSection.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { agentsService, AgentType } from '@/services/agents.service';
+import { profileSectionsService } from '@/services/profile-sections.service';
 import type { HeroContent } from '@/types/cms';
 
 const defaultHeroContent: HeroContent = {
@@ -17,25 +18,18 @@ export function HeroSection({ content }: { content?: HeroContent }) {
   const data = content ?? defaultHeroContent;
   const router = useRouter();
   const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
+  const [specializationOptions, setSpecializationOptions] = useState<{ id: string; name: string }[]>([]);
+  const [specializationSlug, setSpecializationSlug] = useState<string>('');
   const [searchParams, setSearchParams] = useState({
-    category: '',
+    specialization: '',
     type: '',
     name: '',
     location: '',
   });
   const [openDropdown, setOpenDropdown] = useState<string | null>(null);
-
-  // Category options (UI only - no functionality)
-  const categoryOptions = [
-    { id: 'residential', name: 'Residential' },
-    { id: 'commercial', name: 'Commercial' },
-    { id: 'industrial', name: 'Industrial' },
-    { id: 'land', name: 'Land' },
-    { id: 'rental', name: 'Rental' },
-  ];
   const [validationError, setValidationError] = useState<string | null>(null);
 
-  // Fetch agent types on mount
+  // Fetch agent types and specialization options on mount
   useEffect(() => {
     const fetchAgentTypes = async () => {
       try {
@@ -45,7 +39,20 @@ export function HeroSection({ content }: { content?: HeroContent }) {
         console.error('Failed to fetch agent types:', error);
       }
     };
+    const fetchSpecializations = async () => {
+      try {
+        const fields = await profileSectionsService.getFilterableFields();
+        const specField = fields.find(f => f.slug.includes('specialization'));
+        if (specField) {
+          setSpecializationSlug(specField.slug);
+          setSpecializationOptions(specField.options.map(o => ({ id: o.value, name: o.label })));
+        }
+      } catch (error) {
+        console.error('Failed to fetch specializations:', error);
+      }
+    };
     fetchAgentTypes();
+    fetchSpecializations();
   }, []);
 
   const handleSearch = () => {
@@ -53,9 +60,10 @@ export function HeroSection({ content }: { content?: HeroContent }) {
     const hasType = searchParams.type.trim() !== '';
     const hasName = searchParams.name.trim() !== '';
     const hasLocation = searchParams.location.trim() !== '';
+    const hasSpecialization = searchParams.specialization.trim() !== '';
 
-    if (!hasType && !hasName && !hasLocation) {
+    if (!hasType && !hasName && !hasLocation && !hasSpecialization) {
-      setValidationError('Please enter at least one search criteria (Type, Name/Keyword, or Location)');
+      setValidationError('Please enter at least one search criteria (Type, Name/Keyword, Location, or Specialization)');
       return;
     }
 
@@ -66,6 +74,9 @@ export function HeroSection({ content }: { content?: HeroContent }) {
     if (searchParams.type) params.set('type', searchParams.type);
     if (searchParams.name) params.set('name', searchParams.name);
     if (searchParams.location) params.set('location', searchParams.location);
+    if (searchParams.specialization && specializationSlug) {
+      params.set('filters', JSON.stringify({ [specializationSlug]: [searchParams.specialization] }));
+    }
     router.push(`/user/profiles?${params.toString()}`);
   };
 
@@ -77,9 +88,10 @@ export function HeroSection({ content }: { content?: HeroContent }) {
     setOpenDropdown(openDropdown === dropdown ? null : dropdown);
   };
 
-  const selectCategory = (value: string) => {
+  const selectSpecialization = (value: string) => {
-    setSearchParams({ ...searchParams, category: value });
+    setSearchParams({ ...searchParams, specialization: value });
     setOpenDropdown(null);
+    setValidationError(null);
   };
 
   const selectType = (value: string) => {
@@ -179,32 +191,32 @@ export function HeroSection({ content }: { content?: HeroContent }) {
                 />
               </div>
 
-              {/* Category Select (UI only) */}
+              {/* Specialization Select */}
               <div className="relative flex-shrink-0 md:w-[160px]">
                 <button
-                  onClick={() => toggleDropdown('category')}
+                  onClick={() => toggleDropdown('specialization')}
                   className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
                 >
-                  <span className="font-serif text-sm text-[#00293d]">
+                  <span className="font-serif text-sm text-[#00293d] truncate">
-                    {searchParams.category ? categoryOptions.find(c => c.id === searchParams.category)?.name : 'Categories'}
+                    {searchParams.specialization ? specializationOptions.find(o => o.id === searchParams.specialization)?.name : 'Specialization'}
                   </span>
                   <Image
                     src="/assets/icons/chevron-down-icon.svg"
                     alt=""
                     width={10}
                     height={10}
-                    className={`transition-transform ${openDropdown === 'category' ? 'rotate-180' : ''}`}
+                    className={`transition-transform ${openDropdown === 'specialization' ? 'rotate-180' : ''}`}
                   />
                 </button>
-                {openDropdown === 'category' && (
+                {openDropdown === 'specialization' && (
                   <div className="absolute top-full left-0 right-0 mt-0 bg-white rounded-[7px] border border-[#00293d]/10 shadow-lg z-20 overflow-hidden max-h-[200px] overflow-y-auto">
-                    {categoryOptions.map((category, index, arr) => (
+                    {specializationOptions.map((option, index, arr) => (
                       <button
-                        key={category.id}
+                        key={option.id}
-                        onClick={() => selectCategory(category.id)}
+                        onClick={() => selectSpecialization(option.id)}
                         className={`w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#00293d]/5 ${index < arr.length - 1 ? 'border-b border-[#00293d]/10' : ''}`}
                       >
-                        {category.name}
+                        {option.name}
                       </button>
                     ))}
                   </div>