// ============================================================= // Remote& website — Arabic mirror of shared chrome (Header, Footer, CTAs) // RTL. Modern conversational MSA. Mint canvas. // ============================================================= const NAV_ITEMS = [ { label: 'المنتج', href: '#', cards: [ { eyebrow: 'نظام الموظفين', title: 'HRMS', href: '/ar/hrms', icon: 'users-round', bg: '#2E5119', fg: '#E2F1D2', accent: '#A4CC7C', body: 'نظام موحد لجميع موظفيك حول العالم — كل عقد ومستند وعملية في مكان واحد.', stat: { value: '11', label: 'وحدات HRMS' }, features: [ { icon: 'network', label: 'الهيكل التنظيمي', desc: 'خطوط إدارة ومسارات اعتماد مباشرة' }, { icon: 'user-plus', label: 'الانضمام وإنهاء الخدمة', desc: 'جاهز من اليوم الأول، خروج موثّق' }, { icon: 'calendar-days', label: 'الإجازات والوقت', desc: 'عطلات محلية، أرصدة، استحقاقات' }, { icon: 'file-text', label: 'المستندات والتوقيع', desc: 'عقود وسياسات وتوقيع داخل التطبيق' }, ], modules: [ { label: 'إدارة الموظفين', icon: 'id-card', href: '/ar/platform/people-management' }, { label: 'الانضمام', icon: 'user-plus', href: '/ar/platform/onboarding' }, { label: 'إنهاء الخدمة', icon: 'user-minus', href: '/ar/platform/offboarding' }, { label: 'إدارة الإجازات', icon: 'calendar-days', href: '/ar/platform/leave-management' }, { label: 'الرواتب والمكافآت', icon: 'circle-dollar-sign', href: '/ar/platform/compensation' }, { label: 'المستندات', icon: 'file-text', href: '/ar/platform/documents' }, { label: 'إدارة الأصول', icon: 'laptop', href: '/ar/platform/asset-management' }, ], }, { eyebrow: 'ادفع في أي مكان', title: 'إدارة الفرق العالمية', href: '/ar/global-workforce-management', icon: 'globe', bg: '#E2F1D2', fg: '#1B3210', accent: '#2E5119', body: 'وظّف موظفين مباشرين، وموظفي EOR، ومتعاقدين في أكثر من 150 دولة — رواتب دقيقة بالعملة المحلية وفي الوقت المحدد.', stat: { value: '150+', label: 'دولة مغطّاة' }, features: [ { icon: 'briefcase', label: 'EOR (جهة التوظيف القانونية)', desc: 'وظّف بدون فتح كيان قانوني' }, { icon: 'building-2', label: 'الرواتب المحلية', desc: 'إقرارات نظامية تتم تلقائياً' }, { icon: 'handshake', label: 'المتعاقدون', desc: 'اتفاقيات وفواتير ممتثلة' }, { icon: 'banknote', label: 'دفع متعدد العملات', desc: 'تحويلات محلية، صرف شفاف' }, ], modules: [ { label: 'الرواتب المحلية', icon: 'building-2', href: '/ar/platform/local-payroll' }, { label: 'استرداد المصاريف', icon: 'receipt', href: '/ar/platform/expense-reimbursements' }, { label: 'جهة التوظيف القانونية', icon: 'briefcase', href: '/ar/platform/employer-of-record' }, { label: 'المتعاقدون عن بُعد', icon: 'handshake', href: '/ar/platform/remote-contractors' }, ], }, { eyebrow: 'يعمل دائماً', title: 'وكلاء الذكاء الاصطناعي', href: '/ar/ai', icon: 'sparkles', bg: '#F26B4A', fg: '#FFF4EE', accent: '#FFD7C5', body: 'وكلاء AI متخصصون يديرون التوظيف والرواتب وعمليات الموظفين بجانب فريقك — بنطاق واضح وسجل تدقيق كامل.', stat: { value: '24/7', label: 'يعمل دائماً' }, features: [ { icon: 'wallet', label: 'Payla — وكيل الرواتب', desc: 'يدير الدورات ويرصد الأخطاء' }, { icon: 'users', label: 'وكيل التوظيف', desc: 'بحث، فرز، جدولة مقابلات' }, { icon: 'life-buoy', label: 'وكيل دعم الموظفين', desc: 'يجيب الموظفين فوراً' }, { icon: 'shield-check', label: 'سجلات قابلة للتدقيق', desc: 'كل خطوة موثّقة ومراجعة' }, ], modules: [ { label: 'نظرة على وكلاء AI', icon: 'sparkles', href: '/ar/ai' }, { label: 'Payla — وكيل الرواتب', icon: 'wallet', href: '/ar/agent-payla' }, { label: 'التوظيف', icon: 'search', href: '/ar/platform/recruitment' }, ], }, ], footer: [ { label: 'نظرة على HRMS', href: '/ar/hrms', icon: 'layout-grid' }, { label: 'اعرف الأسعار', href: '/ar/pricing', icon: 'tag' }, { label: 'احجز عرضاً توضيحياً', href: '/ar/book-a-demo', icon: 'calendar' }, { label: 'أدلة الدول', href: '/ar/guides', icon: 'map' }, { label: 'التكاملات', href: '/ar/integrations', icon: 'plug' }, ]}, { label: 'الموارد', href: '#', library: { headline: 'الأطلس العالمي', tagline: '85 دليل دولة، حاسبات ومراجع — مصنوعة للفِرق التي توظف عبر الحدود.', countries: [ { code: 'eg', name: 'مصر', flag: '🇪🇬', slug: 'egypt' }, { code: 'sa', name: 'السعودية', flag: '🇸🇦', slug: 'saudi-arabia' }, { code: 'ae', name: 'الإمارات', flag: '🇦🇪', slug: 'united-arab-emirates' }, { code: 'kw', name: 'الكويت', flag: '🇰🇼', slug: 'kuwait' }, { code: 'bh', name: 'البحرين', flag: '🇧🇭', slug: 'bahrain' }, { code: 'qa', name: 'قطر', flag: '🇶🇦', slug: 'qatar' }, { code: 'jo', name: 'الأردن', flag: '🇯🇴', slug: 'jordan' }, { code: 'ma', name: 'المغرب', flag: '🇲🇦', slug: 'morocco' }, { code: 'tn', name: 'تونس', flag: '🇹🇳', slug: 'tunisia' }, { code: 'gb', name: 'المملكة المتحدة', flag: '🇬🇧', slug: 'united-kingdom' }, { code: 'de', name: 'ألمانيا', flag: '🇩🇪', slug: 'germany' }, { code: 'fr', name: 'فرنسا', flag: '🇫🇷', slug: 'france' }, { code: 'es', name: 'إسبانيا', flag: '🇪🇸', slug: 'spain' }, { code: 'it', name: 'إيطاليا', flag: '🇮🇹', slug: 'italy' }, { code: 'nl', name: 'هولندا', flag: '🇳🇱', slug: 'netherlands' }, { code: 'ie', name: 'أيرلندا', flag: '🇮🇪', slug: 'ireland' }, { code: 'ca', name: 'كندا', flag: '🇨🇦', slug: 'canada' }, { code: 'br', name: 'البرازيل', flag: '🇧🇷', slug: 'brazil' }, { code: 'mx', name: 'المكسيك', flag: '🇲🇽', slug: 'mexico' }, { code: 'in', name: 'الهند', flag: '🇮🇳', slug: 'india' }, { code: 'sg', name: 'سنغافورة', flag: '🇸🇬', slug: 'singapore' }, { code: 'au', name: 'أستراليا', flag: '🇦🇺', slug: 'australia' }, ], tools: [ { title: 'حاسبة التكاليف', desc: 'اعرف التكلفة الشهرية الكاملة لأي موظف حول العالم', icon: 'calculator', href: '/ar/tools/cost-calculator', tag: 'متاح' }, { title: 'أدوات الدول', desc: 'حاسبات سريعة لمهام خاصة بكل دولة', icon: 'wrench', href: '/ar/country-tools', tag: 'قريباً' }, ], topics: ['ضرائب الرواتب', 'الإجازات النظامية', 'قواعد المكافآت', 'إنهاء الخدمة', 'الأسهم والخيارات', 'المزايا'], }, footer: [ { label: 'اعرف الأسعار', href: '/ar/pricing', icon: 'tag' }, { label: 'احجز عرضاً توضيحياً', href: '/ar/book-a-demo', icon: 'calendar' }, { label: 'أدلة الدول', href: '/ar/guides', icon: 'map' }, { label: 'التكاملات', href: '/ar/integrations', icon: 'plug' }, ]}, { label: 'الأسعار', href: '/ar/pricing' }, ]; const NavDropdown = ({ label, items, groups, cards, footer, library }) => { const [open, setOpen] = React.useState(false); const [headerEl, setHeaderEl] = React.useState(null); const ref = React.useRef(null); const closeTimer = React.useRef(null); const cancelClose = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }; const scheduleClose = () => { cancelClose(); closeTimer.current = setTimeout(() => setOpen(false), 180); }; React.useEffect(() => { const handler = (e) => { if (!ref.current) return; if (ref.current.contains(e.target)) return; const panel = document.querySelector('[data-nav-panel]'); if (panel && panel.contains(e.target)) return; setOpen(false); }; document.addEventListener('mousedown', handler); if (ref.current) setHeaderEl(ref.current.closest('header')); return () => { document.removeEventListener('mousedown', handler); cancelClose(); }; }, []); React.useEffect(() => { if (open && window.lucide && window.lucide.createIcons) window.lucide.createIcons(); }, [open]); const isMega = !!(cards || groups || library); const linkStyle = { display: 'block', padding: '8px 12px', fontSize: 13, fontWeight: 500, color: '#111210', textDecoration: 'none', borderRadius: 8 }; const Link = (it) => ( e.currentTarget.style.background = '#E2F1D2'} onMouseOut={e => e.currentTarget.style.background = 'transparent'}> {it.label} ); return (
{ cancelClose(); setOpen(true); }} onMouseLeave={scheduleClose}> {open && (() => { const panel = (
{cards ? (
{cards.map(c => (
{ e.currentTarget.style.transform = 'translateY(-4px)'; const a = e.currentTarget.querySelector('[data-arrow]'); if (a) a.style.transform = 'translateX(-4px)'; }} onMouseOut={e => { e.currentTarget.style.transform = 'none'; const a = e.currentTarget.querySelector('[data-arrow]'); if (a) a.style.transform = 'none'; }}>
{c.stat && (
{c.stat.value}
{c.stat.label}
)}
{c.eyebrow}
{c.title}
{c.body}
{c.features && (
    {c.features.map(f => (
  • {f.label || f}
    • ))}
)} {c.modules && ( )} اكتشف {c.title}
))}
{footer && (
روابط سريعة
)}
) : library ? (
الموارد
{library.headline}
{library.tagline}
تصفّح الـ85
{footer && (
روابط سريعة
)}
) : items.map(Link)}
); return isMega && headerEl ? ReactDOM.createPortal(panel, headerEl) : panel; })()}
); }; // ----------------- Header (with mobile menu) ----------------- const SiteHeader = ({ active }) => { const [open, setOpen] = React.useState(false); const enHref = (typeof window !== 'undefined') ? (window.location.pathname.replace(/^\/ar(?=\/|$)/, '') || '/') : '/'; return (
Remote&
EN احجز عرضاً توضيحياً
{NAV_ITEMS.flatMap(n => { if (n.groups) return n.groups.flatMap(g => [
{g.title}
, ...g.items.map(it => {it.label}), ]); if (n.cards) return n.cards.flatMap(c => [
{c.title}
, نظرة على {c.title}, ...(c.modules || []).map(m => {m.label}), ]); if (n.library) return [ أدلة الدول, ...n.library.tools.map(t => {t.title}), ]; if (n.items) return n.items.map(it => {it.label}); return [{n.label}]; })} احجز عرضاً توضيحياً English
); }; // ----------------- Top notice strip ----------------- const SiteNotice = () => (
عرض إطلاق حصري مجاناً لأول 30 موظفاً — HRMS كامل & جميع وكلاء الذكاء الاصطناعي. ⏳ ينتهي قريباً احصل عليه
); // ----------------- Final CTA band ----------------- const FinalCTA = () => (

جرّبه على فريقك.

احجز عرضاً توضيحياً
); // ----------------- Footer ----------------- const SiteFooter = () => ( ); // ----------------- Helpers ----------------- const Eyebrow = ({ children, color = '#2E5119' }) => (

{children}

); const Amp = ({ color = '#F26B4A', size = '1.05em' }) => ( & ); const SiteLogoStrip = () => null; const LogoTile = ({ name, slug, mono = false }) => { const [failed, setFailed] = React.useState(false); const computedSlug = (slug || name).toLowerCase().replace(/[^a-z0-9]+/g, ''); const src = mono ? `https://cdn.simpleicons.org/${computedSlug}/353833` : `https://cdn.simpleicons.org/${computedSlug}`; return (
{failed ? ( {name[0]} ) : ( setFailed(true)} /> )} {name}
); }; Object.assign(window, { SiteHeader, SiteNotice, SiteFooter, SiteLogoStrip, FinalCTA, Eyebrow, Amp, LogoTile });