/* eslint-disable */ const { useState, useEffect, useRef } = React; const HD = window.SE_HOME_DATA; // ============== CountUp hook (animates 0 -> target on mount/in-view) ============== function useCountUp(target, duration = 1400) { const [val, setVal] = useState(0); const ref = useRef(null); const fired = useRef(false); useEffect(() => { const el = ref.current;if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !fired.current) { fired.current = true; const t0 = performance.now(); const step = (t) => { const p = Math.min(1, (t - t0) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(target * eased); if (p < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); } }); }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [target, duration]); return [val, ref]; } // Parse a stat string like "$4.5B", "1,100+", "33 yrs", "$657M", "27%", "12 MW", "15M", "$500K+" // Returns { num, render(v) } so we can animate the numeric portion 0->num. function parseStat(s) { const str = String(s); const m = str.match(/-?[\d.,]+/); if (!m) return { num: 0, render: () => str }; const numStr = m[0]; const num = parseFloat(numStr.replace(/,/g, '')); const before = str.slice(0, m.index); const after = str.slice(m.index + numStr.length); const hasComma = numStr.includes(','); const decimals = (numStr.split('.')[1] || '').length; const render = (v) => { let n; if (decimals > 0) n = v.toFixed(decimals);else if (hasComma) n = Math.round(v).toLocaleString('en-US');else n = Math.round(v).toString(); return before + n + after; }; return { num, render }; } function AnimatedStat({ value, style }) { const { num, render } = parseStat(value); const [v, ref] = useCountUp(num); return {render(v)}; } // =============== Public Sector Hero — wide skyline unifying gov + edu + transport =============== // State capitol on the left (state & local), university campus + bell tower in the center // (education), airport tower + light rail train + port crane on the right (transportation). // A power spine runs across the bottom carrying current pulses between them, tying the // three audiences together as one connected public-sector grid. function CivicIsoAnim({ accent = '#3DCD58' }) { const W = 1400,H = 600; return ( {/* Sky + grid + sun */} {/* Distant skyline (parallax 1) — unified city behind everything */} {[100, 160, 220, 290, 360, 440, 520, 610, 700, 800, 900, 1010, 1130, 1260, 1360].map((x, i) => { const h = 70 + i * 41 % 130; return ; })} {/* Mid skyline (parallax 2) with lit windows */} {[60, 150, 250, 360, 480, 620, 760, 900, 1030, 1170, 1290].map((x, i) => { const h = 100 + i * 47 % 150; return ( {Array.from({ length: Math.floor(h / 30) }).map((_, r) => {[8, 24, 40].map((wx, c) => )} )} ); })} {/* ========== STATE & LOCAL — Capitol (left) ========== */} {/* Base building */} {/* Wings */} {/* Pediment */} {/* Drum */} {/* Dome */} {/* Cupola + flag */} {/* Columns */} {[18, 50, 82, 114, 146, 178].map((x) => )} {/* Door */} {/* Steps */} {[0, 1, 2, 3].map((i) => )} {/* ========== EDUCATION — Campus quad with bell tower (center) ========== */} {/* Library / main hall */} {/* Roof line */} {/* Windows — lit classrooms */} {[0, 1, 2, 3].map((r) => {[16, 56, 96, 136, 176].map((x, c) => )} )} {/* Bell tower */} {/* Belfry opening */} {/* Clock face */} {/* Lower facade windows */} {[0, 1, 2, 3].map((r) => )} {/* Side classroom annex */} {[0, 1, 2].map((r) => {[8, 32, 56].map((x, c) => )} )} {/* Solar panels on library roof — shimmer */} {[0, 1, 2, 3, 4].map((i) => )} {/* ========== TRANSPORTATION — Airport + rail + crane (right) ========== */} {/* Control tower */} {/* Terminal building (curved roofs) */} {[0, 1, 2].map((i) => )} {Array.from({ length: 11 }).map((_, i) => )} {/* Plane on approach — slow drift across the sky */} {/* Port crane (far right) */} {/* Legs */} {/* Top beam */} {/* Operator cabin */} {/* Trolley + spreader (animated) */} {/* Stacked containers on the ground */} {[ { x: -30, y: 180, c: '#1a4f2a' }, { x: 0, y: 180, c: '#0d2418' }, { x: 30, y: 180, c: '#13301f' }, { x: 60, y: 180, c: '#1a4f2a' }, { x: 90, y: 180, c: '#0d2418' }, { x: -15, y: 168, c: '#13301f' }, { x: 15, y: 168, c: '#1a4f2a' }, { x: 45, y: 168, c: '#0d2418' }, { x: 75, y: 168, c: '#13301f' }]. map((b, i) => )} {/* ========== UNIFYING POWER SPINE (across the bottom) ========== */} {/* Ground line */} {/* Light rail track in front of campus */} {[400, 440, 480, 520, 560, 600, 640, 680, 720, 760, 800, 840, 880].map((x, i) => )} {/* Light rail train */} {[6, 22, 38].map((x) => )} {/* Power poles connecting all three districts */} {[120, 320, 520, 720, 920, 1120, 1320].map((x, i) => )} {/* Sagging power lines — energy pulses travel across, tying districts together */} {[400, 404, 408].map((y, lineIdx) => {[0, 1, 2].map((j) => )} )} {/* Floating telemetry chips — one per audience, positioned over their district */} {[ { x: 100, y: 130, t: 'CAPITOL · GRID 99.98%' }, // State & Local { x: 540, y: 110, t: 'CAMPUS · 38% kWh ↓' }, // Education { x: 980, y: 140, t: 'TERMINAL · ON-TIME 96%' } // Transportation ].map((c, i) => )} ); } // =============== Nav (with Insights mega-menu, Support 6 items, working search) =============== function Nav({ accent }) { const [open, setOpen] = useState(null); const [search, setSearch] = useState(false); const [q, setQ] = useState(''); const closeT = useRef(null); const enter = (k) => {clearTimeout(closeT.current);setOpen(k);}; const leave = () => {closeT.current = setTimeout(() => setOpen(null), 160);}; // searchable index — pages, sections, anchors const idx = [ { t: 'Public Sector Homepage', d: 'Overview of solutions for public sector', h: 'PubSec Homepage.html' }, { t: 'State & Local Government', d: 'Cities, counties, state agencies', h: 'State and Local Landing.html' }, { t: 'Education', d: 'K-12 districts and higher-ed campuses', h: 'Education Landing.html' }, { t: 'Transportation', d: 'Airports, rail, transit, ports', h: 'Transportation Landing.html' }, { t: 'Estimate Savings Calculator', d: 'See your potential savings', h: 'PubSec Homepage.html#calculator' }, { t: 'Public Sector Challenges', d: 'Pressures and answers', h: 'PubSec Homepage.html#pillars' }, { t: 'Sector Solutions', d: 'Solutions by industry', h: 'PubSec Homepage.html#industries' }, { t: 'Customer Stories', d: 'Outcomes from real agencies', h: 'PubSec Homepage.html#insights' }, { t: 'Talk to a Specialist', d: 'Contact form', h: 'PubSec Homepage.html#cta' }, { t: 'FAQ', d: 'Common questions from public sector buyers', h: 'PubSec Homepage.html#faq' }, { t: 'Sustainability Insights', d: 'Insights on sustainability', h: 'https://www.se.com/ww/en/insights/sustainability/' }, { t: 'New Energy Landscape', d: 'Electricity 4.0 insights', h: 'https://www.se.com/ww/en/insights/electricity-4-0/' }, { t: 'Next-generation Automation', d: 'Industrial automation insights', h: 'https://www.se.com/ww/en/insights/next-generation-automation/' }, { t: 'AI & Technology', d: 'AI insights', h: 'https://www.se.com/ww/en/insights/ai-and-technology/' }, { t: 'Blogs', d: 'Schneider Electric blog', h: 'https://blog.se.com/?utm_source=se.com&utm_medium=referral' }, // { t: 'Product Selector', d: 'EZ Selectors and online tools', h: 'https://www.se.com/us/en/work/support/resources-and-tools/calculators-and-online-tools/ez-selectors/' }, { t: 'Get a Quote', d: 'Contact sales', h: 'https://www.se.com/us/en/work/support/customer-care/contact-sales/' }, // { t: 'Where to Buy?', d: 'Find a partner', h: 'https://www.se.com/us/en/work/support/resources-and-tools/calculators-and-online-tools/ez-selectors/' }, // { t: 'Help Center', d: 'Support resources', h: 'https://www.se.com/us/en/work/support/' }, { t: 'Team', d: 'About us', h: 'https://schneiderpublicsectorresilliance.framer.website/' }]; const results = q.trim() ? idx.filter((r) => (r.t + ' ' + r.d).toLowerCase().includes(q.toLowerCase())).slice(0, 8) : []; // Rotating placeholder text for the search input const placeholders = [ 'Search "energy savings"...', 'Try "microgrid"...', 'Try "K-12 ESPC"...', 'Try "EV fleet charging"...', 'Try "airport modernization"...', 'Try "EcoStruxure"...', 'Try "decarbonization"...']; const [phIdx, setPhIdx] = useState(0); useEffect(() => { const t = setInterval(() => setPhIdx((i) => (i + 1) % placeholders.length), 2400); return () => clearInterval(t); }, []); const items = [ { key: 'industry', label: 'Industry', dropdown: [ { label: 'State & Local', desc: 'Cities, counties, state agencies', href: 'State and Local Landing.html' }, { label: 'Education', desc: 'K-12 districts & higher-ed campuses', href: 'Education Landing.html' }, { label: 'Transportation', desc: 'Airports, rail, transit, ports', href: 'Transportation Landing.html' }] }, { key: 'insights', label: 'Insights', mega: true }, { key: 'support', label: 'Support', dropdown: [ { label: 'Get a Quote', desc: 'Contact sales', href: 'https://www.se.com/us/en/work/support/customer-care/contact-sales/', external: true }, { label: 'Team', desc: 'Meet our public sector leaders', href: 'https://schneiderpublicsectorresilliance.framer.website/', external: true }] }, { key: 'about', label: 'About Us', href: 'https://www.se.com/ww/en/about-us/' }]; const expertHref = 'PubSec Homepage.html#cta'; return (
Schneider Electric
{setQ(e.target.value);setSearch(true);}} onFocus={() => setSearch(true)} placeholder={placeholders[phIdx]} style={{ width: 240, padding: '9px 14px 9px 36px', background: 'rgba(0,0,0,.04)', border: '1px solid transparent', borderRadius: 999, fontSize: 13, color: '#1F1F1F', fontFamily: 'inherit', outline: 'none', transition: 'background 160ms, border-color 160ms, width 220ms' }} onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(0,0,0,.06)';}} onMouseLeave={(e) => {if (document.activeElement !== e.currentTarget) e.currentTarget.style.background = 'rgba(0,0,0,.04)';}} onBlur={(e) => {e.currentTarget.style.background = 'rgba(0,0,0,.04)';e.currentTarget.style.borderColor = 'transparent';setTimeout(() => setSearch(false), 200);}} />
Talk to an expert {search && q.trim() &&
{results.length === 0 ?
No results for "{q}".
: results.map((r) => { const ext = r.h.startsWith('http'); return ( e.currentTarget.style.background = '#F5F5F5'} onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
{r.t}
{r.d}
); })}
}
); } // =============== Hero =============== function Hero({ accent }) { const h = HD.hero; const onPrimary = (e) => { e.preventDefault(); const el = document.getElementById('cta'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth' }); }; const onSecondary = (e) => { e.preventDefault(); const el = document.getElementById('industries'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth' }); }; return (
{h.eyebrow}

