// ============================================================ // Screen components — Landing, Scanning, Results, ShareCard // ============================================================ const { useState, useEffect, useRef, useMemo, useCallback } = React; // ─── i18n helper ───────────────────────────────────────────── const T = (ar, en, lang) => (lang === "en" ? en : ar); const PLATFORM_LABEL_AR = { salla: "سلة", zid: "زد", shopify: "شوبيفاي", other: "مخصص" }; const PLATFORM_LABEL_EN = { salla: "Salla", zid: "Zid", shopify: "Shopify", other: "Custom" }; function platformLabel(p, lang) { const key = String(p || "other").toLowerCase(); return (lang === "en" ? PLATFORM_LABEL_EN : PLATFORM_LABEL_AR)[key] || p || ""; } // ─── Live scan API client ──────────────────────────────────── // Adapts a /benchmark/scan response into the STORES[] shape the Results and // ShareCard components already consume, so they don't care whether the data // is a live scan or a demo store. function liveToStore(live) { if (!live) return null; const host = live.normalizedUrl ? (() => { try { return new URL(live.normalizedUrl).hostname; } catch { return live.inputUrl; } })() : live.inputUrl; const displayName = live.displayName || host; const initials = (displayName || host || "?").trim().charAt(0) || "?"; return { id: live.scanId, name: displayName, nameEn: displayName, url: host, handle: null, platform: (live.signals && live.signals.platform) || "—", category: "—", categoryEn: "—", followers: (live.signals && live.signals.instagramFollowers) || 0, initials, logoUrl: (live.signals && live.signals.logoUrl) || null, color: "linear-gradient(135deg, #D6F2ED, #417C9C)", pillars: live.pillars, total: live.total, tier: live.tier, percentile: live.percentile, verdict: live.verdict, insight: live.insight, }; } async function apiStartScan({ input, lang, enrichment }) { const res = await fetch(`${API_BASE}/api/benchmark/scan`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ input, lang, enrichment }), }); if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || `HTTP ${res.status}`); } return res.json(); } async function apiGetScan(scanId) { const res = await fetch(`${API_BASE}/api/benchmark/scan/${scanId}`); if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); } async function apiCaptureLead({ email, scanId, lang }) { const res = await fetch(`${API_BASE}/api/benchmark/leads`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ email, scanId, lang }), }); if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); } // Download a DOM node as PNG via html-to-image. The node is expected to be the // "natural size" element (e.g. the 1200x630 card), which in our ShareModal is // CSS-scaled down to fit the preview frame. We temporarily clear the transform // so html-to-image captures the real resolution, then restore it. async function downloadNodeAsPng(node, filename) { if (!node) { alert("Share card not ready yet — try again in a moment."); return; } if (!window.htmlToImage) { alert("Image exporter didn't load (check your network blocker). Try a hard refresh."); return; } const prevTransform = node.style.transform; const prevOrigin = node.style.transformOrigin; node.style.transform = "none"; node.style.transformOrigin = "top left"; try { const dataUrl = await window.htmlToImage.toPng(node, { pixelRatio: 2, cacheBust: true, skipFonts: false, }); const a = document.createElement("a"); a.href = dataUrl; a.download = filename; a.click(); } catch (err) { console.error("downloadNodeAsPng failed:", err); alert("Couldn't generate PNG: " + (err && err.message ? err.message : String(err))); } finally { node.style.transform = prevTransform; node.style.transformOrigin = prevOrigin; } } // Compose a Saudi-Arabic / English share message for WhatsApp / clipboard. function shareText(store, lang) { const tierAr = { leader: "رائد", solid: "قوي", needs: "يحتاج تحسين", risk: "في خطر" }; const tierEn = { leader: "Leader", solid: "Solid", needs: "Needs work", risk: "At risk" }; if (lang === "en") { return `My store scored ${store.total}/100 on the Karam CX Benchmark — ${tierEn[store.tier] || ""}. Test yours: https://karamai.co/check`; } return `متجري حصل على ${store.total}/100 في مقياس كرم لتجربة العميل — ${tierAr[store.tier] || ""}. جرب متجرك: https://karamai.co/check`; } async function copyToClipboard(text) { try { if (navigator.clipboard && navigator.clipboard.writeText) { await navigator.clipboard.writeText(text); return true; } } catch { /* fall through */ } // Fallback for non-secure contexts const ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0"; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); document.body.removeChild(ta); return true; } catch { document.body.removeChild(ta); return false; } } function openWhatsAppShare(store, lang) { const msg = shareText(store, lang); window.open(`https://wa.me/?text=${encodeURIComponent(msg)}`, "_blank", "noopener"); } // ─── Icon wrapper ──────────────────────────────────────────── // Renders a Lucide icon as inline SVG under a React-owned . We deliberately // do NOT call window.lucide.createIcons() — that mutates React's DOM tree // (replaces with ) and causes NotFoundError: removeChild // the moment React re-renders during a live scan. function lucideSvgHtml(name, size) { if (typeof window === "undefined" || !window.lucide) return ""; const pascal = String(name) .split("-") .filter(Boolean) .map((p) => p[0].toUpperCase() + p.slice(1)) .join(""); const iconsMap = window.lucide.icons || {}; const def = iconsMap[pascal] || iconsMap[name]; if (!def || !window.lucide.createElement) return ""; try { const el = window.lucide.createElement(def); el.setAttribute("width", String(size)); el.setAttribute("height", String(size)); el.setAttribute("stroke-width", "2"); return el.outerHTML; } catch { return ""; } } function Icon({ name, size = 16, style, className }) { const html = useMemo(() => lucideSvgHtml(name, size), [name, size]); return ( ); } // No-op — kept so existing call sites don't need edits. // (The old implementation called window.lucide.createIcons() globally, which // mutated React-owned DOM and crashed reconciliation on re-render.) function useLucide() {} // ─── Top bar ───────────────────────────────────────────────── function AppTopbar({ lang, onLang, onHome, screen }) { useLucide([lang, screen]); return (
); } // ─── Landing ───────────────────────────────────────────────── function Landing({ lang, onScan }) { const [input, setInput] = useState(""); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); useLucide([lang]); const placeholders = lang === "ar" ? ["mystore.salla.sa", "mybrand.com", "mystore.zid.store", "mystore.com.sa"] : ["mystore.salla.sa", "mybrand.com", "mystore.zid.store", "mystore.com.sa"]; const [phIdx, setPhIdx] = useState(0); useEffect(() => { const t = setInterval(() => setPhIdx(i => (i + 1) % placeholders.length), 2200); return () => clearInterval(t); }, []); const errorText = (code) => { if (!code) return null; if (code === "input_handle-only") { return T( "أدخل رابط متجرك (مثل store.salla.sa) بدلاً من حساب التواصل الاجتماعي.", "Enter your store URL (e.g. store.salla.sa) instead of a social handle.", lang, ); } if (code === "input_empty") return T("الحقل فارغ.", "Empty input.", lang); if (code === "input_invalid") { return T( "الرابط غير صالح. تأكد من كتابة المجال الكامل.", "Invalid URL. Make sure to include the full domain.", lang, ); } return T("تعذر بدء الفحص. حاول مرة أخرى.", "Couldn't start the scan. Please try again.", lang); }; const submit = async (e) => { e.preventDefault(); const val = input.trim(); if (!val) { setError("input_empty"); return; } setError(null); setSubmitting(true); try { const { scanId } = await apiStartScan({ input: val, lang }); onScan(val, scanId); } catch (err) { setError((err && err.message) || "unknown"); } finally { setSubmitting(false); } }; return (
{T("جديد · يعمل بالذكاء الاصطناعي", "New · powered by AI", lang)}

