UX/UI filter fixes

src/components/StaffSection.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { STAFF } from "@/data/event-data";
 import { Instagram, User, ChevronLeft, ChevronRight } from "lucide-react";
@@ -23,6 +23,7 @@ const filterActiveClass: Record<string, string> = {
 const StaffSection = () => {
   const { t } = useTranslation();
   const [filter, setFilter] = useState<"all" | "teachers" | "djs" | "specials">("all");
+  const scrollerRef = useRef<HTMLDivElement>(null);
 
   const filteredStaff = STAFF.filter((member) => {
     if (filter === "all") return true;
@@ -31,16 +32,23 @@ const StaffSection = () => {
     if (filter === "specials") return member.role === "Specials";
     return true;
   });
-  // simple ref + helpers for horizontal scroll
+
+  const staffCounts = {
+    all: STAFF.length,
+    teachers: STAFF.filter((m) => m.role === "Teacher").length,
+    djs: STAFF.filter((m) => m.role === "DJ").length,
+    specials: STAFF.filter((m) => m.role === "Specials").length,
+  };
+
   const onPrev = () => {
-    const scroller = document.getElementById("staff-scroller");
+    const scroller = scrollerRef.current;
     if (!scroller) return;
     const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
-    const delta = card ? card.offsetWidth + 24 : 320; // 24 ~ gap-x-6
+    const delta = card ? card.offsetWidth + 24 : 320;
     scroller.scrollBy({ left: -delta, behavior: "smooth" });
   };
   const onNext = () => {
-    const scroller = document.getElementById("staff-scroller");
+    const scroller = scrollerRef.current;
     if (!scroller) return;
     const card = scroller.querySelector("[data-staff-card]") as HTMLElement | null;
     const delta = card ? card.offsetWidth + 24 : 320;
@@ -106,13 +114,18 @@ const StaffSection = () => {
             <button
               key={id}
               onClick={() => setFilter(id)}
-              className={`px-6 py-2 rounded-full text-sm font-semibold transition-all duration-300 border ${
+              className={`px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-200 border flex items-center gap-2 ${
                 filter === id
                   ? filterActiveClass[id]
                   : "bg-card text-foreground border-border hover:border-primary/50"
               }`}
             >
               {t(labelKey)}
+              <span className={`text-xs px-2 py-0.5 rounded-full ${
+                filter === id ? "bg-white/20" : "bg-muted"
+              }`}>
+                {staffCounts[id]}
+              </span>
             </button>
           ))}
         </motion.div>
@@ -124,18 +137,18 @@ const StaffSection = () => {
           <div className="hidden md:block pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-background to-transparent rounded-r-2xl z-20" />
 
           <div
-            id="staff-scroller"
+            ref={scrollerRef}
             className="flex gap-6 overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth pb-8 pt-6 -mx-4 px-4 md:mx-0 md:px-0 min-h-[400px]"
           >
             <AnimatePresence mode="popLayout">
-              {filteredStaff.map((member, i) => (
+              {filteredStaff.map((member) => (
                 <motion.div
                   key={member.id}
                   layout
-                  initial={{ opacity: 0, scale: 0.9 }}
+                  initial={{ opacity: 0, scale: 0.95 }}
                   animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.9 }}
-                  transition={{ duration: 0.3, delay: i * 0.05 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  transition={{ duration: 0.2 }}
                   data-staff-card
                   className="snap-start shrink-0 w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
                 >

src/data/event-data.ts

@@ -252,7 +252,7 @@ export const STAFF = [
   {
     id: "25",
     name: "Xavi & Laura",
-    role: "Teachers" as const,
+    role: "Teacher" as const,
     image: xavilau,
   },
   {