{/* Left — copy */} {(() => { const [leftHovered, setLeftHovered] = React.useState(false); return (

setLeftHovered(true)} onMouseLeave={() => setLeftHovered(false)} style={{ padding: '44px 52px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderRight: `1px solid ${borderColor}`, position: 'relative', background: dark ? (leftHovered ? '#D8D9DB' : '#EDEEEF') : (leftHovered ? '#F0F0F0' : '#fff'), transition: 'background 400ms var(--ease-standard)', }}> {/* Hover glow overlay */}

{/* Eyebrow with animated progress line */}

{t.eyebrow}

{/* Slide progress bar */}

{/* Read the brief — top right */}

Read the brief ↗

{t.title.map((line, i) => { const parts = line.split(t.italicWord); if (parts.length === 2) { return ( {parts[0]} {t.italicWord} {parts[1]} ); } return {line}; })}

{t.body}

{/* Bottom — metrics + CTA */}

{[t.metric, t.secondary].map((m, i) =>

{i === 0 &&

}

{m.label}

{m.value}

)}

); })()} {/* Right — diagram */}

setDiagramHovered(true)} onMouseLeave={() => setDiagramHovered(false)} style={{ position: 'relative', background: dark ? diagramHovered ? 'var(--gs-200)' : 'var(--gs-100)' : diagramHovered ? 'var(--gs-200)' : 'var(--gs-100)', overflow: 'hidden', cursor: 'crosshair', transition: 'background 400ms var(--ease-standard)' }}> {/* Decorative corner glow — expands on hover */}

{/* Centre glow on hover */} {diagramHovered &&

} {/* Diagram with scale on hover */}

{/* Gradient fade on left edge */}

LIVE

); } function Slider({ lang = 'EN' }) { const [idx, setIdx] = React.useState(0); const [paused, setPaused] = React.useState(false); const total = SLIDES.length; const touch = React.useRef({ x: 0, y: 0, t: 0, active: false }); React.useEffect(() => { if (paused) return; const t = setTimeout(() => setIdx((i) => (i + 1) % total), 6500); return () => clearTimeout(t); }, [idx, paused, total]); const go = (n) => setIdx((n + total) % total); const slide = SLIDES[idx]; const dark = slide.bg === 'dark'; const onTouchStart = (e) => { const tc = e.touches[0]; touch.current = { x: tc.clientX, y: tc.clientY, t: Date.now(), active: true }; setPaused(true); }; const onTouchEnd = (e) => { if (!touch.current.active) return; const tc = e.changedTouches[0]; const dx = tc.clientX - touch.current.x; const dy = tc.clientY - touch.current.y; const dt = Date.now() - touch.current.t; touch.current.active = false; // horizontal swipe, not too slow, not mostly vertical if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.2 && dt < 800) { if (dx < 0) go(idx + 1); else go(idx - 1); } // brief unpause delay for autoplay setTimeout(() => setPaused(false), 4000); }; return (

setPaused(true)} onMouseLeave={() => setPaused(false)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>

{/* Sliding track */}

{SLIDES.map((s, i) =>

)}

{/* Bottom controls bar */}

{/* Progress dots + counter */}

{String(idx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}

{SLIDES.map((_, i) =>

{/* Prev / Next */}

{/* Top-left corner ticker */}

GREY SPACE IT SERVICES GMBH

); } function arrowBtn(dark) { return { width: 44, height: 44, borderRadius: 999, border: `1px solid ${dark ? '#2A2A2D' : 'var(--border)'}`, background: dark ? 'rgba(10,10,11,0.65)' : 'rgba(255,255,255,0.85)', color: dark ? '#fff' : 'var(--gs-900)', fontSize: 16, cursor: 'pointer', fontFamily: 'inherit', backdropFilter: 'blur(8px)', transition: 'background 160ms var(--ease-standard), transform 160ms var(--ease-standard)' }; } window.Slider = Slider;