// ─────────────────────────────────────────────────────────────
// THE DEFINITIVE CONCEPT — recreating the actual WXG customer
// satisfaction survey, pixel-faithful to live collateral:
//
// • Full-bleed animated skyline at top (uses the real WXG
// city-line path data). Amber overlay reveals left-to-right
// in lockstep with the stepper.
// • Stacked WXG / WAXMAN GROUP logo centered, breaks the
// skyline visually.
// • White card, sharp corners, soft shadow.
// • Pastel squares corner motif (red / gold / green / blue
// from the brand book's secondary palette).
// • Project + milestone meta as key-value rows.
// • Numbered circular stepper, amber active + amber-fill done.
// • Rating as thin-bordered numbered circles 6—10.
// • Free text with amber send icon.
// • Outlined "המשך" button during journey, amber-filled
// "אישור ושליחה" on the final step.
//
// Everything else (typography hierarchy, Calibri Light weight,
// amber-square punctuation, mono micro-labels) follows the
// brand book.
// ─────────────────────────────────────────────────────────────
const RL_TYPE = WXG_FONT;
const RL_MONO = WXG_MONO;
// Palette — locked to the WXG brand book primaries + secondary pastels.
const RL = {
amber: '#FCAF17',
amberHover: '#E89E0F',
amberSoft: 'rgba(252, 175, 23, 0.10)',
ink: '#1F1F1F',
grey: '#4D4D4D',
greyMid: '#8A8A8A',
greyLight: '#CDCDCD',
rule: '#E8E8E8',
paper: '#F5F5F4',
paperWarm:'#FAF8F4',
card: '#FFFFFF',
red: '#E5B2B0',
// Required-marker red — matches the small asterisk used in the
// real survey screenshots (a deep wine red, not the pink).
required: '#B0303B',
};
// ─────────────────────────────────────────────────────────────
// Full-bleed animated skyline. Uses the real WXG city-line path,
// with an amber overlay revealed left-to-right by clipping.
// ─────────────────────────────────────────────────────────────
const RL_CITY_PATH = (typeof window !== 'undefined' && window.WXG_CITY_PATH) || '';
const RL_CITY_DETAILS = (typeof window !== 'undefined' && window.WXG_CITY_DETAILS) || [];
const RL_CITY_VB = (typeof window !== 'undefined' && window.WXG_CITY_VIEWBOX) || '0 0 3341 366';
const RL_CITY_W = parseFloat(RL_CITY_VB.split(/\s+/)[2]) || 3341;
const RL_CITY_H = parseFloat(RL_CITY_VB.split(/\s+/)[3]) || 366;
// Small black square markers at architectural high points along
// the skyline — purely decorative, matches the WXG website SVG.
const RL_CITY_MARKERS = [
{ x: 81, y: 276, w: 10, h: 10 },
{ x: 300, y: 40, w: 10, h: 10 },
{ x: 410, y: 125, w: 10, h: 10 },
{ x: 592, y: 183, w: 10, h: 10 },
{ x: 762, y: 333, w: 10, h: 10 },
{ x: 1120, y: 152, w: 10, h: 10 },
{ x: 1233, y: 326, w: 10, h: 10 },
{ x: 1504, y: 148, w: 10, h: 10 },
{ x: 1708, y: 267, w: 10, h: 10 },
{ x: 1938, y: 254, w: 10, h: 10 },
{ x: 2068, y: 123, w: 10, h: 10 },
{ x: 2346, y: 92, w: 10, h: 10 },
{ x: 2658, y: 111, w: 10, h: 10 },
{ x: 2871, y: 290, w: 10, h: 10 },
{ x: 3169, y: 302, w: 10, h: 10 },
];
function RL_Skyline({ progress, mobile }) {
// Stable clip-path id so multiple instances don't collide.
const clipId = React.useMemo(
() => 'rl-skyline-clip-' + Math.random().toString(36).slice(2, 8), []);
const padBottom = 8;
return (
);
}
// ─────────────────────────────────────────────────────────────
// Numbered circular stepper — the signature WXG survey progress.
// ─────────────────────────────────────────────────────────────
function RL_Stepper({ current, total, mobile }) {
// Steps render right-to-left in RTL so step 1 lives at the right.
return (
{Array.from({ length: total }, (_, i) => {
const n = i + 1;
const done = current > n;
const active = current === n;
const upcoming = current < n;
const isLast = i === total - 1;
// Connector color — between this step and the next, painted on the LEFT
// (which is "after" this step in RTL). Amber once this step is done.
const connectorActive = current > n;
const size = mobile ? 28 : 34;
return (
);
}
// ─────────────────────────────────────────────────────────────
// Question controls — rating circles, single-choice, free text
// ─────────────────────────────────────────────────────────────
function RL_Rating({ q, value, onChange, mobile }) {
// Render order with dir="rtl": first DOM child sits visually on the RIGHT.
// Numbers go [6,7,8,9,10] so 6 ends up next to the min/negative label
// (which is on the right), 10 next to the max/positive label (left).
const numbers = (
{Array.from({ length: 5 }, (_, i) => {
const n = i + 6; // 6, 7, 8, 9, 10
const active = value === n;
const sz = mobile ? 44 : 50;
return (
);
})}
);
if (mobile) {
// Stacked: circles row, then labels row beneath (negative right, positive left)
return (
{numbers}
{q.minLabel}{q.maxLabel}
);
}
// Desktop: inline — negative label on the right, circles, positive label on the left.
return (
{q.minLabel}
{numbers}
{q.maxLabel}
);
}
function RL_Choice({ q, value, onChange, mobile }) {
return (
{q.options.map((o, i) => {
const active = value === o;
return (
);
})}
);
}
function RL_Text({ q, value, onChange, onSubmit, canSubmit, mobile }) {
return (