// Home page composition
const { useState: useStateHM, useEffect: useEffectHM } = React;
function LangSwitch() {
const { lang, setLang } = useT();
return (
{['fr', 'en'].map(l => {
const active = lang === l;
return (
);
})}
);
}
function TopNav({ onOpenReserve, onOpenTakeaway }) {
const [scrolled, setScrolled] = useStateHM(false);
const { t } = useT();
useEffectHM(() => {
const onScroll = () => setScrolled(window.scrollY > 20);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
function Hero({ variant, onOpenReserve, onOpenTakeaway }) {
const { t } = useT();
if (variant === 'split') {
return (
{t.hero.eyebrow}
{t.hero.splitA}
{t.hero.splitB}
{t.hero.splitC}
{t.hero.splitLede}
{t.hero.openNow}
);
}
return (
{t.hero.eyebrow}
{t.hero.titleA}
{t.hero.titleB}
{t.hero.titleC}{t.hero.titleD}
{t.hero.lede}
{t.hero.choose}
);
}
function ServiceCard({ index, label, title, desc, cta, img, imgAlt, badge, onClick, layout, mode, modeLabels }) {
const [hover, setHover] = useStateHM(false);
const isProminent = layout === 'prominent' && index === 0;
const dimmed = mode === 'closed';
return (
);
}
function Services({ onOpenReserve, onOpenTakeaway, onOpenDelivery, layout }) {
const { t } = useT();
const store = useLnStore();
const modes = store.serviceModes;
const modeLabels = t.serviceBadge;
return (
{t.services.eyebrow}
{t.services.title}
{t.services.sub}
);
}
function MenuPreview({ onOpenTakeaway }) {
const { t } = useT();
const featured = ['moutabal', 'shish-taouk', 'wrap-falafel', 'kebbeh', 'tabbouleh', 'falafel-box'];
const items = featured.map(id => MENU_ITEMS.find(i => i.id === id));
return (
);
}
function Visit() {
const { t } = useT();
return (
{t.visit.eyebrow}
{t.visit.title}
{t.visit.title2}{t.visit.titleSup}{t.visit.period}
{t.visit.hoursShort}
{RESTAURANT_INFO.phone}
{t.visit.metro}
);
}
function Footer() {
const { t } = useT();
return (
);
}
// Section padding adjustments for small screens
const _homeStyle = document.createElement('style');
_homeStyle.textContent = `
@media (max-width: 720px) {
#services { padding: 32px 0 56px !important; }
#menu { padding: 56px 0 !important; }
#visit { padding: 56px 0 !important; }
footer { padding: 40px 0 28px !important; }
}
`;
document.head.appendChild(_homeStyle);
Object.assign(window, { TopNav, Hero, Services, MenuPreview, Visit, Footer });