// Shared components: Nav, Footer, Ornament, BranchPicker modal, TrustStrip, MobileBar. const { useState, useEffect, useRef, useMemo } = React; const fmt = (n) => (n == null ? '—' : Number(n).toString()); // ───────────────────────────────────────────────────────────── // Ornament — hairline with diamond // ───────────────────────────────────────────────────────────── function Ornament({ label, dark }) { const color = dark ? 'rgba(255,255,255,0.35)' : 'var(--rule)'; return (
{label && {label}}
); } // ───────────────────────────────────────────────────────────── // Wordmark — type-only lockup (not the bitmap logo) // ───────────────────────────────────────────────────────────── function Wordmark({ size = 22, light }) { return ( {e.preventDefault(); window.DDNav.go('home');}} className="flex items-center" style={{textDecoration: 'none', gap: 12}}> D Delhi Darbar Mumbai · Dubai · Since 1973 ); } // ───────────────────────────────────────────────────────────── // Nav // ───────────────────────────────────────────────────────────── function Nav({ route, light, onOrder, lang, setLang }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', on); on(); return () => window.removeEventListener('scroll', on); }, []); const items = [ { id: 'menu', label: 'Menu' }, { id: 'branches', label: 'Branches' }, { id: 'catering', label: 'Catering' }, { id: 'iftar', label: 'Iftar' }, { id: 'about', label: 'About' }, ]; const isLight = light && !scrolled; return (
); } // ───────────────────────────────────────────────────────────── // Branch picker modal — fans out to platforms // ───────────────────────────────────────────────────────────── function BranchPicker({ open, onClose }) { const [step, setStep] = useState(1); const [branchId, setBranchId] = useState(null); const branch = window.DD.BRANCHES.find(b => b.id === branchId); useEffect(() => { if (open) { setStep(1); setBranchId(null); } }, [open]); useEffect(() => { const esc = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', esc); return () => window.removeEventListener('keydown', esc); }, [onClose]); if (!open) return null; return (
e.stopPropagation()}> {/* Header */}
Order Direct · Step {step} of 2
{step === 1 ? 'Choose your branch' : 'Pick a platform'}
{step === 1 && (
{window.DD.BRANCHES.map(b => ( ))}
Not sure which is closest? { e.preventDefault(); setBranchId('karama'); setStep(2);}} style={{borderBottom: '1px solid'}}>Use nearest to me
)} {step === 2 && branch && (
{branch.long}
{branch.landmark}
{window.DD.PLATFORMS.map(p => { const url = branch[p.id]; return (
{p.name}
{p.tag}
↗ ); })} Or WhatsApp the branch directly
)}
); } // ───────────────────────────────────────────────────────────── // Trust strip // ───────────────────────────────────────────────────────────── function TrustStrip({ dark }) { const items = [ { big: '4.6★', small: '1,000+ ratings on Talabat' }, { big: '40+', small: 'years in the UAE' }, { big: '3', small: 'Dubai branches' }, { big: '11:30–Midnight', small: 'kitchen open, daily' }, ]; return (
{items.map((it, i) => (
0 ? `1px solid ${dark ? 'rgba(255,255,255,0.12)' : 'var(--rule)'}` : 'none', paddingLeft: i > 0 ? 24 : 0}}> {it.big} {it.small}
))}
); } // ───────────────────────────────────────────────────────────── // Section header — eyebrow + display + sub // ───────────────────────────────────────────────────────────── function SectionHeader({ no, eyebrow, title, sub, align = 'left' }) { return (
{no && {no}} {eyebrow}

{title}

{sub &&

{sub}

}
); } // ───────────────────────────────────────────────────────────── // Footer // ───────────────────────────────────────────────────────────── function Footer({ onOrder }) { return ( ); } // ───────────────────────────────────────────────────────────── // Mobile bottom bar // ───────────────────────────────────────────────────────────── function MobileBar({ onOrder }) { return (
Mumbai’s Best Biryani
); } // ───────────────────────────────────────────────────────────── // WhatsApp FAB // ───────────────────────────────────────────────────────────── function WhatsAppFab() { return ( { e.currentTarget.style.transform = 'scale(1.05)'; }} onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }} title="WhatsApp: catering enquiry"> ); } // ───────────────────────────────────────────────────────────── // Tag pill // ───────────────────────────────────────────────────────────── function Tag({ children, color = 'ink', light }) { const colors = { ink: { bg: 'transparent', fg: 'var(--ink)', br: 'var(--rule)' }, cardamom: { bg: 'transparent', fg: 'var(--cardamom)', br: 'var(--cardamom)' }, terracotta: { bg: 'var(--cta)', fg: '#fff', br: 'var(--cta)' }, saffron: { bg: 'var(--accent)', fg: 'var(--ink)', br: 'var(--accent)' }, light: { bg: 'rgba(255,255,255,0.12)', fg: '#fff', br: 'rgba(255,255,255,0.6)' }, }; const c = light ? colors.light : (colors[color] || colors.ink); return ( {children} ); } // ───────────────────────────────────────────────────────────── // Open / closed indicator // ───────────────────────────────────────────────────────────── function OpenNow({ branch, dark }) { const now = new Date(); const h = now.getHours() + now.getMinutes() / 60; const open = h >= branch.open.start && h < branch.open.end; return ( {open ? 'Open now' : 'Closed'} · {branch.hours} ); } // ───────────────────────────────────────────────────────────── // Placeholder photo (for missing imagery — used as fallback too) // ───────────────────────────────────────────────────────────── function PhotoPlaceholder({ label, height = 360, dark, dense }) { const bgA = dark ? '#2a2620' : 'var(--cream-2)'; const bgB = dark ? '#1F1B17' : 'var(--cream)'; return (
[ {label} — client to supply ]
); } // SmartImg — falls back to PhotoPlaceholder if src is missing/empty/broken. // Use everywhere instead of so the design stays intact even if a photo // goes missing. function SmartImg({ src, label, height, style, dark, alt = '' }) { const [failed, setFailed] = React.useState(!src); React.useEffect(() => { setFailed(!src); }, [src]); if (failed || !src) { return (
); } return ( {alt} setFailed(true)} style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', ...style}} /> ); } Object.assign(window, { Ornament, Wordmark, Nav, BranchPicker, TrustStrip, SectionHeader, Footer, MobileBar, WhatsAppFab, Tag, OpenNow, PhotoPlaceholder, SmartImg, fmt, });