); } function SvcSkelCard() { return (

); } function SvcSkelHero() { return (

); } /* ---------- Home entry — the section that lives on the /car home ---------- */ function ServicesHomeEntry() { const go = (path) => navigate(path); return (

عروض وخصومات

خدمات سيارتك

{/* Service categories — quick entry into the services discover */}

{SVC_CATEGORIES.map((c) => { const Glyph = c.icon; return ( ); })}

{/* Featured coupons — leads with the discount to sell the value */}

{SVC_OFFERS.map((o) => ( go(svcOfferPath(o.key))} /> ))}

); } /* ---------- Demo: the /car home with the services section injected ---------- Reproduces the home's top chrome + parts categories so the services block is seen in real placement (after parts, before the finding tools). Rendered inside the real chrome, like #/home-car-demo. */ function ServicesHomeDemo({ onMenu, onCart, cartCount, onSearch }) { const partsCats = [ { id: "bumpers-grilles", label: "الصدامات", icon: }, { id: "suspension", label: "المساعدات", icon: }, { id: "brakes", label: "الفرامل", icon: }, { id: "ac", label: "التكييف", icon: }, { id: "lighting", label: "الإضاءة", icon: }, { id: "engine-trans", label: "المحرك", icon: }, { id: "filters", label: "الفلاتر", icon: }, { id: "electrical-battery", label: "الكهرباء", icon: }, ]; const recent = ["bumperR", "shockR", "pads", "bracketR", "grille", "bumperL"]; return ( <> {/* Car bar + search (mirrors AnchoredHome) */}

سيارتك الحالية

{CURRENT_CAR.name}

{/* Parts categories */}

اختر القسم

{partsCats.map((c, i) => ( ))}

{/* NEW — car services entry */} {/* Recently viewed (context below the services block) */}

شاهدت مؤخراً

{recent.map((k, i) => navigate("/p/" + k)} />)}

); } /* ---------- Above-fold entry (locked: the vertical toggle) ---------- The services SECTION lives below the fold, so services went unnoticed. The locked answer is a toggle under the search that switches the home between two co-equal verticals (parts / services). The look is the underline-tabs style (`.svc-vtabs`, sliding underline), picked from #/services-toggle-demo variant 2. Previewed at #/services-entry-demo. */ function ServicesEntryDemo({ onMenu, onCart, cartCount, onSearch }) { const [vertical, setVertical] = React.useState("parts"); // Sticky collapse — trust values fold away, car bar + search + toggle pin, // same mechanism as AnchoredHome (sentinel + IntersectionObserver → .stuck). const sentinelRef = React.useRef(null); const [stuck, setStuck] = React.useState(false); React.useEffect(() => { const el = sentinelRef.current; if (!el || !("IntersectionObserver" in window)) return; const io = new IntersectionObserver(([e]) => setStuck(!e.isIntersecting), { threshold: 0 }); io.observe(el); return () => io.disconnect(); }, []); // Switching vertical returns to the top so the new tab starts from its head. // Scroll AFTER the swapped content commits (an effect), otherwise the smooth // scroll starts against the old tab's height and gets clamped mid-animation. const firstRun = React.useRef(true); React.useEffect(() => { if (firstRun.current) { firstRun.current = false; return; } window.scrollTo({ top: 0, behavior: "smooth" }); }, [vertical]); const selectVertical = (v) => setVertical(v); const partsCats = [ { id: "bumpers-grilles", label: "الصدامات", icon: }, { id: "suspension", label: "المساعدات", icon: }, { id: "brakes", label: "الفرامل", icon: }, { id: "ac", label: "التكييف", icon: }, { id: "lighting", label: "الإضاءة", icon: }, { id: "engine-trans", label: "المحرك", icon: }, { id: "filters", label: "الفلاتر", icon: }, { id: "electrical-battery", label: "الكهرباء", icon: }, ]; const recent = ["bumperR", "shockR", "pads", "bracketR", "grille", "bumperL"]; const isServices = vertical === "services"; // Chrome above the tabs (car bar + trust + search) stays constant — the tabs // only change what's BELOW them; that's how users read a tab switch. const CarBar = (

سيارتك الحالية

{CURRENT_CAR.name}

); const PartsCategories = (

اختر القسم

{partsCats.map((c, i) => ( ))}

); const RecentlyViewed = (

شاهدت مؤخراً

{recent.map((k, i) => navigate("/p/" + k)} />)}

); // Services landing — deals-led (the discount is the value, so lead with it): // spotlight hero → offers rail → categories as a compact secondary row → // browse-all. Every path feeds the discover / a coupon PDP. const servicesLanding = ( <> {/* Spotlight — the single best deal */}

