fix: locale sync in header/testimonials, dark mode icon CSS filters, invariant arrow logic

src/app/(routes)/(website)/components/footer/footer.tsx

@@ -54,14 +54,14 @@ export default async function Footer() {
             <a 
               key={index} 
               href="#" 
-              className="p-2 rounded-full glass-panel transition-all duration-300 hover:scale-110 hover:text-primary group"
+              className="p-2 rounded-full glass-panel transition-all duration-300 hover:scale-110 hover:text-primary group dark-invert-img"
             >
               <Image
                 src={social.src}
                 width={24}
                 height={24}
                 alt={social.alt}
-                className="w-6 h-6 dark:brightness-0 dark:invert group-hover:dark:brightness-0 group-hover:dark:invert-[.7]"
+                className="w-6 h-6 dark:brightness-0 dark:invert dark-invert-target group-hover:dark:brightness-0 group-hover:dark:invert-[.7]"
               />
             </a>
           ))}

src/app/(routes)/(website)/components/header/header.tsx

@@ -12,15 +12,17 @@ export default function Header() {
   const [dict, setDict] = useState<any>(null);
   const [scrolled, setScrolled] = useState(false);
 
+  const selectedLocale = getCookie("selectedLocale") || getCookie("defaultLocale") || "en";
+
   useEffect(() => {
     const loadDict = async () => {
-      const selectedLocale = getCookie("selectedLocale");
-      const defaultLocale = getCookie("defaultLocale");
-      const d = await getDictionary((selectedLocale || defaultLocale || "en") as any);
+      const d = await getDictionary(selectedLocale as "en" | "fa");
       setDict(d);
     };
     loadDict();
+  }, [selectedLocale]);
 
+  useEffect(() => {
     const handleScroll = () => setScrolled(window.scrollY > 50);
     window.addEventListener("scroll", handleScroll, { passive: true });
     handleScroll();

src/app/(routes)/(website)/components/hero/hero.tsx

@@ -57,14 +57,14 @@ export default function Hero({ dict }: HeroProps) {
               viewport={{ once: true }}
               whileHover={{ scale: 1.2, rotate: 5 }}
               whileTap={{ scale: 0.9 }}
-              className="p-2 rounded-full glass-panel hover:text-primary transition-colors group"
+              className="p-2 rounded-full glass-panel hover:text-primary transition-colors group dark-invert-img"
             >
               <Image
                 src={src}
                 width={24}
                 height={24}
                 alt={alt}
-                className="w-6 h-6 dark:brightness-0 dark:invert group-hover:dark:brightness-0 group-hover:dark:invert-[.7]"
+                className="w-6 h-6 dark:brightness-0 dark:invert dark-invert-target group-hover:dark:brightness-0 group-hover:dark:invert-[.7]"
               />
             </motion.a>
           ))}

src/app/(routes)/(website)/components/services/services.tsx

@@ -56,7 +56,7 @@ export default function Services({ dict }: ServicesProps) {
           <img 
             src={service!.imageSrc} 
             alt={service!.altText} 
-            className="w-12 h-12 object-contain transition-transform duration-300 group-hover:scale-110 dark:brightness-0 dark:invert" 
+            className="w-12 h-12 object-contain transition-transform duration-300 group-hover:scale-110 dark:brightness-0 dark:invert dark-invert-target" 
           />
         )}
       </div>

src/app/(routes)/(website)/components/testimonials/testimonials.tsx

@@ -32,14 +32,8 @@ interface TestimonialsProps {
 export default function Testimonials({ dict }: TestimonialsProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const scrollRef = useRef<HTMLDivElement>(null);
-  const [locale, setLocale] = useState("en");
-
-  useEffect(() => {
-    const sl = getCookie("selectedLocale");
-    const dl = getCookie("defaultLocale");
-    setLocale(sl || dl || "en");
-  }, []);
 
+  const locale = getCookie("selectedLocale") || getCookie("defaultLocale") || "en";
   const isRTL = locale === "fa";
   const tData = dict.website.homePage.testimonials.data || [];
   const maxIndex = Math.max(0, tData.length - 3);
@@ -137,16 +131,16 @@ export default function Testimonials({ dict }: TestimonialsProps) {
         {tData.length > 3 && (
           <>
             <button
-              onClick={isRTL ? handleNext : handlePrev}
-              disabled={isRTL ? currentIndex >= maxIndex : currentIndex === 0}
+              onClick={handlePrev}
+              disabled={currentIndex === 0}
               className="absolute -left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-background border border-border shadow-lg flex items-center justify-center text-foreground hover:text-primary transition-colors disabled:opacity-30 disabled:cursor-not-allowed z-10"
               aria-label="Previous testimonials"
             >
               <ChevronLeft className={`w-5 h-5 ${isRTL ? "rotate-180" : ""}`} />
             </button>
             <button
-              onClick={isRTL ? handlePrev : handleNext}
-              disabled={isRTL ? currentIndex === 0 : currentIndex >= maxIndex}
+              onClick={handleNext}
+              disabled={currentIndex >= maxIndex}
               className="absolute -right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-background border border-border shadow-lg flex items-center justify-center text-foreground hover:text-primary transition-colors disabled:opacity-30 disabled:cursor-not-allowed z-10"
               aria-label="Next testimonials"
             >

src/app/globals.css

@@ -120,3 +120,10 @@ html {
 [dir="rtl"] h6 {
   font-family: var(--font-mikhak), ui-sans-serif, system-ui, sans-serif;
 }
+
+.dark .dark-invert-img img,
+.dark .dark-invert-img svg,
+.dark img.dark-invert-target,
+.dark svg.dark-invert-target {
+  filter: brightness(0) invert(1) !important;
+}