{lang === "ar" ? ( <>كيف تجربة العميل في متجرك؟
احصل على التقييم خلال دقيقتين. ) : ( <>How strong is your store's CX?
Get the score in two minutes. )}

{T( "افحص مجاناً. قارن نفسك بالسوق السعودي. احصل على ٣ توصيات ذكية.", "Free scan. Benchmarked against the Saudi market. Three AI-tailored fixes.", lang )}

{ setInput(e.target.value); if (error) setError(null); }} placeholder={placeholders[phIdx]} dir="ltr" style={{ textAlign: lang === "ar" ? "end" : "start" }} disabled={submitting} />
{error && (
{errorText(error)}
)}
{T( "بدون تسجيل · بدون ربط حساب · فحص للبيانات العامة فقط", "No signup · no account link · public data only", lang )} {T("الخصوصية", "Privacy", lang)}
{T("موثوق من متاجر سعودية", "Trusted by Saudi merchants", lang)}
{["س", "ن", "د", "م", "ع"].map((c, i) => (
{lang === "ar" ? c : ["S","N","D","M","A"][i]}
))}
+٣١٧ متجر سعودي {T("فحصوا هذا الأسبوع", "scanned this week", lang)}
{[ { num: "١", ar: "ألصق رابط متجرك", en: "Paste your store URL", descAr: "سلة، زد، Shopify، أو حساب إنستقرام", descEn: "Salla, Zid, Shopify, or Instagram" }, { num: "٢", ar: "نفحص ٣٠+ إشارة عامة", en: "We scan 30+ public signals", descAr: "من متجرك، معروف، Google PageSpeed، وسائل التواصل", descEn: "Your storefront, Maroof, PageSpeed, socials" }, { num: "٣", ar: "احصل على تقييمك + ٣ توصيات", en: "Get your score + 3 fixes", descAr: "شارك البطاقة في واتساب بضغطة", descEn: "Share the card to WhatsApp in one tap" }, ].map((s, i) => (
{lang === "ar" ? s.num : (i + 1)}
{T(s.ar, s.en, lang)}
{T(s.descAr, s.descEn, lang)}
))}
); } // ─── Scanning screen ───────────────────────────────────────── // Two modes: // - live (scanId set): polls GET /api/benchmark/scan/:id for real probe state // - demo (no scanId): runs the original timer-based animation. Kept so the // tweaks panel's "Jump to scanning" button still works. function ScanningScreen({ lang, input, storeId, scanId, onDone }) { const [probeIdx, setProbeIdx] = useState(0); const [probeStates, setProbeStates] = useState(PROBES.map(() => "pending")); const [showEnrich, setShowEnrich] = useState(false); const enrichDismissedRef = useRef(false); const [answers, setAnswers] = useState({}); const dismissEnrich = useCallback(() => { enrichDismissedRef.current = true; setShowEnrich(false); }, []); useLucide([probeIdx, showEnrich, answers]); const totalMs = useMemo(() => PROBES.reduce((a, p) => a + p.ms, 0), []); const [elapsed, setElapsed] = useState(0); // Live polling mode useEffect(() => { if (!scanId) return; let cancelled = false; let timer = null; const tick = async () => { if (cancelled) return; try { const data = await apiGetScan(scanId); if (cancelled) return; // Map server probe states (pending|running|done|failed) onto UI states. const mapState = (s) => s === "running" ? "active" : s === "failed" ? "fail" : s; const serverStates = PROBES.map((p) => { const probe = (data.probes || []).find((x) => x.id === p.id); return probe ? mapState(probe.state) : "pending"; }); setProbeStates(serverStates); const activeIdx = serverStates.findIndex((s) => s === "active"); if (activeIdx >= 0) setProbeIdx(activeIdx); // Reveal enrichment once we're mid-scan. if (!enrichDismissedRef.current && serverStates.filter((s) => s === "done").length >= 3) setShowEnrich(true); // Map progress to the progress bar. const done = serverStates.filter((s) => s === "done").length; setElapsed((done / PROBES.length) * totalMs); if (data.status === "completed") { // Small settling delay so the final probe flash is visible. setTimeout(() => { if (!cancelled) onDone(data); }, 300); return; } if (data.status === "failed") { setTimeout(() => { if (!cancelled) onDone(data); }, 300); return; } timer = setTimeout(tick, 600); } catch (_err) { timer = setTimeout(tick, 1500); } }; tick(); return () => { cancelled = true; if (timer) clearTimeout(timer); }; }, [scanId]); // Demo mode animation useEffect(() => { if (scanId) return; let mounted = true; let accum = 0; const run = async () => { for (let i = 0; i < PROBES.length; i++) { if (!mounted) return; setProbeIdx(i); setProbeStates(s => { const n = [...s]; n[i] = "active"; return n; }); if (i === 4 && !enrichDismissedRef.current) setShowEnrich(true); const ms = PROBES[i].ms; const steps = 10; for (let k = 0; k < steps; k++) { if (!mounted) return; await new Promise(r => setTimeout(r, ms / steps)); setElapsed(accum + (ms * (k + 1) / steps)); } accum += ms; setProbeStates(s => { const n = [...s]; n[i] = "done"; return n; }); } if (mounted) setTimeout(() => onDone(null), 500); }; run(); return () => { mounted = false; }; }, [scanId]); const pct = Math.min(100, (elapsed / totalMs) * 100); return (
{scanId ? (input || "?").replace(/^https?:\/\//, "").replace(/^www\./, "").charAt(0).toUpperCase() || "?" : (STORES[storeId]?.initials || "?")}
{T("نفحص", "Scanning", lang)} {input}

{(() => { // Dynamic title: reflect the currently-active probe so the page doesn't // feel idle during long PSI/Apify waits. Falls back to the generic line // before any probe starts and after everything completes. const activeIdx = probeStates.findIndex((s) => s === "active"); if (activeIdx >= 0) return T(PROBES[activeIdx].ar, PROBES[activeIdx].en, lang); if (probeStates.every((s) => s === "done" || s === "fail")) { return T("جار جمع النتائج...", "Compiling results...", lang); } return T("جار فحص متجرك...", "Scanning your store...", lang); })()}

{T("نجمع ٣٠+ إشارة ونقارنها بمتاجر سعودية مماثلة", "Gathering 30+ signals and comparing with Saudi peers", lang)}
{PROBES.map((p, i) => (
{probeStates[i] === "done" ? : }
{T(p.ar, p.en, lang)} {T(p.subAr, p.subEn, lang)}
{probeStates[i] === "done" && (<> {T("تم", "Done", lang)})} {probeStates[i] === "active" && (<> {T("يعمل", "Working", lang)})} {probeStates[i] === "pending" && T("بانتظار", "Waiting", lang)}
))}
{showEnrich && (

{T("٣ أسئلة ترفع دقة التقييم", "3 questions to sharpen your score", lang)}

{T( "من ٧٠٪ ثقة إلى ٩٥٪. تخطَّى إذا تريد النتيجة السريعة.", "From 70% to 95% confidence. Skip for the quick result.", lang )}

{ENRICH_Q.map((q) => (
{T(q.ar, q.en, lang)}
{q.options.map((o) => ( ))}
))}
{T("دقة التقييم", "Score confidence", lang)}
{70 + Object.keys(answers).length * 8}%
)}
); } // ─── Score gauge ───────────────────────────────────────────── function ScoreGauge({ score, tier, animateKey }) { const r = 130; const c = 2 * Math.PI * r; const [progress, setProgress] = useState(0); useEffect(() => { setProgress(0); const t = setTimeout(() => setProgress(score), 80); return () => clearTimeout(t); }, [score, animateKey]); const offset = c - (progress / 100) * c; const color = tier === "leader" ? "#22C55E" : tier === "solid" ? "#0EA5A0" : tier === "needs" ? "#F59E0B" : "var(--karam-danger)"; return (
{score}
/ 100
); } // ─── ScaledFit: scales a fixed-size child to fill parent width ─────── function ScaledFit({ width, height, innerRef, children }) { const hostRef = React.useRef(null); const [scale, setScale] = React.useState(1); React.useLayoutEffect(() => { const el = hostRef.current; if (!el) return; const compute = () => { const w = el.clientWidth; if (w > 0) setScale(w / width); }; compute(); const ro = new ResizeObserver(compute); ro.observe(el); return () => ro.disconnect(); }, [width]); return (
{children}
); } // ─── Share Card (the actual 1200x630 artwork) ─────────────── function ShareCardArt({ store, lang, editorial, revealName = false }) { const tierLabelAr = { leader: "رائد", solid: "قوي", needs: "يحتاج تحسين", risk: "في خطر" }; const tierLabelEn = { leader: "Leader", solid: "Solid", needs: "Needs work", risk: "At risk" }; const tierClass = { leader: "tier-leader", solid: "tier-solid", needs: "tier-needs", risk: "tier-risk" }; const bandClass = { leader: "band-leader", solid: "band-solid", needs: "band-needs", risk: "band-risk" }; const pillarScore = (id) => store.pillars[id].score; const bandForScore = (s) => s >= 80 ? "band-leader" : s >= 60 ? "band-solid" : s >= 40 ? "band-needs" : "band-risk"; const pillarNames = { response: T("الاستجابة", "Response", lang), channels: T("القنوات", "Channels", lang), trust: T("الثقة", "Trust", lang), reviews: T("التقييمات", "Reviews", lang), speed: T("السرعة", "Speed", lang), }; // Anonymous-by-default share line. Spec: merchants share more when not self-exposing. // Reveal toggle in the modal opts into showing the actual store name. const followersLabel = store.followers ? `${store.followers.toLocaleString(lang === "ar" ? "ar-SA" : "en")} ${T("متابع", "followers", lang)}` : null; const platformPart = platformLabel(store.platform, lang); const anonymousLabel = lang === "ar" ? `متجر سعودي · ${platformPart}${followersLabel ? ` · ${followersLabel}` : ""}` : `Saudi store · ${platformPart}${followersLabel ? ` · ${followersLabel}` : ""}`; const namedLabel = `${T(store.name, store.nameEn, lang)} · ${platformPart}${followersLabel ? ` · ${followersLabel}` : ""}`; const metaLine = revealName ? namedLabel : anonymousLabel; return (
Karam
{T("تقييم تجربة العميل", "CX Benchmark", lang)}
{metaLine}
{store.total}
/ 100
{T(tierLabelAr[store.tier], tierLabelEn[store.tier], lang)}
{PILLARS.map((p) => (
{pillarNames[p.id]}
{pillarScore(p.id)}
))}
{T("أبرز ملاحظة", "Top insight", lang)}
{T(store.insight.ar, store.insight.en, lang)}
{T("افحص متجرك", "Scan your store", lang)} karamai.co/check
); } // ─── Results ───────────────────────────────────────────────── // ─── Email capture ─────────────────────────────────────────── function EmailCapture({ lang, scanId }) { const [email, setEmail] = useState(""); const [state, setState] = useState("idle"); // idle | sending | sent | error const submit = async (e) => { e.preventDefault(); if (!email || state === "sending") return; setState("sending"); try { await apiCaptureLead({ email, scanId, lang }); setState("sent"); } catch (_err) { setState("error"); } }; return (