navigate(svcOfferPath(SVC_OFFERS[0].key))} />

{/* Categories — browse by service; الكل is the entry into the discover */}

تصفّح حسب الخدمة

{SVC_CATEGORIES.map((c) => { const Glyph = c.icon; return ( ); })}

{/* More offers */}

أبرز العروض

{SVC_OFFERS.slice(1).map((o) => ( navigate(svcOfferPath(o.key))} /> ))}

); const body = isServices ? servicesLanding : (<>{PartsCategories}{RecentlyViewed}); return ( <>

{CarBar} {body} ); } const SVC_SORTS = [ { id: "recent", label: "الأحدث" }, { id: "popular", label: "الأكثر رواجاً" }, { id: "price-asc", label: "السعر من الأقل" }, { id: "price-desc", label: "السعر من الأعلى" }, ]; const SVC_CITIES = [ "الرياض", "جدة", "مكة المكرمة", "المدينة المنورة", "الدمام", "الخبر", "الظهران", "الأحساء", "القطيف", "الجبيل", "بريدة", "عنيزة", "حائل", "تبوك", "أبها", "خميس مشيط", "نجران", "جازان", "الطائف", "ينبع", "الباحة", "عرعر", "سكاكا", ]; /* City picker — services are location-based, so the browse is scoped to a city. Reuses the app's BottomSheet + dsc-pick, like the sort/parts sheets. */ function SvcCitySheet({ open, city, onSelect, onClose }) { return (

{SVC_CITIES.map((c) => ( ))}

); } /* ---------- Branch card + full-list sheet (PDP الفروع) ---------- */ function SvcBranchCard({ b, vendor }) { return ( {b.area} {b.rating && ( {b.rating}+ {b.reviews != null && ({b.reviews}+)} · جوجل )} {[b.street, b.city].filter(Boolean).join(" · ")} {b.hours && {b.hours}} ); } // All branches in a bottom sheet, filterable by city. Scales past the inline // preview without stretching the page. function SvcBranchesSheet({ open, branches, vendor, onClose }) { const [cityFilter, setCityFilter] = React.useState("all"); const listRef = React.useRef(null); React.useEffect(() => { if (listRef.current) listRef.current.scrollTop = 0; }, [cityFilter]); const cities = branches.reduce((acc, b) => (acc.includes(b.city) ? acc : acc.concat(b.city)), []); const shown = cityFilter === "all" ? branches : branches.filter((b) => b.city === cityFilter); return (

{cities.length > 1 && (

{cities.map((c) => ( ))}

)}

