// section-proof.jsx — v3: balanced.
// ProvenAtScale: cream feature block, giant metrics.
// Industries: cream continuation, refined list.
// FeaturedProject: wise-blue dark.
// ProjectsGrid: cream, hover zoom + completion labels.
// Incentives: deep-ink.

// ============================================================
// ProvenAtScale — feature block. Giant numbers, strong layout.
// ============================================================
const ProvenAtScale = () =>
<section data-gi-resp="proof" className="gi-section gi-section--light" style={{ background: 'var(--gi-paper-cream)', padding: '90px 0 128px' }}>
    <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>

      <div data-gi-resp="proof-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'center' }}>
        <div>
          <div style={{ marginBottom: 24 }}>
            <Eyebrow className="gi-eyebrow--green">Proven at scale</Eyebrow>
          </div>
          <h2 style={{
          font: '500 60px/64px var(--ff-sans)', letterSpacing: '-0.03em',
          color: 'var(--gi-deep-ink)', margin: '0 0 28px', textWrap: 'balance'
        }}>Measured performance. Clear results.

        </h2>
          <p style={{
          font: '400 18px/30px var(--ff-sans)', color: 'var(--gi-slate)',
          margin: 0, maxWidth: 520, textWrap: 'pretty'
        }}>Diverse energy solutions across hundreds of commercial and industrial facilities, with measurable impact on energy, cost, and emissions.


        </p>
        </div>

        {/* Real industrial photography — commercial rooftop solar */}
        <div data-gi-resp="proof-image" style={{ height: 620, overflow: 'hidden', background: 'var(--gi-wise-blue)' }}>
          <img
          src={`${window.GI_BASE}assets/projects/proven-at-scale-rooftop.webp`}
          alt="Aerial view of a large commercial rooftop solar array covering a warehouse facility"
          style={{
            width: '100%', height: '100%', objectFit: 'cover',
            filter: 'saturate(0.98) contrast(1.02)'
          }} />
        
        </div>
      </div>

      {/* Feature metrics — structural, giant, no decoration */}
      <div data-gi-resp="proof-metrics" style={{
      marginTop: 120,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      borderTop: '1px solid rgba(15,33,51,0.18)',
      borderBottom: '1px solid rgba(15,33,51,0.18)'
    }}>
        {[
      { big: '14+', unit: '\n', small: 'years of commercial\nenergy delivery in Canada' },
      { big: '360+', unit: '\n', small: 'projects across solar,\nLED retrofits, and efficiency' },
      { big: '5,500+', unit: '\n', small: 'Tonnes of CO₂ reduced' },
      { big: '$30M+', unit: '\n', small: 'In lifetime energy savings delivered' }].
      map((m, i) =>
      <div key={i} style={{
        padding: '52px 40px 52px 0',
        borderRight: i < 3 ? '1px solid rgba(15,33,51,0.14)' : 'none',
        paddingLeft: i > 0 ? 40 : 0
      }}>
            <div style={{
          display: 'flex', alignItems: 'baseline', gap: 10,
          marginBottom: 16
        }}>
              <span style={{
            font: '500 64px/1 var(--ff-sans)', letterSpacing: '-0.04em',
            color: i === 3 ? '#D4A24C' : 'var(--gi-deep-ink)',
            whiteSpace: 'nowrap'
          }}>
            {(() => {
              const p = parseMetric(m.big);
              return <CountUp to={p.number} prefix={p.prefix} suffix={p.suffix} />;
            })()}
          </span>
              <span style={{
            font: '400 15px/1 var(--ff-sans)', color: 'var(--gi-graphite)',
            letterSpacing: '-0.005em'
          }}>{m.unit}</span>
            </div>
            <div style={{
          font: '400 14px/22px var(--ff-sans)', color: 'var(--gi-slate)',
          maxWidth: 240, textWrap: 'pretty', whiteSpace: 'pre-line'
        }}>{m.small}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


// ============================================================
// CountUp — smooth easeOutCubic ramp, runs once when scrolled into view.
// Respects prefers-reduced-motion. Uses tabular-nums to avoid jitter.
// ============================================================
const CountUp = ({ to, prefix = '', suffix = '', duration = 1100 }) => {
  const ref = React.useRef(null);
  const [display, setDisplay] = React.useState(0);
  const started = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) {setDisplay(to);return;}
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          io.disconnect();
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            // easeOutCubic — fast early, settles into final value
            const eased = 1 - Math.pow(1 - t, 3);
            setDisplay(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      }
    }, { threshold: 0.35 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  return (
    <span ref={ref} style={{ fontVariantNumeric: 'tabular-nums', fontSize: "80px" }}>
      {prefix}{display.toLocaleString('en-US')}{suffix}
    </span>);

};

// Parses display strings like '13', '300', '$7M', '6,000+' into {prefix, number, suffix}
const parseMetric = (s) => {
  const cleaned = String(s).replace(/,/g, '');
  const m = cleaned.match(/^([^\d-]*)(-?\d+(?:\.\d+)?)(.*)$/);
  if (!m) return { prefix: '', number: 0, suffix: String(s) };
  return { prefix: m[1], number: parseFloat(m[2]), suffix: m[3] };
};

// ============================================================
// Industries — editorial photo-tile grid on cream paper.
// Layout ported from solutions/commercial-solar SolIndustries;
// content (industries, descriptions, "Relevant solutions") is the
// home-page Industries data. Stamps dropped — index only.
// ============================================================
const INDUSTRIES_AMBER = '#D4A24C';

const IndustryTile = ({ href, name, img, why, clients }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={`/industries/${href}`}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        display: 'grid',
        gridTemplateRows: 'subgrid',
        gridRow: 'span 5',
        rowGap: 18,
        transition: 'transform 320ms var(--gi-ease)',
        transform: hover ? 'translate3d(0,-2px,0)' : 'none'
      }}>

      {/* PHOTO FRAME */}
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 3',
        overflow: 'hidden',
        background: 'var(--gi-wise-blue)',
        isolation: 'isolate'
      }}>
        <img
          src={img}
          alt={name}
          loading="lazy"
          style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            transform: hover ? 'scale(1.06)' : 'scale(1.02)',
            transition: 'transform 1.1s cubic-bezier(.2,.6,.2,1), filter 600ms ease'
          }} />

        {/* corner brackets (crop marks) */}
        {[
          { top: 10, left: 10, borderTopWidth: 1, borderLeftWidth: 1, t: hover ? 'translate(-3px,-3px)' : 'none' },
          { top: 10, right: 10, borderTopWidth: 1, borderRightWidth: 1, t: hover ? 'translate(3px,-3px)' : 'none' },
          { bottom: 10, left: 10, borderBottomWidth: 1, borderLeftWidth: 1, t: hover ? 'translate(-3px,3px)' : 'none' },
          { bottom: 10, right: 10, borderBottomWidth: 1, borderRightWidth: 1, t: hover ? 'translate(3px,3px)' : 'none' }
        ].map((b, i) => {
          const { t, ...pos } = b;
          return (
            <span
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                width: 18, height: 18,
                borderColor: '#f3f4f1', borderStyle: 'solid', borderWidth: 0,
                zIndex: 2, pointerEvents: 'none',
                mixBlendMode: 'screen',
                transform: t,
                transition: 'transform 320ms var(--gi-ease)',
                ...pos
              }} />
          );
        })}

        {/* index tag — bottom-left (stamp dropped per spec) */}
      </div>

      {/* BODY */}
      <h3 style={{
        margin: 0,
        font: '500 22px/26px var(--ff-sans)',
        letterSpacing: '-0.014em',
        color: 'var(--gi-deep-ink)',
        textWrap: 'balance'
      }}>{name}</h3>
      <p style={{
        margin: 0,
        font: '400 13.5px/22px var(--ff-sans)',
        color: 'var(--gi-slate)',
        textWrap: 'pretty'
      }}>{why}</p>
      {/* <p style={{
        margin: 0,
        font: '400 12.5px/20px var(--ff-sans)',
        color: 'var(--gi-graphite)',
        fontStyle: 'italic',
        textWrap: 'pretty'
      }}>{clients}</p> */}

      <div style={{
        borderTop: '1px solid rgba(15,33,51,0.16)',
        paddingTop: 14,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--ff-mono)', fontSize: 10.5,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--gi-deep-ink)', fontWeight: 500
      }}>
        <span>Explore industry</span>
        <span style={{
          color: INDUSTRIES_AMBER,
          transform: hover ? 'translateX(6px)' : 'none',
          transition: 'transform 300ms var(--gi-ease)',
          fontSize: 14
        }}>→</span>
      </div>
    </a>
  );
};

