+ {!reduceMotion && ( + + )} + {reduceMotion ? ( +

Our Workers

+ ) : ( + + Our Workers + + )} + + {/* Content panel wrapper with neutral background */} +
+
+ {/* Filters */} + {!loading && !error && workersData.length > 0 && ( + + )} + + {/* Results summary for SR + users */} + {!loading && !error && ( +
+ {(() => { + const total = visibleWorkers.length + const startIndex = total === 0 ? 0 : (page - 1) * pageSize + 1 + const endIndex = total === 0 ? 0 : Math.min(startIndex + pageSize - 1, total) + return `Showing ${startIndex}-${endIndex} of ${total} workers — page ${page} of ${totalPages}` + })()} +
+ )} + + {/* Error State */} + {error && ( +
+

+ {error} +

+ +
+ )} + + {/* Loading Skeletons */} + {loading ? ( +
+ {Array.from({ length: 12 }).map((_, idx) => ( +
+
+
+
+
+
))} +
+ ) : visibleWorkers.length === 0 ? ( +
+

+ No workers match your filters. Try changing the service or price range. +

+
+ ) : ( + + + {paginatedWorkers.map((worker: WorkerType, idx: number) => ( + + + {worker.name} + +
+

{worker.name}

+

{worker.service}

+

+ ₹{Math.round(worker.pricePerDay * 1.18)} / day +

+
+
+ ))} +
+
+ )} + + {/* Pagination Controls */} + {!loading && !error && ( + + )} +