{shown.map((b, i) => )}

); } /* ---------- Services discover (/services and /services/{cat}) ---------- Car-agnostic coupon feed. No fitment/position — the axes are category, discount, rating and location. The card unit is a vendor coupon. */ function ServicesDiscover({ catSlug, onSearch }) { const cat = catSlug ? (SVC_CAT_BY_SLUG[catSlug] || catSlug) : "all"; const [sort, setSort] = React.useState("recent"); const [city, setCity] = React.useState(SVC_CITIES[0]); const [cityOpen, setCityOpen] = React.useState(false); const [descOpen, setDescOpen] = React.useState(false); React.useEffect(() => { setDescOpen(false); }, [cat]); // collapse on category change // Brief skeleton whenever a filter changes (category / city / sort) and on // entry, reads as "fetching new results", and jumps back to the top so the // user sees the refreshed set from its head. const [loading, setLoading] = React.useState(true); React.useEffect(() => { setLoading(true); window.scrollTo(0, 0); const t = setTimeout(() => setLoading(false), 420); return () => clearTimeout(t); }, [cat, city, sort]); // Keep the active category chip fully in view on load (it was clipped at the // rail edge otherwise). const activeChipRef = React.useRef(null); React.useEffect(() => { // Only pull a selected category into view; "all" is the rail's natural // start, and scrolling it would clip it against the edge (eats the padding). if (cat !== "all" && activeChipRef.current) { activeChipRef.current.scrollIntoView({ inline: "center", block: "nearest" }); } }, [cat]); const catObj = SVC_CATEGORIES.find((c) => c.id === cat); const catLabel = cat === "all" ? "خدمات سيارتك" : (catObj ? catObj.label : cat); // Filter to the category, then seed to a realistic count (clones keep a // unique key but route to the real offer via origKey). Drop at port time. const base = SVC_OFFERS.filter((o) => cat === "all" || o.cat === cat); const SEED = 12; const seeded = base.length ? Array.from({ length: Math.max(base.length, SEED) }, (_, i) => { const b = base[i % base.length]; return i < base.length ? b : { ...b, key: b.key + "__s" + i, origKey: b.key }; }) : base; const sorted = [...seeded].sort((a, b) => { if (sort === "popular") return (b.rc || 0) - (a.rc || 0); if (sort === "price-asc") return Number(a.price) - Number(b.price); if (sort === "price-desc") return Number(b.price) - Number(a.price); return 0; // recent = insertion (authoring) order }); const cats = [{ id: "all", label: "الكل" }, ...SVC_CATEGORIES.map((c) => ({ id: c.id, label: c.label }))]; // Merchandised storefront (الكل view only): a hero + themed rails break the // monotony of a flat list. A selected category stays a focused list. const isAll = cat === "all"; const heroOffer = SVC_OFFERS.find((o) => o.hero) || SVC_OFFERS.slice().sort((a, b) => b.pct - a.pct)[0]; const featured = ["quick-wash", "interior-detail", "nano-coat", "tint-front", "brake-service", "polish"] .map((k) => SVC_OFFERS.find((o) => o.key === k)).filter(Boolean); const topRated = SVC_OFFERS.slice().sort((a, b) => (parseFloat(b.rating) || 0) - (parseFloat(a.rating) || 0)).slice(0, 6); const mostBooked = SVC_OFFERS.slice().sort((a, b) => (b.rc || 0) - (a.rc || 0)).slice(0, 6); const rail = (title, offers) => (

{title}

{offers.map((o) => navigate(svcOfferPath(o.key))} />)}

); const rows = sorted.map((o) => ( navigate(svcOfferPath(o.origKey || o.key))} /> )); return (

{/* Title row — page title + the city scope in one fixed, prominent slot */}

{catLabel}

{(() => { const d = isAll ? SVC_ALL_DESC : (catObj && catObj.desc); if (!d) return null; return ( ); })()}

{/* Category filter — the one inline narrowing rail */}

{cats.map((c) => ( ))}

{/* Sort — inline single-select chips (only on a focused category list). Labeled + lighter outline-active so they don't read as more category chips. */} {!isAll && (

{"الترتيب :"}

{SVC_SORTS.map((s) => ( ))}

)}

setCityOpen(false)} /> {loading ? ( isAll ? ( <>

{[0, 1, 2].map((i) => )}

) : (

{[0, 1, 2, 3].map((i) => )}

) ) : isAll ? ( <>

navigate(svcOfferPath(heroOffer.key))} />

{rail("عروض مختارة", featured)} {rail("الأكثر مبيعاً", mostBooked)} {rail("الأعلى تقييماً", topRated)}

كل العروض

{rows}

) : (

{rows}

)}

); } /* ---------- PDP image gallery — single image, or swipeable if multiple ---------- */ function SvcPdpGallery({ images, Glyph }) { const [idx, setIdx] = React.useState(0); if (!images.length) { return

{Glyph && }

; } if (images.length === 1) { return (

{ e.currentTarget.style.display = "none"; }} />

); } const onScroll = (e) => { const el = e.currentTarget; const i = Math.round(Math.abs(el.scrollLeft) / el.clientWidth); if (i !== idx) setIdx(i); }; return (

{images.map((src, i) => (

{ e.currentTarget.style.display = "none"; }} />

))}