const Industries = () => {
  const rows = [
  {
    n: '01',
    name: 'Manufacturing',
    img: `${window.GI_BASE}assets/industries/manufacturing.webp`,
    why: 'Electricity is one of the largest controllable costs in continuous manufacturing. We work with Ontario operators to reduce consumption, size generation around actual facility demand, and build the infrastructure for long-term cost stability.',
    // clients: 'Ce De Candy · Elton Manufacturing · PinAcle Stainless Steel'
    href: 'manufacturing/'
  },
  {
    n: '02',
    name: 'Warehousing & Logistics',
    img: `${window.GI_BASE}assets/industries/warehousing_and_logistic.webp`,
    why: 'Distribution centres, fulfilment facilities, and intermodal terminals operate around the clock with rising electricity demand. We plan and deliver energy programmes around facility scale, demand-charge exposure, fleet electrification, and the cost of operational continuity.',
    // clients: 'Rabba Fine Foods · CJR Wholesale'
    href: 'warehousing/'
  },
  {
    n: '03',
    name: 'Food & Beverage',
    img: `${window.GI_BASE}assets/industries/food_and_beverage.webp`,
    why: 'Food and beverage facilities operate around refrigeration loads, sanitation schedules, HACCP requirements, and continuous production demands. We plan and implement energy programs around those operational constraints.',
    // clients: 'Rabba Fine Foods · Sunny Crunch Foods · Gerber Meats'
    href: 'food-and-beverage/'
  },
  {
    n: '04',
    name: 'Agriculture',
    img: `${window.GI_BASE}assets/industries/agriculture.webp`,
    why: 'We work with Ontario farm operators and agricultural businesses to reduce operating costs through solar, storage, LED lighting, and electrical upgrades — planned around drying, irrigation, ventilation, and the broader agricultural year.',
    // clients: 'Tilecroft Farms · R Brush Farms · Holland Acres'
    href: 'agriculture/'
  },
  {
    n: '05',
    name: 'Commercial Real Estate',
    img: `${window.GI_BASE}assets/industries/reits.webp`,
    why: 'We work with Canadian commercial real estate owners, asset managers, and finance teams to reduce operating costs through solar, storage, LED lighting, recommissioning, and electrical upgrades — planned around NOI, BEPS compliance, and long-term asset value.',
    // clients: 'Solar · BESS · PPA · EV'
    href: 'real-estate/'
  },
  {
    n: '06',
    name: 'Government & Institutional',
    img: `${window.GI_BASE}assets/industries/government.webp`,
    why: 'Municipal, social housing, and institutional energy projects operate on longer decision timelines and have additional procurement requirements. We plan and deliver energy programs around BEPS compliance, net-zero commitments, and public procurement frameworks.',
    // clients: 'Solar · BESS · Energy Audit · EV'
    href: 'government/'
  }];

  return (
    <section
      id="industries"
      data-gi-resp="industries"
      className="gi-section gi-section--light"
      style={{
        background: 'var(--gi-paper-cream)',
        padding: '0 0 128px',
        position: 'relative',
        overflow: 'hidden'
      }}>

      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px', position: 'relative' }}>

        {/* Header — eyebrow + headline left, sub right (SolIndustries layout, home content) */}
        <div data-gi-resp="industries-head" data-gi-reveal style={{
          display: 'grid',
          gridTemplateColumns: '1.05fr 1fr',
          columnGap: 80,
          alignItems: 'end',
          paddingBottom: 56
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow className="gi-eyebrow--green">Industries we serve</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/52px var(--ff-sans)',
              letterSpacing: '-0.026em',
              color: 'var(--gi-deep-ink)',
              margin: 0,
              textWrap: 'balance',
              maxWidth: 640
            }}>
              Engineered around your operating profile.
            </h2>
          </div>
          <div style={{
            display: 'flex',
            justifyContent: 'flex-end',
            alignItems: 'flex-end',
            gap: 32
          }}>
            <p style={{
              font: '400 18px/30px var(--ff-sans)',
              color: 'var(--gi-slate)',
              margin: 0,
              maxWidth: '42ch',
              textWrap: 'pretty'
            }}>
              Energy use and operating profiles vary across commercial and industrial facilities. We design energy systems around actual building usage to ensure proper sizing and alignment with how your facility operates.
            </p>
          </div>
        </div>

        {/* TILE GRID */}
        <div
          data-gi-reveal-stagger
          data-gi-resp="industries-grid"
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '32px 32px'
          }}>
          {rows.map((r) =>
            <IndustryTile key={r.n} {...r} />
          )}
        </div>
      </div>
    </section>);

};

