// Nav + Hero for Sellatr landing (bilingual: AR/EN). const { useState: useStateNH, useEffect: useEffectNH, useRef: useRefNH } = React; /* ===================== NAV ===================== */ const Nav = () => { const t = useT(); const { lang } = useLang(); const [scrolled, setScrolled] = useStateNH(false); useEffectNH(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ t('القنوات', 'Channels'), t('الذكاء الاصطناعي', 'AI'), t('القطاعات', 'Industries'), t('الإضافات', 'Add-ons'), t('الأسعار', 'Pricing'), ]; return ( ); }; /* ===================== HERO ===================== */ const Hero = () => { const t = useT(); const { lang } = useLang(); return (
🌍 {t('مصمم للأعمال العربية', 'Built for Arabic businesses')} · {t('مصر · السعودية · الإمارات · الكويت', 'KSA · UAE · Egypt · Kuwait')}

{lang === 'ar' ? ( <>نظام تشغيل ذكي
للأعمال الحديثة ) : ( <>The intelligent
operating system for modern business )}

{t( 'اجمع كل محادثاتك وعملياتك وفريقك في منصة واحدة مدعومة بالذكاء الاصطناعي — تعمل عبر واتساب وإنستجرام وماسنجر والبريد والموقع والتطبيقات.', 'Unify every conversation, operation, and teammate in one AI-powered platform — across WhatsApp, Instagram, Messenger, Email, your site, and your apps.' )}

{t('تجربة ١٤ يومًا · بدون بطاقة ائتمان · ألغِ في أي وقت', '14-day trial · No credit card · Cancel anytime')}
{[ ['whatsapp', t('واتساب', 'WhatsApp')], ['messenger', t('ماسنجر', 'Messenger')], ['instagram', t('إنستجرام', 'Instagram')], ['email', t('البريد الإلكتروني', 'Email')], ['web', t('شات الموقع', 'Website chat')], ['telegram', t('تيليجرام', 'Telegram')], ['api', 'APIs'], ].map(([key, name]) => (
{name}
))}
); }; /* ===== HeroShowcase ===== */ const HeroShowcase = () => { const t = useT(); return (
); }; const FloatingPill = ({ style, color, channel, label, sub }) => (
{label}
{sub}
); /* ===== Inbox mock ===== */ const InboxMock = () => { const t = useT(); const { lang } = useLang(); const isEn = lang === 'en'; const conversations = [ { ch: 'whatsapp', name: t('سارة العبدالله', 'Sara Al-Abdullah'), preview: t('تمام أبغى أطلب اثنين', 'Great, I want two'), time: t('الآن','now'), unread: 1, active: true }, { ch: 'instagram', name: t('محمد العتيبي', 'Mohammed Al-Otaibi'), preview: t('متوفر بمقاس ٤٤؟', 'Available in size 44?'), time: isEn ? '2m' : '٢د', unread: 2 }, { ch: 'messenger', name: t('نورا حسن', 'Noura Hassan'), preview: t('شكرًا، أؤكد الحجز', 'Thanks, confirming'), time: isEn ? '7m' : '٧د' }, { ch: 'email', name: t('فيصل القحطاني', 'Faisal Al-Qahtani'), preview: t('تذكرة #٢١٤٧ — تحديث', 'Ticket #2147 — update'), time: isEn ? '15m' : '١٥د' }, { ch: 'web', name: t('زائر · موقع', 'Visitor · web'), preview: t('كم سعر الباقة؟', 'How much is the plan?'), time: isEn ? '22m' : '٢٢د' }, { ch: 'whatsapp', name: t('ليلى البدر', 'Layla Al-Badr'), preview: t('تم الدفع ✓', 'Paid ✓'), time: isEn ? '34m' : '٣٤د' }, ]; return (
{/* List */}
{t('متجر بسمة', 'Basma Store')}
{t('متصل', 'Live')}
{[t('الكل','All'), t('الذكاء الاصطناعي','AI'), t('فريقي','My team'), t('غير مقروء','Unread')].map((tt, i) => ( {tt} ))}
{conversations.map((c, i) => (
{c.name} {c.time}
{c.preview}
{c.unread && {c.unread}}
))}
{/* Thread */}
{t('سارة العبدالله','Sara Al-Abdullah')}
{t('عبر واتساب · متصل الآن','via WhatsApp · online now')}
{t('واتساب','WhatsApp')}
{t('السلام عليكم، عندكم الحذاء الأبيض مقاس ٤٢؟','Hi, do you have the white shoe in size 42?')} {t(<>وعليكم السلام سارة. نعم متوفر بسعر ٢٤٩ ر.س مع توصيل خلال يومين 🚚, <>Hi Sara — yes, in stock for SAR 249, delivery in 2 days 🚚)} {t('تمام، أبغى أطلب اثنين','Great, I want to order two')} {t('أرسلت رابط الدفع لك. سيتم تأكيد الطلب فور إتمام العملية.','I sent your payment link. The order is confirmed as soon as you pay.')}
{/* Profile */}
{t('سارة العبدالله','Sara Al-Abdullah')}
{t('عميلة منذ ٢٠٢٤','Customer since 2024')}
{t('الخط الزمني','Timeline')}
); }; const Bubble = ({ side, children, ai }) => { const isUs = side === 'us'; return (
{children} {ai && ( )}
); }; const AIAction = () => { const t = useT(); return (
{t( <>إجراء AI · أنشأ رابط دفع بقيمة ٤٩٨ ر.س — حجز المخزون لمدة ١٥ دقيقة, <>AI action · Created payment link for SAR 498 — held inventory for 15 minutes )}
); }; const Stat = ({ label, value }) => (
{label} {value}
); const Timeline = ({ items }) => (
{items.map((it, i) => (
{it.title}
{it.when}
))}
); const SatelliteAI = () => { const t = useT(); return (
{t('وكيل AI','AI agent')}
{t('يعمل الآن','Active')}
{[ [t('تصنيف الرسالة','Message intent'), t('استفسار + نية شراء','Inquiry + purchase intent')], [t('اللهجة المكتشفة','Detected dialect'), t('سعودية','Saudi')], [t('الإجراء المقترح','Suggested action'), t('إرسال رابط الدفع','Send payment link')], ].map(([k, v]) => (
{k} {v}
))}
{t('ينفذ','Execute')} {t('تحويل للبشر','Hand off')}
); }; const SatelliteStats = () => { const t = useT(); return (
{t('اليوم','Today')}
{t(<>١٢,٤٨٠ ر.س, <>12,480 SAR)}
{t('↑ ٣٢٪ من أمس · ٤٢ محادثة','↑ 32% vs. yesterday · 42 chats')}
{[40, 65, 50, 80, 70, 95, 88].map((h, i) => (
))}
); }; window.Nav = Nav; window.Hero = Hero;