Persist language preference, fix lang attribute flash, localize SEO titles

- LanguageProvider now initializes language from URL path on first render,
  so the html lang attribute is correct immediately (no flash of 'en')
- Save language choice to localStorage on every change
- EnglishLayout redirects from / to saved language if user has a preference
- All page SEO titles and descriptions now derived from locals translations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ChengaDev

src/App.tsx

@@ -38,13 +38,22 @@ const PageContent: React.FC<PageContentProps> = ({ children, title }) => {
   )
 }
 
+const LANG_KEY = 'sc_lang'
+
 // Layout for English routes — no URL lang prefix
 const EnglishLayout = () => {
   const { changeLocale } = useLocalization()
+  const navigate = useNavigate()
+  const location = useLocation()
   const fadeIn = useSpring({ from: { opacity: 0 }, to: { opacity: 1 }, config: { duration: 800 } })
 
   useEffect(() => {
-    changeLocale('en')
+    const savedLang = localStorage.getItem(LANG_KEY)
+    if (savedLang && savedLang !== 'en' && NON_ENGLISH_LANGS.includes(savedLang) && location.pathname === '/') {
+      navigate(`/${savedLang}`, { replace: true })
+    } else {
+      changeLocale('en')
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

src/components/AboutUs.tsx

@@ -20,8 +20,8 @@ const AboutUs = () => {
   return (
     <Container>
       <SEO
-        title="About Us | ShotClock Pro"
-        description="Learn about ShotClock Pro – a free basketball shot clock training app built for referees, scorekeepers, and basketball enthusiasts who want to master FIBA shot clock rules."
+        title={`${locals.aboutTitle} | ShotClock Pro`}
+        description={locals.aboutContent[0]}
       />
       <AnimatedTitle>{locals.aboutTitle}</AnimatedTitle>
 

src/components/FAQ.tsx

@@ -33,8 +33,8 @@ const FAQ = () => {
   return (
     <Container>
       <SEO
-        title="FAQ | ShotClock Pro"
-        description="Frequently asked questions about basketball shot clock rules, the 14-second reset, and how to use the ShotClock Pro training simulator."
+        title={`${locals.faqTitle} | ShotClock Pro`}
+        description={locals.faqDescription}
         schema={faqSchema}
       />
 

src/components/FIBAResources.tsx

@@ -44,8 +44,8 @@ const FIBAResources = () => {
   return (
     <Container>
       <SEO
-        title="FIBA Resources | ShotClock Pro"
-        description="Access official FIBA basketball rules, shot clock operation guidelines, referee training materials, and competition manuals to stay up to date with international basketball regulations."
+        title={`${locals.fibaResourcesTitle} | ShotClock Pro`}
+        description={locals.fibaResourcesDescription}
       />
       <AnimatedTitle>{locals.fibaResourcesTitle}</AnimatedTitle>
 

src/components/Instructions.tsx

@@ -37,8 +37,8 @@ const Instructions = () => {
   return (
     <Container>
       <SEO
-        title="Shot Clock Instructions | ShotClock Pro"
-        description="Step-by-step instructions for operating a basketball shot clock. Learn the 24-second and 14-second reset rules, basic controls, and game situations per FIBA regulations."
+        title={`${locals.instructionsTitle} | ShotClock Pro`}
+        description={locals.instructionsDescription}
         schema={howToSchema}
       />
       <AnimatedTitle>{locals.instructionsTitle}</AnimatedTitle>

src/components/ShotClockPage.tsx

@@ -11,8 +11,8 @@ const ShotClockPage = () => {
   return (
     <PageContainer>
       <SEO
-        title="ShotClock Pro – Free Online Basketball Shot Clock"
-        description="Free online basketball shot clock — start, stop, and reset in seconds. Practice on any device, no installation needed."
+        title={locals.title}
+        description={locals.pageBlurb}
       />
       <GlobalStyle />
       <ShotClock />

src/contexts/Language/LanguageProvider.tsx

@@ -1,8 +1,17 @@
 import React, { useState, createContext, useContext, FC, PropsWithChildren } from 'react'
+import { useLocation } from 'react-router-dom'
 import { LocalizationContextType } from './types'
 import Localization from '../../localization/locailzation'
 import LanguageCodes from '../../constants/LanguageCodes'
 
+const LANG_KEY = 'sc_lang'
+const VALID_NON_ENGLISH = ['it', 'es', 'fr', 'el']
+
+const getLangFromPath = (pathname: string): string => {
+  const maybeLang = pathname.split('/')[1]
+  return VALID_NON_ENGLISH.includes(maybeLang) ? maybeLang : LanguageCodes.English
+}
+
 const languageContextDefaultValues: LocalizationContextType = {
   languageCode: LanguageCodes.English,
   locals: Localization[LanguageCodes.English],
@@ -14,12 +23,15 @@ export const LocalizationContext = createContext<LocalizationContextType>(
 )
 
 const LanguageProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { pathname } = useLocation()
+
   const [languageCode, setLanguageCode] = useState<string>(
-    LanguageCodes.English
+    () => getLangFromPath(pathname)
   )
 
   const changeLocale = (newLanguageCode: string) => {
     setLanguageCode(newLanguageCode)
+    localStorage.setItem(LANG_KEY, newLanguageCode)
   }
 
   return (