// ============================================================ // Agri2SolutionsMobile — MOBILE port of the desktop "Solutions for this // sector" section (Agri2SolutionsGreen) from agri2-page-2.jsx. // // Desktop = interactive barn schematic (left) + 4-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 // (Commercial Solar · Barn rooftop) active by default. // Mobile keeps the SAME story, palette, type, iconography & illustration but // swaps hover for touch, following the approved Manufacturing, Warehousing & // Food-&-Beverage 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 — Commercial Solar (per approved screenshot) // ============================================================ const AGRI_AMBER = 'rgba(233,199,134,1)'; // --gi-amber-soft const AGRI_AMBER_FILL = 'rgba(233,199,134,0.18)'; const AGRI_SOFT_GREEN = '#375844'; // ============================================================ // Agri2BarnSchematicMobile — identical SVG schematic to desktop, with the // numbered markers made tappable (large invisible hit targets). // 4 zones · 01 Commercial Solar (barn roof) · 02 Battery (BESS pad) // · 03 Energy Audits (whole-farm ring) · 04 Grant Management (REAP layer) // ============================================================ const Agri2BarnSchematicMobile = ({ activeIndex, onSelectZone }) => { const W = 540; const H = 360; const amber = AGRI_AMBER; const amberFill= AGRI_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 Commercial Solar — barn rooftop { id: 0, label: '01', cx: 200, cy: 96, hl: }, // 02 Battery — BESS pad to right of barn { id: 1, label: '02', cx: 462, cy: 244, hl: }, // 03 Energy Audits — whole farm ring { id: 2, label: '03', cx: 220, cy: 200, hl: }, // 04 Grant Management — programme layer banner under ground { id: 3, label: '04', cx: 110, cy: 312, hl: }, ]; return (
{/* Ground line + field hatch */} {[290, 296, 302, 308, 314, 320].map((y, i) => ( ))} {/* BARN — gabled outline */} {/* Barn doors */} {/* Side windows */} {/* GRAIN BINS — permanent features (right of barn) */} {/* Bin 1 */} {[230, 244, 258, 272].map(y => ( ))} {/* Bin 2 (smaller) */} GRAIN · DRYER {/* Roof solar panels — Commercial Solar zone (01) */} {(() => { const panelLen = 22; const panelThick = 2; const legH = 5; const slope = 56 / 120; const angleDeg = Math.atan(slope) * 180 / Math.PI; const positions = []; for (let i = 0; i < 5; i++) { const cx = 100 + i * 22; const roofY = 132 - (cx - 80) * slope; positions.push({ cx, roofY, angle: -angleDeg, key: `L${i}` }); } for (let i = 0; i < 5; i++) { const cx = 212 + i * 22; const roofY = 76 + (cx - 200) * slope; positions.push({ cx, roofY, angle: angleDeg, key: `R${i}` }); } const panelStroke = activeIndex === 0 ? amber : ink; const panelFill = activeIndex === 0 ? amber : ink; const legStroke = activeIndex === 0 ? 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 = 3; return ( ); }); })()} {/* Interior baseline detail — stalls / equipment markers */} {[170, 220, 270].map(x => ( ))} {/* Outdoor BESS pad — Battery Storage zone (02) */} {[0,1,2,3,4].map(i => ( ))} {[0,1,2,3,4].map(i => ( ))} {/* Tie-line back to barn */} BESS {/* Whole-farm audit ring — Energy Audits (03) */} {/* Grant programme layer — Grant Management (04) */} REAP {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} ); })}
); }; // ============================================================ // Agri2SolutionsMobile — full mobile section // ============================================================ const Agri2SolutionsMobile = () => { const rows = [ { idx: '01', icon: 'sun', name: 'Commercial Solar', zone: 'Barn rooftop', tag: 'Generate from the roof you already own.', why: 'Barn roofs and adjacent processing-building rooflines are the most common surfaces for agricultural solar in Ontario. Sized to the 12-month load profile — Tilecroft Farms achieved 82% annual offset on a 79.6 kW barn-roof system.', href: 'Solutions - Commercial Solar.html' }, { idx: '02', icon: 'battery-charging', name: 'Battery Storage', zone: 'Mechanical pad', tag: 'Manage grain drying demand peaks.', why: 'Storage paired with solar to manage demand-charge exposure during the autumn drying peak, support irrigation cycles, and qualify for IESO demand response programs.', href: 'Solutions - Battery Storage.html' }, { idx: '03', icon: 'clipboard-list', name: 'Energy Audits', zone: 'Whole operation', tag: 'Establish the 12-month load baseline.', why: 'ASHRAE-grade audits scoped to the agricultural year — drying, irrigation, ventilation, refrigeration. Twelve-month interval data is the basis for any generation or storage decision.', href: 'Solutions - Energy Audits.html' }, { idx: '04', icon: 'file-check', name: 'Grant Management', zone: 'Programme layer', tag: 'REAP applications, managed end-to-end.', why: 'REAP, Canadian Agricultural Adaptation, IESO programs, and Canada Infrastructure Bank financing — eligibility screened during assessment, applications managed end-to-end alongside the project.', href: 'Incentives.html' }, ]; // Default active zone: 01 — Commercial Solar (index 0), per approved screenshot. const [active, setActive] = React.useState(0); 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 (01) on first paint. React.useEffect(() => { if (didInit.current) return; let tries = 0; const tryCenter = () => { const sc = scrollerRef.current; const card = cardRefs.current[0]; if (sc && card) { didInit.current = true; scrollToCard(0, 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, { Agri2SolutionsMobile, Agri2BarnSchematicMobile });