// Shared UI components for Automatic Restaurant & Grill redesign. const { useState, useEffect, useMemo, useRef } = React; // === ICONS (inline SVG, brand-neutral) === const Icon = { pin: (props) => (), phone: (props) => (), clock: (props) => (), arrow: (props) => (), star: (props) => (), external: (props) => (), instagram: (props) => (), facebook: (props) => (), whatsapp: (props) => (), search: (props) => (), check: (props) => (), flame: (props) => (), }; // === REVIEW BADGE === function ReviewBadge({ compact = false }) { return (
t
4.7 ★★★★★
{compact ? '1,921 reviews · talabat' : '1,921 ratings on Talabat'}
 ); } // === NAVBAR === function Navbar({ route, navigate }) { const links = [ { id: 'home', label: 'Home' }, { id: 'menu', label: 'Menu' }, { id: 'branches', label: 'Branches' }, { id: 'catering', label: 'Catering' }, { id: 'order', label: 'Order Online' }, { id: 'about', label: 'Heritage' }, ]; return (
📍 12 outlets across Dubai & Abu Dhabi — navigate('branches')} style={{ cursor: 'pointer' }}>find your nearest branch →
); } // === FOOTER === function Footer({ navigate }) { return ( ); } // === DISH CARD === function DishCard({ dish }) { const tagLabel = { v: 'V', vg: 'VG', gf: 'GF', n: 'Nuts', best: '★ Best-seller' }; const imgSrc = dish.image ? `assets/${dish.image}.jpg` : null; return (
{imgSrc ? {dish.name} :
}
{dish.name} {dish.nameAr}

{dish.desc}

AED{dish.price} {dish.tags.map(t => ( {tagLabel[t]} ))}
); } // === BRANCH CARD === function BranchCard({ branch, selected, onSelect }) { const dl = branch.deeplinks; const items = [ { key: 'talabat', icon: '🍔', label: 'Talabat', url: dl.talabat }, { key: 'deliveroo', icon: '🦘', label: 'Deliveroo', url: dl.deliveroo }, { key: 'careem', icon: '🚗', label: 'Careem', url: dl.careem }, { key: 'whatsapp', icon: '💬', label: 'WhatsApp', url: dl.whatsapp }, ]; return (
onSelect && onSelect(branch.id)}>
{branch.name}
{branch.sub}
{branch.formatLabel}
{branch.address}
{branch.hours}
{branch.phone}
{items.map(it => it.url ? ( e.stopPropagation()}> {it.icon} {it.label} ) : ( {it.icon} — ))}
); } Object.assign(window, { Icon, ReviewBadge, Navbar, Footer, DishCard, BranchCard });