{images.map((_, i) => )}

); } /* ---------- Coupon PDP (/car-services/{offer}) ---------- Models the live services offer page: vendor + title + rating, price/discount, description, how-to-use (the coupon flow), terms, branches, related. Buy is a coupon purchase (booking flow not built → قيد الإنشاء toast). */ function ServicesPdp({ offerKey, cart, onAddToCart, onCart, onToast }) { const o = SVC_OFFERS.find((x) => x.key === offerKey) || SVC_OFFERS[0]; const Glyph = SVC_CAT_ICON[o.cat]; const catObj = SVC_CATEGORIES.find((c) => c.id === o.cat); const catLabel = catObj ? catObj.label : "خدمات"; // Multi-option offers let the buyer pick a variant (here, car size). The // chosen option drives the price, the discount, and what lands in the cart; // single-option offers just use the offer itself as the view. const hasOpts = Array.isArray(o.options) && o.options.length > 0; const [optId, setOptId] = React.useState(hasOpts ? o.options[0].id : null); const opt = hasOpts ? (o.options.find((x) => x.id === optId) || o.options[0]) : null; const view = opt || o; // the currently-priced thing const cartKey = opt ? o.key + "__" + opt.id : o.key; // unique per option // Same add-to-cart action + button as parts: tap adds, then it flips to // "في السلة" and opens the cart on the next tap. const qty = (cart || []).reduce((n, it) => (it.key === cartKey ? n + it.qty : n), 0); const isAdded = qty > 0; // Inline CTA in the page; the sticky bar slides up only once the inline one // scrolls out of view, so the action is always reachable but not redundant. const inlineRef = React.useRef(null); const [showBar, setShowBar] = React.useState(false); // Save-for-later. Local to the prototype (favourites aren't wired to a store // yet); the heart fills charcoal (--text) on tap and pops. Not red — red is // reserved for the buy CTA so the two don't compete. const [faved, setFaved] = React.useState(false); React.useEffect(() => { const el = inlineRef.current; if (!el || !("IntersectionObserver" in window)) return; // Only when scrolled PAST the inline CTA (above the viewport), not when it's // still below (not reached) — both read as "not intersecting". const io = new IntersectionObserver(([e]) => setShowBar(!e.isIntersecting && e.boundingClientRect.top < 0), { threshold: 0 }); io.observe(el); return () => io.disconnect(); }, []); const buyBtn = ( ); const steps = [ { t: "أضف العرض للسلة", s: "أكمل الدفع ويصلك كوبون العرض فوراً." }, { t: "احجز موعدك", s: "اختر الوقت المناسب لك مع المركز." }, { t: "قدّم الكوبون", s: "توجّه للفرع وقدّم الكوبون لتحصل على الخدمة." }, ]; const terms = [ "العرض صالح لمدة 30 يوماً من تاريخ الشراء.", "يلزم حجز موعد مسبق مع المركز بعد شراء العرض.", "السعر لا يشمل أجور العمالة أو قطع الغيار ما لم يُذكر خلاف ذلك.", "صالح في جميع فروع " + o.vendor + " المشاركة.", "صالح طوال أيام الأسبوع خلال ساعات العمل الرسمية.", ]; // Google rating/reviews are the place's, attributed to Google (Speero has no // first-party reviews yet). Per-branch, since Google rates the location. const branches = [ { area: "حي النخيل", city: "الرياض", street: "طريق الأمير محمد بن سلمان", hours: "٩:٠٠ ص - ١١:٠٠ م", rating: "4.6", reviews: 210 }, { area: "حي العليا", city: "الرياض", street: "طريق العليا العام", hours: "٩:٠٠ ص - ١١:٠٠ م", rating: "4.8", reviews: 512 }, { area: "حي الملز", city: "الرياض", street: "شارع جرير", hours: "٨:٠٠ ص - ١٠:٠٠ م", rating: "4.3", reviews: 86 }, { area: "حي الياسمين", city: "الرياض", street: "طريق أنس بن مالك", hours: "١٠:٠٠ ص - ١٢:٠٠ م", rating: "4.7", reviews: 148 }, { area: "حي الروضة", city: "جدة", street: "شارع صاري", hours: "٩:٠٠ ص - ١١:٠٠ م", rating: "4.5", reviews: 301 }, { area: "حي السلامة", city: "جدة", street: "شارع الأمير سلطان", hours: "٩:٠٠ ص - ١١:٠٠ م", rating: "4.6", reviews: 174 }, { area: "حي الشاطئ", city: "الدمام", street: "طريق الكورنيش", hours: "٨:٠٠ ص - ١٠:٠٠ م", rating: "4.4", reviews: 122 }, { area: "حي العزيزية", city: "مكة", street: "شارع الحج", hours: "٩:٠٠ ص - ١١:٠٠ م", rating: "4.9", reviews: 64 }, ]; // A few branches show inline; the full list (with a city filter) lives in a // bottom sheet so the page stays short even with many locations. const BRANCH_PREVIEW = 3; const [branchesSheet, setBranchesSheet] = React.useState(false); const related = [ ...SVC_OFFERS.filter((x) => x.cat === o.cat && x.key !== o.key), ...SVC_OFFERS.filter((x) => x.cat !== o.cat && x.key !== o.key), ].slice(0, 6); return (

{o.vendor}

{o.title}

{o.desc &&

{o.desc}

} {o.rating && (

{o.rating}{o.rc && · {o.rc} تقييم}

)} {hasOpts && (

اختر حجم سيارتك

{o.options.map((op) => { const sel = op.id === optId; return ( ); })}

)}

{view.price} {view.oldPrice} خصم {view.pct}%

{buyBtn}

الوصف

احصل على {o.title} من {o.vendor} بأيدي فنيين محترفين وخامات موثوقة، مع ضمان على جودة الخدمة والتزام بالمواعيد، وبأفضل سعر عبر سبيرو.

كيف تستفيد من العرض

{i + 1}

{st.t}

{st.s}

الشروط والأحكام

الفروع

{branches.slice(0, BRANCH_PREVIEW).map((b, i) => )}

{branches.length > BRANCH_PREVIEW && ( )}

خدمات ذات صلة

{related.map((r) => navigate(svcOfferPath(r.key))} />)}