{T("ابعث لي التقرير الكامل + إعادة فحص بعد ٣٠ يوم", "Send me the full report + 30-day rescan", lang)}

{state === "sent" ? T("وصلنا إيميلك — ببعث التقرير خلال دقايق.", "Got it — the report is on its way.", lang) : state === "error" ? T("صار خطأ. جرب مرة ثانية.", "Something went wrong. Try again.", lang) : T("٨–١٢ صفحة PDF بالعربية مع المصادر، وخطة عمل ٣٠ يوم.", "8–12 page Arabic PDF with sources and a 30-day action plan.", lang)}

{state !== "sent" && (
setEmail(e.target.value)} disabled={state === "sending"} dir="ltr" required />
{T( "بإرسال بريدك توافق على ", "By submitting your email you agree to our ", lang, )} {T("سياسة الخصوصية", "privacy policy", lang)} {T( ". لن نشاركه مع أحد.", ". We won't share it with anyone.", lang, )}
)}
); } function Results({ lang, storeId, live, onRescan, onShare, editorial }) { // Live data takes precedence; demo mode (STORES[]) is the fallback so the // tweaks panel's "Jump to results" still works with no backend. const liveStore = useMemo(() => liveToStore(live), [live]); const store = liveStore || STORES[storeId]; const recs = (live && live.recommendations && live.recommendations.length > 0) ? live.recommendations : RECOMMENDATIONS[storeId] || []; useLucide([storeId, lang, live && live.scanId]); const tierLabelAr = { leader: "رائد", solid: "قوي", needs: "يحتاج تحسين", risk: "في خطر" }; const tierLabelEn = { leader: "Leader", solid: "Solid", needs: "Needs work", risk: "At risk" }; const tierClass = { leader: "tier-leader", solid: "tier-solid", needs: "tier-needs", risk: "tier-risk" }; const bandForScore = (s) => s >= 80 ? "band-leader" : s >= 60 ? "band-solid" : s >= 40 ? "band-needs" : "band-risk"; return (
{store.logoUrl ? ( {store.name} { e.target.style.display = "none"; }} /> ) : store.initials}

