/* global React, ReactDOM, TopNav, Footer, StickyCTA, HomePage, SongPage, TrendingPage, SavedPage, InfoPage, BrowsePage, LOCALES */ const { useState, useEffect } = React; function useHashRoute() { const [hash, setHash] = useState(() => window.location.hash || '#/'); useEffect(() => { const onChange = () => { setHash(window.location.hash || '#/'); window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' }); }; window.addEventListener('hashchange', onChange); return () => window.removeEventListener('hashchange', onChange); }, []); return hash; } // Detect initial language: subdirectory > localStorage > > browser > EN function detectInitialLang() { try { // 1) URL hint from subdirectory landing (set via window.__LYR_INIT_LANG) if (window.__LYR_INIT_LANG) return window.__LYR_INIT_LANG; // 2) Stored preference const s = localStorage.getItem('lyr:lang'); if (s) return s; const map = window.BCP_TO_CODE || { en: 'EN', id: 'ID', es: 'ES', pt: 'PT', fr: 'FR', ja: 'JP' }; // 3) attr (set by subdir HTML) const htmlLang = (document.documentElement.getAttribute('lang') || '').toLowerCase(); const root = htmlLang.split('-')[0]; // Chinese: detect Hant vs Hans via subtag or region if (root === 'zh') { if (/hant|tw|hk|mo/.test(htmlLang)) return 'ZHT'; return 'ZH'; } if (map[root]) return map[root]; // 4) Browser locale const navTag = (navigator.language || 'en').toLowerCase(); const navRoot = navTag.split('-')[0]; if (navRoot === 'zh') { if (/hant|tw|hk|mo/.test(navTag)) return 'ZHT'; return 'ZH'; } if (map[navRoot]) return map[navRoot]; } catch {} return 'EN'; } function App() { const hash = useHashRoute(); // Persisted language across pages const [lang, setLang] = useState(detectInitialLang); useEffect(() => { try { localStorage.setItem('lyr:lang', lang); } catch {} // Keep document language attribute current for accessibility + SEO const locale = LOCALES.find(l => l.code === lang); const bcp = locale?.bcp || 'en'; const cur = (document.documentElement.getAttribute('lang') || ''); if (!cur || cur.split('-')[0] !== bcp.split('-')[0]) { document.documentElement.setAttribute('lang', bcp); } // RTL languages: AR, HE, FA, UR document.documentElement.setAttribute('dir', locale?.rtl ? 'rtl' : 'ltr'); // Make current lang globally readable by helpers like AILabel window.__lyrLang = lang; }, [lang]); let page = 'home'; let slug = ''; if (hash.startsWith('#/song')) page = 'song'; else if (hash.startsWith('#/trending')) page = 'trending'; else if (hash.startsWith('#/saved')) page = 'saved'; else if (hash.startsWith('#/page/')) { page = 'info'; slug = hash.replace('#/page/', '').replace(/\/.*$/, ''); } else if (hash.startsWith('#/browse/')) { page = 'browse'; slug = hash.replace('#/browse/', '').replace(/\/.*$/, ''); } const labels = { home: '01 Homepage', song: '02 Song Meaning', trending: '03 Trending', saved: '04 Saved', info: `05 Info · ${slug}`, browse: `06 Browse · ${slug}`, }; return (

{page === 'home' && } {page === 'song' && } {page === 'trending' && } {page === 'saved' && } {page === 'info' && } {page === 'browse' && }

); } ReactDOM.createRoot(document.getElementById('root')).render();