// ============================================================ // FnbSolutionsMobile — MOBILE port of the desktop "Solutions for this // sector" section (FnbSolutionsCream) from fnb-solutions-cream.jsx. // // Desktop = interactive food-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". // Mobile keeps the SAME story, palette, type, iconography & illustration but // swaps hover for touch, following the approved Manufacturing & Warehousing // 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 FNB_AMBER = 'rgba(233,199,134,1)'; // --gi-amber-soft const FNB_AMBER_FILL = 'rgba(233,199,134,0.18)'; const FNB_SOFT_GREEN = '#375844'; // ============================================================ // FnbFacilitySchematicMobile — identical SVG schematic to desktop, with the // numbered markers made tappable (large invisible hit targets). // 5 zones · 01 Audit ring · 02 LED · 03 Solar · 04 BESS · 05 Electrical room // ============================================================ const FnbFacilitySchematicMobile = ({ activeIndex, onSelectZone }) => { const W = 540; const H = 360; const amber = FNB_AMBER; const amberFill= FNB_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 LED Lighting — production floor ceiling band { id: 1, label: '02', cx: 250, cy: 134, 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 (

); }; // ============================================================ // FnbSolutionsMobile — full mobile section // ============================================================ const FnbSolutionsMobile = () => { // Copy mirrors the approved desktop (FnbSolutionsCream) exactly. const rows = [ { idx: '01', icon: 'clipboard-list', name: 'Energy Audits', linkLabel: 'Energy Audits', zone: 'Whole facility', tag: "Identify what's driving consumption.", why: 'Facility energy audits establish where electricity is being consumed, what systems drive demand charges, and which upgrades create the strongest operational and financial impact.', href: 'Solutions - Energy Audits.html' }, { idx: '02', icon: 'lightbulb', name: 'LED Lighting', linkLabel: 'LED Lighting', zone: 'Production · cold', tag: 'Reduce baseline demand.', why: 'LED retrofits reduce lighting load immediately while improving illumination levels in production, warehousing, and refrigerated environments.', href: 'Solutions - LED Lighting.html' }, { idx: '03', icon: 'sun', name: 'Solar PV', linkLabel: 'Solar PV', zone: 'Rooftop', tag: 'Offset daytime production demand.', why: 'Large rooftops and continuous daytime operation make many food facilities strong candidates for rooftop solar generation.', href: 'Solutions - Commercial Solar.html' }, { idx: '04', icon: 'battery-charging', name: 'Battery Storage', linkLabel: 'Battery Storage', zone: 'Mechanical pad', tag: 'Manage refrigeration-driven demand peaks.', why: 'Battery storage helps reduce demand charges by supplementing refrigeration and processing loads during peak utility intervals.', href: 'Solutions - Battery Storage.html' }, { idx: '05', icon: 'plug-zap', name: 'Electrical Infrastructure', linkLabel: 'Electrical Infrastructure', zone: 'Service · distribution', tag: 'Build around future capacity.', why: 'Service upgrades, distribution planning, and electrical coordination ensure the facility can support future expansion, storage, and electrification.', 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. The flex children may not have // their final layout on the first frame (offsetLeft still 0), so retry // across a few frames until a card reports a non-zero offset, then jump. 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 */}

{/* ===== 1 · INTRO ===== */}

Solutions for this sector

What food & beverage projects typically involve.

A complete F&B programme moves from understanding consumption, to reducing baseline load, to generating on-site, to managing demand peaks — with electrical infrastructure built around future capacity.

{/* ===== 2 · INTERACTIVE DIAGRAM (always visible) ===== */}

{/* header strip — matches approved desktop map title */}

INTEGRTED ENERGY SYSTEMS

{/* Caption strip — active-state footer "{zone} | {name}", e.g. default "Whole facility | Energy Audits". */}

{rows[active].zone}

{/* progress hint */}

Tap or swipe to explore {rows[active].idx} / 05

{/* ===== 3 · SOLUTION CARDS — swipe carousel ===== */}

{rows.map((r, i) => { const isActive = active === i; const onLinkClick = (e) => { // First tap on an inactive card's link only activates — no navigation. if (!isActive) { e.preventDefault(); selectZone(i); } e.stopPropagation(); }; return (

(cardRefs.current[i] = el)} onClick={() => selectZone(i)} style={{ flex: '0 0 78%', position: 'relative', background: isActive ? 'rgba(233,199,134,0.10)' : 'rgba(255,255,255,0.04)', border: `1px solid ${isActive ? 'rgba(233,199,134,0.45)' : 'rgba(255,255,255,0.18)'}`, padding: '24px 22px 22px', display: 'flex', flexDirection: 'column', cursor: 'pointer', transition: 'background 240ms cubic-bezier(.2,0,0,1), border-color 240ms cubic-bezier(.2,0,0,1)', minHeight: 312 }}> {/* active accent stripe on left edge */}

); })}

{/* pagination dots */}
{rows.map((r, i) => (

); }; Object.assign(window, { FnbSolutionsMobile, FnbFacilitySchematicMobile });