// ============================================================
// FeaturedProject — wise-blue dark. One image, one headline, one paragraph.
// ============================================================
const FeaturedProject = () =>
<section data-gi-resp="featured" className="gi-section gi-section--dark" style={{
  background: 'var(--gi-wise-blue)', color: '#fff',
  padding: '90px 0 140px'
}}>
    <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>

      <SectionHeader
      onDark
      eyebrowClassName="gi-eyebrow--gold"
      eyebrow="Featured project"
      title="Ce De Candy · thirteen-year program."
      sub="A layered energy strategy for a single Canadian manufacturer — audits, rooftop solar, LED retrofits, and process upgrades, rebuilt around the facility's real load curve." />
    

      <div style={{
      marginTop: 80, position: 'relative',
      height: 620, overflow: 'hidden',
      background: 'var(--gi-deep-ink)'
    }}>
        <img
        src={`${window.GI_BASE}assets/projects/sunny-crunch-593kw-photo.png`}
        alt="593 kW commercial rooftop solar installation at Sunny Crunch Foods manufacturing facility in Markham, Ontario"
        style={{
          width: '100%', height: '100%', objectFit: 'cover',
          filter: 'saturate(0.98) contrast(1.02)'
        }} />
      
        {/* Minimal location tag — one micro-label, used with meaning */}
        <div style={{
        position: 'absolute', bottom: 24, left: 24,
        padding: '10px 16px',
        background: 'rgba(10,24,45,0.72)', backdropFilter: 'blur(8px)',
        fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
        color: '#fff', fontWeight: 500
      }}>CE DE CANDY · HAMILTON, ON · 2012 — PRESENT</div>
      </div>

      {/* Project metrics — clean horizontal row, sits above final paragraph */}
      <div style={{
      marginTop: 80,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      borderTop: '1px solid rgba(255,255,255,0.2)',
      borderBottom: '1px solid rgba(255,255,255,0.2)'
    }}>
        {[
      { big: '$7.2M', small: 'Verified lifetime savings to date' },
      { big: '63%', small: 'Reduction in grid electricity purchase' },
      { big: '11', small: 'Discrete projects delivered since 2012' },
      { big: '4.2yr', small: 'Blended payback across the program' }].
      map((m, i) =>
      <div key={i} style={{
        padding: '44px 32px 44px 0',
        borderRight: i < 3 ? '1px solid rgba(255,255,255,0.2)' : 'none',
        paddingLeft: i > 0 ? 40 : 0
      }}>
            <div style={{
          font: '500 56px/1 var(--ff-sans)', letterSpacing: '-0.035em',
          color: '#fff', marginBottom: 14, whiteSpace: 'nowrap'
        }}>{m.big}</div>
            <div style={{
          font: '400 13.5px/22px var(--ff-sans)', color: 'rgba(255,255,255,0.7)',
          maxWidth: 220, textWrap: 'pretty'
        }}>{m.small}</div>
          </div>
      )}
      </div>

      {/* Engineering flow — structured project breakdown */}
      <div style={{
      marginTop: 96,
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
      columnGap: 48
    }}>
        {[
      {
        step: '01',
        label: 'Baseline',
        heading: 'Facility load analysis',
        body: 'Twelve months of interval data reviewed. Peak demand, process loads, and seasonal patterns mapped.'
      },
      {
        step: '02',
        label: 'Efficiency first',
        heading: 'Consumption reduced',
        body: 'LED retrofit, compressed-air repairs, and BAS recommissioning cut baseline load 22% before generation was sized.'
      },
      {
        step: '03',
        label: 'Generation',
        heading: 'Rooftop PV sized to load',
        body: 'A 480 kW rooftop array was specified against the post-efficiency curve — not the original consumption.'
      },
      {
        step: '04',
        label: 'Verified outcome',
        heading: 'Measured performance',
        body: 'Production, consumption, and savings are metered monthly. Thirteen-year figures reflect billed outcomes.'
      }].
      map((s, i) =>
      <div key={s.step} style={{
        paddingTop: 28,
        borderTop: '1px solid rgba(255,255,255,0.22)'
      }}>
            <div style={{
          display: 'flex', alignItems: 'baseline', gap: 10,
          marginBottom: 18
        }}>
              <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11,
            letterSpacing: '0.14em', fontWeight: 500,
            color: 'var(--gi-sage-accent)'
          }}>{s.step}</span>
              <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11,
            letterSpacing: '0.14em', fontWeight: 500,
            textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.6)'
          }}>{s.label}</span>
            </div>
            <h4 style={{
          font: '500 19px/26px var(--ff-sans)', letterSpacing: '-0.01em',
          color: '#fff', margin: '0 0 12px', textWrap: 'balance'
        }}>{s.heading}</h4>
            <p style={{
          font: '400 14px/22px var(--ff-sans)',
          color: 'rgba(255,255,255,0.72)',
          margin: 0, textWrap: 'pretty'
        }}>{s.body}</p>
          </div>
      )}
      </div>

      <div style={{ marginTop: 72 }}>
        <Button variant="onDark" size="md" href="/projects/" gtm={{ location: 'homepage-proof' }}>Read the full case study</Button>
      </div>
    </div>
  </section>;

