/* ——— Shared icon set (line, brass-stroke) ——— */
const Icon = {
Metro: (p) => (
),
Shuttle: (p) => (
),
Halal: (p) => (
),
Pool: (p) => (
),
Gym: (p) => (
),
Sauna: (p) => (
),
Spa: (p) => (
),
Banquet: (p) => (
),
Conference: (p) => (
),
Wifi: (p) => (
),
Bed: (p) => (
),
User: (p) => (
),
Square: (p) => (
),
Phone: (p) => (
),
Mail: (p) => (
),
Pin: (p) => (
),
Star: (p) => (
),
Arrow: (p) => (
),
Check: (p) => (
),
X: (p) => (
),
Menu: (p) => (
),
Calendar: (p) => (
),
Minus: (p) =>
),
};
/* ——— Wordmark ——— */
function Wordmark({ tone = 'cream', size = 'md' }) {
const color = tone === 'cream' ? 'var(--cream)' : 'var(--ink)';
const accent = 'var(--brass)';
const fs = size === 'lg' ? 22 : size === 'sm' ? 14 : 17;
return (
);
}
/* ——— Aggregated Review Badge ——— */
function ReviewBadge({ tone = 'cream', compact = false }) {
const fg = tone === 'cream' ? 'var(--cream)' : 'var(--ink)';
const muted = tone === 'cream' ? 'rgba(244,236,220,0.65)' : 'rgba(26,26,26,0.55)';
const line = tone === 'cream' ? 'var(--line-cream)' : 'var(--line)';
const rows = [
{ src: 'Agoda', score: '7.9', max: '/ 10', count: '6,322' },
{ src: 'Booking', score: '—', max: '', count: '2,820' },
{ src: 'Tripadvisor', score: '4.0', max: '/ 5', count: '1,127' },
{ src: 'Facebook', score: '68%', max: 'rec.', count: '1,511' },
];
if (compact) {
return (
7.9 · 4.0 · 68%
11,780 verified reviews
);
}
return (
VERIFIED · 11,780 REVIEWS
{rows.map((r) => (
{r.src}
{r.score}
{r.max}
· {r.count}
))}
);
}
/* ——— Halal + Shuttle pill badges ——— */
function FeatureBadge({ icon: I, label, sub, tone = 'cream' }) {
const fg = tone === 'cream' ? 'var(--cream)' : 'var(--ink)';
const muted = tone === 'cream' ? 'rgba(244,236,220,0.7)' : 'rgba(26,26,26,0.6)';
const line = tone === 'cream' ? 'var(--line-cream)' : 'var(--line)';
return (
);
}
/* ——— Price-from chip ——— */
function PriceChip({ tone = 'cream' }) {
const fg = tone === 'cream' ? 'var(--cream)' : 'var(--ink)';
const muted = tone === 'cream' ? 'rgba(244,236,220,0.7)' : 'rgba(26,26,26,0.6)';
return (
From
AED 115
· USD 25 / night
);
}
/* ——— Page-section heading ——— */
function SectionLabel({ eyebrow, title, kicker, tone = 'ink', align = 'left' }) {
const fg = tone === 'cream' ? 'var(--cream)' : 'var(--ink)';
const muted = tone === 'cream' ? 'rgba(244,236,220,0.7)' : 'rgba(26,26,26,0.55)';
return (
{eyebrow && (
{eyebrow}
)}
{title}
{kicker &&
{kicker}
}
{ e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(14,59,58,0.10)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
>
{room.tag}
{room.count != null && (
{room.count} keys
)}
{room.name}
{room.tagline}
FROM
{room.priceFrom}
{room.priceUsd}
{/* sqm */}
SIZE
{room.sqm || on request }
{sqmMissing &&
Spec pending from property }
{room.amenities.map((a) => (
))}
Check rates
Details
);
}
/* ——— Booking widget (sticky bar) ——— */
function BookingBar({ onSubmit, compact = false }) {
const [checkIn, setCheckIn] = React.useState('2026-06-12');
const [checkOut, setCheckOut] = React.useState('2026-06-14');
const [adults, setAdults] = React.useState(2);
const [children, setChildren] = React.useState(0);
const [rooms, setRooms] = React.useState(1);
const fieldStyle = {
display: 'flex', flexDirection: 'column', gap: 4, padding: '14px 18px',
borderRight: '1px solid var(--line-cream)', minWidth: 0, flex: 1,
};
const labelStyle = { fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.22em', color: 'rgba(244,236,220,0.6)', textTransform: 'uppercase' };
const inputStyle = {
background: 'transparent', border: 'none', color: 'var(--cream)', fontFamily: 'inherit', fontSize: 14, outline: 'none', padding: 0,
fontWeight: 500,
};
const Stepper = ({ v, set, min = 0 }) => (
set(Math.max(min, v - 1))} style={{ width: 22, height: 22, border: '1px solid var(--line-cream)', background: 'transparent', color: 'var(--cream)', borderRadius: 999, cursor: 'pointer', display: 'grid', placeItems: 'center' }}>
{v}
set(v + 1)} style={{ width: 22, height: 22, border: '1px solid var(--line-cream)', background: 'transparent', color: 'var(--cream)', borderRadius: 999, cursor: 'pointer', display: 'grid', placeItems: 'center' }}>
);
return (
);
}
/* ——— Booking modal (BE iframe stand-in) ——— */
function BookingModal({ open, onClose }) {
React.useEffect(() => {
if (!open) return;
const onKey = (e) => e.key === 'Escape' && onClose();
document.addEventListener('keydown', onKey);
document.body.style.overflow = 'hidden';
return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()} style={{
background: 'var(--cream-2)', width: 'min(960px, 100%)', maxHeight: '92vh', overflow: 'auto',
animation: 'fadeIn 280ms ease both',
}}>
BOOKING ENGINE
Reserve direct — Best Rate Guarantee
{}} />
IFRAME EMBED
Third-party booking engine (D-EDGE / SiteMinder / Synxis) opens here with date and occupancy pre-filled.
Marketing shell keeps PCI/PII scope at zero. Direct-only 5–10% discount applied automatically.
{['Best Rate Guarantee — we match any OTA price', '24-hour free cancellation before check-in', 'Direct-only 5–10% discount auto-applied', 'Free airport shuttle on direct rates'].map((p) => (
))}
);
}
/* ——— Top Nav ——— */
function Nav({ page, setPage, onBook }) {
const [scrolled, setScrolled] = React.useState(false);
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
{ id: 'home', label: 'Stay' },
{ id: 'rooms', label: 'Rooms' },
{ id: 'dining', label: 'Dining' },
{ id: 'facilities', label: 'Facilities' },
{ id: 'offers', label: 'Offers' },
{ id: 'location', label: 'Location' },
];
return (
setPage('home')} style={{ background: 'transparent', border: 'none', padding: 0, cursor: 'pointer' }}>
{links.map((l) => (
setPage(l.id)}
data-active={page === l.id}
className="nav-link"
style={{ background: 'transparent', border: 'none', color: page === l.id ? 'var(--brass)' : 'inherit', cursor: 'pointer', fontSize: 14, fontWeight: 500 }}
>{l.label}
))}
);
}
/* ——— Footer ——— */
function Footer({ setPage }) {
return (
A 4-star hotel in Deira, 100 metres from Union Metro and directly opposite Al Ghurair Centre. 175 rooms and suites, an outdoor pool, a sauna and a gym — and rooms from AED 115 a night.
{[
{ title: 'Stay', items: ['Rooms & Suites', 'Offers', 'Direct-book benefits', 'Free airport shuttle'] },
{ title: 'The hotel', items: ['Dining', 'Facilities', 'Banquet hall', 'Conference rooms'] },
{ title: 'Contact', items: ['+971 4 274 0000', 'grand@landmarkhotels.com', 'Al Riqqa Street, Deira', 'PO Box 42222, Dubai'] },
].map((col) => (
{col.title}
{col.items.map((i) => (
{i}
))}
))}
© 2026 Landmark Hotels & Suites · Landmark Zenath Group
More Landmark hotels in Deira
{['Landmark Riqqa', 'Landmark Premier', 'Landmark Summit', 'Landmark Baniyas', 'Landmark Plaza'].map((p) => (
{p}
))}
);
}
/* ——— Sticky mobile CTA bar ——— */
function MobileBar({ onBook }) {
return (
);
}
/* Export to window */
Object.assign(window, { Icon, Wordmark, ReviewBadge, FeatureBadge, PriceChip, SectionLabel, RoomCard, BookingBar, BookingModal, Nav, Footer, MobileBar });