{h.sub}

{h.body &&

{h.body}

}

); } // =============== Intro stats (animated) =============== function Intro() { const d = HD.intro; return (
{d.quickStats.map((s, i) =>
{s.l}
)}
); } // =============== Sticky JumpNav =============== function JumpNav({ items, active, onJump, accent }) { return (
{items.map((it) => )}
); } // =============== Pillars =============== function Pillars({ accent }) { const d = HD.pillars; const [idx, setIdx] = useState(0); const p = d.items[idx]; return (
{d.eyebrow}

{d.h2}

{d.items.map((it, i) => { const active = idx === i; return ( ); })}
{p.eyebrow}

{p.title}

{p.body}

{p.cta}
); } // =============== Industries =============== function Industries({ accent }) { const d = HD.industries; return (
{d.eyebrow}

{d.h2}

{d.cards.map((c) =>
{c.eyebrow}

{c.title}

{c.stats.slice(0, 2).map((s, i) =>
{s.l}
)}
{c.cta} →
)}
); } // =============== Calculator =============== function Calculator({ accent }) { const d = HD.calculator; const [vIdx, setVIdx] = useState(0); const v = d.verticals[vIdx]; const [spend, setSpend] = useState(v.unitDefault); useEffect(() => {setSpend(v.unitDefault);}, [vIdx]); const low = Math.round(spend * v.rate.low),high = Math.round(spend * v.rate.high); const fmtShort = (n) => n >= 1e6 ? '$' + (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? '$' + Math.round(n / 1e3) + 'K' : '$' + n; return (
{d.eyebrow}