// ============================================================
// ProjectsGrid — 2×2 photo cards with stat overlay and story body.
// Mirrors the Partners page "Proof Points" layout: photo with project
// index + headline stat on a gradient, sage top-rule, name, meta, body.
// Replaces the prior 4-up photo-only grid so home and partners share
// the same evidence pattern.
// ============================================================
const ProjectsGrid = () => {
  const projects = [
  {
    img: `${window.GI_BASE}assets/projects/ce-de-candy/cedecandy-full-load-offset.webp`,
    alt: 'Ce De Candy manufacturing facility, Newmarket, Ontario — 965 kW rooftop solar',
    stat: '$7M+',
    statLabel: 'Lifetime savings · 25-yr system life',
    name: 'Ce De Candy',
    meta: 'Manufacturing · Newmarket, ON · 965 kW',
    body: 'Combined efficiency and solar project on a 90,000 sq ft confection plant. Near-complete electricity offset, sized to the load curve rather than the roof.',
    href: '/projects/ce-de-candy/'
  },
  {
    img: `${window.GI_BASE}assets/projects/vicwest/vicwest.webp`,
    alt: 'Vicwest building products rooftop solar — 590 kW, Stratford, Ontario',
    stat: '$509K',
    statLabel: 'Incentives — three funding streams',
    name: 'Vicwest — Stratford',
    meta: 'Building products · Stratford, ON · 590 kW',
    body: 'Federal, provincial, and utility incentives stacked on a single project. Behind-the-meter generation matched to a 24/7 industrial load profile.',
    href: '/projects/vicwest/'
  },
  {
    img: `${window.GI_BASE}assets/projects/sunny-crunch/sunny-crunch.webp`,
    alt: 'Sunny Crunch Foods rooftop solar — 593 kW, Bowmanville, Ontario',
    stat: '4.6–7.6 yrs',
    statLabel: 'Typical payback · C&I solar',
    name: 'Sunny Crunch Foods',
    meta: 'Food manufacturing · Bowmanville, ON · 593 kW',
    body: 'Representative of the GI portfolio: 15%–21% IRR range across completed C&I solar projects, depending on facility size, load profile, and incentive eligibility.',
    href: '/projects/sunny-crunch-foods/'
  },
  {
    img: `${window.GI_BASE}assets/projects/syfilco/syfilco.webp`,
    alt: 'Syfilco textile manufacturer rooftop solar — Exeter, Ontario',
    stat: '15%+',
    statLabel: 'Total energy cost reduction',
    name: 'Syfilco',
    meta: 'Textile manufacturing · Exeter, ON',
    body: 'When efficiency and on-site generation are delivered together. GHG reduction of up to 38% documented across completed GI projects.',
    href: '/projects/syfilco/'
  }];


  return (
    <section id="projects" data-gi-resp="projects" className="gi-section gi-section--light" style={{
      background: 'var(--gi-paper-cream)', padding: '88px 0',
      borderTop: '1px solid rgba(15,33,51,0.08)'
    }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <SectionHeader
          eyebrowClassName="gi-eyebrow--green"
          eyebrow="Track record"
          title="Real projects. Real outcomes. Real numbers."
          sub="Every figure below is from a completed Green Integrations project — metered production, billed savings, and verified outcomes from facilities across Canada." />


        <div data-gi-resp="projects-grid" data-gi-reveal-stagger style={{
          marginTop: 80,
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28
        }}>
          {projects.map((p, i) =>
          <a
            key={p.name}
            className="gi-proj-card"
            href={p.href}
            style={{
              background: '#fff',
              border: '1px solid rgba(15,33,51,0.10)',
              display: 'flex', flexDirection: 'column',
              overflow: 'hidden',
              textDecoration: 'none', color: 'inherit', // Ensure text color is not changed on link
              cursor: 'pointer'
            }}
          >
            {/* Photo with index tag + stat overlay */}
            <div className="gi-proj-media" style={{
              position: 'relative', height: 320, overflow: 'hidden',
              background: 'var(--gi-wise-blue)'
            }}>
                <img
                src={p.img}
                alt={p.alt}
                style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  display: 'block',
                  filter: 'saturate(0.95) contrast(1.03)'
                }} />

                {/* Bottom gradient for stat legibility */}
                <div aria-hidden="true" style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(15,33,51,0) 40%, rgba(15,33,51,0.72) 100%)'
              }} />
                {/* Stat — bottom left */}
                <div style={{
                position: 'absolute', left: 24, bottom: 22, right: 24
              }}>
                  <div style={{
                  font: '500 56px/56px var(--ff-sans)',
                  letterSpacing: '-0.032em',
                  color: '#fff', margin: 0
                }}>{p.stat}</div>
                  <div style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 500,
                  letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: '#D4A24C', marginTop: 10
                }}>{p.statLabel}</div>
                </div>
              </div>

              {/* Card body */}
              <div style={{
              padding: '28px 32px 32px',
              display: 'flex', flexDirection: 'column', flex: 1,
              borderTop: '2px solid var(--gi-sage-accent)'
            }}>
                <h3 className="gi-proj-title" style={{
                font: '500 22px/28px var(--ff-sans)', letterSpacing: '-0.012em',
                color: 'var(--gi-deep-ink)', margin: '0 0 8px', textWrap: 'balance'
              }}>{p.name}</h3>
                <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--gi-sage-accent)', marginBottom: 16
              }}>{p.meta}</div>
                <p style={{
                font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)',
                margin: 0, textWrap: 'pretty'
              }}>{p.body}</p>
              </div>
            </a>
          )}
        </div>

        {/* Link out to full portfolio */}
        <div style={{
          marginTop: 56, display: 'flex', justifyContent: 'flex-start'
        }}>
          <a href="/projects/" style={{
            fontFamily: 'var(--ff-sans)', fontSize: 15, fontWeight: 500,
            letterSpacing: '-0.003em',
            padding: '16px 28px', borderRadius: 2,
            background: 'var(--gi-wise-blue)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', gap: 12,
            textDecoration: 'none'
          }}>
            See the full project portfolio
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>
      </div>
    </section>);

};

