// ============================================================ // MunSolutionsMobile — MOBILE port of the desktop "Solutions for this // sector" section for Public Sector / Government (MunSolutions in // mun-page-2.jsx). // // Desktop = interactive public-sector facility schematic (left) + // 5-row hover list (right), on a Soft-Green surface with Paper-White // text. The approved desktop screenshot titles the map "INTEGRTED // ENERGY SYSTEMS" and shows zone 01 (Energy Audits · whole facility) // active by default — footer reads "Whole facility | Energy Audits". // // Mobile keeps the SAME story, palette, type, iconography & // illustration but swaps hover for touch, following the approved // Manufacturing / Warehousing / F&B / Agriculture / CRE mobile // pattern: // • Intro (eyebrow + headline + supporting copy), stacked // • Interactive diagram, always visible, the visual focus // • Solution cards as a horizontal swipe carousel below the diagram // • Tapping a card / diagram marker -> updates the active diagram zone // • A dedicated "Explore …" link inside each card handles navigation, // so a first tap activates and the link tap navigates (no touch conflict) // • Default active zone: 01 — Energy Audits ("Whole facility | Energy Audits") // ============================================================ const MUN_AMBER = 'rgba(233,199,134,1)'; // --gi-amber-soft const MUN_AMBER_FILL = 'rgba(233,199,134,0.18)'; const MUN_SOFT_GREEN = '#375844'; // ============================================================ // MunFacilitySchematicMobile — identical SVG schematic to desktop, with // the numbered markers made tappable (large invisible hit targets). // 5 zones · 01 Audit ring · 02 EV stalls · 03 Solar PV · 04 Battery · 05 Electrical // ============================================================ const MunFacilitySchematicMobile = ({ activeIndex, onSelectZone }) => { const W = 540; const H = 360; const amber = MUN_AMBER; const amberFill= MUN_AMBER_FILL; const ink = 'rgba(255,255,255,0.55)'; const inkDim = 'rgba(255,255,255,0.32)'; const inkFaint = 'rgba(255,255,255,0.18)'; const inkText = 'rgba(255,255,255,0.62)'; const zones = [ // 01 Energy Audits — whole facility ring { id: 0, label: '01', cx: 270, cy: 200, hl: }, // 02 EV Charging — front parking stalls { id: 1, label: '02', cx: 250, cy: 308, hl: }, // 03 Solar PV — rooftop { id: 2, label: '03', cx: 270, cy: 96, hl: }, // 04 Battery — BESS pad { id: 3, label: '04', cx: 502, cy: 244, hl: }, // 05 Electrical Infrastructure — service entrance / switchgear { id: 4, label: '05', cx: 110, cy: 246, hl: }, ]; return (
{/* Ground line + horizon */} {/* Building outline */} {/* Common-area divider — permanent feature inside the building */} COMMON AREAS {/* Window mullions / occupancy units */} {[350, 370, 390, 410, 430].map(x => ( ))} {/* Roof solar panels — Solar PV zone (03) Side-profile cross-sections on small standoff legs above the pitched roof, tilted parallel to the roof slope. */} {(() => { const panelLen = 26; const panelThick = 2; const legH = 5; const slope = 40 / 190; const angleDeg = Math.atan(slope) * 180 / Math.PI; const positions = []; for (let i = 0; i < 5; i++) { const cx = 110 + i * 30; const roofY = 118 - (cx - 80) * slope; positions.push({ cx, roofY, angle: -angleDeg, key: `L${i}` }); } for (let i = 0; i < 5; i++) { const cx = 310 + i * 30; const roofY = 78 + (cx - 270) * slope; positions.push({ cx, roofY, angle: angleDeg, key: `R${i}` }); } const panelStroke = activeIndex === 2 ? amber : ink; const panelFill = activeIndex === 2 ? amber : ink; const legStroke = activeIndex === 2 ? amber : inkDim; return positions.map(({ cx, roofY, angle, key }) => { const x0 = cx - panelLen / 2; const x1 = cx + panelLen / 2; const yPanelTop = roofY - legH - panelThick; const yLegTop = roofY - legH; const legInset = 4; return ( ); }); })()} {/* Interior baseline detail — desks / occupancy markers */} {[170, 220, 270, 320].map(x => ( ))} {/* EV CHARGING — front parking stalls (zone 02) */} {/* paved apron */} {/* stall divider lines */} {[180, 220, 260, 300, 340].map(x => ( ))} {/* EVSE pedestals — pole + head */} {[200, 240, 280, 320].map(x => ( ))} EV CHARGING · PARKING {/* Outdoor BESS pad — Battery zone (04) */} {[0,1,2,3,4].map(i => ( ))} {[0,1,2,3,4].map(i => ( ))} BESS {/* Electrical service room — Electrical Infrastructure (05) */} {[0,1,2,3].map(i => ( ))} SERVICE {/* Whole-facility audit ring — Energy Audits (01) */} {zones[activeIndex].hl} {/* Numbered markers — tappable */} {zones.map((z, i) => { const isActive = i === activeIndex; return ( onSelectZone && onSelectZone(i)} role="button" tabIndex={0} aria-label={`Show zone ${z.label}`} style={{ cursor: 'pointer' }}> {/* large invisible touch target */} {z.label} ); })}
); }; // ============================================================ // MunSolutionsMobile — full mobile section // ============================================================ const MunSolutionsMobile = () => { // Copy mirrors the approved desktop (MunSolutions) exactly. const rows = [ { idx: '01', icon: 'clipboard-list', name: 'Energy Audits', linkLabel: 'Energy Audits', zone: 'Whole facility', tag: 'Establish the documented baseline.', why: 'Energy audits create the facility-specific baseline required for BEPS reporting, net-zero tracking, and grant applications. The reference point every subsequent measure is sized against.', href: 'Solutions - Energy Audits.html' }, { idx: '02', icon: 'plug-zap', name: 'EV Charging', linkLabel: 'EV Charging', zone: 'Parking · fleet yard', tag: 'Fleet electrification on regulatory timelines.', why: 'Fleet electrification and public charging infrastructure — planned proactively against fleet replacement schedules and BEPS positioning for municipal parking facilities.', href: 'Solutions - EV Charging.html' }, { idx: '03', icon: 'sun', name: 'Commercial Solar', linkLabel: 'Commercial Solar', zone: 'Rooftop', tag: 'Reduce GHG intensity and operating cost.', why: 'Rooftop solar reduces electricity operating costs and produces documented emissions reductions for BEPS and net-zero reports.', href: 'Solutions - Commercial Solar.html' }, { idx: '04', icon: 'battery-charging', name: 'Battery Storage', linkLabel: 'Battery Storage', zone: 'Mechanical pad', tag: 'Grid resilience for critical facilities.', why: 'Storage delivers resilience for critical public facilities and unlocks IESO demand-response participation for buildings with appropriate load flexibility.', href: 'Solutions - Battery Storage.html' }, { idx: '05', icon: 'cable', name: 'Electrical Infrastructure', linkLabel: 'Electrical Infrastructure', zone: 'Service · distribution', tag: 'Build around future capacity.', why: 'Service upgrades, distribution planning, and interconnection coordination support solar, storage, and EV additions on a single delivery path.', href: '#' }, ]; // Default active zone: 01 — Energy Audits ("Whole facility | Energy Audits"). const DEFAULT_INDEX = 0; const [active, setActive] = React.useState(DEFAULT_INDEX); const scrollerRef = React.useRef(null); const cardRefs = React.useRef([]); const programmatic = React.useRef(false); const rafId = React.useRef(0); const settleTimer = React.useRef(0); const didInit = React.useRef(false); // (Re)draw lucide icons whenever the active card changes. React.useEffect(() => { const t = setTimeout(() => window.lucide && window.lucide.createIcons({ attrs: { 'stroke-width': 1.4 } }), 20); return () => clearTimeout(t); }, [active]); const scrollToCard = (i, instant) => { const sc = scrollerRef.current; const card = cardRefs.current[i]; if (!sc || !card) return; programmatic.current = true; window.clearTimeout(settleTimer.current); const target = card.offsetLeft - (sc.clientWidth - card.clientWidth) / 2; const max = sc.scrollWidth - sc.clientWidth; const end = Math.max(0, Math.min(max, target)); const start = sc.scrollLeft; const dist = end - start; window.cancelAnimationFrame(scrollToCard._raf); if (instant) { sc.scrollLeft = end; window.requestAnimationFrame(() => { sc.scrollLeft = end; programmatic.current = false; }); return; } if (Math.abs(dist) < 1) { programmatic.current = false; return; } const dur = 420; const t0 = (window.performance || Date).now(); const ease = (t) => 1 - Math.pow(1 - t, 3); // easeOutCubic const step = (now) => { const p = Math.min(1, (now - t0) / dur); sc.scrollLeft = start + dist * ease(p); if (p < 1) { scrollToCard._raf = window.requestAnimationFrame(step); } else { programmatic.current = false; } }; scrollToCard._raf = window.requestAnimationFrame(step); }; // Center the default card on first paint. React.useEffect(() => { if (didInit.current) return; let tries = 0; const tryCenter = () => { const sc = scrollerRef.current; const card = cardRefs.current[DEFAULT_INDEX]; if (sc && card && (DEFAULT_INDEX === 0 || card.offsetLeft > 0)) { didInit.current = true; scrollToCard(DEFAULT_INDEX, true); return; } if (tries++ < 40) requestAnimationFrame(tryCenter); }; requestAnimationFrame(tryCenter); const onLoad = () => { didInit.current = false; tries = 0; requestAnimationFrame(tryCenter); }; window.addEventListener('load', onLoad); return () => window.removeEventListener('load', onLoad); }, []); // Tap a card OR a diagram marker -> select that zone + center its card. const selectZone = (i) => { setActive(i); scrollToCard(i); }; const nearestCard = () => { const sc = scrollerRef.current; if (!sc) return 0; const center = sc.scrollLeft + sc.clientWidth / 2; let best = 0, bestDist = Infinity; cardRefs.current.forEach((c, i) => { if (!c) return; const cc = c.offsetLeft + c.clientWidth / 2; const d = Math.abs(cc - center); if (d < bestDist) { bestDist = d; best = i; } }); return best; }; // Swipe -> live-update the active zone to the nearest card, then JS-snap to // center it once the user stops scrolling. const handleScroll = () => { if (programmatic.current) return; window.clearTimeout(settleTimer.current); settleTimer.current = window.setTimeout(() => { const i = nearestCard(); scrollToCard(i); }, 110); if (rafId.current) return; rafId.current = requestAnimationFrame(() => { rafId.current = 0; const best = nearestCard(); setActive((prev) => (prev === best ? prev : best)); }); }; return (
{/* Top amber tick — mirrors desktop */}
); }; Object.assign(window, { MunSolutionsMobile, MunFacilitySchematicMobile });