// components.jsx — Steaks N Buns reusable UI library // All components consume useSnb() for i18n + tweaks. // ─── App shell: phone frame + page-level header & sticky bottom ──────────── // A "long phone" frame that shows the whole scrollable page in one tall card. // Top has dynamic island + status bar; bottom has home indicator. // Designed for canvas presentation (the canvas pans/zooms; the page itself // doesn't scroll inside the frame — it's all visible). function SnbPhoneFrame({ width = 402, children, height }) { return (
{/* Status bar */}
9:41
{children} {/* Home indicator */}
); } // ─── Mobile menu overlay (hamburger drawer) ──────────────────────────────── function SnbMobileMenu({ open, onClose, current }) { const { t, lang, dir } = useSnb(); React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); const links = [ { k: 'nav_home', href: 'index.html', id: 'home' }, { k: 'nav_menu', href: 'menu.html', id: 'menu' }, { k: 'nav_about', href: 'about.html', id: 'about' }, { k: 'nav_gallery', href: 'gallery.html', id: 'gallery' }, { k: 'nav_contact', href: 'contact.html', id: 'contact' }, ]; return (
{/* Backdrop */}
{/* Drawer */}
); } // ─── Top navbar (sticky, in-page) ───────────────────────────────────────── function SnbTopBar({ logoSrc, dark = false, current }) { const ctx = useSnb(); const t = ctx.t; const cur = current || ctx.current || 'home'; const [menuOpen, setMenuOpen] = React.useState(false); const fg = dark ? 'var(--snb-cream)' : 'var(--snb-green)'; const bg = dark ? 'var(--snb-green)' : 'var(--snb-cream)'; return ( <>
{t('cta_call')}
setMenuOpen(false)} current={cur} /> ); } // ─── Sticky mobile bottom CTA bar (Order / Call / Menu) ──────────────────── function SnbStickyBar() { const { t } = useSnb(); return (
{t('cta_order')} {t('sticky_call')} {t('sticky_menu')}
); } // ─── HERO variants ───────────────────────────────────────────────────────── // All heroes share the same shell + props; variant just swaps image + copy. function SnbHero({ variant = 'food', logoSrc }) { const { t, lang, dir, tweaks } = useSnb(); const variants = { food: { img: 'assets/menu/beef-burger.webp', h: 'hero_h1_food', sub: 'hero_sub_food', kicker: 'hero_kicker', tint: 'rgba(10,29,16,.55)' }, combo: { img: 'assets/menu/maple-crispy-spicy.webp', h: 'hero_h1_combo', sub: 'hero_sub_combo', kicker: 'hero_kicker', tint: 'rgba(10,29,16,.5)' }, late: { img: 'assets/gamer-burger.jpg', h: 'hero_h1_late', sub: 'hero_sub_late', kicker: 'hero_kicker', tint: 'rgba(10,29,16,.4)' }, family: { img: 'assets/saudi-eating.jpg', h: 'hero_h1_family', sub: 'hero_sub_family', kicker: 'hero_kicker', tint: 'rgba(10,29,16,.5)' }, }; const v = variants[variant] || variants.food; return (
{/* Floating review badge */}
{tweaks?.rating ?? 4.3} · {tweaks?.reviewCount ?? '586'}
{t(v.kicker)}

{t(v.h)}

{t(v.sub)}

); } // ─── Trust bar ───────────────────────────────────────────────────────────── function SnbTrustBar() { const { t } = useSnb(); const items = [ { icon: 'star', k: 'trust_rating', hi: true }, { icon: 'moon', k: 'trust_late' }, { icon: 'bike', k: 'trust_delivery' }, { icon: 'fire', k: 'trust_price' }, ]; return (
{items.map((it, i) => (
{t(it.k)}
))}
); } // ─── Order mode grid ─────────────────────────────────────────────────────── function SnbOrderModes({ active = 'delivery' }) { const { t } = useSnb(); const modes = [ { id: 'delivery', icon: 'bike', k: 'mode_delivery', s: 'mode_delivery_sub' }, { id: 'takeaway', icon: 'bag', k: 'mode_takeaway', s: 'mode_takeaway_sub' }, { id: 'dinein', icon: 'chair', k: 'mode_dinein', s: 'mode_dinein_sub' }, { id: 'nocontact', icon: 'box', k: 'mode_nocontact', s: 'mode_nocontact_sub' }, ]; return (

{t('order_mode_h')}

{modes.map(m => { const isActive = m.id === active; return ( ); })}
); } // ─── Menu category tabs (horizontal scroll) ──────────────────────────────── function SnbCategoryTabs({ active = 'burgers', onChange }) { const { t } = useSnb(); const cats = [ { id: 'all', icon: '🍽️', k: 'cat_all' }, { id: 'burgers', icon: '🍔', k: 'cat_burgers' }, { id: 'sandwiches', icon: '🥪', k: 'cat_sandwiches' }, { id: 'appetizers', icon: '🍟', k: 'cat_appetizers' }, { id: 'drinks', icon: '🥤', k: 'cat_drinks' }, { id: 'kids', icon: '🧒', k: 'cat_kids' }, { id: 'sauces', icon: '🥫', k: 'cat_sauces' }, ]; return (
{cats.map(c => { const isActive = c.id === active; return ( ); })}
); } // ─── Menu item card ──────────────────────────────────────────────────────── function SnbMenuItem({ item, layout = 'row' }) { const { t, lang } = useSnb(); const name = item.name?.[lang] || item.name?.en || item.name; const desc = item.desc?.[lang] || item.desc?.en || item.desc; if (layout === 'tile') { return (
{item.badge && ( {item.badge} )}

{name}

{desc &&

{desc}

}
{item.price}{t('sar')} {item.cal && · {item.cal} {t('cal')}}
); } // row layout (default — menu page) return (

{name}

{item.badge && ( {item.badge} )}
{desc &&

{desc}

}
{item.price}{t('sar')} {item.cal != null && {item.cal} {t('cal')}}
); } // ─── Review card ─────────────────────────────────────────────────────────── function SnbReview({ author, locale, stars, body, when }) { const { lang } = useSnb(); return (

"{body?.[lang] || body?.en || body}"

{author?.charAt(0)}
{author}
{locale} · {when}
Google
); } // ─── Section header (eyebrow + title) ────────────────────────────────────── function SnbSectionHead({ kicker, title, sub }) { return (
{kicker &&
{kicker}
}

{title}

{sub &&

{sub}

}
); } // ─── Final CTA banner ────────────────────────────────────────────────────── function SnbFinalCTA() { const { t } = useSnb(); return (

{t('final_cta_h')}

{t('final_cta_sub')}

); } // ─── Footer ──────────────────────────────────────────────────────────────── function SnbFooter() { const { t } = useSnb(); const links = [ { k: 'nav_home', href: 'index.html' }, { k: 'nav_menu', href: 'menu.html' }, { k: 'nav_about', href: 'about.html' }, { k: 'nav_gallery', href: 'gallery.html' }, { k: 'nav_contact', href: 'contact.html' }, ]; return ( ); } Object.assign(window, { SnbPhoneFrame, SnbTopBar, SnbStickyBar, SnbHero, SnbTrustBar, SnbOrderModes, SnbCategoryTabs, SnbMenuItem, SnbReview, SnbSectionHead, SnbFinalCTA, SnbFooter, });