setBranchesSheet(false)} /> {/* Sticky buy bar — shared .buybar with parts; slides up on scroll */}

{view.price} {view.oldPrice}

{buyBtn}

); } /* ---------- Toggle look exploration (#/services-toggle-demo) ---------- The parts/services toggle currently reads as a generic segmented pill. This demo stacks candidate looks so the PM can compare, then we wire the winner into the real entry (ServicesEntryDemo). */ function ServicesToggleDemo() { const P = "قطع الغيار", S = "خدمات السيارة"; const [a, setA] = React.useState("parts"); const [b, setB] = React.useState("parts"); const [c, setC] = React.useState("parts"); const [d, setD] = React.useState("parts"); const [e, setE] = React.useState("parts"); const [f, setF] = React.useState("parts"); const [g, setG] = React.useState("parts"); return (

أنماط التبديل — قطع / خدمات

يظهر أسفل شريط البحث في الرئيسية. اضغط للتبديل بين النمطين.

{/* Placement context */} {/* 1 — Sliding segmented (evolve the current pill) */}

١ · شريط منزلق

{/* 2 — Underline tabs (editorial, no track) */}

٢ · تبويب بخط سفلي

{/* 3 — Split cards (two destinations, with sublabels) */}

٣ · بطاقتان

{/* 4 — Solid pill chips (matches the discover category chips) */}

٤ · شرائح ممتلئة

{/* 5 — Underline, icon-free (quietest) */}

٥ · خط سفلي بدون أيقونات

أوضح كزر تبديل ↓

{/* 6 — Filled sliding thumb (reads unmistakably as a switch) */}

٦ · شريط ممتلئ منزلق

{/* 7 — Underline tabs housed in a bordered control (adds "buttonness") */}

٧ · تبويب داخل إطار

); } /* ---------- Stacked scroll-spy entry (#/services-stacked-demo) ---------- Alternative to the switch-entry: both verticals stacked on ONE page, the pinned toggle acts as a scroll-spy anchor nav — tapping scrolls to a section, and scrolling flips the active tab automatically. */ function ServicesStackedDemo({ onMenu, onCart, cartCount, onSearch }) { const [active, setActive] = React.useState("parts"); const [stuck, setStuck] = React.useState(false); const sentinelRef = React.useRef(null); const chromeRef = React.useRef(null); const partsRef = React.useRef(null); const servicesRef = React.useRef(null); // While a tap-scroll is animating, freeze the scroll-spy so it doesn't fight // the programmatic scroll and flicker the active tab. const spyLock = React.useRef(false); const spyTimer = React.useRef(null); // Visual-search card rolls its wheel when it scrolls into view (same as home). const peekRef = React.useRef(null); const [peekRolling, setPeekRolling] = React.useState(false); React.useEffect(() => { const el = peekRef.current; if (!el || !("IntersectionObserver" in window)) return; const io = new IntersectionObserver(([e]) => setPeekRolling(e.isIntersecting), { threshold: 0.6 }); io.observe(el); return () => io.disconnect(); }, []); // Chrome collapse (trust folds, car bar + search + toggle pin), same as the // switch-entry / AnchoredHome. React.useEffect(() => { const el = sentinelRef.current; if (!el || !("IntersectionObserver" in window)) return; const io = new IntersectionObserver(([e]) => setStuck(!e.isIntersecting), { threshold: 0 }); io.observe(el); return () => io.disconnect(); }, []); // Scroll-spy: the services section becoming active once its top passes just // below the pinned chrome (a thin band near the top of the viewport). React.useEffect(() => { const el = servicesRef.current; if (!el || !("IntersectionObserver" in window)) return; const io = new IntersectionObserver(([e]) => { if (spyLock.current) return; setActive(e.isIntersecting ? "services" : "parts"); }, { rootMargin: "-150px 0px -55% 0px", threshold: 0 }); io.observe(el); return () => io.disconnect(); }, []); React.useEffect(() => () => clearTimeout(spyTimer.current), []); // Gap we want between the pinned bar and the section header on landing. const STACK_GAP = 18; const go = (v) => { setActive(v); spyLock.current = true; clearTimeout(spyTimer.current); if (v === "parts") { window.scrollTo({ top: 0, behavior: "smooth" }); } else if (servicesRef.current) { // One smooth scroll. Subtracting the chrome's CURRENT height works whether // it's expanded (at top) or already stuck: the collapse that happens // mid-scroll cancels out, so the header always lands (bar height + gap) // below the top — no guessed constant, no bounce. const absTop = servicesRef.current.getBoundingClientRect().top + window.scrollY; const chromeH = chromeRef.current ? chromeRef.current.getBoundingClientRect().height : 170; const y = Math.max(0, absTop - chromeH - STACK_GAP); window.scrollTo({ top: y, behavior: "smooth" }); } spyTimer.current = setTimeout(() => { spyLock.current = false; }, 800); }; const partsCats = [ { id: "bumpers-grilles", label: "الصدامات", icon: }, { id: "suspension", label: "المساعدات", icon: }, { id: "brakes", label: "الفرامل", icon: }, { id: "ac", label: "التكييف", icon: }, { id: "lighting", label: "الإضاءة", icon: }, { id: "engine-trans", label: "المحرك", icon: }, ]; const recent = ["bumperR", "shockR", "pads", "bracketR", "grille", "bumperL"]; return (

سيارتك الحالية

{CURRENT_CAR.name}

{/* Parts section */}

اختر القسم

{partsCats.map((c, i) => ( ))}

{/* Visual search — its own moment right after the categories (mirrors home) */}

{/* Services section */}

خدمات السيارة

navigate(svcOfferPath(SVC_OFFERS[0].key))} />