{d.h2}

{d.body}

{d.verticals.map((vert, i) => { const active = vIdx === i; return ( ); })}
setSpend(Math.max(0, +e.target.value || 0))} style={{ width: '100%', padding: '12px 14px', border: '1px solid #D4D4D4', borderRadius: 8, fontSize: 15, fontFamily: 'inherit', background: '#fff', outline: 'none', fontWeight: 700, color: '#0F0F0F' }} />
setSpend(+e.target.value)} style={{ width: '100%', marginTop: 14, accentColor: accent }} />
{fmtShort(v.unitMin)}{fmtShort(v.unitMax)}
Savings band reflects {Math.round(v.rate.low * 100)}-{Math.round(v.rate.high * 100)}% reduction typical for this sector under a Schneider Electric Energy Performance Contract.
Illustrative potential
Estimated annual savings
{fmtShort(low)} - {fmtShort(high)}
at {Math.round(v.rate.low * 100)}-{Math.round(v.rate.high * 100)}% reduction vs. baseline
10-year cumulative {fmtShort(low * 10)} - {fmtShort(high * 10)}
Upfront capital required $0 via ESPC
{v.ctaText} →
for a no-cost preliminary assessment
Methodology and disclaimer. {d.disclaimer}
); } // =============== Insights — embedded videos / pdf =============== function MediaTile({ media, img, title }) { const [play, setPlay] = useState(false); if (media && media.kind === 'youtube') { return play ?