{T(store.name, store.nameEn, lang)}

{store.url} · {platformLabel(store.platform, lang)} · {store.followers.toLocaleString(lang === "ar" ? "ar-SA" : "en")} {T("متابع على إنستقرام", "IG followers", lang)}
{/* HERO */}
{T(tierLabelAr[store.tier], tierLabelEn[store.tier], lang)}

{T(store.verdict.ar, store.verdict.en, lang)}

{store.percentile}%
{T( `أفضل من ${store.percentile}٪ من متاجر ${store.category} على ${platformLabel(store.platform, "ar")}`, `Ahead of ${store.percentile}% of ${store.categoryEn} stores on ${platformLabel(store.platform, "en")}`, lang )}
{/* PILLARS */}

{T("التفكيك حسب المحاور الخمسة", "Five-pillar breakdown", lang)}

{T("أوزان مبنية على ما يحرّك الإيرادات في السوق السعودي", "Weights anchored to what moves revenue in KSA", lang)}
{PILLARS.map((p) => { const s = store.pillars[p.id].score; return (
{p.weight}%
{T(p.nameAr, p.nameEn, lang)}
{s}
/ 100
{T(p.noteAr, p.noteEn, lang)}
); })}
{/* RECOMMENDATIONS */}

{T("٣ توصيات مبنية على نتائجك", "Your top 3 fixes", lang)}

