// ============================================================
// Aroos Damascus — shared React components
// ============================================================
const { useState, useEffect, useMemo, useCallback, useRef, createContext, useContext } = React;
// ---------- I18n + Lang context ----------
const LangCtx = createContext({ lang: "en", setLang: () => {} });
const useLang = () => useContext(LangCtx);
// Helper to pick the right side of a bilingual record
const pick = (rec, lang) => (rec && typeof rec === "object" && rec[lang] != null) ? rec[lang] : rec;
// ---------- SVG icons ----------
const RubElHizb = ({ className, style }) => (
// Eight-pointed star = two overlapping squares rotated 45° (square + square only — within rules)
);
const TrayIcon = ({ className, style }) => (
// Brass-tray illustration — circle + concentric ring + handles (allowed primitives)
);
const PhoneIcon = ({ className }) => (
);
const WhatsAppIcon = ({ className }) => (
);
const MapPinIcon = ({ className }) => (
);
const ClockIcon = ({ className }) => (
);
const MetroIcon = ({ className }) => (
);
const CarIcon = ({ className }) => (
);
const ArrowRight = ({ className }) => (
);
const StarIcon = () => ✦;
// ---------- Dubai time helpers ----------
function dubaiTime() {
// Asia/Dubai is UTC+4
const now = new Date();
const utcMs = now.getTime() + (now.getTimezoneOffset() * 60000);
return new Date(utcMs + 4 * 3600000);
}
function isOpenAt(date, openH, closeH) {
// openH..closeH where closeH may be next-day (e.g. open 7 close 3)
const h = date.getHours() + date.getMinutes() / 60;
if (closeH > openH) return h >= openH && h < closeH;
// wraps midnight
return h >= openH || h < closeH;
}
function minutesUntil(target, from) {
let m = (target - (from.getHours() * 60 + from.getMinutes()));
while (m < 0) m += 24 * 60;
return m;
}
// ---------- Late-night badge ----------
function LateBadge({ override }) {
const { lang } = useLang();
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 30000);
return () => clearInterval(id);
}, []);
// override values: 'auto' | 'on' | 'off'
const time = dubaiTime();
const realOpen = isOpenAt(time, 7, 3); // 07:00 – 03:00
const isOpen = override === "on" ? true : override === "off" ? false : realOpen;
const closeTime = 3; // 03:00
let mins = 0;
if (isOpen) {
const closeMin = closeTime * 60;
const nowMin = time.getHours() * 60 + time.getMinutes();
mins = closeMin - nowMin;
if (mins <= 0) mins += 24 * 60;
}
const hrs = Math.floor(mins / 60);
const mm = mins % 60;
const labelOpen = lang === "en" ? "Grills running" : "المشاوي شغّالة";
const labelCount = lang === "en" ? `another ${hrs}h ${mm}m` : `لمدّة ${hrs} س ${mm} د`;
const labelClosed = lang === "en" ? "Closed · opens 07:00" : "مغلق · يفتح 07:00";
return (
{isOpen ? (
<>
{labelOpen}
· {labelCount}
) : (
{labelClosed}
)}
);
}
// Compact "Open now" pill for branch cards
function BranchOpenPill({ branch }) {
const { lang } = useLang();
const time = dubaiTime();
let open = isOpenAt(time, 7, 3);
// crude per-branch refinement
if (branch.id === "sheikh-zayed") open = isOpenAt(time, 8, 2);
if (branch.id === "sharjah") {
const dow = time.getDay(); // 0=Sun (Asia/Dubai week: Fri=5)
if (dow === 5) {
const h = time.getHours() + time.getMinutes() / 60;
open = (h >= 7 && h < 11.5) || (h >= 13 || h < 4);
} else {
open = isOpenAt(time, 7, 3);
}
}
return (
{open
? (lang === "en" ? "Open now" : "مفتوح الآن")
: (lang === "en" ? "Closed" : "مغلق")}
);
}
// ---------- Nav ----------
function Nav({ route, setRoute }) {
const { lang, setLang } = useLang();
const [solid, setSolid] = useState(false);
useEffect(() => {
const onScroll = () => setSolid(window.scrollY > 20);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const links = [
["home", COPY.nav.home],
["story", COPY.nav.story],
["menu", COPY.nav.menu],
["branches", COPY.nav.branches],
["late-night", COPY.nav.lateNight],
];
return (
);
}
// ---------- Sticky CTA ----------
function StickyCTA({ setRoute }) {
const { lang } = useLang();
return (
);
}
// Simpler StickyCTA without double phone icons
function StickyCTAClean({ setRoute }) {
const { lang } = useLang();
return (
);
}
// ---------- WhatsApp FAB ----------
function WAFab() {
return (
);
}
// ---------- Footer ----------
function Footer({ setRoute }) {
const { lang } = useLang();
return (
);
}
// Export
Object.assign(window, {
LangCtx, useLang, pick,
RubElHizb, TrayIcon, PhoneIcon, WhatsAppIcon, MapPinIcon, ClockIcon, MetroIcon, CarIcon, ArrowRight, StarIcon,
dubaiTime, isOpenAt,
LateBadge, BranchOpenPill,
Nav, StickyCTA: StickyCTAClean, WAFab, Footer,
});