// Direction D — WXG Authentic
// Closely matches WXG's actual visual language:
// • Authentic recreated logo (W X G with amber square)
// • title--square treatment: bold heading + amber underline square
// • Sharp corners only (no border-radius)
// • Skyline progress bar built from the WXG project list (each
// completed question = next building lit up in amber)
// • City-line motif at the bottom of every screen
// • Hebrew RTL throughout
const D_TYPE = WXG_FONT;
const D_MONO = WXG_MONO;
// ─────────────────────────────────────────────────────────────
// Authentic WXG wordmark (recreated from the careers logo SVG path data)
// ─────────────────────────────────────────────────────────────
function WXGAuthentic({ height = 56, color = '#4D4D4D', accent = '#FCAF17' }) {
// Original viewBox 0 0 426 122 — keep aspect
const w = height * (426 / 122);
return (
);
}
// Even simpler: just W X amber-square G mark for tight spaces
function WXGCompact({ height = 32, color = '#4D4D4D', accent = '#FCAF17' }) {
const w = height * 2.6;
return (
);
}
// ─────────────────────────────────────────────────────────────
// title--square treatment: bold + amber square underline accent
// ─────────────────────────────────────────────────────────────
function TitleSquare({ children, size = 64, color = WXG.ink, accent = WXG.amber, square = true }) {
return (
{children}
{square && (
)}
);
}
// ─────────────────────────────────────────────────────────────
// Skyline Progress Bar — buildings = WXG project portfolio
// Each step "builds" the next iconic structure
// ─────────────────────────────────────────────────────────────
const WXG_PROJECTS = [
{ name: 'קמפוס דיסקונט', shape: 'tower', h: 0.55 },
{ name: 'מגדל הספירלה', shape: 'spiral', h: 0.92 },
{ name: 'עזריאלי שרונה', shape: 'tower', h: 0.78 },
{ name: 'מידטאון ירושלים', shape: 'block', h: 0.45 },
{ name: 'כיכר המדינה', shape: 'tower', h: 0.85 },
{ name: 'ארלוזרוב 17', shape: 'block', h: 0.50 },
{ name: 'מגדלי גינדי', shape: 'tower', h: 0.72 },
];
// ─────────────────────────────────────────────────────────────
// Linear skyline — uses the actual WXG city-line SVG path.
// Desktop: a single flattened path (window.WXG_CITY_PATH).
// Mobile : a richer multi-path SVG with windows + accent squares
// (window.WXG_CITY_MOBILE_INNER), classified into:
// .wxg-base — main outline
// .wxg-lit — overlay duplicate (revealed by progress)
// .wxg-dot — small accent squares (revealed by progress)
// As progress advances, an amber overlay is revealed left-to-right
// via an animated .
// ─────────────────────────────────────────────────────────────
const CITY_PATH = (typeof window !== 'undefined' && window.WXG_CITY_PATH) || '';
const CITY_DETAILS = (typeof window !== 'undefined' && window.WXG_CITY_DETAILS) || [];
const CITY_VB = (typeof window !== 'undefined' && window.WXG_CITY_VIEWBOX) || '0 0 3341 366';
const CITY_VB_W = parseFloat(CITY_VB.split(/\s+/)[2]) || 3341;
const CITY_VB_H = parseFloat(CITY_VB.split(/\s+/)[3]) || 366;
const CITY_M_INNER = (typeof window !== 'undefined' && window.WXG_CITY_MOBILE_INNER) || '';
const CITY_M_VB = (typeof window !== 'undefined' && window.WXG_CITY_MOBILE_VIEWBOX) || '0 0 4332 1208';
const CITY_M_VB_W = parseFloat(CITY_M_VB.split(/\s+/)[2]) || 4332;
const CITY_M_VB_H = parseFloat(CITY_M_VB.split(/\s+/)[3]) || 1208;
function SkylineProgress({ current, total, mobile, dark = false }) {
const accent = WXG.amber;
const ground = dark ? '#0a0a0a' : '#FAF8F4';
const groundLine = dark ? '#2a2a2a' : '#CDCDCD';
const lineUnlit = dark ? '#3a3a3a' : '#A8A8A8';
const labelColor = dark ? '#888' : WXG.slate;
// Continuous progress 0..1 across the whole survey.
const progress = current === 0 ? 0
: current > total ? 1
: current / (total + 1);
// Render at a fixed display height; SVG scales the path to fit.
const H = mobile ? 64 : 100; // visual skyline height (px)
const padBottom = 6; // breathing room below baseline
// Stable IDs (one for desktop, one for mobile) so multiple
// SkylineProgress instances on a page don't collide.
const clipId = React.useMemo(
() => 'wxg-skyline-clip-' + Math.random().toString(36).slice(2, 8), []);
// Baseline depends on which SVG we're rendering.
const VB_W = mobile ? CITY_M_VB_W : CITY_VB_W;
const VB_H = mobile ? CITY_M_VB_H : CITY_VB_H;
const baselineY = mobile ? 1180 : CITY_VB_H; // mobile baseline ~ y=1180 in 1208 viewBox
return (
{/* metadata strip removed */}
);
}
// ─────────────────────────────────────────────────────────────
// Direction D — the screens
// ─────────────────────────────────────────────────────────────
function D_Frame({ children }) {
return (
{children}
);
}
function D_Header({ mobile }) {
const px = mobile ? 16 : 36;
return (