{T("مرتبة حسب الأثر × سهولة التنفيذ", "Ranked by impact × ease", lang)}
{recs.map((r, i) => { const pillar = PILLARS.find(p => p.id === r.pillar); return (
{lang === "ar" ? ["١","٢","٣"][i] : i + 1}
{T(pillar.nameAr, pillar.nameEn, lang)}

{T(r.titleAr, r.titleEn, lang)}

{T(r.findingAr, r.findingEn, lang)}

{T("الإجراء:", "Action:", lang)} {T(r.actionAr, r.actionEn, lang)}
{r.karam && (
K
{T("كرم يقدر يسوي هذا", "Karam can do this", lang)} · {T(r.karamPitchAr, r.karamPitchEn, lang)}
)} {r.ext && ( {T(r.ext.ar, r.ext.en, lang)} )}
{r.severity === "high" ? T("أولوية عالية", "High", lang) : r.severity === "med" ? T("متوسطة", "Med", lang) : T("منخفضة", "Low", lang)}
{T(r.impactValueAr, r.impactValueEn, lang)}
{T(r.impactAr, r.impactEn, lang)}
); })}
{/* SHARE BLOCK */}

{T("بطاقة جاهزة للمشاركة في واتساب", "A share card ready for WhatsApp", lang)}

{T( "حمّل بطاقتك بثلاثة أحجام أو شاركها مباشرة. تلقائياً مجهولة الاسم — لك حرية إظهار اسم المتجر.", "Download the card in three sizes or share directly. Anonymous by default — reveal your store name if you like.", lang )}

