// site-app.jsx — Site mode bootstrap.
// Renders a single page (mobile + desktop both rendered, CSS shows the right one)
// based on window.__SITE_PAGE__ set in the HTML file.
(function () {
const PAGE = window.__SITE_PAGE__ || 'home';
// ─── Language detection: URL ?lang= wins, then localStorage, else 'ar' ───
const urlLang = new URLSearchParams(location.search).get('lang');
const storedLang = localStorage.getItem('snb-lang');
const LANG = (urlLang === 'ar' || urlLang === 'en') ? urlLang
: (storedLang === 'ar' || storedLang === 'en') ? storedLang
: 'ar';
const DIR = LANG === 'ar' ? 'rtl' : 'ltr';
// Persist and apply to /
localStorage.setItem('snb-lang', LANG);
document.documentElement.setAttribute('lang', LANG);
document.documentElement.setAttribute('dir', DIR);
document.body.setAttribute('data-lang', LANG);
// Switch helper — writes to localStorage, reflects in URL, reloads
function switchLang(newLang) {
localStorage.setItem('snb-lang', newLang);
const url = new URL(location.href);
url.searchParams.set('lang', newLang);
location.href = url.toString();
}
window.snbSwitchLang = switchLang;
window.SNB_LANG = LANG;
// Apply font + color CSS variables (normally driven by Tweaks panel;
// for the live site we bake in the chosen defaults).
const root = document.documentElement;
root.style.setProperty('--snb-green', '#1c261c');
root.style.setProperty('--snb-green-deep', '#020709');
root.style.setProperty('--snb-yellow', '#e8b600');
root.style.setProperty('--snb-yellow-deep','#c69900');
root.style.setProperty('--snb-cream', '#fcfbe1');
root.style.setProperty('--snb-cream-2', '#dfcfab');
// Swap font stacks when Arabic is active
if (LANG === 'ar') {
root.style.setProperty('--snb-display', '"Readex Pro", system-ui, sans-serif');
root.style.setProperty('--snb-headline', '"Readex Pro", system-ui, sans-serif');
root.style.setProperty('--snb-body', '"Readex Pro", system-ui, sans-serif');
} else {
root.style.setProperty('--snb-display', '"ohno-blazeface", "Cooper Black", Georgia, serif');
root.style.setProperty('--snb-headline', '"ohno-blazeface", "Alfa Slab One", Georgia, serif');
root.style.setProperty('--snb-body', '"Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif');
}
const TWEAKS = {
heroVariant: 'food',
heroStyle: 'signature',
rating: 4.3,
reviewCount: '586',
primaryColor: '#1c261c',
accentColor: '#e8b600',
creamColor: '#fcfbe1',
};
function ResponsivePage({ mobile, desktop }) {
return (
<>
{mobile}
{desktop}
);
}
function getPage() {
switch (PAGE) {
case 'menu': return } desktop={} />;
case 'about': return } desktop={} />;
case 'gallery': return } desktop={} />;
case 'contact': return } desktop={} />;
case 'home':
default: return }
desktop={} />;
}
}
function SiteApp() {
const ctx = {
lang: LANG, dir: DIR,
t: (k) => snbT(k, LANG),
tweaks: TWEAKS,
current: PAGE,
};
return (
{getPage()}
);
}
const reactRoot = ReactDOM.createRoot(document.getElementById('root'));
reactRoot.render();
})();