/* ─── PromoCard v2 upgrades ────────────────────────────────────────────────── 1 value badge · 2 expiry line · 3 social footer · 4 CTA shine/hover · 5 pill grid · 6 gradient blobs · 7 step indicator. Each is a tweak toggle (window.__pcV2 flags). Wraps window.PromoCard; loads after promo-anims-v2. */ (function(){ if (document.getElementById('pcv2-styles')) return; const el = document.createElement('style'); el.id = 'pcv2-styles'; el.textContent = ` .pc-steps{display:flex;align-items:center;gap:calc(var(--u)*7);margin-bottom:calc(var(--u)*18)} .pc-steps .dot{width:calc(var(--u)*22);height:calc(var(--u)*5);border-radius:100px;background:#E2E8F0} .pc-steps .lbl{font-size:calc(var(--u)*10.5);font-weight:700;color:#94A3B8;letter-spacing:.06em;text-transform:uppercase;margin-left:calc(var(--u)*4)} .pc-badge{display:inline-flex;align-items:center;gap:calc(var(--u)*5);border-radius:100px;padding:calc(var(--u)*5) calc(var(--u)*12);font-size:calc(var(--u)*11.5);font-weight:800;letter-spacing:.02em;margin-bottom:calc(var(--u)*12)} .pc-expiry{display:flex;align-items:center;gap:calc(var(--u)*5);font-size:calc(var(--u)*11);font-weight:600;color:#64748B} .pc-socials{display:flex;align-items:center;gap:calc(var(--u)*10);margin-top:calc(var(--u)*14)} .pc-socials a{width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center;color:#64748B;text-decoration:none;font-size:calc(var(--u)*11);font-weight:800;transition:all .15s} .pc-socials a:hover{background:#E2E8F0;color:#0F172A;transform:translateY(-1px)} .pc-cta{position:relative;overflow:hidden;transition:transform .15s, box-shadow .15s} .pc-cta:hover{transform:translateY(calc(var(--u)*-1.5));box-shadow:0 calc(var(--u)*7) calc(var(--u)*22) rgba(0,0,0,.2)} .pc-cta:active{transform:translateY(0) scale(.985)} .pc-cta:hover svg{transform:translateX(calc(var(--u)*3))} .pc-cta svg{transition:transform .2s} .pc-cta .pc-shine{position:absolute;top:0;bottom:0;width:calc(var(--u)*46);background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:pcShine 3.4s ease-in-out infinite;pointer-events:none} @keyframes pcShine{0%{left:-25%}55%,100%{left:115%}} .pc-pills.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*8)} .pc-pills.grid3 .pc-pill{justify-content:center;padding:calc(var(--u)*7) calc(var(--u)*8);font-size:calc(var(--u)*11);text-align:center;min-width:0} .pc-pills.grid3 .pc-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} `; document.head.appendChild(el); })(); const PC_SOCIAL_GLYPHS = { instagram:'Ig', facebook:'f', linkedin:'in', youtube:'▶', x:'𝕏', website:'🌐' }; (function(){ const Base = window.PromoCardBase; const h = React.createElement; function PromoCardV2(props){ const flags = window.__pcV2 || {}; const t = (window.TH_DATA||[])[props.themeIdx||0] || (window.TH_DATA||[])[0] || {c:'#2563EB',l:'#EFF6FF'}; const p = (window.PROMOS_DATA||[])[props.promoIdx||0] || {}; const brand = (window.RB_BRANDS||[])[0]; const socials = brand?.socials || {}; const socialKeys = Object.keys(PC_SOCIAL_GLYPHS).filter(k=>socials[k]); const card = h(Base, props); const ref = React.useRef(null); React.useEffect(() => { const flags2 = window.__pcV2 || {}; const root = ref.current; if (!root) return; const inner = root.querySelector('.pc-inner'); if (!inner) return; /* cleanup previous injections */ inner.querySelectorAll('[data-pcv2]').forEach(n=>n.remove()); const blTL = root.querySelector('.pc-blob-tl'), blBR = root.querySelector('.pc-blob-br'); /* 6 — gradient blobs */ if (blTL) blTL.style.background = flags.blobs ? `radial-gradient(circle at 35% 65%, ${t.l} 0%, transparent 70%)` : t.l; if (blBR) blBR.style.background = flags.blobs ? `radial-gradient(circle at 65% 35%, ${t.l} 0%, transparent 70%)` : t.l; const mk = (cls, html) => { const d=document.createElement('div'); d.className=cls; d.setAttribute('data-pcv2',''); d.innerHTML=html; return d; }; /* 7 — step indicator (above logo) */ if (flags.steps) { const s = mk('pc-steps', `Step 1 of 3 · Claim your reward`); inner.insertBefore(s, inner.firstChild); } /* 1 — value badge (above title) */ if (flags.badge) { const title = inner.querySelector('.pc-title'); const b = mk('pc-badge', `${p.badge || 'Worth $49'}`); b.style.background = t.l; b.style.color = t.c; if (title) inner.insertBefore(b, title); } /* 5 — pill grid */ const pills = inner.querySelector('.pc-pills'); if (pills) { pills.classList.toggle('grid3', !!flags.pillGrid && pills.children.length === 3); if (flags.pillGrid) pills.querySelectorAll('.pc-pill').forEach(pl=>{ if (!pl.querySelector('span.lb')) { const txt=[...pl.childNodes].find(n=>n.nodeType===3); if(txt){ const s=document.createElement('span'); s.className='lb'; s.textContent=txt.textContent; pl.replaceChild(s,txt);} } }); } /* 4 — CTA shine */ const cta = inner.querySelector('.pc-cta'); if (cta && flags.cta && !cta.querySelector('.pc-shine')) { const s=document.createElement('span'); s.className='pc-shine'; s.setAttribute('data-pcv2',''); cta.appendChild(s); } if (cta && !flags.cta) { const s=cta.querySelector('.pc-shine'); if(s) s.remove(); } const ctaWrap = inner.querySelector('.pc-cta-wrap'); /* 2 — expiry line (inside cta-wrap, after trust) */ if (flags.expiry && ctaWrap) { ctaWrap.appendChild(mk('pc-expiry', `Offer valid until  31 Aug 2026`)); } /* 3 — social footer */ if (flags.socials && socialKeys.length && ctaWrap) { ctaWrap.appendChild(mk('pc-socials', socialKeys.map(k=>`${PC_SOCIAL_GLYPHS[k]}`).join(''))); } }); return h('div', { ref, style:{width:'100%'} }, card); } PromoCard = PromoCardV2; // rebind the shared lexical used by JSX call sites window.PromoCard = PromoCardV2; window.__pcV2Ready = true; })();