// var-hero.jsx — Hero Versions A (premium/visual), B (structured/document-like), C (balanced).
// All use the rooftop drone photo of a commercial building (not solar farms).

const HERO_IMAGE = `${window.GI_BASE}assets/hero/rooftop-solar-sunset.webp`;
const HERO_VIDEO = `${window.GI_BASE}assets/hero/hero-video.webm`;
const HERO_ALT = 'Commercial rooftop solar panels at sunset with city skyline in background';

// Shared hero headline pool — copy refined, not rewritten.
const HERO_HEAD = 'Commercial energy solutions for Canadian businesses';
const HERO_SUB = 'We optimize energy use, right-size solar and storage, and integrate electrification with energy monitoring and control for long-term performance and energy independence.';

// ============================================================
// Version A — PREMIUM / VISUAL
// Full-bleed image, minimal chrome, large type, floating metric card.
// Emphasis on presence + image storytelling.
// ============================================================
// const HeroVersionA = () =>
// <section style={{
//   position: 'relative', background: '#0A182D',
//   color: '#fff', overflow: 'hidden',
//   minHeight: 860
// }}>
//     {/* <img src={HERO_IMAGE} alt={HERO_ALT} style={{
//     position: 'absolute', inset: 0, width: '100%', height: '100%',
//     objectFit: 'cover', filter: 'saturate(0.94) contrast(1.06) brightness(0.72)'
//     }} /> */}

//   <video src={HERO_VIDEO} autoPlay muted loop playsInline style={{
//     position: 'absolute', inset: 0, width: '100%', height: '100%',
//     objectFit: 'cover', filter: 'saturate(0.94) contrast(1.06) brightness(0.72)'
//   }} />
//     {/* Cinematic vignette */}
//     <div style={{
//     position: 'absolute', inset: 0,
//     background: 'linear-gradient(180deg, rgba(10,24,45,0.25) 0%, rgba(10,24,45,0.35) 40%, rgba(10,24,45,0.82) 100%)'
//   }} />
//     <div style={{
//     position: 'absolute', inset: 0,
//     background: 'radial-gradient(ellipse at 20% 70%, rgba(55,88,68,0.3) 0%, transparent 55%)'
//   }} />

//     <div style={{
//     position: 'relative', maxWidth: 1440, margin: '0 auto',
//     padding: '220px 48px 96px', minHeight: 860,
//     display: 'flex', flexDirection: 'column', justifyContent: 'flex-end'
//   }}>
//       <div style={{ maxWidth: 1040 }}>
//         <div style={{ marginBottom: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
//           <span style={{ width: 40, height: 1, background: 'var(--gi-sage-accent)' }} />
//           <Eyebrow onDark>Conserve · Power · Transform</Eyebrow>
//         </div>
//         <h1 style={{
//         font: '500 96px/98px var(--ff-sans)', letterSpacing: '-0.038em',
//         color: '#fff', margin: 0, textWrap: 'balance'
//       }}>{HERO_HEAD}</h1>
//         <p style={{
//         font: '400 20px/32px var(--ff-sans)', color: 'rgba(255,255,255,0.80)',
//         margin: '36px 0 48px', maxWidth: 680, textWrap: 'pretty'
//       }}>{HERO_SUB}</p>
//         <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
//           <Button variant="onDark" size="lg" href="/about/contact/" gtm={{ location: 'homepage-hero' }}>Start your assessment</Button>
//           <Button variant="outlineOnDark" size="lg" href="/projects/" gtm={{ location: 'homepage-hero' }}>See our projects</Button>
//         </div>
//       </div>
//     </div>

//     {/* Floating metric card — bottom-right, subtle authority signal */}
//     <div style={{
//     position: 'absolute', right: 48, bottom: 48,
//     background: 'rgba(15,37,69,0.72)',
//     backdropFilter: 'blur(14px)',
//     border: '1px solid rgba(255,255,255,0.12)',
//     padding: '28px 32px', maxWidth: 320
//     }}>
//       <div style={{
//       fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.14em',
//       color: 'var(--gi-sage-accent)', fontWeight: 500, marginBottom: 14,
//       textTransform: 'uppercase'
//     }}>Featured · Food Manufacturer, ON</div>
//       <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
//         <span style={{ font: '500 44px/1 var(--ff-sans)', letterSpacing: '-0.03em', color: '#fff' }}>966</span>
//         <span style={{ font: '400 14px/1 var(--ff-sans)', color: 'rgba(255,255,255,0.72)' }}>kW rooftop solar</span>
//       </div>
//       <p style={{
//       font: '400 13px/20px var(--ff-sans)', color: 'rgba(255,255,255,0.64)',
//       margin: 0, textWrap: 'pretty'
//     }}>Near-100% on-site generation for a Southern Ontario food plant.</p>
//     </div>
//   </section>;


