/* eslint-disable */
// Conversion-optimization components: StickyCTA, AudienceSwitcher, TrustedBy, SavingsCalculator
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

// ============ Sticky CTA bar (bottom-right floating) ============
function StickyCTA() {
  const [visible, setVisible] = useStateC(false);
  const [dismissed, setDismissed] = useStateC(false);
  useEffectC(() => {
    const onScroll = () => setVisible(window.scrollY > 600);
    window.addEventListener('scroll', onScroll, {passive:true});
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const scrollToForm = () => {
    const el = document.getElementById('contact-form');
    if (el) window.scrollTo({top: el.getBoundingClientRect().top + window.scrollY - 100, behavior:'smooth'});
  };
  if (!visible || dismissed) return null;
  return (
    <div style={{position:'fixed',bottom:24,right:24,zIndex:100,background:'#fff',borderRadius:14,boxShadow:'0 12px 40px rgba(15,15,15,.22)',border:'1px solid #E5E5E5',padding:'18px 20px 18px 20px',width:340,display:'flex',gap:14,alignItems:'flex-start',animation:'slideUp 280ms ease'}}>
      <div style={{flexShrink:0,width:42,height:42,borderRadius:10,background:'#E6F7E8',color:'#009530',display:'flex',alignItems:'center',justifyContent:'center',fontSize:20,fontWeight:800}}>✓</div>
      <div style={{flex:1}}>
        <div style={{fontWeight:800,fontSize:14,color:'#0F0F0F',lineHeight:1.3}}>See what you could save</div>
        <div style={{fontSize:12,color:'#4D4D4D',marginTop:4,lineHeight:1.45}}>No upfront cost. Funded by guaranteed energy savings.</div>
        <button onClick={scrollToForm} style={{marginTop:10,background:'#3DCD58',color:'#fff',border:0,fontWeight:700,padding:'9px 14px',borderRadius:6,fontSize:13,cursor:'pointer',width:'100%'}}>Talk to an expert →</button>
      </div>
      <button aria-label="Dismiss" onClick={()=>setDismissed(true)} style={{position:'absolute',top:8,right:10,background:'transparent',border:0,color:'#6B6B6B',fontSize:16,cursor:'pointer',padding:4,lineHeight:1}}>×</button>
      <style>{`@keyframes slideUp { from {opacity:0; transform: translateY(16px);} to {opacity:1; transform:none;} }`}</style>
    </div>
  );
}

// ============ Audience Switcher ============
function AudienceSwitcher({ d, onPick, picked }) {
  return (
    <section style={{padding:'48px 24px 8px',background:'#fff'}}>
      <div style={{maxWidth:1100,margin:'0 auto'}}>
        <h2 style={{textAlign:'center',fontWeight:800,fontSize:26,color:'#0F0F0F',margin:0,lineHeight:1.25}}>{d.h}</h2>
        <div style={{marginTop:24,display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
          {d.options.map(o => {
            const isActive = picked === o.id;
            return (
              <button key={o.id} onClick={()=>onPick(isActive ? null : o.id)}
                style={{textAlign:'left',padding:'22px 24px',borderRadius:14,
                  border: isActive ? '2px solid #009530' : '1.5px solid #E5E5E5',
                  background: isActive ? '#F3FBF4' : '#fff',
                  cursor:'pointer',display:'flex',gap:16,alignItems:'center',
                  boxShadow: isActive ? '0 6px 20px rgba(0,149,48,.12)' : 'none',
                  transition:'all 180ms'}}>
                <div style={{flexShrink:0,width:52,height:52,borderRadius:12,background: isActive?'#009530':'#E6F7E8',color: isActive?'#fff':'#009530',display:'flex',alignItems:'center',justifyContent:'center',fontSize:26}}>{o.emoji}</div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:800,fontSize:16,color:'#0F0F0F',lineHeight:1.3}}>{o.label}</div>
                  <div style={{fontSize:13,color:'#4D4D4D',marginTop:4,lineHeight:1.45}}>{o.sub}</div>
                </div>
                <div style={{flexShrink:0,color:'#009530',fontSize:18,fontWeight:800}}>{isActive ? '✓' : '→'}</div>
              </button>
            );
          })}
        </div>
        {picked && (
          <div style={{marginTop:14,fontSize:12.5,color:'#4D4D4D',textAlign:'center'}}>
            Showing {picked === 'k12' ? 'K-12' : 'Higher Education'} content. <button onClick={()=>onPick(null)} style={{background:'transparent',border:0,color:'#009530',fontWeight:700,fontSize:12.5,cursor:'pointer',textDecoration:'underline'}}>Show all</button>
          </div>
        )}
      </div>
    </section>
  );
}

// ============ Trusted By logo strip ============
function TrustedBy({ d }) {
  return (
    <section style={{padding:'24px 24px 32px',background:'#fff',borderBottom:'1px solid #F0F0F0'}}>
      <div style={{maxWidth:1200,margin:'0 auto'}}>
        <div style={{textAlign:'center',fontSize:11.5,fontWeight:800,letterSpacing:'.14em',textTransform:'uppercase',color:'#6B6B6B',marginBottom:18}}>{d.eyebrow}</div>
        <div style={{display:'flex',gap:0,flexWrap:'wrap',justifyContent:'center',rowGap:6}}>
          {d.logos.map((l,i)=>(
            <div key={i} style={{padding:'10px 22px',fontSize:13.5,fontWeight:700,color:'#1F1F1F',borderRight: i<d.logos.length-1 ? '1px solid #E5E5E5' : 'none',letterSpacing:'.005em',whiteSpace:'nowrap'}}>{l}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ Savings Estimator ============
// Methodology (transparent, defensible):
//   Annual kWh   = sqft × EUI (18 kWh/sq ft/yr — typical US K-12/HE avg)
//   Annual $     = Annual kWh × $0.13/kWh (EIA U.S. commercial avg)
//   Savings %    = 20% (1990s+) | 28% (1980s) | 35% (pre-1980) — ACEEE/SE ESPC range
//   CO2 avoided  = saved kWh × 0.000371 t-CO2/kWh (EPA eGRID 2022 U.S. avg)
function SavingsCalculator({ d }) {
  const [sqft, setSqft] = useStateC(750000);          // total campus sq ft
  const [age, setAge] = useStateC('1980s');           // building vintage band
  const [animated, setAnimated] = useStateC({savings:0, co2:0, ten:0});
  const sectionRef = useRefC(null);

  const EUI = 18;                // kWh / sq ft / yr
  const RATE = 0.13;             // $ / kWh (EIA U.S. commercial avg)
  const CO2_FACTOR = 0.000371;   // t-CO2 / kWh (EPA eGRID 2022 U.S. avg)
  const SAVINGS_PCT = { '1990s+': 0.20, '1980s': 0.28, 'pre-1980': 0.35 };

  const pct = SAVINGS_PCT[age];
  const annualKWh = sqft * EUI;
  const baselineCost = annualKWh * RATE;
  const annualSavings = Math.round(baselineCost * pct);
  const annualKWhSaved = annualKWh * pct;
  const co2Avoided = Math.round(annualKWhSaved * CO2_FACTOR); // metric tons / yr
  const tenYear = annualSavings * 10;

  // Animate number changes (smooth ease-out)
  useEffectC(() => {
    const start = {...animated};
    const end = {savings: annualSavings, co2: co2Avoided, ten: tenYear};
    const dur = 600;
    const t0 = performance.now();
    let raf;
    const step = (t) => {
      const p = Math.min(1, (t - t0) / dur);
      const e = 1 - Math.pow(1 - p, 3); // easeOutCubic
      setAnimated({
        savings: Math.round(start.savings + (end.savings - start.savings) * e),
        co2:     Math.round(start.co2     + (end.co2     - start.co2)     * e),
        ten:     Math.round(start.ten     + (end.ten     - start.ten)     * e),
      });
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line
  }, [annualSavings, co2Avoided, tenYear]);

  const scrollToForm = () => {
    const el = document.getElementById('contact-form');
    if (el) window.scrollTo({top: el.getBoundingClientRect().top + window.scrollY - 100, behavior:'smooth'});
  };

  const fmt$ = (n) => '$' + n.toLocaleString('en-US');
  const fmtN = (n) => n.toLocaleString('en-US');
  const inputBase = {width:'100%',padding:'12px 14px',border:'1px solid #D4D4D4',borderRadius:8,fontSize:15,fontFamily:'inherit',background:'#fff',outline:'none',fontWeight:600,color:'#0F0F0F'};

  const ageOptions = [
    {id:'1990s+',  label:'1990s or newer', sub:'~20% potential'},
    {id:'1980s',   label:'1980s era',      sub:'~28% potential'},
    {id:'pre-1980',label:'Pre-1980',       sub:'~35% potential'},
  ];

  return (
    <section id="calculator" ref={sectionRef} style={{padding:'72px 24px',background:'#FAFAFA',borderTop:'1px solid #F0F0F0'}}>
      <div style={{maxWidth:1100,margin:'0 auto'}}>
        <div style={{textAlign:'center',marginBottom:32}}>
          <div className="se-eyebrow" style={{marginBottom:10}}>Savings Estimator</div>
          <h2 style={{fontWeight:800,fontSize:34,color:'#0F0F0F',margin:0,lineHeight:1.2,letterSpacing:'-0.005em'}}>{d.h}</h2>
          <p style={{maxWidth:720,margin:'14px auto 0',fontSize:15,color:'#4D4D4D',lineHeight:1.6}}>{d.body}</p>
        </div>

        <div style={{background:'#fff',borderRadius:16,border:'1px solid #E5E5E5',overflow:'hidden',display:'grid',gridTemplateColumns:'1fr 1fr'}}>
          {/* Inputs */}
          <div style={{padding:'36px 36px 32px'}}>
            <label style={{fontSize:12,fontWeight:800,color:'#0F0F0F',display:'block',marginBottom:10,letterSpacing:'.08em'}}>1 · {(d.label1 || 'TOTAL CAMPUS FLOOR AREA').toUpperCase()}</label>
            <div style={{position:'relative'}}>
              <input type="number" min={0} step={10000} value={sqft} onChange={e=>setSqft(Math.max(0, +e.target.value || 0))} style={{...inputBase,paddingRight:64}}/>
              <span style={{position:'absolute',right:14,top:'50%',transform:'translateY(-50%)',fontWeight:700,color:'#6B6B6B',fontSize:13}}>sq ft</span>
            </div>
            <input type="range" min={50000} max={5000000} step={10000} value={sqft} onChange={e=>setSqft(+e.target.value)} style={{width:'100%',marginTop:14,accentColor:'#009530'}}/>
            <div style={{display:'flex',justifyContent:'space-between',fontSize:11,color:'#6B6B6B',marginTop:2}}>
              <span>50K sq ft</span><span>5M sq ft</span>
            </div>
            <div style={{marginTop:8,fontSize:11.5,color:'#6B6B6B'}}>
              ≈ {fmtN(Math.round(annualKWh).toLocaleString ? Math.round(annualKWh) : annualKWh)} kWh/yr baseline · ≈ {fmt$(Math.round(baselineCost))} annual energy cost
            </div>

            <label style={{fontSize:12,fontWeight:800,color:'#0F0F0F',display:'block',marginTop:28,marginBottom:10,letterSpacing:'.08em'}}>2 · TYPICAL BUILDING VINTAGE</label>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
              {ageOptions.map(o => {
                const active = age === o.id;
                return (
                  <button key={o.id} onClick={()=>setAge(o.id)} style={{padding:'12px 8px',border: active?'2px solid #009530':'1.5px solid #E5E5E5',background: active?'#F3FBF4':'#fff',borderRadius:8,cursor:'pointer',textAlign:'center'}}>
                    <div style={{fontWeight:800,fontSize:13,color: active?'#009530':'#0F0F0F'}}>{o.label}</div>
                    <div style={{fontSize:11,color:'#6B6B6B',marginTop:3}}>{o.sub}</div>
                  </button>
                );
              })}
            </div>
            <div style={{marginTop:14,padding:'12px 14px',background:'#F3FBF4',borderRadius:8,fontSize:11.5,color:'#1F4F1F',lineHeight:1.5}}>
              Older buildings have more retrofit headroom. Savings band reflects ACEEE retrofit ranges and Schneider Electric ESPC project outcomes.
            </div>
          </div>

          {/* Results */}
          <div style={{padding:'36px 36px 32px',background:'#0F0F0F',color:'#fff',display:'flex',flexDirection:'column'}}>
            <div style={{fontSize:11,fontWeight:800,color:'#3DCD58',letterSpacing:'.14em',textTransform:'uppercase'}}>Illustrative potential</div>
            <div style={{marginTop:18}}>
              <div style={{fontSize:13,opacity:.7,fontWeight:600}}>Annual energy cost savings</div>
              <div style={{fontSize:48,fontWeight:800,color:'#3DCD58',lineHeight:1,letterSpacing:'-0.015em',marginTop:4,fontVariantNumeric:'tabular-nums'}}>{fmt$(animated.savings)}</div>
              <div style={{fontSize:12,opacity:.55,marginTop:6}}>at {Math.round(pct*100)}% reduction vs. baseline</div>
            </div>
            <div style={{marginTop:24,paddingTop:20,borderTop:'1px solid rgba(255,255,255,.15)'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',gap:12}}>
                <span style={{fontSize:13,opacity:.8}}>10-year cumulative</span>
                <span style={{fontSize:22,fontWeight:800,fontVariantNumeric:'tabular-nums'}}>{fmt$(animated.ten)}</span>
              </div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',gap:12,marginTop:10}}>
                <span style={{fontSize:13,opacity:.8}}>CO₂ avoided / yr</span>
                <span style={{fontSize:16,fontWeight:700,fontVariantNumeric:'tabular-nums'}}>{fmtN(animated.co2)} t</span>
              </div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',gap:12,marginTop:10}}>
                <span style={{fontSize:13,opacity:.8}}>Upfront capital required</span>
                <span style={{fontSize:16,fontWeight:700,color:'#3DCD58'}}>$0 via ESPC</span>
              </div>
            </div>

            <div style={{marginTop:'auto',paddingTop:28}}>
              <button onClick={scrollToForm} style={{width:'100%',background:'#3DCD58',color:'#0F0F0F',border:0,fontWeight:800,padding:'14px',borderRadius:8,fontSize:14,cursor:'pointer',letterSpacing:'.01em'}}>Talk to an Expert →</button>
              <div style={{marginTop:8,fontSize:11.5,opacity:.65,lineHeight:1.5,textAlign:'center'}}>for a verified savings audit</div>
            </div>
          </div>
        </div>

        {/* Methodology / disclaimer */}
        <div style={{marginTop:18,padding:'16px 20px',background:'#fff',border:'1px solid #E5E5E5',borderRadius:10,fontSize:11.5,color:'#4D4D4D',lineHeight:1.6}}>
          <strong style={{color:'#0F0F0F'}}>Methodology &amp; disclaimer.</strong> {d.note} This estimator is for directional planning only and does not constitute a savings guarantee, financial advice, or a Schneider Electric proposal. Actual savings depend on a site-specific Investment Grade Audit and are guaranteed only under a signed Energy Performance Contract.
        </div>
      </div>
    </section>
  );
}

// ============ Hero Calculator (compact, lives inside the hero on the right) ============
function HeroCalculator({ d }) {
  const [sqft, setSqft] = useStateC(750000);
  const [age, setAge] = useStateC('1980s');
  const [shown, setShown] = useStateC(false);

  const EUI = 18;
  const RATE = 0.13;
  const CO2_FACTOR = 0.000371;
  const SAVINGS_PCT = { '1990s+': 0.20, '1980s': 0.28, 'pre-1980': 0.35 };

  const pct = SAVINGS_PCT[age];
  const annualKWh = sqft * EUI;
  const baselineCost = annualKWh * RATE;
  const annualSavings = Math.round(baselineCost * pct);
  const co2Avoided = Math.round(annualKWh * pct * CO2_FACTOR);
  const tenYear = annualSavings * 10;

  const fmt$ = (n) => '$' + n.toLocaleString('en-US');
  const fmtN = (n) => n.toLocaleString('en-US');

  const ageOptions = [
    { id: '1990s+',   label: '1990s+',   sub: '~20%' },
    { id: '1980s',    label: '1980s',    sub: '~28%' },
    { id: 'pre-1980', label: 'Pre-1980', sub: '~35%' },
  ];

  // Recompute trigger when inputs change after a result has been shown
  useEffectC(() => { if (shown) setShown(true); /* keep shown but values update */ }, [sqft, age]);

  const inputBase = { width: '100%', padding: '11px 13px', border: '1px solid rgba(255,255,255,.18)', borderRadius: 8, fontSize: 14, fontFamily: 'inherit', background: 'rgba(255,255,255,.06)', color: '#fff', outline: 'none', fontWeight: 600 };

  return (
    <div style={{ background: 'rgba(15,15,15,.72)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', border: '1px solid rgba(61,205,88,.35)', borderRadius: 16, padding: '24px 26px 22px', color: '#fff', boxShadow: '0 18px 50px rgba(0,0,0,.45)', maxWidth: 460, marginLeft: 'auto' }}>
      <div style={{ fontSize: 11, fontWeight: 800, color: '#3DCD58', letterSpacing: '.14em', textTransform: 'uppercase' }}>Savings Estimator</div>
      <div style={{ fontSize: 18, fontWeight: 800, marginTop: 6, lineHeight: 1.3 }}>{d.h || 'How much could your jurisdiction save?'}</div>

      <label style={{ display: 'block', marginTop: 16, fontSize: 11, fontWeight: 800, letterSpacing: '.08em', color: 'rgba(255,255,255,.85)' }}>1 · {(d.label1 || 'TOTAL PORTFOLIO FLOOR AREA').toUpperCase()}</label>
      <div style={{ position: 'relative', marginTop: 6 }}>
        <input type="number" min={0} step={10000} value={sqft} onChange={(e) => setSqft(Math.max(0, +e.target.value || 0))} style={{ ...inputBase, paddingRight: 56 }} />
        <span style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', fontWeight: 700, color: 'rgba(255,255,255,.6)', fontSize: 12 }}>sq ft</span>
      </div>
      <input type="range" min={50000} max={5000000} step={10000} value={sqft} onChange={(e) => setSqft(+e.target.value)} style={{ width: '100%', marginTop: 10, accentColor: '#3DCD58' }} />

      <label style={{ display: 'block', marginTop: 14, fontSize: 11, fontWeight: 800, letterSpacing: '.08em', color: 'rgba(255,255,255,.85)' }}>2 · TYPICAL BUILDING VINTAGE</label>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, marginTop: 6 }}>
        {ageOptions.map((o) => {
          const active = age === o.id;
          return (
            <button key={o.id} onClick={() => setAge(o.id)} style={{ padding: '10px 6px', border: active ? '2px solid #3DCD58' : '1px solid rgba(255,255,255,.18)', background: active ? 'rgba(61,205,88,.18)' : 'rgba(255,255,255,.04)', color: '#fff', borderRadius: 8, cursor: 'pointer', textAlign: 'center', fontFamily: 'inherit' }}>
              <div style={{ fontWeight: 800, fontSize: 12.5, color: active ? '#3DCD58' : '#fff' }}>{o.label}</div>
              <div style={{ fontSize: 10.5, color: 'rgba(255,255,255,.6)', marginTop: 2 }}>{o.sub}</div>
            </button>
          );
        })}
      </div>

      <button onClick={() => setShown(true)} style={{ marginTop: 16, width: '100%', background: '#3DCD58', color: '#0F0F0F', border: 0, fontWeight: 800, padding: '13px', borderRadius: 8, fontSize: 14, cursor: 'pointer', letterSpacing: '.01em' }}>Calculate potential savings →</button>

      {shown && (
        <div onClick={() => setShown(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.62)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, animation: 'savingsFadeIn 200ms ease' }}>
          <div onClick={(e) => e.stopPropagation()} style={{ position: 'relative', width: '100%', maxWidth: 520, background: '#0F0F0F', color: '#fff', borderRadius: 18, border: '1px solid rgba(61,205,88,.4)', boxShadow: '0 30px 80px rgba(0,0,0,.6)', padding: '32px 32px 28px', animation: 'savingsPopIn 260ms cubic-bezier(.2,.9,.3,1.2)' }}>
            <button aria-label="Close" onClick={() => setShown(false)} style={{ position: 'absolute', top: 14, right: 14, width: 32, height: 32, border: 0, background: 'rgba(255,255,255,.08)', color: '#fff', borderRadius: 8, cursor: 'pointer', fontSize: 18, lineHeight: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>×</button>

            <div style={{ fontSize: 11, fontWeight: 800, color: '#3DCD58', letterSpacing: '.14em', textTransform: 'uppercase' }}>Illustrative Potential</div>
            <div style={{ fontSize: 18, fontWeight: 800, marginTop: 6, lineHeight: 1.3, paddingRight: 32 }}>Your estimated savings</div>
            <div style={{ marginTop: 6, fontSize: 12, color: 'rgba(255,255,255,.6)' }}>Based on {fmtN(sqft)} sq ft · {age} buildings</div>

            <div style={{ marginTop: 22 }}>
              <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,.7)', fontWeight: 600 }}>Annual energy cost savings</div>
              <div style={{ fontSize: 54, fontWeight: 800, color: '#3DCD58', lineHeight: 1, letterSpacing: '-0.015em', marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>{fmt$(annualSavings)}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,.55)', marginTop: 6 }}>at {Math.round(pct * 100)}% reduction vs. baseline</div>
            </div>

            <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,.15)', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,.6)' }}>10-yr cumulative</div>
                <div style={{ fontSize: 17, fontWeight: 800, fontVariantNumeric: 'tabular-nums', marginTop: 4 }}>{fmt$(tenYear)}</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,.6)' }}>CO₂ avoided/yr</div>
                <div style={{ fontSize: 17, fontWeight: 800, fontVariantNumeric: 'tabular-nums', marginTop: 4 }}>{fmtN(co2Avoided)} t</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,.6)' }}>Upfront capital</div>
                <div style={{ fontSize: 17, fontWeight: 800, color: '#3DCD58', marginTop: 4 }}>$0</div>
              </div>
            </div>

            <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
              <button onClick={() => { setShown(false); const el = document.getElementById('contact-form'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth' }); }} style={{ flex: 1, background: '#3DCD58', color: '#0F0F0F', border: 0, fontWeight: 800, padding: '13px', borderRadius: 8, fontSize: 14, cursor: 'pointer', letterSpacing: '.01em' }}>Talk to an expert →</button>
              <button onClick={() => setShown(false)} style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.25)', fontWeight: 700, padding: '13px 18px', borderRadius: 8, fontSize: 13, cursor: 'pointer' }}>Adjust inputs</button>
            </div>

            <div style={{ marginTop: 14, fontSize: 11, color: 'rgba(255,255,255,.5)', lineHeight: 1.5 }}>Directional estimate. Actual savings verified via Investment Grade Audit and guaranteed under signed ESPC.</div>
          </div>
          <style>{`@keyframes savingsFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes savingsPopIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }`}</style>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { StickyCTA, AudienceSwitcher, TrustedBy, SavingsCalculator, HeroCalculator });