Added multi-lingua, english-spanish. Timer conditions and Linting bugfixes.

src/components/StaffSection.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { STAFF } from "@/data/event-data";
 import { Instagram, User, ChevronLeft, ChevronRight } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 /** Colores de badge por rol */
 const roleBadgeClass: Record<string, string> = {
@@ -11,12 +12,13 @@ const roleBadgeClass: Record<string, string> = {
 };
 
 const StaffSection = () => {
-  const [filter, setFilter] = useState<string>("All");
+  const { t } = useTranslation();
+  const [filter, setFilter] = useState<"all" | "instructors" | "djs">("all");
 
   const filteredStaff = STAFF.filter((member) => {
-    if (filter === "All") return true;
-    if (filter === "Instructors") return member.role === "Instructor";
-    if (filter === "DJs") return member.role === "DJ";
+    if (filter === "all") return true;
+    if (filter === "instructors") return member.role === "Instructor";
+    if (filter === "djs") return member.role === "DJ";
     return true;
   });
   // simple ref + helpers for horizontal scroll
@@ -50,10 +52,10 @@ const StaffSection = () => {
         >
           <div className="text-center md:text-left w-full">
             <h2 className="font-display text-4xl md:text-5xl lg:text-7xl break-words font-bold pt-4 pb-6 leading-normal text-gradient mb-2">
-              Staff del Evento
+              {t("staff.title")}
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto md:mx-0">
-              Conoce a los artistas e instructores que harán de este festival una experiencia inolvidable.
+              {t("staff.description")}
             </p>
           </div>
 
@@ -83,17 +85,23 @@ const StaffSection = () => {
           viewport={{ once: false, amount: 0.15 }}
           className="flex flex-wrap gap-3 mb-8 justify-center md:justify-start"
         >
-          {["All", "Instructors", "DJs"].map((role) => (
+          {(
+            [
+              { id: "all", labelKey: "staff.filters.all" },
+              { id: "instructors", labelKey: "staff.filters.instructors" },
+              { id: "djs", labelKey: "staff.filters.djs" },
+            ] as const
+          ).map(({ id, labelKey }) => (
             <button
-              key={role}
-              onClick={() => setFilter(role)}
+              key={id}
+              onClick={() => setFilter(id)}
               className={`px-6 py-2 rounded-full text-sm font-semibold transition-all duration-300 border ${
-                filter === role
+                filter === id
                   ? "bg-primary text-primary-foreground border-primary shadow-md"
                   : "bg-card text-foreground border-border hover:border-primary/50"
               }`}
             >
-              {role === "All" ? "Todos" : role}
+              {t(labelKey)}
             </button>
           ))}
         </motion.div>
@@ -140,14 +148,26 @@ const StaffSection = () => {
                       roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
                     }`}
                   >
-                    {member.role}
+                    {(() => {
+                      const roleLabelKey =
+                        member.role === "Instructor"
+                          ? "instructor"
+                          : member.role === "DJ"
+                            ? "dj"
+                            : member.role === "Organizador"
+                              ? "organizer"
+                              : undefined;
+                      return roleLabelKey ? t(`staff.${roleLabelKey}`) : member.role;
+                    })()}
                   </span>
 
                   <h3 className="font-display text-xl md:text-2xl lg:text-3xl pt-3 pb-5 leading-[1.6] font-bold text-foreground mb-1">
                     {member.name}
                   </h3>
                   <p className="text-sm text-muted-foreground mb-4">
-                    {member.description}
+                    {member.description?.trim().startsWith("[") && member.description?.trim().endsWith("]")
+                      ? t("staff.placeholder")
+                      : member.description}
                   </p>
 
                   {/* Redes sociales */}
@@ -159,7 +179,7 @@ const StaffSection = () => {
                       className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
                     >
                       <Instagram className="w-4 h-4" />
-                      Instagram
+                      {t("staff.socials.instagram")}
                     </a>
                   )}
                 </div>