تصفّح حسب الخدمة

{SVC_CATEGORIES.map((c) => { const Glyph = c.icon; return ( ); })}

أبرز العروض

{SVC_OFFERS.slice(1, 7).map((o) => navigate(svcOfferPath(o.key))} />)}

{/* Recently viewed — global (cross-vertical) history rail, sits below both sections as a "resume where you left off" convenience. Parts-only for now; should mix parts + services once that history exists. marginTop 30 matches the parts→services chapter seam so both breaks breathe equally. */}

شاهدت مؤخراً

{recent.map((k, i) => navigate("/p/" + k)} />)}

); } /* ---------- Registration ---------- */ window.CL = Object.assign(window.CL || {}, { ServicesHomeEntry: ServicesHomeEntry, ServicesDiscover: ServicesDiscover, ServicesPdp: ServicesPdp, // Lets index.html's findProduct resolve a service offer into a cart line // (title/price/kind), so a services add-to-cart renders + counts like parts. svcOffer: (key) => { // A multi-option add carries a composite key "{offer}__{optionId}"; resolve // it back to the offer + chosen option so the cart line shows the right // variant label + price. Single-option keys pass straight through. const parts = String(key).split("__"); const o = SVC_OFFERS.find((x) => x.key === parts[0]); if (!o) return null; const opt = parts[1] && Array.isArray(o.options) ? o.options.find((x) => x.id === parts[1]) : null; return { key, title: opt ? o.title + " · " + opt.label : o.title, price: opt ? opt.price : o.price, oldPrice: opt ? opt.oldPrice : o.oldPrice, kind: "service", cat: "service", inStock: true, vendor: o.vendor, desc: opt ? (opt.sub || o.desc) : o.desc, }; }, }); window.DEMOS = Object.assign(window.DEMOS || {}, { "services-home-demo": ServicesHomeDemo, "services-entry-demo": ServicesEntryDemo, "services-toggle-demo": ServicesToggleDemo, "services-stacked-demo": ServicesStackedDemo, }); window.dispatchEvent(new Event("hashchange"));