/* SUPERMEDIA storefront — "Duh" floating chat assistant (visual mock). * Scripted replies + quick suggestions. No real AI; canned flow only. */ const { useState: useStateGenie, useEffect: useEffectGenie, useRef: useRefGenie } = React; const GENIE_SUGGESTIONS = [ 'Tražim laptop', 'Gde mi je porudžbina?', 'Kako teče dostava?', 'SUPER popusti', ]; // normalizacija — ignoriši kvačice (frizider == frižider) za stabilno poklapanje function deburr(s) { return String(s || '').toLowerCase().replace(/đ/g, 'dj').replace(/š/g, 's').replace(/ž/g, 'z').replace(/č/g, 'c').replace(/ć/g, 'c'); } const G_STOP = ['najbolji', 'najbolja', 'najbolje', 'najjeftiniji', 'najjeftinije', 'do', 'za', 'mi', 'je', 'sta', 'koji', 'koja', 'koje', 'predlozi', 'hocu', 'trazim', 'ima', 'imate', 'imas', 'poklon', 'din', 'dinara', 'rsd', 'ispod', 'oko', 'neki', 'neka', 'neko', 'jedan', 'jedna', 'mozes', 'mozete', 'molim', 'treba', 'zelim', 'bih', 'daj', 'pokazi', 'prikazi', 'nadji', 'nadi', 'neku', 'nesto', 'sve', 'na', 'sa', 'po', 'iz', 'od', 'te', 'se', 'su', 'li', 'da', 'ne', 'ko', 'me', 'ti', 'sm']; // sinonimi -> dodaju ključnu reč iz kataloga const G_SYN = [ [/\btv\b|televizor/, 'televizor'], [/mobilni|smartfon|smart telefon/, 'telefon'], [/ves\s*masin|masina za ves|vesarica/, 'vesa'], [/sudomasin|masina za sudov|masina za posudj/, 'sudova'], [/hladnjak/, 'frizider'], [/notebook|prenosni racunar/, 'laptop'], [/kompjuter|kompjuteri/, 'racunar'], [/slusalice|bubice/, 'slusalice'], [/aspirator|napa/, 'aspirator'], [/peglica|pegla/, 'pegla'], ]; function genieSearch(text) { const P = (window.SM_DATA && SM_DATA.PRODUCTS) || []; let q = deburr(text); G_SYN.forEach(([re, w]) => { if (re.test(q)) q += ' ' + w; }); // cena: "od X do Y", "do X", "ispod X", "80k" let minP = null, maxP = null; const bw = q.match(/od\s*([\d.]{3,})\s*do\s*([\d.]{3,})/); if (bw) { minP = parseInt(bw[1].replace(/\./g, ''), 10); maxP = parseInt(bw[2].replace(/\./g, ''), 10); } else { const m = q.match(/(?:do|ispod|max|maksimalno)\s*([\d.]{3,})/); if (m) maxP = parseInt(m[1].replace(/\./g, ''), 10); const mk = q.match(/(\d{2,3})\s*k\b/); if (!maxP && mk) maxP = parseInt(mk[1], 10) * 1000; } const tokens = q.split(/[^a-z0-9]+/).filter(w => w.length >= 2 && G_STOP.indexOf(w) < 0 && !/^\d+$/.test(w)); if (!tokens.length && !maxP) return []; let res = P.map(p => { const title = deburr(p.title), brand = deburr(p.brand), cat = deburr(p.cat || ''), pk = deburr(p.potkat || ''), pk2 = deburr(p.potkat2 || ''); let score = 0; tokens.forEach(w => { if (brand.indexOf(w) >= 0) score += 4; if (pk2.indexOf(w) >= 0) score += 3; if (title.indexOf(w) >= 0) score += 3; if (pk.indexOf(w) >= 0) score += 2; if (cat.indexOf(w) >= 0) score += 1; }); return { p, score }; }).filter(x => tokens.length ? x.score > 0 : true); if (maxP) res = res.filter(x => x.p.price > 0 && x.p.price <= maxP); if (minP) res = res.filter(x => x.p.price >= minP); res.sort((a, b) => b.score - a.score || (b.p.discount || 0) - (a.p.discount || 0) || a.p.price - b.p.price); return res.slice(0, 5).map(x => x.p); } const FAQ = [ [/dostav|isporuk|stiz|kurir|posiljk|kad stiz|kad dolazi/, '🚚 Isporuka stiže za 3 do 6 radnih dana na celoj teritoriji Srbije. Artikle na stanju za porudžbine do 14h šaljemo isti dan. Besplatna dostava preko 30.000 din.'], [/garanc|servis|kvar|saobraznost/, '🛡️ Svi proizvodi imaju zvaničnu garanciju (po pravilu 2 godine). Za servis je dovoljan račun ili broj porudžbine.'], [/placanj|kartic|pouzec|virman|rate|kako placam|na rate/, '💳 Plaćaš pouzećem (kuriru), platnom karticom (Visa · Mastercard · DinaCard) ili virmanom. Pravna lica dobijaju R-1 fakturu.'], [/povra|vrac|reklamacij|odustan|zamen/, '↩️ Povraćaj je moguć u roku od 14 dana bez objašnjenja. Javi nam broj porudžbine i rešavamo brzo.'], [/vauc|promo|kupon/, '🎟️ Vaučer/promo kod unosiš u korpi pri plaćanju — popust se odbija od ukupnog iznosa.'], [/pravna lica|firm|b2b|faktur|\bpib\b/, '🏢 Za pravna lica: fakturisanje na firmu, R-1 faktura i količinski popusti. Biraš „Pravno lice" pri plaćanju.'], [/radno vreme|kontakt|pozov|broj telefona/, '📞 Pozovi +381 63 600 442 ili otvori stranicu Kontakt — rado pomažemo pre i posle kupovine.'], ]; // Odgovor za dati tekst. Vraća { text, chips? }. Chips: string ili { label, sub?, nav }. function genieReply(text) { const raw = (text || '').trim(); const t = deburr(raw); if (!raw) return { text: 'Reci mi šta tražiš 🙂', chips: GENIE_SUGGESTIONS.slice(0, 3) }; if (/^(zdravo|cao|hej|hello|hi|dobar|pozdrav|pomoc|pomozi|sta mozes|kako)\b/.test(t)) return { text: 'Zdravo! 🧞 Evo šta mogu: nađem ti proizvod (npr. „laptop do 80.000", „Samsung TV", „fen"), proverim porudžbinu (ukucaj broj SM-…), ili objasnim dostavu, garanciju i plaćanje. Šta ti treba?', chips: ['Tražim laptop', 'Gde mi je porudžbina?', 'Dostava i plaćanje'] }; for (let i = 0; i < FAQ.length; i++) { if (FAQ[i][0].test(t)) return { text: FAQ[i][1] }; } if (/popust|akcij|snizen|super ponud|na akciji/.test(t)) return { text: 'Najveća sniženja su na stranici SUPER popusti 🔥', chips: [{ label: 'Otvori SUPER popuste', nav: { view: 'popusti' } }] }; if (/gde mi je|status porudzb|moja porudzb|prati porudzb|gde je paket|gde mi je porudzb/.test(t)) return { text: 'Ukucaj broj porudžbine (npr. SM-100001) pa ti odmah javim status 📦.', chips: [{ label: 'Prati porudžbinu', nav: { view: 'page', key: 'prati-porudzbinu' } }] }; if (/^pretrazi proizvode$|sta da kupim|sta mi treba/.test(t)) return { text: 'Naravno! Napiši šta tražiš — kategoriju, brend ili budžet. Npr. „mašina za veš Beko", „telefon do 40.000", „espresso aparat".' }; const found = genieSearch(raw); if (found.length) return { text: 'Evo predloga za tebe 👇 (klikni da otvoriš):', chips: found.map(p => ({ label: p.title.length > 40 ? p.title.slice(0, 38) + '…' : p.title, sub: fmt(p.price) + ' din.', nav: { view: 'product', id: p.id } })) }; return { text: 'Hmm, nisam siguran da sam razumeo 🤔 Probaj sa kategorijom, brendom ili budžetom — npr. „frižider do 70.000", „LG televizor", „usisivač". Ili ukucaj broj porudžbine (SM-…).', chips: GENIE_SUGGESTIONS.slice(0, 3) }; } const XIcon = ({ size = 18 }) => ( ); const SendIcon = ({ size = 18 }) => ( ); function GenieChat({ onNav }) { const A = SM_DATA.A; const [open, setOpen] = useStateGenie(false); const [bubble, setBubble] = useStateGenie(false); const [winking, setWinking] = useStateGenie(false); const [started, setStarted] = useStateGenie(false); const [email, setEmail] = useStateGenie(''); const [emailErr, setEmailErr] = useStateGenie(false); const [typing, setTyping] = useStateGenie(false); const [input, setInput] = useStateGenie(''); const [msgs, setMsgs] = useStateGenie([ { from: 'bot', text: 'Zdravo! Ja sam tvoj SUPER asistent 🧞 Pitaj me bilo šta — naći ću ti pravi proizvod, predložiti poklon ili proveriti porudžbinu.', chips: GENIE_SUGGESTIONS }, ]); const scrollRef = useRefGenie(null); const timers = useRefGenie([]); const [atFooter, setAtFooter] = useStateGenie(false); // Hide the floating genie once the footer (below the newsletter) scrolls into view useEffectGenie(() => { const footer = document.querySelector('footer'); if (!footer || typeof IntersectionObserver === 'undefined') return; const io = new IntersectionObserver( ([e]) => setAtFooter(e.isIntersecting), { rootMargin: '0px 0px -40px 0px', threshold: 0 } ); io.observe(footer); return () => io.disconnect(); }, []); useEffectGenie(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [msgs, typing, open]); useEffectGenie(() => () => timers.current.forEach(clearTimeout), []); // greeting bubble pops up shortly after load to grab attention useEffectGenie(() => { if (open) return; const t = setTimeout(() => setBubble(true), 1600); return () => clearTimeout(t); }, [open]); const openChat = () => { setBubble(false); setWinking(true); const t = setTimeout(() => { setWinking(false); setOpen(true); }, 560); timers.current.push(t); }; const sparklePos = [{ top: 4, left: 2 }, { top: -2, right: 6 }, { bottom: 16, left: 6 }]; const startChat = () => { if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) { setEmailErr(true); return; } setStarted(true); }; const send = (raw) => { const text = (typeof raw === 'string' ? raw : (raw == null ? input : '')).trim(); if (!text) return; setInput(''); setMsgs(m => [...m, { from: 'user', text }]); // pravo praćenje porudžbine ako je unet broj if (/sm-?\d{3,}/i.test(text)) { const num = 'SM-' + text.replace(/.*?sm-?(\d{3,}).*/i, '$1'); setTyping(true); fetch('/sm-api/orders/track/' + encodeURIComponent(num)).then(r => r.ok ? r.json() : null).then(d => { setTyping(false); if (d && d.found) setMsgs(m => [...m, { from: 'bot', text: 'Porudžbina ' + d.num + ' — status: ' + d.label + '. Procenjena isporuka: ' + d.eta + ' 📦', chips: [{ label: 'Detaljno praćenje', nav: { view: 'page', key: 'prati-porudzbinu' } }] }]); else setMsgs(m => [...m, { from: 'bot', text: 'Nisam našao porudžbinu ' + num + '. Proveri broj (format SM-XXXXXX) ili nas pozovi na +381 63 600 442.' }]); }).catch(() => { setTyping(false); setMsgs(m => [...m, { from: 'bot', text: 'Trenutno ne mogu da proverim status, pokušaj malo kasnije.' }]); }); return; } setTyping(true); const t = setTimeout(() => { setTyping(false); setMsgs(m => [...m, { from: 'bot', ...genieReply(text) }]); }, 500 + Math.random() * 350); timers.current.push(t); }; return ( {/* Floating mascot + greeting bubble */} {!open && (
{bubble && (
Kako si danas? 👋
Kako mogu da ti pomognem?
)}
)} {/* Chat panel */} {open && (
{/* header */}
SUPER asistent
Tu sam za tebe
{!started ? (
Hajde da se upoznamo!
Ostavi svoj email da SUPER asistent može da ti pomogne i sačuva vaš razgovor.
{ e.preventDefault(); startChat(); }} style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 10, marginTop: 12 }}> { setEmail(e.target.value); setEmailErr(false); }} placeholder="tvoj@email.com" style={{ width: '100%', height: 46, border: emailErr ? '1.5px solid #d64545' : '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', padding: '0 16px', fontFamily: 'var(--sm-font-body)', fontSize: 14, outline: 'none', boxSizing: 'border-box', background: '#fff' }} /> {emailErr && Unesi ispravan email da nastavimo.}
🔒 Nikad nećemo deliti tvoj email.
) : ( {/* messages */}
{msgs.map((m, i) => (
{m.text}
{m.chips && m.from === 'bot' && (
{m.chips.map((c, ci) => { const label = typeof c === 'string' ? c : c.label; const sub = typeof c === 'object' ? c.sub : null; return ( ); })}
)}
))} {typing && (
{[0, 1, 2].map(d => )}
)}
{/* input */}
{ e.preventDefault(); send(); }} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 12px', borderTop: '1px solid var(--sm-border)', background: '#fff' }}> setInput(e.target.value)} placeholder="Pitaj SUPER asistenta…" style={{ flex: 1, height: 42, border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-pill)', padding: '0 16px', fontFamily: 'var(--sm-font-body)', fontSize: 14, outline: 'none', background: 'var(--sm-gray-50)', }} />
)}
)} ); } Object.assign(window, { GenieChat });