// Saraya Events — app shell: providers, router, tweaks. const { useState: useStateA, useEffect: useEffectA, useCallback } = React; /* ====== SEO: per-route meta data ====== */ const _SITE_URL = (typeof window !== 'undefined' && window.SARAYA_SITE_URL) || 'https://app.sarayaevents.com'; const _OG_IMAGE = _SITE_URL + '/assets/logo-primary.png'; const SEO_META = { home: { title: 'Saraya Events Marketplace UAE | Event Rentals, Services & Packages', desc: 'Discover Saraya Events Marketplace for event rentals, services, flowers, gifts, packages, and verified vendors across Abu Dhabi and the UAE.', index: true }, about: { title: 'About Saraya Events | Luxury Event Design in Abu Dhabi UAE', desc: 'Saraya Events is an Abu Dhabi event design house specialising in weddings, corporate events, flowers, décor, furniture rental, and hospitality services.', index: true }, services: { title: 'Event Services UAE | Weddings, Corporate Events & Hospitality', desc: 'Explore event services from Saraya Events including weddings, corporate events, décor, flowers, photography, catering, and full event management across the UAE.', index: true }, store: { title: 'Flowers, Gifts & Event Supplies UAE | Saraya Events Store', desc: 'Shop flowers, gifts, décor, and event essentials online from Saraya Events. Delivered across Abu Dhabi and the UAE.', index: true }, rental: { title: 'Event Rentals UAE | Furniture, Décor, AV & Party Equipment', desc: 'Rent event furniture, décor, AV equipment, lighting, and party essentials from Saraya Events and approved vendors across the UAE.', index: true }, packages: { title: 'Saraya Event Packages UAE | Weddings, Engagements & Custom Events', desc: 'Choose curated Saraya Events packages for weddings, engagements, birthdays, and corporate events — or request a fully custom event package.', index: true }, showroom: { title: 'Virtual Showroom UAE | Display Your Event Business Online', desc: 'Join Saraya Events Virtual Showroom to display your products, rentals, services, and business profile to customers across the UAE.', index: true }, 'vendor-packages': { title: 'Vendor Packages UAE | Sell & Promote Your Event Business Online', desc: 'Choose a Saraya Events vendor package to list products, rental items, and services, respond to RFQs, and grow your event business in the UAE.', index: true }, partner: { title: 'Join Saraya Events as Vendor | List Products, Rentals & Services', desc: 'Register as a vendor with Saraya Events Marketplace to list products, rentals, and services and receive customer inquiries across Abu Dhabi and UAE.', index: true }, contact: { title: 'Contact Saraya Events UAE | Event Planning, Rentals & Vendor Support', desc: 'Contact Saraya Events for event planning, rentals, packages, vendor support, custom event requests, and marketplace inquiries across the UAE.', index: true }, gallery: { title: 'Event Gallery | Saraya Events Portfolio Abu Dhabi', desc: 'Browse Saraya Events portfolio — weddings, corporate events, décor, flowers, and hospitality setups across Abu Dhabi and the UAE.', index: true }, terms: { title: 'Terms & Conditions | Saraya Events Marketplace', desc: 'Read the Saraya Events Marketplace terms and conditions governing platform use, purchases, rentals, and vendor services.', index: true }, privacy: { title: 'Privacy Policy | Saraya Events Marketplace', desc: 'Learn how Saraya Events collects, uses, and protects your personal data in compliance with UAE data protection regulations.', index: true }, 'cancellation-refund': { title: 'Cancellation & Refund Policy | Saraya Events', desc: 'Understand the Saraya Events cancellation and refund policy for products, rentals, services, and event packages in the UAE.', index: true }, complaints: { title: 'Complaints & Disputes | Saraya Events Marketplace', desc: 'Submit a complaint or dispute through the Saraya Events Marketplace formal resolution process. We respond within 3 business days.', index: true }, 'vendor-agreement': { title: 'Vendor Agreement | Saraya Events Marketplace', desc: 'Read the Saraya Events vendor agreement covering listing terms, commissions, payouts, and vendor responsibilities.', index: true }, 'vendor-terms': { title: 'Vendor Terms & Conditions | Saraya Events', desc: 'Full terms and conditions for vendors on the Saraya Events Marketplace: subscriptions, listing standards, commissions, and responsibilities.', index: true }, 'customer-terms': { title: 'Customer Terms & Conditions | Saraya Events', desc: 'Customer terms for shopping on the Saraya Events Marketplace: payments, privacy, complaints, and cancellation policy.', index: true }, campaigns: { title: 'Event Planning Services UAE | Saraya Events', desc: 'Explore Saraya Events campaigns for wedding planning, event rentals, corporate events, flowers, and more in Abu Dhabi and the UAE.', index: true }, 'campaigns/wedding-planning': { title: 'Wedding Planning UAE | Packages, Vendors & Décor | Saraya Events', desc: 'Plan your perfect wedding in Abu Dhabi. Browse wedding décor, flowers, catering, photography, and verified vendors through Saraya Events Marketplace.', index: true }, 'campaigns/rental-furniture': { title: 'Event Furniture Rental UAE | Chairs, Tables, Sofas & Tents', desc: 'Rent banquet chairs, tables, sofas, tents, and AV equipment for events in Abu Dhabi and UAE. Flexible daily and per-event pricing from verified suppliers.', index: true }, 'campaigns/corporate-events': { title: 'Corporate Event Services UAE | AV, Catering & Full Production', desc: 'Source AV equipment, conference furniture, catering, and full event production from verified UAE vendors for your corporate event.', index: true }, 'campaigns/flowers-gifts': { title: 'Flowers & Gifts Delivery Abu Dhabi | Saraya Events Store', desc: 'Order fresh flowers, gift boxes, wedding bouquets, and event décor online. Same-day delivery available in Abu Dhabi from Saraya Events.', index: true }, 'campaigns/party-rentals': { title: 'Party Rentals Abu Dhabi | Tables, Chairs, Décor & Balloons', desc: 'Rent party tables, chairs, backdrops, lighting, balloon arches, and props for birthday parties and events in Abu Dhabi and UAE.', index: true }, 'campaigns/vendor-join': { title: 'Join Saraya Events Marketplace | Grow Your Event Business UAE', desc: 'Register as a vendor on Saraya Events Marketplace to list products, rentals, and services and reach event customers across Abu Dhabi and UAE.', index: true }, vendors: { title: 'Grow Your Event Business in UAE | Saraya Events', desc: 'Partner with Saraya Events to reach thousands of event customers across Abu Dhabi and the UAE.', index: true }, // Service detail pages 'service-weddings': { title: 'Wedding Services Abu Dhabi UAE | Saraya Events', desc: 'Full-service wedding planning and design in Abu Dhabi — décor, flowers, catering, photography, and complete event coordination.', index: true }, 'service-corporate': { title: 'Corporate Event Services UAE | Saraya Events', desc: 'Professional corporate event services across the UAE — conferences, product launches, gala dinners, and brand activations.', index: true }, 'service-catering': { title: 'Event Catering UAE | Saraya Events Hospitality', desc: 'Premium event catering and hospitality services for weddings, corporate events, and private occasions across Abu Dhabi and UAE.', index: true }, 'service-flowers': { title: 'Flowers & Floral Design UAE | Saraya Events', desc: 'Beautiful floral arrangements, wedding bouquets, and event flower décor delivered across Abu Dhabi and the UAE.', index: true }, 'service-decor': { title: 'Event Décor & Styling UAE | Saraya Events', desc: 'Premium event décor, backdrops, stage builds, draping, and lighting for weddings and events across the UAE.', index: true }, 'service-balloons': { title: 'Balloon Décor & Installations UAE | Saraya Events', desc: 'Organic balloon arches, garlands, ceilings and custom balloon installations for events across Abu Dhabi and UAE.', index: true }, 'service-majlis': { title: 'Majlis Setup & Styling UAE | Saraya Events', desc: 'Traditional majlis styling with floor seating, florals, fragrance, and catering setup across Abu Dhabi and UAE.', index: true }, 'service-graduation': { title: 'Graduation Event Services UAE | Saraya Events', desc: 'Celebrate graduations with custom décor, flowers, catering, and full event design across Abu Dhabi and UAE.', index: true }, 'service-birthdays': { title: 'Birthday Party Planning UAE | Saraya Events', desc: 'Bespoke birthday party planning and décor for all ages across Abu Dhabi and the UAE.', index: true }, // Private routes — noindex 'vendor-dashboard': { title: 'Vendor Dashboard | Saraya Events', desc: '', index: false }, 'admin-dashboard': { title: 'Admin | Saraya Events', desc: '', index: false }, checkout: { title: 'Checkout | Saraya Events', desc: '', index: false }, 'my-orders': { title: 'My Orders | Saraya Events', desc: '', index: false }, confirmation: { title: 'Order Confirmed | Saraya Events', desc: '', index: false }, design: { title: 'Request a Quote | Saraya Events', desc: '', index: false }, product: { title: 'Product | Saraya Events', desc: '', index: false }, }; function _setMeta(route) { const [base, param] = route.split('/'); const key = param ? (base + '/' + param) : base; const seo = SEO_META[key] || SEO_META.home; const url = _SITE_URL + '/#' + route; document.title = seo.title; const setAttr = (sel, attr, val) => { let el = document.querySelector(sel); if (!el) { const [tag, ...rest] = sel.split('['); el = document.createElement(tag); rest.forEach(a => { const [k,v] = a.replace(/[\[\]"]/g,'').split('='); el.setAttribute(k, v||''); }); document.head.appendChild(el); } el.setAttribute(attr, val); }; if (seo.desc) setAttr('meta[name="description"]', 'content', seo.desc); setAttr('link[rel="canonical"]', 'href', url); setAttr('meta[name="robots"]', 'content', seo.index ? 'index, follow' : 'noindex, nofollow'); setAttr('meta[property="og:title"]', 'content', seo.title); if (seo.desc) setAttr('meta[property="og:description"]', 'content', seo.desc); setAttr('meta[property="og:url"]', 'content', url); setAttr('meta[property="og:image"]', 'content', _OG_IMAGE); setAttr('meta[name="twitter:title"]', 'content', seo.title); if (seo.desc) setAttr('meta[name="twitter:description"]', 'content', seo.desc); } /* Hero headline options (tweakable, bilingual) */ const HERO_OPTIONS = { brief: { en: 'Elegant Events, Beautifully Designed', ar: 'فعاليات أنيقة، بتصميمٍ بديع' }, care: { en: 'Every Occasion, Composed With Care', ar: 'كل مناسبة، بعنايةٍ فائقة' }, remember:{ en: 'The Days You’ll Always Remember', ar: 'أيامٌ لا تُنسى أبدًا' }, life: { en: 'Luxury Events, Brought to Life', ar: 'فعاليات فاخرة، نُحييها بإتقان' }, }; const ACCENTS = { gold: { '--accent': '#C9A961', '--accent-deep': '#A8884A' }, rose: { '--accent': '#C98F8F', '--accent-deep': '#B07878' }, }; function App() { const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "heroHeadline": "brief", "accent": "gold" }/*EDITMODE-END*/; const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS); /* ----- language ----- */ const [lang, setLangState] = useStateA(() => localStorage.getItem('saraya_lang') || 'en'); const t = useCallback((key) => { const I = window.SARAYA.I18N; return (I[lang] && I[lang][key]) || I.en[key] || key; }, [lang]); const setLang = useCallback((l) => { setLangState(l); localStorage.setItem('saraya_lang', l); }, []); useEffectA(() => { document.documentElement.lang = lang; document.documentElement.dir = window.SARAYA.I18N[lang].dir; }, [lang]); /* ----- routing ----- */ const [route, setRoute] = useStateA(() => (location.hash || '#home').slice(1) || 'home'); const go = useCallback((r) => { // Intercept design route — open modal instead of navigating to a page if (r === 'design') { if (window.openRequestQuoteModal) { window.openRequestQuoteModal(); return; } } location.hash = '#' + r; }, []); useEffectA(() => { const onHash = () => { const newRoute = (location.hash || '#home').slice(1) || 'home'; // Handle direct URL navigation to #design if (newRoute === 'design') { if (window.openRequestQuoteModal) { window.openRequestQuoteModal(); history.replaceState(null, '', location.href.replace('#design', '#home')); return; } } setRoute(newRoute); window.scrollTo(0, 0); }; window.addEventListener('hashchange', onHash); onHash(); return () => window.removeEventListener('hashchange', onHash); }, []); /* ----- inquiry tray ----- */ const [items, setItems] = useStateA(() => { try { return JSON.parse(localStorage.getItem('saraya_inquiry') || '[]'); } catch (e) { return []; } }); const [trayOpen, setTrayOpen] = useStateA(false); useEffectA(() => { localStorage.setItem('saraya_inquiry', JSON.stringify(items)); }, [items]); const inquiry = { items, count: items.length, isOpen: trayOpen, add: (it) => setItems((p) => p.some((x) => x.id === it.id) ? p : [...p, it]), remove: (id) => setItems((p) => p.filter((x) => x.id !== id)), clear: () => { setItems([]); setTrayOpen(false); }, has: (id) => items.some((x) => x.id === id), openTray: () => setTrayOpen(true), closeTray: () => setTrayOpen(false), }; /* ----- accent tweak ----- */ useEffectA(() => { const a = ACCENTS[tw.accent] || ACCENTS.gold; Object.entries(a).forEach(([k, v]) => document.documentElement.style.setProperty(k, v)); }, [tw.accent]); const heroHeadline = (HERO_OPTIONS[tw.heroHeadline] || HERO_OPTIONS.brief)[lang]; /* ----- SEO: update meta tags on every route change ----- */ useEffectA(() => { _setMeta(route); // SPA page view — fires on every hash navigation after the initial load const url = _SITE_URL + '/#' + route; if (typeof gtag === 'function') { gtag('event', 'page_view', { page_title: document.title, page_location: url, page_path: '/#' + route, }); } if (typeof fbq === 'function') { fbq('track', 'PageView'); } }, [route]); /* ----- auth guard helper ----- */ // NOTE: auth is read here for requireAuth — BUT this component is the parent of AuthProvider, // so window.useAuth() returns the default context (user:null). requireAuth is therefore only // used for non-dashboard pages (my-orders, wishlist, notifications) where a simple gate is OK. // Dashboard pages (vendor-dashboard, admin-dashboard) handle their own auth inside AuthProvider. const auth = window.useAuth ? window.useAuth() : null; const requireAuth = (page, requireAdmin = false) => { // If auth hasn't resolved yet (context default has loading:false but user:null), // show a loading spinner rather than immediately gating. if (!auth?.user) return (

