// ============ AI CUSTOMER SERVICE READINESS CHECK ============
// Booth activation lead-gen experience for Global AI Show Riyadh 2026.
// Frontend-only. Shares the design language of the calculator (calculator.css + ai-readiness.css).
const { useState: useAR, useEffect: useARE, useRef: useARR, useMemo: useARM } = React;
// ---- Editable constants ----
const BOOTH_NUMBER = "S21";
const MISLAK_WEBSITE = "https://www.mislakcloud.com";
const WHATSAPP_NUMBER = "966XXXXXXXXX"; // placeholder — replace with the real number
const BOOKING_URL = "https://www.mislakcloud.com/book-demo";
const Ico = (props) => (window.CalcIcon ? : null);
const arToWestern = (s) => String(s == null ? "" : s)
.replace(/[\u0660-\u0669]/g, (d) => String(d.charCodeAt(0) - 0x0660))
.replace(/[\u06F0-\u06F9]/g, (d) => String(d.charCodeAt(0) - 0x06F0));
// Animated counter
function useARCount(target, duration = 900) {
const [val, setVal] = useAR(0);
const raf = useARR(null);
useARE(() => {
const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) { setVal(target); return; }
const start = performance.now();
cancelAnimationFrame(raf.current);
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
setVal(Math.round(target * (1 - Math.pow(1 - t, 3))));
if (t < 1) raf.current = requestAnimationFrame(tick);
};
raf.current = requestAnimationFrame(tick);
const fb = setTimeout(() => setVal(target), duration + 250);
return () => { cancelAnimationFrame(raf.current); clearTimeout(fb); };
}, [target, duration]);
return val;
}
// ---- Assessment data ----
// score: [full, partial, zero]; priority weight for gap ordering
const QUESTIONS = [
{
q: "هل لدى شركتكم رقم أعمال موحد؟",
qEn: "Does your company have a unified business number?",
options: ["نعم", "جزئيًا / أكثر من رقم", "لا"],
optionsEn: ["Yes", "Partially / multiple numbers", "No"],
scores: [12, 6, 0],
bot: "إذا كل موظف عنده رقم مختلف، الـ AI بيحتاج خريطة قبل ما يساعدك.",
botEn: "If every employee has a different number, the AI needs a map before it can help you.",
gap: "لا يوجد رقم أعمال موحد", gapEn: "No unified business number",
priority: 2, icon: "phone",
},
{
q: "هل تعرفون كم مكالمة فائتة تصير عندكم يوميًا أو أسبوعيًا؟",
qEn: "Do you know how many missed calls you get daily or weekly?",
options: ["نعم بدقة", "تقريبًا", "لا نعرف"],
optionsEn: ["Yes, precisely", "Roughly", "We don't know"],
scores: [13, 6, 0],
bot: "أول خطوة في تحسين خدمة العملاء أنك تعرف أين تضيع الفرص.",
botEn: "The first step to improving customer service is knowing where opportunities are lost.",
gap: "لا يتم تتبع المكالمات الفائتة", gapEn: "Missed calls aren't tracked",
priority: 3, icon: "phoneMissed",
},
{
q: "هل يتم توزيع المكالمات على الفريق بطريقة منظمة؟",
qEn: "Are calls distributed to the team in an organized way?",
options: ["نعم، عندنا توزيع واضح", "يدويًا", "حسب من يرد أول"],
optionsEn: ["Yes, we have clear routing", "Manually", "Whoever answers first"],
scores: [12, 6, 0],
bot: "«حسب من يرد أول» ليست استراتيجية… لكنها منتشرة.",
botEn: "“Whoever answers first” isn't a strategy… but it's common.",
gap: "توزيع المكالمات غير منظم", gapEn: "Unstructured call distribution",
priority: 2, icon: "shuffle",
},
{
q: "هل يتم تسجيل أو توثيق المكالمات المهمة؟",
qEn: "Are important calls recorded or documented?",
options: ["نعم", "لبعض المكالمات", "لا"],
optionsEn: ["Yes", "For some calls", "No"],
scores: [13, 6, 0],
bot: "بدون توثيق، صعب تلخص أو تحلل أو تتعلم من المكالمات.",
botEn: "Without documentation, it's hard to summarize, analyze, or learn from calls.",
gap: "المكالمات غير موثقة", gapEn: "Calls aren't documented",
priority: 1, icon: "clipboard",
},
{
q: "هل واتساب العملاء مربوط بفريق أو نظام؟",
qEn: "Is customer WhatsApp connected to a team or system?",
options: ["نعم، منظم", "جزئيًا", "لا، على جوالات الموظفين"],
optionsEn: ["Yes, organized", "Partially", "No, on employees' phones"],
scores: [13, 6, 0],
bot: "إذا واتساب العملاء في جوال الموظف، فالـ AI قد يحتاج يستأذن من البطارية أولًا.",
botEn: "If customer WhatsApp lives on an employee's phone, the AI may need to ask the battery for permission first.",
gap: "واتساب العملاء غير منظم", gapEn: "Customer WhatsApp isn't organized",
priority: 3, icon: "chat",
},
{
q: "هل عندكم Dashboard أو تقارير عن المكالمات والمحادثات؟",
qEn: "Do you have a dashboard or reports for calls and conversations?",
options: ["نعم", "تقارير محدودة", "لا"],
optionsEn: ["Yes", "Limited reports", "No"],
scores: [13, 6, 0],
bot: "الذكاء الاصطناعي يحب البيانات المنظمة، وليس التخمين.",
botEn: "AI loves organized data, not guesswork.",
gap: "لا توجد Dashboard واضحة", gapEn: "No clear dashboard",
priority: 2, icon: "gauge",
},
{
q: "هل لديكم طريقة واضحة للمتابعة بعد المكالمة الفائتة؟",
qEn: "Do you have a clear way to follow up after a missed call?",
options: ["نعم، تلقائية أو منظمة", "يدويًا", "لا يوجد"],
optionsEn: ["Yes, automated or organized", "Manually", "None"],
scores: [12, 6, 0],
bot: "العميل الذي لم يتم الرد عليه لا ينتظر كثيرًا.",
botEn: "A customer who wasn't answered doesn't wait long.",
gap: "المتابعة بعد المكالمات الفائتة غير واضحة", gapEn: "No clear missed-call follow-up",
priority: 3, icon: "target",
},
{
q: "هل تستخدمون CRM أو نظام لتتبع العملاء؟",
qEn: "Do you use a CRM or customer-tracking system?",
options: ["نعم", "نستخدم ملفات / Excel", "لا"],
optionsEn: ["Yes", "We use files / Excel", "No"],
scores: [12, 6, 0],
bot: "Excel محترم، بس لا تجعله مدير تجربة العميل الوحيد.",
botEn: "Excel is respectable, but don't make it your only customer-experience manager.",
gap: "لا يوجد CRM أو نظام تتبع عملاء", gapEn: "No CRM or customer-tracking system",
priority: 1, icon: "database",
},
];
const GAP_HELP = {
"لا يوجد رقم أعمال موحد": { ico: "phone", desc: "وجود رقم موحد يساعدك على استقبال مكالمات العملاء باسم الشركة بدل تشتت الأرقام.", descEn: "A unified number lets you receive customer calls under the company's name instead of scattered numbers." },
"لا يتم تتبع المكالمات الفائتة": { ico: "phoneMissed", desc: "ما لا يتم قياسه يصعب تحسينه. تتبع المكالمات الفائتة يوضح أين تضيع الفرص.", descEn: "What isn't measured is hard to improve. Tracking missed calls shows where opportunities are lost." },
"توزيع المكالمات غير منظم": { ico: "shuffle", desc: "التوجيه المنظم يقلل الانتظار والتحويلات العشوائية.", descEn: "Organized routing reduces waiting and random transfers." },
"المكالمات غير موثقة": { ico: "clipboard", desc: "التوثيق يساعد على المراجعة، التدريب، الجودة، والتحليل.", descEn: "Documentation supports review, training, quality, and analysis." },
"واتساب العملاء غير منظم": { ico: "chat", desc: "واتساب يحتاج أن يكون قناة عمل منظمة، وليس محادثات متفرقة على أجهزة الموظفين.", descEn: "WhatsApp needs to be an organized business channel, not scattered chats on employees' devices." },
"لا توجد Dashboard واضحة": { ico: "gauge", desc: "اللوحات والتقارير تعطي الإدارة رؤية أوضح للأداء.", descEn: "Dashboards and reports give management a clearer view of performance." },
"المتابعة بعد المكالمات الفائتة غير واضحة": { ico: "target", desc: "المتابعة المنظمة تقلل نسيان العملاء والفرص.", descEn: "Organized follow-up reduces forgotten customers and opportunities." },
"لا يوجد CRM أو نظام تتبع عملاء": { ico: "database", desc: "ربط العميل بسجل واضح يساعد الفريق على فهم السياق وعدم البدء من الصفر.", descEn: "Linking the customer to a clear record helps the team understand context and not start from scratch." },
};
const LEVELS = [
{ min: 0, max: 30, title: "مرحلة الفوضى اللطيفة", titleEn: "Gentle chaos stage", sub: "عندكم قنوات خدمة عملاء، لكن غير منظمة بما يكفي للاستفادة من AI.", subEn: "You have customer-service channels, but they're not organized enough to benefit from AI.", status: "محتار… لكن فيه أمل.", statusEn: "Confused… but there's hope.", explain: "الذكاء الاصطناعي يقدر يساعدك لاحقًا، لكن قبل ذلك تحتاج تنظيم المكالمات، واتساب، المتابعة، والبيانات.", explainEn: "AI can help you later, but first you need to organize calls, WhatsApp, follow-up, and data.", bot: "الـ AI هنا غالبًا بيطلب اجتماع تعارف مع البيانات أولًا.", botEn: "The AI here usually asks for an introductory meeting with the data first." },
{ min: 31, max: 55, title: "تحتاج ترتيب الأسلاك", titleEn: "Wiring needs tidying", sub: "عندكم أساس جيد، لكن البيانات والمتابعة تحتاج تنظيم.", subEn: "You have a good foundation, but data and follow-up need organizing.", status: "يحاول يفهم الصورة.", statusEn: "Trying to understand the picture.", explain: "بعض قنوات خدمة العملاء موجودة، لكن بدون توحيد وقياس واضح، سيكون من الصعب استخدام AI بكفاءة.", explainEn: "Some customer-service channels exist, but without unification and clear measurement, it'll be hard to use AI efficiently.", bot: "فيه بداية جيدة… بس الأسلاك تحتاج ترتيب قبل التشغيل الذكي.", botEn: "There's a good start… but the wiring needs tidying before smart operation." },
{ min: 56, max: 75, title: "جاهزية متوسطة", titleEn: "Moderate readiness", sub: "أنتم قريبون من الجاهزية، وتحتاجون توحيد وربط أفضل.", subEn: "You're close to ready, and need better unification and integration.", status: "بدأ يستوعب.", statusEn: "Starting to get it.", explain: "لديكم جزء من الأساس، لكن توحيد المكالمات وواتساب والتقارير سيساعدكم على الاستفادة بشكل أفضل من الأتمتة والذكاء الاصطناعي.", explainEn: "You have part of the foundation, but unifying calls, WhatsApp, and reports will help you benefit more from automation and AI.", bot: "الوضع مبشر. التنظيم الإضافي هنا ممكن يفرق كثير.", botEn: "The situation is promising. A bit more organization here can make a big difference." },
{ min: 76, max: 100, title: "AI-Ready Customer Service", titleEn: "AI-Ready Customer Service", sub: "خدمة العملاء عندكم منظمة وقابلة للأتمتة والتحليل.", subEn: "Your customer service is organized and ready for automation and analysis.", status: "جاهز يشتغل.", statusEn: "Ready to go.", explain: "لديكم أساس جيد للاستفادة من AI في خدمة العملاء، خصوصًا إذا تم ربط المكالمات وواتساب والمتابعة داخل نظام واحد.", explainEn: "You have a solid foundation to benefit from AI in customer service, especially if calls, WhatsApp, and follow-up are connected in one system.", bot: "الـ AI هنا يبتسم… البيانات واضحة والطريق ممهد.", botEn: "The AI here is smiling… the data is clear and the path is paved." },
];
const INDUSTRIES = ["عيادة / مركز صحي", "عقار / مقاولات", "مطعم / ضيافة", "متجر إلكتروني", "صيانة وخدمات منزلية", "تعليم وتدريب", "خدمات مهنية", "مبيعات وخدمة عملاء", "أخرى"];
const CHALLENGES = ["مكالمات فائتة", "واتساب غير منظم", "لا يوجد رقم موحد", "ضعف المتابعة", "لا توجد Dashboard", "نحتاج كول سنتر", "نبحث عن AI في خدمة العملاء", "أخرى"];
function getResultLevel(score) { return LEVELS.find((l) => score >= l.min && score <= l.max) || LEVELS[0]; }
function getConfusionLabel(c) {
if (c <= 25) return window.L("الـ AI مرتاح.", "The AI is comfortable.");
if (c <= 50) return window.L("الـ AI يحتاج قهوة.", "The AI needs coffee.");
if (c <= 75) return window.L("الـ AI يسأل: وين البيانات؟", "The AI is asking: where's the data?");
return window.L("الـ AI دخل اجتماع طارئ.", "The AI just entered an emergency meeting.");
}
async function submitLead(leadPayload) {
// TODO: Connect to a webhook, Google Sheet, Airtable, or CRM endpoint.
// e.g. await fetch(YOUR_WEBHOOK_URL, { method: "POST", body: JSON.stringify(leadPayload) });
console.log("Lead submitted:", leadPayload);
window.__mislakReadinessLead = leadPayload;
}
// ============================================================
function AIReadinessPage() {
window.useLang();
const [started, setStarted] = useAR(false);
const [cur, setCur] = useAR(0);
const [answers, setAnswers] = useAR(Array(QUESTIONS.length).fill(null)); // option index per question
const [showResults, setShowResults] = useAR(false);
const [submitted, setSubmitted] = useAR(false);
const assessRef = useARR(null);
const allAnswered = answers.every((a) => a !== null);
const score = useARM(() => answers.reduce((sum, a, i) => sum + (a === null ? 0 : QUESTIONS[i].scores[a]), 0), [answers]);
const confusion = 100 - score;
const level = getResultLevel(score);
const topGaps = useARM(() => {
const gaps = [];
answers.forEach((a, i) => {
if (a === null || a === 0) { // a===0 is the full-score option (first)
if (a !== null && a !== 0) {}
}
if (a === null) return;
const sev = a === 1 ? "partial" : a === 2 ? "weak" : null; // index1 partial, index2 zero
if (!sev) return;
gaps.push({ label: QUESTIONS[i].gap, labelEn: QUESTIONS[i].gapEn, severity: sev, priority: QUESTIONS[i].priority, qIndex: i });
});
const sevRank = { weak: 0, partial: 1 };
gaps.sort((x, y) => {
if (sevRank[x.severity] !== sevRank[y.severity]) return sevRank[x.severity] - sevRank[y.severity];
if (y.priority !== x.priority) return y.priority - x.priority;
return x.qIndex - y.qIndex;
});
return gaps.slice(0, 3);
}, [answers]);
// missed-opportunity hint: weak/partial on tracking(1), follow-up(6), distribution(2)
const showHint = useARM(() => [1, 6, 2].some((i) => answers[i] === 1 || answers[i] === 2), [answers]);
const scrollAssess = () => {
if (assessRef.current) {
const y = assessRef.current.getBoundingClientRect().top + window.scrollY - 76;
window.scrollTo({ top: y, behavior: "smooth" });
}
};
const begin = () => { setStarted(true); setTimeout(scrollAssess, 60); };
const choose = (qi, oi) => setAnswers((prev) => prev.map((v, i) => (i === qi ? oi : v)));
const next = () => { if (cur < QUESTIONS.length - 1) setCur(cur + 1); else { setShowResults(true); setTimeout(scrollAssess, 60); } };
const back = () => { if (cur > 0) setCur(cur - 1); };
const reset = () => { setStarted(false); setCur(0); setAnswers(Array(QUESTIONS.length).fill(null)); setShowResults(false); setSubmitted(false); setTimeout(scrollAssess, 60); };
return (
{window.L("هل خدمة عملاء شركتك جاهزة للذكاء الاصطناعي؟", "Is your customer service ready for AI?")}
{window.L("اختبار سريع خلال 60 ثانية يقيّم جاهزية شركتك لاستخدام AI في خدمة العملاء، بناءً على تنظيم المكالمات، واتساب، المتابعة، والبيانات.", "A quick 60-second test that assesses your company's readiness to use AI in customer service, based on how organized your calls, WhatsApp, follow-up, and data are.")}
{window.L("الاختبار يستغرق أقل من دقيقة.", "The test takes less than a minute.")}
{window.L("قبل AI… رتّب الأساس", "Before AI… set the foundation")}
{window.L("قبل أن تستفيد من AI، رتّب طبقة التواصل", "Before you benefit from AI, organize the communication layer")}
{window.L("الذكاء الاصطناعي لا يعمل جيدًا فوق بيانات مشتتة. إذا كانت المكالمات وواتساب والمتابعة غير منظمة، فالخطوة الأولى ليست إضافة AI، بل تنظيم طبقة التواصل مع العملاء.", "AI doesn't work well on scattered data. If calls, WhatsApp, and follow-up aren't organized, the first step isn't adding AI — it's organizing the customer communication layer.")}
{window.L("هل خدمة عملاء شركتك مبنية على بيانات منظمة؟", "Is your customer service built on organized data?")}
{window.L("8 أسئلة قصيرة تعطيك مؤشرًا تقريبيًا لجاهزية خدمة عملاء شركتك للذكاء الاصطناعي، مع توصيات عملية. تقييم مبدئي سريع لا يغني عن التشخيص التفصيلي.", "8 short questions give you an approximate indicator of your customer service's AI readiness, with practical recommendations. A quick initial assessment, not a substitute for a detailed diagnosis.")}
{window.L("أقل من دقيقة", "Under a minute")} {window.L("8 أسئلة", "8 questions")} {window.L("نتيجة فورية", "Instant result")}
{window.L("هذا تقييم مبدئي سريع، وليس تشخيصًا نهائيًا. الهدف هو مساعدتك على معرفة أين تحتاج خدمة عملاء شركتك إلى تنظيم أفضل قبل استخدام AI.", "This is a quick initial assessment, not a final diagnosis. It's meant to help you see where your customer service needs better organization before using AI.")}
{/* Top gaps */}
{window.L("أهم الفجوات التي تمنع الاستفادة من AI", "Top gaps preventing you from benefiting from AI")}
{window.L("كيف تساعد مسلاك:", "How Mislak helps:")} {window.L("توحيد القناة وقياسها داخل نظام واحد قابل للأتمتة.", "Unify the channel and measure it within one automatable system.")}
);
})}
) : (
{window.L("وضعكم جيد. التوصية التالية هي تحسين الربط بين القنوات وتجهيز البيانات لاستخدامات AI أعمق.", "You're in good shape. The next recommendation is to improve channel integration and prepare data for deeper AI use.")}
)}
{showHint && (
{window.L("قد تكون لديكم فرص مبيعات تضيع دون قياس واضح. أول خطوة ليست AI، بل معرفة أين تضيع المكالمات والمتابعات.", "You may have sales opportunities slipping away without clear measurement. The first step isn't AI — it's knowing where calls and follow-ups are lost.")}
{window.L("أتمتة وAI فوق بيانات منظمة", "Automation & AI on organized data")}
{window.L("مسلاك تساعد الشركات على توحيد المكالمات وواتساب ومحادثات العملاء من مكان واحد، حتى تصبح خدمة عملاء شركتك أكثر تنظيمًا وجاهزية للأتمتة والذكاء الاصطناعي.", "Mislak helps companies unify calls, WhatsApp, and customer chats in one place, so your customer service becomes more organized and ready for automation and AI.")}
);
}
// ---------- Lead form ----------
function LeadForm({ score, confusion, level, topGaps, answers, onSubmitted }) {
const dataSectors = INDUSTRIES;
const [f, setF] = useAR({ name: "", company: "", jobTitle: "", phone: "", email: "", industry: "", challenge: "", consent: false });
const [errors, setErrors] = useAR({});
const upd = (k) => (e) => {
const v = k === "consent" ? e.target.checked : e.target.value;
setF({ ...f, [k]: v });
if (errors[k]) setErrors((er) => { const n = { ...er }; delete n[k]; return n; });
};
const validate = () => {
const e = {};
const soft = "يبدو أن هذا الحقل يحتاج تعديلًا بسيطًا";
if (!f.name.trim()) e.name = soft;
if (!f.company.trim()) e.company = soft;
const phone = arToWestern(f.phone).replace(/[\s()-]/g, "");
if (!phone) e.phone = soft;
else if (!/^(\+?\d{8,15})$/.test(phone)) e.phone = "تأكد من كتابة رقم الجوال بشكل صحيح";
if (!f.email.trim()) e.email = soft;
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email.trim())) e.email = "تأكد من كتابة البريد بشكل صحيح";
if (!f.consent) e.consent = "نحتاج موافقتك للتواصل معك بخصوص النتيجة";
return e;
};
const buildPayload = () => ({
leadSource: "Global AI Show Riyadh 2026 - QR Assessment",
boothNumber: BOOTH_NUMBER,
campaign: "ai_customer_service_readiness_check",
name: f.name, company: f.company, jobTitle: f.jobTitle, phone: f.phone, email: f.email,
industry: f.industry, mainChallenge: f.challenge, consent: f.consent,
score, resultLevel: level.title, aiConfusionPercentage: confusion,
topGaps: topGaps.map((g) => g.label), answers,
submittedAt: new Date().toISOString(),
utm: { source: "event", medium: "qr", campaign: "ai_readiness_check" },
});
const onSubmit = (ev) => {
ev.preventDefault();
const e = validate();
setErrors(e);
if (Object.keys(e).length === 0) { submitLead(buildPayload()); onSubmitted(); }
};
const buildWhatsAppMessage = () => {
const msg =
`مرحبًا مسلاك،\n` +
`أكملت اختبار جاهزية خدمة عملاء شركتي للذكاء الاصطناعي.\n` +
`الشركة: ${f.company || "-"}\n` +
`القطاع: ${f.industry || "-"}\n` +
`النتيجة: ${score} / 100\n` +
`مستوى الجاهزية: ${level.title}\n` +
`مؤشر ارتباك الذكاء الاصطناعي: ${confusion}%\n` +
`أهم الفجوات: ${topGaps.map((g) => g.label).join("، ") || "لا يوجد"}\n` +
`أرغب في الحصول على تشخيص أو جلسة مجانية.`;
return `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(msg)}`;
};
return (
تقرير الجاهزية
احصل على تقرير جاهزية خدمة عملاء شركتك
اترك بياناتك وسنرسل لك ملخص جاهزية خدمة عملاء شركتك، مع توصيات عملية لتحسين المكالمات، واتساب، المتابعة، والبيانات.
النتيجة
{score} / 100
مستوى الجاهزية
{level.title}
ارتباك الـ AI
{confusion}%
);
}
// ---------- Thank you ----------
function ThankYou({ score, level, topGap, onReset }) {
return (