/* Fire Engineering Roadmap - editorial glass layout with active showcase. */ const ROADMAP_STEPS = [ { number: "01", title: "Concept Design", description: "We align early design intent with fire strategy from the first sketch.", image: "assets/beigman/31.png", alt: "Concept design table with architectural model, plans and copper strategy lines", }, { number: "02", title: "Schematic Design", description: "We shape compliant pathways before key design decisions become fixed.", image: "assets/beigman/32.png", alt: "Schematic design workspace with plan overlays and route studies", }, { number: "03", title: "Design Development", description: "We refine performance, coordination and risk as the architecture matures.", image: "assets/beigman/33.png", alt: "Developed architectural model with coordinated fire engineering layers", }, { number: "04", title: "Construction Documentation", description: "We turn strategy into clear evidence, drawings and approval logic.", image: "assets/beigman/34.png", alt: "Construction documentation set with measured details and evidence marks", }, { number: "05", title: "Construction Administration", description: "We support delivery so design intent is protected on site.", image: "assets/beigman/35.png", alt: "Construction administration site review with protected design intent", }, { number: "06", title: "Defect Liability Period", description: "We stay close through completion, defects and final project confidence.", image: "assets/beigman/36.png", alt: "Completed building handover with final checks and copper-lit certainty", }, ]; function clampRoadmapIndex(value) { const total = ROADMAP_STEPS.length; return (value + total) % total; } function RoadmapChevron({ direction = "right" }) { const path = direction === "left" ? "M15 18l-6-6 6-6" : "M9 6l6 6-6 6"; return ( ); } function RoadmapJourneyArrow() { return ( ); } function RoadmapPiece({ step, index, active, onSelect }) { const shape = index === 0 ? "is-first" : index === ROADMAP_STEPS.length - 1 ? "is-last" : "is-middle"; const depthSide = index % 2 === 0 ? "tilt-back" : "tilt-front"; return ( ); } function Process() { const sectionRef = React.useRef(null); const [activeIndex, setActiveIndex] = React.useState(0); const [paused, setPaused] = React.useState(false); const [reducedMotion, setReducedMotion] = React.useState(false); const [revealed, setRevealed] = React.useState(false); const touchStartRef = React.useRef(null); const activeStep = ROADMAP_STEPS[activeIndex]; const goTo = React.useCallback((nextIndex) => { setActiveIndex(clampRoadmapIndex(nextIndex)); }, []); const goNext = React.useCallback(() => { setActiveIndex((current) => clampRoadmapIndex(current + 1)); }, []); const goPrev = React.useCallback(() => { setActiveIndex((current) => clampRoadmapIndex(current - 1)); }, []); React.useEffect(() => { const motion = window.matchMedia("(prefers-reduced-motion: reduce)"); const sync = () => setReducedMotion(motion.matches); sync(); motion.addEventListener("change", sync); return () => motion.removeEventListener("change", sync); }, []); React.useEffect(() => { if (paused || reducedMotion) return undefined; const timer = window.setInterval(goNext, 6000); return () => window.clearInterval(timer); }, [goNext, paused, reducedMotion]); React.useEffect(() => { const id = window.requestAnimationFrame(() => { window.__zajRescan?.(); }); return () => window.cancelAnimationFrame(id); }, []); React.useEffect(() => { const el = sectionRef.current; if (!el) return undefined; const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setRevealed(true); observer.disconnect(); } }, { threshold: 0.22 }); observer.observe(el); return () => observer.disconnect(); }, []); const handleTouchStart = (event) => { touchStartRef.current = event.touches[0].clientX; setPaused(true); }; const handleTouchEnd = (event) => { const start = touchStartRef.current; touchStartRef.current = null; setPaused(false); if (start == null) return; const end = event.changedTouches[0].clientX; const delta = end - start; if (Math.abs(delta) < 42) return; if (delta < 0) goNext(); else goPrev(); }; const progress = ((activeIndex + 1) / ROADMAP_STEPS.length) * 100; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)} >
); } Object.assign(window, { Process });