// solar-calc-sections.jsx // Solar Calculator — commercial lead capture tool. // Rhythm: light-led throughout. Cream → White → Cream → White → Soft Green CTA. // Sage green is the primary accent. Amber appears only once (the incentive // unlock moment in the results). The lead gate captures Business name + // Facility address as required — plus email + phone for reach-out. // ============================================================ // Accent tokens — sage led, amber reserved for the single unlock moment. // ============================================================ const SC_SAGE = '#5E8F6D'; const SC_SAGE_SOFT = 'rgba(94,143,109,0.18)'; const SC_SAGE_LINE = 'rgba(94,143,109,0.32)'; const SC_SAGE_TINT = '#E8EFE9'; const SC_AMBER = '#C28A2C'; // used ONLY for the incentive band const SC_AMBER_SOFT = '#EFE3CB'; // ============================================================ // Provincial data — drives every calculation in the tool. // Internal reference per spec — not displayed verbatim on page. // ============================================================ const PROVINCES = [ { code: 'ON', name: 'Ontario', rate: 0.155, irr: 1150, programs: 'IESO saveONenergy · Federal Clean Technology ITC (30%)' }, { code: 'AB', name: 'Alberta', rate: 0.145, irr: 1350, programs: 'ATCO/ENMAX rate structure · Federal Clean Technology ITC (30%)' }, { code: 'BC', name: 'British Columbia', rate: 0.120, irr: 1200, programs: 'BC Hydro Net Metering · Federal Clean Technology ITC (30%)' }, { code: 'QC', name: 'Québec', rate: 0.075, irr: 1100, programs: 'Hydro-Québec programs · Federal Clean Technology ITC (30%)' }, { code: 'NS', name: 'Nova Scotia', rate: 0.180, irr: 1050, programs: 'NS Power Net Billing · Federal Clean Technology ITC (30%)' }, { code: 'MB', name: 'Manitoba', rate: 0.095, irr: 1200, programs: 'Manitoba Hydro programs · Federal Clean Technology ITC (30%)' }, { code: 'SK', name: 'Saskatchewan', rate: 0.175, irr: 1250, programs: 'SaskPower programs · Federal Clean Technology ITC (30%)' }, { code: 'NB', name: 'New Brunswick', rate: 0.165, irr: 1050, programs: 'NB Power programs · Federal Clean Technology ITC (30%)' } ]; const INDUSTRIES = [ { id: 'mfg', label: 'Manufacturing', icon: 'factory' }, { id: 'whs', label: 'Warehousing & Logistics', icon: 'warehouse' }, { id: 'fnb', label: 'Food & Beverage', icon: 'utensils-crossed' }, { id: 'agri', label: 'Agriculture', icon: 'sprout' }, { id: 'cre', label: 'Commercial Real Estate', icon: 'building-2' }, { id: 'other', label: 'Other Industrial', icon: 'cog' } ]; const FACILITY_SIZES = [ 'Under 20,000 sq ft', '20,000 – 75,000 sq ft', '75,000 – 200,000 sq ft', 'Over 200,000 sq ft' ]; const ROOF_TYPES = [ 'Flat / low-slope', 'Metal / standing seam', 'TPO / membrane', 'Other / not sure' ]; // ============================================================ // Estimation helpers — simplified per spec. // All outputs are returned as { low, high } ranges. // ============================================================ const fmt$ = (n) => '$' + Math.round(n).toLocaleString('en-CA'); const fmt$k = (n) => { if (n >= 1_000_000) return '$' + (n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1) + 'M'; if (n >= 1000) return '$' + Math.round(n / 1000) + 'K'; return '$' + Math.round(n).toLocaleString('en-CA'); }; const fmtKw = (n) => Math.round(n).toLocaleString('en-CA') + ' kW'; const fmtYrs = (n) => n.toFixed(1) + ' yrs'; function calculateEstimates({ provinceCode, monthlyBill }) { const p = PROVINCES.find(x => x.code === provinceCode); if (!p || !monthlyBill || monthlyBill < 500) return null; const annualCost = monthlyBill * 12; const annualKwh = annualCost / p.rate; const sizeKw = annualKwh / p.irr; const costLow = sizeKw * 2600; const costHigh = sizeKw * 3200; const netLow = costLow * 0.70; const netHigh = costHigh * 0.70; const savingsLow = annualCost * 0.78; const savingsHigh = annualCost * 0.98; const paybackLow = netLow / savingsHigh; const paybackHigh = netHigh / savingsLow; const lifetimeLow = savingsLow * 23; const lifetimeHigh = savingsHigh * 25; const incentiveLow = sizeKw * 2600 * 0.30; const incentiveHigh = sizeKw * 3200 * 0.30; return { province: p, annualKwh, sizeKw: { low: sizeKw * 0.9, high: sizeKw * 1.1 }, cost: { low: costLow, high: costHigh }, net: { low: netLow, high: netHigh }, savings: { low: savingsLow, high: savingsHigh }, payback: { low: paybackLow, high: paybackHigh }, lifetime: { low: lifetimeLow, high: lifetimeHigh }, incentive: { low: incentiveLow, high: incentiveHigh } }; } // ============================================================ // 01 · HERO — Paper Cream. Bright, clean. The calculator sits in the // right column so the tool IS the CTA, per spec. // ============================================================ const ScHero = ({ scrollToCalc }) => (
{/* faint top sage tint to anchor the page */}
); // Hero side card — a quiet "what you'll get" preview that points at the calc. const ScHeroSideCard = ({ scrollToCalc }) => (
What you’ll receive
Step 01 of 04 · Commercial only
); Object.assign(window, { ScHero, PROVINCES, INDUSTRIES, FACILITY_SIZES, ROOF_TYPES, SC_SAGE, SC_SAGE_SOFT, SC_SAGE_LINE, SC_SAGE_TINT, SC_AMBER, SC_AMBER_SOFT, calculateEstimates, fmt$, fmt$k, fmtKw, fmtYrs });