// bess-hero-process.jsx // Solutions Page (Commercial Battery Storage) — Hero, Service Overview, Proof Strip, Process // Mirrors Commercial Solar structure. Differentiated by: // - electric-amber highlight token (--bess-charge) for stat callouts and headline accents // - charge-line motif (animated horizontal pulse) replacing solar's panel-rule motif // - hero pairs editorial document feel with a peak-vs-storage waveform sketch // Local accent — sparingly applied to stat highlights and "active" tokens const BESS_CHARGE = '#D4A24C'; // warm electric amber — energy in motion const BESS_CHARGE_SOFT = 'rgba(212,162,76,0.16)'; // ============================================================ // BessHero — Soft Green brand surface, document-cover layout // Includes a small SVG "demand profile" sketch in the right gutter // to immediately signal "peak demand management" // ============================================================ const BessHero = () =>
; // ============================================================ // BessDemandSketch — small inline SVG; stylized peak + flatten // ============================================================ const BessDemandSketch = () => { // Path A: raw demand profile with a tall spike const profile = "M0,42 L18,38 L34,40 L48,28 L62,30 L72,12 L82,14 L94,32 L110,30 L128,36 L148,34 L168,40"; // Path B: storage-flattened — same line but spike is shaved const flat = "M0,42 L18,38 L34,40 L48,28 L62,30 L72,30 L82,28 L94,32 L110,30 L128,36 L148,34 L168,40"; return ( ); }; // ============================================================ // BessBenefits — 4 reasons battery storage strengthens your facility. // Mirrors sol-benefits.jsx pattern: editorial header + 4 cards + closing band. // ============================================================ const BessBenefitsCard = ({ num, label, statValue, statUnit, title, body, accent = 'sage', }) => { const [hovered, setHovered] = React.useState(false); const accentColor = accent === 'amber' ? BESS_CHARGE : 'var(--gi-sage-accent)'; return (
setHovered(true)} onMouseLeave={() => setHovered(false)} data-gi-resp="audit-benefits-card" style={{ position: 'relative', background: hovered ? '#fff' : '#FBFBF9', padding: '32px 28px 32px', display: 'flex', flexDirection: 'column', minHeight: 360, transition: 'background 220ms var(--gi-ease), transform 260ms var(--gi-ease), box-shadow 260ms var(--gi-ease)', transform: hovered ? 'translate3d(0, -2px, 0)' : 'none', boxShadow: hovered ? '0 24px 56px -22px rgba(15,33,51,0.22), 0 6px 16px -8px rgba(15,33,51,0.10)' : 'none', zIndex: hovered ? 2 : 1, }}> ); }; const BessBenefits = ({ showClosingBand = true }) => { const cards = [ { num: '01', accent: 'sage', statValue: 'Demand Reduction', label: 'Demand management', title: 'Reduce peak electricity costs.', body: 'Battery systems discharge during high-demand periods to reduce utility demand charges and improve long-term electricity cost control.', }, { num: '02', accent: 'sage', statValue: 'Backup Power', label: 'Operational resilience', title: 'Keep critical operations running.', body: 'Battery storage helps keep critical systems, refrigeration, production equipment, and facility operations running during outages and grid interruptions.', }, { num: '03', accent: 'sage', statValue: 'Market Revenue', label: 'Load flexibility', title: 'Turn flexibility into ongoing revenue.', body: 'Commercial battery systems can participate in utility and grid-service programs, generating additional value through demand response and energy market participation.', }, { num: '04', accent: 'sage', statValue: 'Futureproofing', label: 'Energy strategy', title: 'Prepare for the next energy era.', body: 'Battery storage supports electrification, utility rate changes, solar integration, and evolving energy infrastructure requirements across commercial facilities.', }]; return (
{/* Header */}
Why commercial battery storage

Four ways commercial battery storage improves {' '} operational control.

Commercial battery storage helps facilities reduce peak demand charges, improve operational resilience, and gain greater control over how and when electricity is used. From backup power to demand management and future grid participation, battery systems are becoming a core part of modern energy strategy.

{/* Card grid */}
{cards.map((c) => )}
{/* Closing band */} {showClosingBand &&

Green Integrations designs and integrates commercial battery storage systems engineered for operational resilience, peak demand management, and long-term facility performance — including feasibility analysis, utility coordination, controls integration, and complete project execution under one accountable partner.

{/* */}
}
); }; // ============================================================ // BessProofStrip — Wise Blue, 4 storage-specific stats // Uses electric-amber for the headline numbers (vs solar's plain white) // Decorative motif: a horizontal "charge pulse" that echoes the demand sketch // ============================================================ const BessProofStrip = () => { const stats = [ { big: '30–50%', label: 'Demand-charge share', sub: 'Of typical C&I monthly electricity bills' }, { big: '100%', label: 'CCA · first year', sub: 'Enhanced Capital Cost Allowance (federal)' }, { big: '30%', label: 'Clean Tech ITC', sub: 'Refundable federal tax credit on eligible storage systems' }, { big: 'Up to 80%', label: 'LDC Rebate', sub: 'Available to businesses under BC Hydro territory' }]; return (
{/* Faint monogram watermark */} {/* Charge-pulse strip — animated horizontal line, runs across the top */}
); }; // ============================================================ // BessProcess — 4 phases (storage has fewer than solar's six) // 2x2 grid with editorial heading on top, mirrors solar process visual rhythm // ============================================================ const BessProcess = () => { const steps = [ { num: '01', label: 'Demand Analysis', title: 'Assess', icon: 'gauge', copy: 'A detailed review of utility bills and interval consumption data determines whether battery storage is a strong fit for the facility’s electricity rate structure, operating profile, and peak-demand behaviour.', deliv: 'Demand profile analysis + electricity cost breakdown' }, { num: '02', label: 'System Design', title: 'Design', icon: 'drafting-compass', copy: 'A battery storage system is designed around the building electrical infrastructure, facility load profile, utility rate schedule, and site conditions. A detailed financial analysis outlines projected savings, market revenues, incentives, and investment performance.', deliv: 'System design + projected savings + incentives + market revenues + full financial analysis' }, { num: '03', label: 'Installation & Interconnection', title: 'Install', icon: 'hammer', copy: 'Licensed electricians complete the battery storage installation, while utility coordination, commissioning, and system integration are managed through a single project delivery process. Where battery storage is paired with solar, both systems are commissioned together for optimized performance.', deliv: 'Installed BESS system + utility interconnection approval + commissioning documentation' }, { num: '04', label: 'Ongoing Operation', title: 'Operate', icon: 'activity', copy: 'Battery storage performance is monitored against the facility’s demand profile, electricity rate structure, and market participation strategy. System settings are optimized over time as operational and utility conditions evolve.', deliv: 'Performance monitoring + savings verification + market participation reporting' }]; return (
{/* Editorial header */}
The process

Battery storage designed around how {' '} your facility uses power.

Commercial battery storage is designed around when and how your facility uses electricity. Utility interval data helps identify peak demand periods, operational patterns, and where storage can create the strongest financial return.

{/* 2x2 grid of steps with deliverables */}
{steps.map((s, i) =>
{s.num} {/* tiny amber pip — bottom-right charge indicator */}
{s.label}

{s.title}

{s.copy}

{s.deliv}
)}
); }; Object.assign(window, { BessHero, BessBenefits, BessBenefitsCard, BessProofStrip, BessProcess, BESS_CHARGE, BESS_CHARGE_SOFT });