Please sign in to access this page.

); if (requireAdmin && !auth?.isAdmin) return (

You do not have permission to access this page.

); return page; }; /* ----- page switch ----- */ const [base, param] = route.split('/'); const renderPage = () => { switch (base) { case 'home': return ; case 'about': return ; case 'services': return ; case 'service-weddings': return ; case 'service-corporate': return ; case 'service-catering': return ; case 'service-flowers': return ; case 'service-graduation': return ; case 'service-birthdays': return ; case 'service-decor': return ; case 'service-balloons': return ; case 'service-majlis': return ; case 'service-partners': return ; case 'store': return ; case 'rental': return param ? : ; case 'showroom': return ; case 'product': return ; case 'checkout': return ; case 'confirmation': return ; case 'packages': return ; case 'gallery': return ; case 'partner': return ; case 'design': return ; case 'contact': return ; case 'my-orders': return requireAuth(); case 'my-wishlist': return requireAuth(window.MyWishlistPage ? : null); case 'notifications': return requireAuth(window.NotificationsPage ? : null); case 'vendor-dashboard': return ; case 'admin-dashboard': return ; case 'vendor-packages': return ; case 'vendor-agreement': return ; case 'terms': return ; case 'privacy': return ; case 'cancellation-refund': return ; case 'complaints': return ; case 'vendor-terms': return ; case 'customer-terms': return ; case 'vendors': return param === 'grow' ? : ; case 'campaigns': return ; default: return ; } }; const hideFooter = base === 'design'; return (
{renderPage()} {!hideFooter &&