// ============================================================
// Version B — STRUCTURED / DOCUMENT-LIKE
// Split layout: image right, headline + structured metadata panel left.
// Engineering-report feel — running header, labels, tabular info.
// ============================================================
const HeroVersionB = () =>
<section data-gi-resp="hero" className="gi-section gi-section--dark" style={{
  position: 'relative', background: 'var(--gi-wise-blue)',
  color: '#fff', overflow: 'hidden'
}}>
    <div data-gi-resp="container" style={{
    position: 'relative', maxWidth: 1440, margin: '0 auto',
    padding: 'var(--section-y-md) 48px'
  }}>
      <div data-gi-resp="hero-split" style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72,
      alignItems: 'center', textAlign: "left"
    }}>
        {/* Left — headline + document panel */}
        <div className="gi-hero-animate">
          <div style={{ marginBottom: 20 }}>
            <Eyebrow onDark className="gi-eyebrow--gold">One partner for efficiency, onsite power, and electrification</Eyebrow>
          </div>
          <h1 style={{
          font: '200 40px/48px var(--ff-sans)', letterSpacing: '-0.018em',
          color: '#fff', margin: 0, textWrap: 'balance', fontSize: "55px"
        }}>{HERO_HEAD}</h1>
          <p style={{
          font: '200 16px/26px var(--ff-sans)', color: 'rgba(255,255,255,0.82)',
          margin: '28px 0 40px', maxWidth: 560, textWrap: 'pretty'
        }}>{HERO_SUB}</p>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="onDark" size="md" href="/about/contact/" gtm={{ location: 'homepage-hero' }}>Start your assessment</Button>
            <Button variant="outlineOnDark" size="md" href="/projects/" gtm={{ location: 'homepage-hero' }}>See our projects</Button>
          </div>

          {/* Document-style metadata table */}
          <dl data-gi-resp="hero-meta" style={{
          marginTop: 72,
          display: 'grid', gridTemplateColumns: '140px 1fr',
          rowGap: 0, borderTop: '1px solid rgba(255,255,255,0.18)'
        }}>
            {[
          ['Scope', 'Energy Audits · Rooftop Solar · Battery Storage · EV Charging'],
          ['Geography', 'Ontario · Alberta · Nova Scotia · British Columbia'],
          ['Delivery', 'Single accountable team, from assessment through to operation'],
          ['Horizon', 'Long-term relationships built on energy independence']].
          map(([k, v]) =>
          <React.Fragment key={k}>
                <dt style={{
              padding: '18px 0',
              borderBottom: '1px solid rgba(255,255,255,0.18)',
              fontFamily: 'var(--ff-mono)', fontSize: 11,
              letterSpacing: '0.14em', color: 'rgba(255,255,255,0.56)',
              textTransform: 'uppercase'
            }}>{k}</dt>
                <dd style={{
              padding: '18px 0', margin: 0,
              borderBottom: '1px solid rgba(255,255,255,0.18)',
              fontFamily: 'var(--ff-sans)', fontSize: 14,
              color: '#fff'
            }}>{v}</dd>
              </React.Fragment>
          )}
          </dl>
        </div>

        {/* Right — image (full-bleed, no caption overlay) */}
        <div data-gi-resp="hero-image" style={{ position: 'relative', width: '100%', height: 640, overflow: 'hidden' }}>
          {/* <img src={HERO_IMAGE} alt={HERO_ALT} className="gi-image-settle" style={{
          width: '100%', height: '100%', objectFit: "cover"
          }} /> */}

