update

app/context/LanguageContext.jsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+import { content } from '@/data/content';
+
+const LanguageContext = createContext(null);
+
+export function LanguageProvider({ children }) {
+  const [locale, setLocale] = useState('fa');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const saved = window.localStorage.getItem('rm-locale');
+    if (saved === 'fa' || saved === 'en') setLocale(saved);
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.lang = locale;
+    root.dir = content[locale].dir;
+    window.localStorage.setItem('rm-locale', locale);
+  }, [locale]);
+
+  const toggleLocale = () => setLocale((l) => (l === 'fa' ? 'en' : 'fa'));
+
+  return (
+    <LanguageContext.Provider
+      value={{ locale, setLocale, toggleLocale, t: content[locale], dir: content[locale].dir, mounted }}
+    >
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+export function useLanguage() {
+  const ctx = useContext(LanguageContext);
+  if (!ctx) throw new Error('useLanguage must be used within LanguageProvider');
+  return ctx;
+}

app/context/ThemeContext.jsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+const ThemeContext = createContext(null);
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState('dark');
+  const [mounted, setMounted] = useState(false);
+
+  // On mount: read saved preference, else fall back to system preference.
+  useEffect(() => {
+    const saved = window.localStorage.getItem('rm-theme');
+    if (saved === 'light' || saved === 'dark') {
+      setTheme(saved);
+    } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+      setTheme('light');
+    }
+    setMounted(true);
+  }, []);
+
+  // Reflect theme on <html> class + persist.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(theme);
+    window.localStorage.setItem('rm-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme, mounted }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+  return ctx;
+}