e no JSON-LD. function displayName(n) { return String(n || '').replace(/^\*/, '').split('|')[0].trim(); } /* Aviso rápido pro vendedor (via /api/lead → CallMeBot). Trava: 1 por tipo por sessão — sem spam. */ function PORCE_PING(chave, resumo) { try { const k = 'porce_ping_' + chave; if (sessionStorage.getItem(k)) return; sessionStorage.setItem(k, '1'); fetch('/api/lead', { method: 'POST', keepalive: true, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Visitante (sem contato ainda)', phone: '-', pieces: 0, summary: resumo }) }); } catch (e) {} } window.PORCE_PING = PORCE_PING; /* Texto editável do admin (site_content.textos) com fallback pro padrão do código. */ function PORCE_TX(k, fb) { try { return String((((PORCE_DATA.content || {}).textos || {})[k] || '')).trim() || fb; } catch (e) { return fb; } } window.PORCE_TX = PORCE_TX; /* Popup de cupom (home): captura contato → pedido chega no WhatsApp do vendedor, que envia o cupom exclusivo. Controlado por settings.promo_popup {enabled,title,subtitle,delay_s} no admin (Marketing). 1x por visitante. */ function CupomPopup() { const cfg = (PORCE_DATA.settings && PORCE_DATA.settings.promo_popup) || {}; const [open, setOpen] = React.useState(false); const [name, setName] = React.useState(''); const [phone, setPhone] = React.useState(''); const [done, setDone] = React.useState(false); const [fallback, setFallback] = React.useState(false); const [busy, setBusy] = React.useState(false); React.useEffect(() => { if (!cfg.enabled) return; try { if (localStorage.getItem('porce_cupom_v1')) return; } catch (e) {} const t = setTimeout(() => setOpen(true), (Number(cfg.delay_s) || 6) * 1000); return () => clearTimeout(t); }, []); if (!cfg.enabled || !open) return null; const valid = name.trim().length >= 2 && phone.replace(/\D/g, '').length >= 10; const fechar = () => { setOpen(false); try { localStorage.setItem('porce_cupom_v1', '1'); } catch (e) {} }; const enviar = async () => { if (!valid || busy) return; setBusy(true); const r = await porceCaptureLead({ customer_name: name.trim(), customer_phone: phone.trim(), source: 'cupom-popup', pieces: 0, summary: '🎟️ PEDIDO DE CUPOM (popup da home) — enviar cupom exclusivo pro cliente' }); setBusy(false); setFallback(!r.saved); setDone(true); try { localStorage.setItem('porce_cupom_v1', '1'); } catch (e) {} }; const waCupom = `https://wa.me/${PORCE_DATA.WHATS}?text=${encodeURIComponent(`Olá, Porceville! Sou ${name.trim()}, vim pelo cupom do site.`)}`; return ( <> <div onClick={fechar} style={{ position: 'fixed', inset: 0, background: 'rgba(13,30,55,.55)', zIndex: 200 }} /> <div role="dialog" aria-modal="true" style={{ position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', zIndex: 201, width: 'min(400px, 92vw)', background: '#fff', borderRadius: 22, padding: '28px 26px', boxShadow: '0 40px 90px rgba(0,0,0,.4)', textAlign: 'center' }}> <button type="button" onClick={fechar} aria-label="Fechar" style={{ position: 'absolute', top: 12, right: 14, border: 'none', background: 'none', fontSize: 22, cursor: 'pointer', color: 'var(--ink-mute)' }}>✕</button> {done ? ( fallback ? ( <> <div style={{ fontSize: 44 }}>📲</div> <div className="display" style={{ fontSize: 24, color: 'var(--navy)', marginTop: 8 }}>Quase lá!</div> <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>Não conseguimos registrar seu cupom agora — fale direto com a gente no WhatsApp:</p> <a className="btn btn-whats btn-block" href={waCupom} target="_blank" rel="noopener noreferrer" style={{ marginTop: 16, padding: 13 }} onClick={() => setTimeout(fechar, 400)}>Abrir WhatsApp</a> </> ) : ( <> <div style={{ fontSize: 44 }}>🎟️</div> <div className="display" style={{ fontSize: 24, color: 'var(--navy)', marginTop: 8 }}>Cupom a caminho!</div> <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>Nosso vendedor vai te chamar no WhatsApp com um <b>cupom exclusivo</b> pra sua primeira compra.</p> <button type="button" className="btn btn-navy btn-block" style={{ marginTop: 16, padding: 13 }} onClick={fechar}>Continuar navegando</button> </> ) ) : ( <> <div style={{ fontSize: 44 }}>🎁</div> <div className="display" style={{ fontSize: 24, color: 'var(--navy)', marginTop: 8 }}>{cfg.title || 'Ganhe um cupom exclusivo'}</div> <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>{cfg.subtitle || 'Deixe seu contato e nosso vendedor envia um cupom de desconto direto no seu WhatsApp.'}</p> <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}> <input placeholder="Seu nome *" value={name} onChange={e => setName(e.target.value)} style={{ padding: '13px 14px', border: '1.5px solid var(--line)', borderRadius: 12, fontSize: 15 }} /> <input placeholder="WhatsApp *" value={phone} onChange={e => setPhone(e.target.value)} inputMode="tel" style={{ padding: '13px 14px', border: '1.5px solid var(--line)', borderRadius: 12, fontSize: 15 }} /> <button type="button" className="btn btn-gold btn-block" disabled={!valid || busy} onClick={enviar} style={{ padding: 14, fontWeight: 800, opacity: valid && !busy ? 1 : .55 }}> {busy ? 'Enviando…' : 'Quero meu cupom'} </button> </div> <div className="muted" style={{ fontSize: 11, marginTop: 10 }}>Sem spam — só o cupom e o atendimento.</div> </> )} </div> </> ); } /* Barra flutuante de anúncio (topo) — settings.float_banner {enabled,text,cta_text,cta_link} */ function FloatBar() { const cfg = (PORCE_DATA.settings && PORCE_DATA.settings.float_banner) || {}; const [hide, setHide] = React.useState(() => { try { return sessionStorage.getItem('porce_fbar') === '1'; } catch (e) { return false; } }); if (!cfg.enabled || hide || !(cfg.text || '').trim()) return null; const go = () => { const l = (cfg.cta_link || '').trim(); if (!l) return; if (l === 'whatsapp') window.open(`https://wa.me/${PORCE_DATA.WHATS}`, '_blank'); else window.open(l, '_blank'); }; return ( <div style={{ position: 'sticky', top: 0, zIndex: 150, background: 'linear-gradient(90deg, #0D2B5A, #16335F)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, padding: '10px 44px 10px 16px', fontSize: 13.5, fontWeight: 700 }}> <span>{cfg.text}</span> {(cfg.cta_text || '').trim() && <button type="button" onClick={go} style={{ border: 'none', background: 'var(--gold)', color: '#0D2B5A', fontWeight: 800, fontSize: 12.5, padding: '6px 14px', borderRadius: 99, cursor: 'pointer' }}>{cfg.cta_text}</button>} <button type="button" onClick={() => { setHide(true); try { sessionStorage.setItem('porce_fbar', '1'); } catch (e) {} }} aria-label="Fechar aviso" style={{ position: 'absolute', right: 10, border: 'none', background: 'none', color: 'rgba(255,255,255,.8)', fontSize: 16, cursor: 'pointer' }}>✕</button> </div> ); } /* Botão flutuante do WhatsApp — atalho de conversão nº 1 no B2B; presente nas 2 versões */ function WhatsFab({ bottom = 24, msg }) { const texto = msg || 'Olá, Porceville! Quero um orçamento de brindes personalizados.'; return ( <a href={`https://wa.me/${PORCE_DATA.WHATS}?text=${encodeURIComponent(texto)}`} onClick={() => PORCE_PING('fab', '🟢 Visitante clicou no WhatsApp (botão flutuante) — deve te chamar em instantes')} target="_blank" rel="noopener noreferrer" aria-label="Falar no WhatsApp" style={{ position: 'fixed', right: 20, bottom, zIndex: 120, width: 58, height: 58, borderRadius: '50%', background: '#25D366', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 14px 34px rgba(37,211,102,.45), 0 4px 12px rgba(0,0,0,.18)', textDecoration: 'none' }}> <PIcon name="whats" size={30} stroke="#fff" /> </a> ); } Object.assign(window, { PIcon, PorceWordmark, PorceAvatar, PPhoto, PStepper, ColorDots, engravingLabel, priceTag, displayName, WhatsFab, CupomPopup, FloatBar });

{img ? <>

{slot ? React.createElement('image-slot', { id: slot, placeholder, src: img, fit, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', background: 'transparent' }, }) : {label

} : (illo ? : <>

{slot && React.createElement('image-slot', { id: slot, placeholder, style: { position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', background: 'transparent' }, })} )} {label &&

{label}

} {children}

); } function PStepper({ value, onChange, min = 0, step = 1, size = 'md' }) { const s = size === 'sm'; const [draft, setDraft] = React.useState(null); // digitação livre; confirma no blur/Enter const commit = (raw) => { const n = parseInt(String(raw).replace(/[^0-9]/g, ''), 10); onChange(Math.max(min, isNaN(n) ? min : n)); setDraft(null); }; const stepBy = (d) => { const base = draft != null ? (parseInt(draft, 10) || min) : value; setDraft(null); onChange(Math.max(min, base + d)); }; const btn = { width: s ? 28 : 34, height: s ? 28 : 34, borderRadius: '50%', border: 'none', background: 'rgba(29,53,87,.07)', color: 'var(--navy)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none', }; return (

e.target.select()} onChange={e => setDraft(e.target.value.replace(/[^0-9]/g, ''))} onBlur={e => commit(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') e.target.blur(); }} style={{ width: s ? 44 : 56, textAlign: 'center', fontSize: s ? 15 : 17, fontWeight: 800, color: 'var(--navy)', border: '1.5px solid var(--line)', borderRadius: 10, padding: s ? '3px 2px' : '5px 2px', background: 'var(--surface)', outline: 'none', fontFamily: 'var(--font-body)' }} />

); } // swatch das cores da logo function ColorDots({ opt, size = 30 }) { if (opt.dots === 'rainbow') { return

; } const n = opt.dots.length; return (

{opt.dots.map((c, i) =>

)}

); } // resumo de gravação de um item do orçamento function engravingLabel(entry) { const pc = entry.piece ? (PORCE_DATA.pieceColors.find(c => c.id === entry.piece)?.label) : null; let base; if (entry.colors === 'colorido') base = 'Multicor · sublimação'; else if (entry.colors) base = `Logo ${entry.colors} ${entry.colors === '1' ? 'cor' : 'cores'} · serigrafia`; else base = 'Pronta entrega'; const parts = [entry.size ? `${entry.size} ${(PORCE_DATA.getProduct(entry.productId) || {}).unit || 'ml'}` : null, base, pc ? `peça ${pc}` : null].filter(Boolean); return parts.join(' · '); } // Preço: pronta entrega com preço mostra o valor (e "de/por" se houver promocional menor); senão "Sob orçamento" function priceTag(p) { const v = p && p.price; if (!(p && p.ready && v != null && Number(v) > 0)) return 'Sob orçamento'; const venda = Number(v); const fmt = n => 'R$ ' + n.toFixed(2).replace('.', ','); const prom = (p.promo != null && p.promo !== '') ? Number(p.promo) : null; if (prom != null && prom > 0 && prom < venda) { return ( {fmt(venda)} {fmt(prom)} ); } return fmt(venda); } // nome de exibição nos cards: tira o * (notação interna de produto referência) e o sufixo SEO "| ...". // O nome completo continua no detalhe do produto, no e no JSON-LD. function displayName(n) { return String(n || '').replace(/^\*/, '').split('|')[0].trim(); } /* Aviso rápido pro vendedor (via /api/lead → CallMeBot). Trava: 1 por tipo por sessão — sem spam. */ function PORCE_PING(chave, resumo) { try { const k = 'porce_ping_' + chave; if (sessionStorage.getItem(k)) return; sessionStorage.setItem(k, '1'); fetch('/api/lead', { method: 'POST', keepalive: true, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Visitante (sem contato ainda)', phone: '-', pieces: 0, summary: resumo }) }); } catch (e) {} } window.PORCE_PING = PORCE_PING; /* Texto editável do admin (site_content.textos) com fallback pro padrão do código. */ function PORCE_TX(k, fb) { try { return String((((PORCE_DATA.content || {}).textos || {})[k] || '')).trim() || fb; } catch (e) { return fb; } } window.PORCE_TX = PORCE_TX; /* Popup de cupom (home): captura contato → pedido chega no WhatsApp do vendedor, que envia o cupom exclusivo. Controlado por settings.promo_popup {enabled,title,subtitle,delay_s} no admin (Marketing). 1x por visitante. */ function CupomPopup() { const cfg = (PORCE_DATA.settings && PORCE_DATA.settings.promo_popup) || {}; const [open, setOpen] = React.useState(false); const [name, setName] = React.useState(''); const [phone, setPhone] = React.useState(''); const [done, setDone] = React.useState(false); const [fallback, setFallback] = React.useState(false); const [busy, setBusy] = React.useState(false); React.useEffect(() => { if (!cfg.enabled) return; try { if (localStorage.getItem('porce_cupom_v1')) return; } catch (e) {} const t = setTimeout(() => setOpen(true), (Number(cfg.delay_s) || 6) * 1000); return () => clearTimeout(t); }, []); if (!cfg.enabled || !open) return null; const valid = name.trim().length >= 2 && phone.replace(/\D/g, '').length >= 10; const fechar = () => { setOpen(false); try { localStorage.setItem('porce_cupom_v1', '1'); } catch (e) {} }; const enviar = async () => { if (!valid || busy) return; setBusy(true); const r = await porceCaptureLead({ customer_name: name.trim(), customer_phone: phone.trim(), source: 'cupom-popup', pieces: 0, summary: '🎟️ PEDIDO DE CUPOM (popup da home) — enviar cupom exclusivo pro cliente' }); setBusy(false); setFallback(!r.saved); setDone(true); try { localStorage.setItem('porce_cupom_v1', '1'); } catch (e) {} }; const waCupom = `https://wa.me/${PORCE_DATA.WHATS}?text=${encodeURIComponent(`Olá, Porceville! Sou ${name.trim()}, vim pelo cupom do site.`)}`; return ( <> <div onClick={fechar} style={{ position: 'fixed', inset: 0, background: 'rgba(13,30,55,.55)', zIndex: 200 }} /> <div role="dialog" aria-modal="true" style={{ position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', zIndex: 201, width: 'min(400px, 92vw)', background: '#fff', borderRadius: 22, padding: '28px 26px', boxShadow: '0 40px 90px rgba(0,0,0,.4)', textAlign: 'center' }}> <button type="button" onClick={fechar} aria-label="Fechar" style={{ position: 'absolute', top: 12, right: 14, border: 'none', background: 'none', fontSize: 22, cursor: 'pointer', color: 'var(--ink-mute)' }}>✕</button> {done ? ( fallback ? ( <> <div style={{ fontSize: 44 }}>📲</div> <div className="display" style={{ fontSize: 24, color: 'var(--navy)', marginTop: 8 }}>Quase lá!</div> <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>Não conseguimos registrar seu cupom agora — fale direto com a gente no WhatsApp:</p> <a className="btn btn-whats btn-block" href={waCupom} target="_blank" rel="noopener noreferrer" style={{ marginTop: 16, padding: 13 }} onClick={() => setTimeout(fechar, 400)}>Abrir WhatsApp</a> </> ) : ( <> <div style={{ fontSize: 44 }}>🎟️</div> <div className="display" style={{ fontSize: 24, color: 'var(--navy)', marginTop: 8 }}>Cupom a caminho!</div> <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>Nosso vendedor vai te chamar no WhatsApp com um <b>cupom exclusivo</b> pra sua primeira compra.</p> <button type="button" className="btn btn-navy btn-block" style={{ marginTop: 16, padding: 13 }} onClick={fechar}>Continuar navegando</button> </> ) ) : ( <> <div style={{ fontSize: 44 }}>🎁</div> <div className="display" style={{ fontSize: 24, color: 'var(--navy)', marginTop: 8 }}>{cfg.title || 'Ganhe um cupom exclusivo'}</div> <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>{cfg.subtitle || 'Deixe seu contato e nosso vendedor envia um cupom de desconto direto no seu WhatsApp.'}</p> <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 16 }}> <input placeholder="Seu nome *" value={name} onChange={e => setName(e.target.value)} style={{ padding: '13px 14px', border: '1.5px solid var(--line)', borderRadius: 12, fontSize: 15 }} /> <input placeholder="WhatsApp *" value={phone} onChange={e => setPhone(e.target.value)} inputMode="tel" style={{ padding: '13px 14px', border: '1.5px solid var(--line)', borderRadius: 12, fontSize: 15 }} /> <button type="button" className="btn btn-gold btn-block" disabled={!valid || busy} onClick={enviar} style={{ padding: 14, fontWeight: 800, opacity: valid && !busy ? 1 : .55 }}> {busy ? 'Enviando…' : 'Quero meu cupom'} </button> </div> <div className="muted" style={{ fontSize: 11, marginTop: 10 }}>Sem spam — só o cupom e o atendimento.</div> </> )} </div> </> ); } /* Barra flutuante de anúncio (topo) — settings.float_banner {enabled,text,cta_text,cta_link} */ function FloatBar() { const cfg = (PORCE_DATA.settings && PORCE_DATA.settings.float_banner) || {}; const [hide, setHide] = React.useState(() => { try { return sessionStorage.getItem('porce_fbar') === '1'; } catch (e) { return false; } }); if (!cfg.enabled || hide || !(cfg.text || '').trim()) return null; const go = () => { const l = (cfg.cta_link || '').trim(); if (!l) return; if (l === 'whatsapp') window.open(`https://wa.me/${PORCE_DATA.WHATS}`, '_blank'); else window.open(l, '_blank'); }; return ( <div style={{ position: 'sticky', top: 0, zIndex: 150, background: 'linear-gradient(90deg, #0D2B5A, #16335F)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, padding: '10px 44px 10px 16px', fontSize: 13.5, fontWeight: 700 }}> <span>{cfg.text}</span> {(cfg.cta_text || '').trim() && <button type="button" onClick={go} style={{ border: 'none', background: 'var(--gold)', color: '#0D2B5A', fontWeight: 800, fontSize: 12.5, padding: '6px 14px', borderRadius: 99, cursor: 'pointer' }}>{cfg.cta_text}</button>} <button type="button" onClick={() => { setHide(true); try { sessionStorage.setItem('porce_fbar', '1'); } catch (e) {} }} aria-label="Fechar aviso" style={{ position: 'absolute', right: 10, border: 'none', background: 'none', color: 'rgba(255,255,255,.8)', fontSize: 16, cursor: 'pointer' }}>✕</button> </div> ); } /* Botão flutuante do WhatsApp — atalho de conversão nº 1 no B2B; presente nas 2 versões */ function WhatsFab({ bottom = 24, msg }) { const texto = msg || 'Olá, Porceville! Quero um orçamento de brindes personalizados.'; return ( <a href={`https://wa.me/${PORCE_DATA.WHATS}?text=${encodeURIComponent(texto)}`} onClick={() => PORCE_PING('fab', '🟢 Visitante clicou no WhatsApp (botão flutuante) — deve te chamar em instantes')} target="_blank" rel="noopener noreferrer" aria-label="Falar no WhatsApp" style={{ position: 'fixed', right: 20, bottom, zIndex: 120, width: 58, height: 58, borderRadius: '50%', background: '#25D366', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 14px 34px rgba(37,211,102,.45), 0 4px 12px rgba(0,0,0,.18)', textDecoration: 'none' }}> <PIcon name="whats" size={30} stroke="#fff" /> </a> ); } Object.assign(window, { PIcon, PorceWordmark, PorceAvatar, PPhoto, PStepper, ColorDots, engravingLabel, priceTag, displayName, WhatsFab, CupomPopup, FloatBar });