<video src={HERO_VIDEO} autoPlay muted loop playsInline style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', filter: 'saturate(0.94) contrast(1.06) brightness(0.72)', margin: "0px"
        }} />
        </div>
      </div>

      {/* Four-metric strip — structured, tabular */}
      <div data-gi-resp="hero-metrics" data-gi-reveal-stagger style={{
      marginTop: 96,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      borderTop: '1px solid rgba(255,255,255,0.22)'
    }}>
        {[
      { k: '01', v: '360+', l: 'C&I projects delvivered since 2012' },
      { k: '02', v: '300M+ ', l: 'kWh savings delivered' },
      { k: '03', v: '$20M+', l: 'Incentive funding secured' },
      { k: '04', v: '4-6 year', l: 'Typical payback for C&I projects' }].
      map((m, i) =>
      <div key={m.k} style={{
        padding: '32px 24px 0 0',
        borderRight: i < 3 ? '1px solid rgba(255,255,255,0.22)' : 'none',
        paddingLeft: i > 0 ? 32 : 0
      }}>
            <div style={{
          font: '500 48px/1 var(--ff-sans)', letterSpacing: '-0.028em',
          color: '#fff', marginBottom: 12
        }}>{m.v}</div>
            <div style={{
          font: '400 13px/20px var(--ff-sans)',
          color: 'rgba(255,255,255,0.70)', maxWidth: 220, textWrap: 'pretty'
        }}>{m.l}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


// ============================================================
// Version C — BALANCED
// Full-bleed image with editorial headline (like current, refined).
// 4 metric strip at the bottom — kept, but cleaner and with mono labels.
// ============================================================
const HeroVersionC = () =>
<section data-gi-resp="hero" style={{
  position: 'relative', background: 'var(--gi-wise-blue)',
  color: '#fff', overflow: 'hidden',
  minHeight: 840
}}>
    <img src={HERO_IMAGE} alt={HERO_ALT} style={{
    position: 'absolute', inset: 0, width: '100%', height: '100%',
    objectFit: 'cover', filter: 'saturate(0.96) contrast(1.04) brightness(0.76)'
  }} />
    <div style={{
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(15,37,69,0.52) 0%, rgba(15,37,69,0.55) 50%, rgba(10,24,45,0.88) 100%)'
  }} />

    <div style={{
    position: 'relative', maxWidth: 1440, margin: '0 auto',
    padding: '200px 48px 0', minHeight: 840,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
  }}>
      <div style={{ maxWidth: 1080, paddingBottom: 64 }}>
        <div style={{ marginBottom: 28 }}>
          <Eyebrow onDark>Conserve · Power · Transform</Eyebrow>
        </div>
        <h1 style={{
        font: '500 84px/88px var(--ff-sans)', letterSpacing: '-0.033em',
        color: '#fff', margin: 0, textWrap: 'balance'
      }}>{HERO_HEAD}</h1>
        <p style={{
        font: '400 19px/30px var(--ff-sans)', color: 'rgba(255,255,255,0.82)',
        margin: '32px 0 44px', maxWidth: 720, textWrap: 'pretty'
      }}>{HERO_SUB}</p>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="onDark" size="lg" href="/about/contact/" gtm={{ location: 'homepage-hero' }}>Start your assessment</Button>
          <Button variant="outlineOnDark" size="lg" href="/projects/" gtm={{ location: 'homepage-hero' }}>See our projects</Button>
        </div>
      </div>

      {/* Tagged metrics bar */}
      <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      borderTop: '1px solid rgba(255,255,255,0.22)',
      paddingBottom: 48
    }}>
        {[
      { tag: 'IRR', big: '15–21%', small: 'Typical post-install IRR on commercial projects' },
      { tag: 'PAYBACK', big: '4.6 yr', small: 'Median payback across completed installations' },
      { tag: 'SAVINGS', big: '$7M+', small: 'Verified lifetime savings, single-client program' },
      { tag: 'PROJECTS', big: '200+', small: 'Commercial and industrial projects since 2012' }].
      map((m, i) =>
      <div key={m.tag} style={{
        padding: '32px 28px 0 0',
        borderRight: i < 3 ? '1px solid rgba(255,255,255,0.22)' : 'none',
        paddingLeft: i > 0 ? 32 : 0
      }}>
            <div style={{
          fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
          color: 'var(--gi-sage-accent)', fontWeight: 500,
          marginBottom: 12
        }}>{m.tag}</div>
            <div style={{
          font: '500 52px/1 var(--ff-sans)', letterSpacing: '-0.03em',
          color: '#fff', marginBottom: 12
        }}>{m.big}</div>
            <div style={{
          font: '400 13px/20px var(--ff-sans)', color: 'rgba(255,255,255,0.68)',
          maxWidth: 230, textWrap: 'pretty'
        }}>{m.small}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


Object.assign(window, { HeroVersionB, HeroVersionC });