// ============================================================
// IncentivesTeaser — deep-ink, single clean header
// ============================================================
const IncentivesTeaser = () =>
<section id="incentives" data-gi-resp="incentives" className="gi-section gi-section--dark" style={{
  background: 'var(--gi-deep-ink)', color: '#fff',
  padding: '90px 0'
}}>
    <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <SectionHeader
      onDark
      eyebrowClassName="gi-eyebrow--gold"
      eyebrow="Solar & BESS incentives & rebates"
      title="Reducing upfront cost through stacked incentive programs."
      sub="Commercial solar energy incentives — including the Clean Technology ITC, 100% Enhanced Capital Cost Allowance, and Save on Energy programs — are integrated into project financial models to reduce upfront cost and accelerate payback." />
    

      <div data-gi-resp="incentives-grid" data-gi-reveal-stagger style={{
      marginTop: 104,
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
      alignItems: 'stretch'
    }}>
        {[
      {
        tier: 'Federal - Solar & BESS',
        amount: 'Up to 30%',
        title: 'Clean Technology Investment Tax Credit',
        detail: 'Refundable tax credit applied to eligible solar, storage, and electrification capital costs.'
      },
      {
        tier: 'Provincial - Solar',
        amount: 'Up to $860K',
        title: 'Ontario Save on Energy  Solar Load Displacement Program',
        detail: 'Incentives that support solar projects by funding systems that reduce baseline energy consumption and enable optimized system sizing.'
      },
      {
        tier: 'Federal - Solar & BESS',
        amount: '100% CCA',
        title: 'Enhanced First Year Capital Cost Allowance',
        detail: 'Accelerated depreciation that allows businesses to deduct eligible clean energy investments in the first year.'
      }].
      map((card) =>
      <article key={card.title} style={{
        background: 'rgba(255,255,255,0.03)',
        border: '1px solid rgba(255,255,255,0.14)',
        padding: '40px 36px 40px',
        display: 'flex', flexDirection: 'column',
        height: '100%'
      }}>
            <div style={{
          display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
          gap: 16, marginBottom: 32, flexShrink: 0
        }}>
              <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
            textTransform: 'uppercase',
            fontWeight: 500, color: "rgb(212, 162, 76)"
          }}>{card.tier}</span>
              <span style={{
            font: '500 24px/1 var(--ff-sans)', letterSpacing: '-0.02em',
            color: '#fff'
          }}>{card.amount}</span>
            </div>
            <h3 style={{
          font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.015em',
          color: '#fff', margin: '0 0 16px', textWrap: 'balance', flexShrink: 0
        }}>{card.title}</h3>
            <p style={{
          font: '400 15px/24px var(--ff-sans)',
          color: 'rgba(255,255,255,0.72)', margin: 0, textWrap: 'pretty', flex: 1
        }}>{card.detail}</p>
          </article>
      )}
      </div>

      <div style={{ marginTop: 56 }}>
        <Button variant="onDark" size="md" href="/resources/rebates-and-incentives/" gtm={{ location: 'homepage-incentives' }}>Estimate incentives for your facility</Button>
      </div>
    </div>
  </section>;


Object.assign(window, { ProvenAtScale, Industries, FeaturedProject, ProjectsGrid, IncentivesTeaser });