/* ============================================ Yurt on Wheels — Shared components, icons, router ============================================ */ const { useState, useEffect, useMemo, useRef, useCallback } = React; // ---------- Icons (small SVG sprites) ---------- const Icon = { Globe: (p) => ( ), Menu: (p) => ( ), Close: (p) => ( ), Chevron: (p) => ( ), ArrowRight: (p) => ( ), ArrowLeft: (p) => ( ), Heart: (p) => ( ), HeartFill: (p) => ( ), Mountain: (p) => ( ), Clock: (p) => ( ), Calendar: (p) => ( ), Users: (p) => ( ), Truck: (p) => ( ), Plate: (p) => ( ), Shield: (p) => ( ), Yurt: (p) => ( ), Compass: (p) => ( ), Camera: (p) => ( ), Check: (p) => ( ), X: (p) => ( ), WhatsApp: (p) => ( ), Mail: (p) => ( ), Phone: (p) => ( ), Instagram: (p) => ( ), MapPin: (p) => ( ), Search: (p) => ( ), Sparkle: (p) => ( ), Star: (p) => ( ), Leaf: (p) => ( ), }; // ---------- Hash router ---------- // Routes look like: #///[slug] function parseHash() { const raw = (window.location.hash || "#/en").replace(/^#\/?/, ""); const parts = raw.split("?")[0].split("/").filter(Boolean); const lang = (window.YOW_LANGS || ["en"]).includes(parts[0]) ? parts[0] : (window.YOW_DEFAULT_LANG || "en"); const page = parts[1] || "home"; const slug = parts[2] || null; return { lang, page, slug, raw }; } function navigate(lang, page, slug) { let p = `#/${lang}`; if (page && page !== "home") p += `/${page}`; if (slug) p += `/${slug}`; if (window.location.hash !== p) { window.location.hash = p; } } function useRouter() { const [route, setRoute] = useState(parseHash()); useEffect(() => { const onHash = () => { setRoute(parseHash()); // smooth scroll-to-top on route change window.scrollTo({ top: 0, behavior: "auto" }); }; window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); return route; } // ---------- i18n hook ---------- function useT(lang) { return useMemo(() => window.YOW_I18N[lang] || window.YOW_I18N.en, [lang]); } // ---------- Tour helpers ---------- function buildTimelineLabel(t, step) { const L = window.YOW_LOCATIONS; const loc = step.loc ? L[step.loc] : null; const locName = loc?.name || ""; switch (step.action) { case "depart": return loc ? `${t.tl.depart}: ${locName}` : t.tl.depart; case "departCity": return t.tl.departCity; case "arrive": return loc ? `${t.tl.arrive} ${locName}` : t.tl.arrive; case "lunch": case "lunchAt": return loc ? `${t.tl.lunchAt} ${locName}` : t.tl.lunch; case "dinner": case "dinnerAt": return loc ? `${t.tl.dinnerAt} ${locName}` : t.tl.dinner; case "breakfast": return t.tl.breakfast; case "overnight": return loc ? `${t.tl.overnight}: ${locName}` : t.tl.overnight; case "returnCity": return t.tl.returnCity; case "arriveCity": return t.tl.arriveCity; case "visit": return loc ? `${t.tl.visit}: ${locName}` : t.tl.visit; case "tea": return t.tl.tea; default: return locName || ""; } } function isStopStep(step) { return ["arrive", "visit", "lunch", "lunchAt", "dinner", "dinnerAt", "overnight"].includes(step.action); } function formatPriceKZT(n, locale) { if (locale === "ru" || locale === "kz") { return n.toLocaleString("ru-RU").replace(/,/g, " ") + " ₸"; } return n.toLocaleString("en-US") + " ₸"; } // ---------- Generic primitives ---------- function PhotoPlaceholder({ locId, label, sub, aspect, tone, icon, className = "" }) { const L = window.YOW_LOCATIONS; const loc = locId ? L[locId] : null; const lbl = label || loc?.name || "Photo"; const subLine = sub || loc?.blurb || "Mangystau · Photo placeholder"; const _tone = tone || loc?.tone || "warm"; const IconC = icon || Icon.Camera; return (
{lbl}
{subLine}
); } // ---------- Hero "yurt-light" illustration ---------- function YurtLightHero({ caption }) { return (
{/* sky */} {/* stars */} {[ [40, 80], [110, 50], [180, 120], [250, 70], [320, 140], [400, 60], [480, 110], [560, 80], [70, 200], [150, 230], [300, 210], [430, 250], [540, 220], [30, 320], [220, 300], [380, 330], [510, 360], ].map(([x, y], i) => ( ))} {/* far cliffs */} {/* mid cliffs */} {/* warm glow around yurt */} {/* yurt silhouette */} {/* base ring */} {/* roof */} {/* tent ribs */} {/* tunduk */} {/* glowing door window */} {/* tiny tea steam */} {/* foreground horizon dust line */}
{caption}
); } // ---------- Header ---------- function Header({ route, t, openMenu, openLang, langMenuOpen }) { const isActive = (page) => route.page === page; return (
); } function Logo({ height = 28 }) { // Real brand logo (wordmark + yurt mark). Native gold #E6B574 on transparent. return ( Yurt on Wheels ); } // ---------- Language switcher ---------- function LanguageSwitcher({ route, t, open, onOpen }) { const wrapRef = useRef(null); useEffect(() => { if (!open) return; function onClickOutside(e) { if (wrapRef.current && !wrapRef.current.contains(e.target)) onOpen(false); } document.addEventListener("mousedown", onClickOutside); return () => document.removeEventListener("mousedown", onClickOutside); }, [open, onOpen]); const langs = window.YOW_LANGS; return (
{open && (
{langs.map(lc => { const info = window.YOW_I18N[lc]; return ( ); })}
)}
); } // ---------- Mobile drawer menu ---------- function MobileDrawer({ open, onClose, t, route }) { return (
); } // ---------- Footer ---------- function Footer({ t, route }) { return ( ); } // ---------- Photo carousel ---------- function PhotoCarousel({ locIds }) { const [idx, setIdx] = useState(0); const n = locIds.length; const prev = () => setIdx((i) => (i - 1 + n) % n); const next = () => setIdx((i) => (i + 1) % n); return (
{locIds.map((id, i) => ( ))}
{n > 1 && (
{locIds.map((_, i) => (
)}
); } // Expose Object.assign(window, { Icon, useT, useRouter, navigate, parseHash, PhotoPlaceholder, YurtLightHero, Header, Footer, MobileDrawer, LanguageSwitcher, Logo, PhotoCarousel, buildTimelineLabel, isStopStep, formatPriceKZT, });