feat: implement multilingual SEO support and enhance map UI with data synchronization updates

src/App.tsx

@@ -12,13 +12,13 @@ import { lakesConfig } from '../scripts/lakesConfig';
 import { slugify } from './utils/slugify';
 import './App.css';
 
-const LakeDetailWrapper = ({ language }: { language: Language }) => {
+const LakeDetailWrapper = ({ language, windUnit }: { language: Language, windUnit: 'kmh' | 'ms' }) => {
   const { slug } = useParams();
   const lake = lakesConfig.find(l => slugify(l.text) === slug);
   
   if (!lake) return <Navigate to="/" replace />;
   
-  return <LakeDetail language={language} lakeId={lake.id} />;
+  return <LakeDetail language={language} lakeId={lake.id} windUnit={windUnit} />;
 };
 
 function App() {
@@ -28,6 +28,9 @@ function App() {
   const [theme, setTheme] = useState<'dark' | 'light'>(() => {
     return (localStorage.getItem('hladinator_theme') as 'dark' | 'light') || 'dark';
   });
+  const [windUnit, setWindUnit] = useState<'kmh' | 'ms'>(() => {
+    return (localStorage.getItem('hladinator_windUnit') as 'kmh' | 'ms') || 'kmh';
+  });
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
@@ -49,6 +52,10 @@ function App() {
     localStorage.setItem('hladinator_lang', language);
   }, [language]);
 
+  useEffect(() => {
+    localStorage.setItem('hladinator_windUnit', windUnit);
+  }, [windUnit]);
+
   return (
     <div className="dashboard-container">
       {/* Mobile overlay */}
@@ -73,7 +80,7 @@ function App() {
             <Route path="/" element={<LakesOverview language={language} />} />
             <Route path="/favorites" element={<FavoritesOverview language={language} />} />
             <Route path="/map" element={<LakeMap language={language} />} />
-            <Route path="/:slug" element={<LakeDetailWrapper language={language} />} />
+            <Route path="/:slug" element={<LakeDetailWrapper language={language} windUnit={windUnit} />} />
           </Routes>
         </div>
         <footer style={{ 
@@ -85,7 +92,7 @@ function App() {
           color: 'var(--text-muted)',
           marginTop: 'auto'
         }}>
-          <span>Zdroje dat: pvl.cz, open-meteo.com</span>
+          <span>{t[language].chart.dataSources} pvl.cz, open-meteo.com</span>
           <span>{t[language].chart.createdIn}</span>
         </footer>
       </div>
@@ -96,6 +103,8 @@ function App() {
           setLanguage={setLanguage}
           theme={theme}
           setTheme={setTheme}
+          windUnit={windUnit}
+          setWindUnit={setWindUnit}
           onClose={() => setIsSettingsOpen(false)}
         />
       )}