{/* EMAIL CAPTURE */} {/* TRIAL CTA (contextual) — only shows when at least one rec is Karam-solvable; otherwise we'd be misclaiming Karam fits the merchant's top issue. */} {(() => { const karamRec = recs.find((r) => r.karam); if (!karamRec) return null; const headline = lang === "ar" ? `${karamRec.titleAr} — كرم يقدر يحلها اليوم.` : `${karamRec.titleEn} — Karam can solve it today.`; const pitch = lang === "ar" ? (karamRec.karamPitchAr || "رد تلقائي ذكي بالعربي السعودي خلال ١٥ ثانية، ٢٤/٧ — ويكمّل الطلب داخل المحادثة بدلاً من أن تفقد العميل.") : (karamRec.karamPitchEn || "AI auto-reply in Saudi Arabic in 15s, 24/7 — completes the order inside the chat instead of losing the customer."); return (

{headline}

{pitch}

); })()}
); } // ─── Share Modal ───────────────────────────────────────────── function ShareModal({ lang, storeId, live, editorial, onClose }) { const liveStore = useMemo(() => liveToStore(live), [live]); const store = liveStore || STORES[storeId]; // Anonymous by default — spec says merchants share more when not self-exposing. const [revealName, setRevealName] = useState(false); // Inner refs point at the un-scaled 1200x630 / 1080x1080 nodes inside ScaledFit, // not the scaled-down preview frames — so the exported PNG is at full resolution. const ogInnerRef = useRef(null); const sqInnerRef = useRef(null); const safeHost = (store && (store.url || store.name) || "karam").replace(/[^a-z0-9]+/gi, "-"); const downloadOg = useCallback(() => { downloadNodeAsPng(ogInnerRef.current, `karam-benchmark-${safeHost}-1200x630.png`); }, [safeHost]); const downloadSq = useCallback(() => { downloadNodeAsPng(sqInnerRef.current, `karam-benchmark-${safeHost}-1080x1080.png`); }, [safeHost]); const onWhatsApp = useCallback(() => openWhatsAppShare(store, lang), [store, lang]); const onCopy = useCallback(async () => { const ok = await copyToClipboard(shareText(store, lang)); if (!ok) alert(T("تعذر النسخ.", "Couldn't copy.", lang)); }, [store, lang]); return (
e.stopPropagation()}>

{T("بطاقة المشاركة", "Your share card", lang)}

{T("ثلاثة أحجام جاهزة — واتساب، إنستقرام، ستوري.", "Three sizes — WhatsApp, Instagram feed, Story.", lang)}
{/* 1200x630 */}
{T("١٢٠٠×٦٣٠ — واتساب / OG", "1200×630 — WhatsApp / OG", lang)}
{/* Square + Story stacked */}
{T("١٠٨٠×١٠٨٠ — إنستقرام", "1080×1080 — Instagram", lang)}
{T("تقييم تجربة العميل", "CX Benchmark", lang)}
{store.total}
/ 100
{T({leader:"رائد", solid:"قوي", needs:"يحتاج تحسين", risk:"في خطر"}[store.tier], {leader:"Leader", solid:"Solid", needs:"Needs work", risk:"At risk"}[store.tier], lang)}
{T(store.insight.ar, store.insight.en, lang)}
karamai.co/check
); } Object.assign(window, { AppTopbar, Landing, ScanningScreen, Results, ShareModal, ShareCardArt });