// ──────────────────────────────────────────────────────────────
// ContextualPhone — phone illustration for the homepage
// "The Right Experience" section. The phone displays a generic
// piece of content; three attribute chips overlap its edges
// (language, location, date) to convey that the content adapts to
// those signals — they are representations, not tappable UI.
// At rest it sits settled; on hover the phone lifts, the chips
// pop back in (staggered), and a light sweeps across the screen —
// mirroring the 2nd section's dashboard visual.
// ──────────────────────────────────────────────────────────────
const { useEffect: useCPEffect, useState: useCPState, useRef: useCPRef } = React;
const CP_BLUE = "#2F3886";
const CP_BLUE2 = "#6976E7";
const CP_AMBER = "#FFB855";
const CP_AMBER2 = "#F2A030";
const CP_INK = "#1C2250";
const CP_PANEL = "#F6F7FE";
const CP_LINE = "#E6E8F7";
/* A floating attribute chip with its own soft shadow + a hover tooltip.
`icon` is drawn in an 84×84 box; `label` is an array of tooltip lines. */
function CPChip({ cx, cy, color, icon, idx, label }) {
cx = +cx; cy = +cy;
const s = 84, r = s / 2;
const k = 0.94; // overall chip scale (square + icon shrink together)
// Line 0 is always the small "Adapt Content by" eyebrow; line 1 is the
// larger, bolder descriptor that follows.
const lines = label || [];
const eyebrow = lines[0] || "";
const descriptor = lines[1] || "";
const w0 = eyebrow.length * 5.9;
const w1 = descriptor.length * 7.6;
const tw = Math.max(108, Math.max(w0, w1) + 28);
const th = lines.length > 0 ? 48 : 0;
const chipHalf = r * k;
const ty = cy - chipHalf - 12 - th; // tooltip sits above the chip
const tx = cx - tw / 2;
return (
{
e.stopPropagation();
const el = e.currentTarget;
el.classList.toggle("is-tapped");
setTimeout(() => el.classList.remove("is-tapped"), 3000);
}}>
{/* icons authored full-size in an 84×84 box; scaled within the square */}
{icon}
{lines.length > 0 &&
{eyebrow}
{descriptor}
}
);
}
function ContextualPhone() {
// A counter bumped on every hover. Used as a React key on the animated
// groups so they remount and the CSS build restarts reliably each time.
const [runId, setRunId] = useCPState(0);
const wrapRef = useCPRef(null);
// Sequential icon wiggle: fire one icon at a time (1.5s apart, looping),
// each as a single finite animation that removes itself when done. No
// animation runs at rest, so the icons stay crisp.
useCPEffect(() => {
const wrap = wrapRef.current;
if (!wrap) return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
let i = 0;
const fire = () => {
const icons = wrap.querySelectorAll(".ts-cp-iconwiggle");
if (!icons.length) return;
const el = icons[i % icons.length];
i += 1;
if (!el) return;
el.classList.remove("is-wiggling");
// reflow so the animation restarts even if re-added quickly
void el.getBoundingClientRect();
el.classList.add("is-wiggling");
const done = () => { el.classList.remove("is-wiggling"); el.removeEventListener("animationend", done); };
el.addEventListener("animationend", done);
};
const id = setInterval(fire, 1500);
const kick = setTimeout(fire, 400);
return () => { clearInterval(id); clearTimeout(kick); };
}, []);
useCPEffect(() => {
if (document.getElementById("ts-contextual-phone-css")) return;
const s = document.createElement("style");
s.id = "ts-contextual-phone-css";
s.textContent = `
.ts-cp {
position: relative; width: 100%; max-width: 460px; margin: 0 auto;
display: flex; justify-content: center; cursor: pointer;
}
.ts-cp svg { display: block; width: 86%; height: auto; overflow: visible; }
.ts-cp-device {
transition: transform 340ms cubic-bezier(0.2,0.8,0.2,1);
transform-box: fill-box; transform-origin: center;
}
.ts-cp:hover .ts-cp-device { transform: translateY(-6px); }
.ts-cp-chip { transform-box: fill-box; transform-origin: center; }
.ts-cp.is-live .ts-cp-chip {
animation: cpPop 0.62s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ts-cp-tip { opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
.ts-cp-chipwrap:hover .ts-cp-tip,
.ts-cp-chipwrap.is-tapped .ts-cp-tip { opacity: 1; }
.ts-cp-chipwrap { cursor: pointer; }
/* Sequential icon wiggle — mirrors the CTA logo badge. Driven by JS
(one finite run at a time via .is-wiggling) so that AT REST there is
no running animation and the icon renders as a crisp vector instead
of a cached, blurry composited bitmap. */
.ts-cp-iconwiggle {
transform-box: fill-box; transform-origin: 50% 50%;
}
.ts-cp-iconwiggle.is-wiggling {
animation: cpIconWiggle 0.7s ease-in-out 1 both;
}
@keyframes cpIconWiggle {
0% { transform: rotate(0deg) scale(1); }
15% { transform: rotate(-8deg) scale(1.04); }
35% { transform: rotate(7deg) scale(1.04); }
55% { transform: rotate(-5deg) scale(1.03); }
75% { transform: rotate(3deg) scale(1.02); }
100% { transform: rotate(0deg) scale(1); }
}
@keyframes cpPop {
0% { opacity: 0; transform: scale(0.35) rotate(-10deg); }
60% { opacity: 1; }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
.ts-cp-sweep { transform-box: fill-box; transform-origin: center; opacity: 0; }
.ts-cp.is-live .ts-cp-sweep { animation: cpSweep 0.95s ease-in-out both; }
@keyframes cpSweep {
0% { opacity: 0; transform: translateX(-150px) skewX(-12deg); }
25% { opacity: 0.75; }
100% { opacity: 0; transform: translateX(150px) skewX(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
.ts-cp-chip, .ts-cp-sweep, .ts-cp-device, .ts-cp-iconwiggle { animation: none !important; transition: none !important; }
}
`;
document.head.appendChild(s);
}, []);
// Re-trigger the build on every hover.
const replay = () => setRunId((n) => n + 1);
const live = runId > 0;
// Also play the build when the card scrolls into view (re-fires each time
// it re-enters) — mirrors the 2nd section's dashboard visual so the phone
// fully runs its chip-pop + sweep on page load, not only on hover.
useCPEffect(() => {
const wrap = wrapRef.current;
if (!wrap) return;
if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) replay(); });
}, { threshold: 0.4 });
io.observe(wrap);
return () => io.disconnect();
}, []);
// Language (uploaded) — navy on gold.
const langIcon = (
);
// Map pin (uploaded) — navy on light blue.
const pinIcon = (
);
// Calendar (uploaded) — white on dark blue.
const calIcon = (
);
// Store (uploaded) — navy on light orange.
const storeIcon = (
);
return (
);
}
window.ContextualPhone = ContextualPhone;