// ──────────────────────────────────────────────────────────────
// TSTouchpointViz — interactive illustration for the homepage
// "Dynamic Connection" section. Hovering a touchpoint pill reveals
// the matching icon with a crossfade; idle shows a phone + QR.
//
// Style: soft matte "clay" 3D. Each form is shaded with a reusable
// radial gradient (light from top-left), lifted with a gloss
// highlight, and grounded with a soft drop-shadow filter — a chunky,
// friendly, modern 2026 look. Gradients/filter live once in TP_DEFS.
// ──────────────────────────────────────────────────────────────
const TP_BLUE = "#2F3886", TP_AMBER = "#FFB855"; // kept for external reference
// Shared clay gradients, gloss + soft shadow — defined once.
const TP_DEFS = (
);
const TP_ICONS = {
// Retail shelf unit with puffy products in two recesses.
"Merchandise Displays": (
),
// Hanging store sign with a chunky wayfinding arrow.
"In Store Signage": (
),
// Isometric 3D parcel (clay cube) with an amber shipping label.
"Product Packaging": (
),
// Billboard panel with imagery + headline on twin posts.
"Billboards": (
),
// Phone with a big amber like-heart.
"Social Media Advertising": (
),
// Television with a play button and broadcast waves.
"Broadcast Advertising": (
),
// Newspaper front page: masthead, hero image, columns.
"Print Media": (
),
// Trade-show booth: scalloped awning, branded wall, screen, counter.
"Trade Show Booths": (
),
// Support booklet / manual with a cover image and amber bookmark.
"Support Material": (
),
// Puffy sparkle burst for custom / other solutions.
"& More Custom Solutions": (
),
};
// Idle: a clay smartphone with a QR code on screen.
const TP_IDLE = (
);
// Static stylesheet — rendered inline so the hidden base state applies
// on first paint (avoids a frozen 1→0 transition in throttled tabs).
const TP_CSS = `
.ts-tp {
position: relative; width: 100%; max-width: 460px; margin: 0 auto; height: 100%;
background: #fff; border: 1px solid #E6E8F7; border-radius: 20px; padding: 22px;
box-shadow: 0 18px 44px -22px rgba(28,34,80,0.34);
display: flex; flex-direction: column; box-sizing: border-box;
}
.ts-tp-stage {
position: relative; width: 100%; flex: 1; min-height: 240px;
background: #fff; border-radius: 14px; overflow: hidden;
}
.ts-tp-layer {
position: absolute; inset: 0; display: grid; place-items: center;
opacity: 0; visibility: hidden; transform: scale(0.92) translateY(8px);
transition: opacity 360ms cubic-bezier(0.2,0.8,0.2,1), transform 360ms cubic-bezier(0.2,0.8,0.2,1), visibility 0s linear 360ms;
}
.ts-tp-layer.show {
opacity: 1; visibility: visible; transform: none;
transition: opacity 360ms cubic-bezier(0.2,0.8,0.2,1), transform 360ms cubic-bezier(0.2,0.8,0.2,1), visibility 0s;
}
.ts-tp-layer svg { width: 72%; height: 72%; display: block; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
.ts-tp-layer { transition: opacity 120ms linear, visibility 0s linear 120ms; transform: none; }
.ts-tp-layer.show { transition: opacity 120ms linear, visibility 0s; transform: none; }
}
`;
function TSTouchpointViz({ active }) {
const labels = Object.keys(TP_ICONS);
const isIdle = !active || !TP_ICONS[active];
return (
{TP_DEFS}
{TP_IDLE}
{labels.map((label) =>
{TP_ICONS[label]}
)}