// cre2-page-3.jsx
// Commercial Real Estate Industry Page (v2) — Part 3
// Subsectors (6 property-type cards) + Discovery + FAQ + Closing CTA.

// ============================================================
// CreSubsectors — 6 commercial property types in a 3×2 grid.
// Cream background, stock-photo placeholders, headline + body per card.
// Mirrors the Agriculture page subsector tile format.
// ============================================================
const CRE_SUBSECTORS = [
  {
    n: '01', stamp: 'Tenant comfort · daytime load',
    title: 'Office Buildings',
    desc: 'Office properties rely on HVAC systems, lighting, elevators, and tenant operations to maintain occupant comfort and productivity. Energy strategies often focus on reducing operating costs while improving building performance and tenant satisfaction.',
    placeholder: 'OFFICE · TOWER',
    img: `${window.GI_BASE}assets/industries/office_buildings.webp`,
  },
  {
    n: '02', stamp: 'Variable occupancy · integrated systems',
    title: 'Mixed-Use Developments',
    desc: 'Mixed-use facilities combine retail, office, residential, and shared amenity spaces under one property. Managing varying occupancy schedules and energy demands requires integrated and flexible energy solutions.',
    placeholder: 'MIXED-USE · DEVELOPMENT',
    img: `${window.GI_BASE}assets/industries/mixed-use_developments.webp`,
  },
  {
    n: '03', stamp: 'Shared infrastructure · common areas',
    title: 'Multi-Tenant Commercial Properties',
    desc: 'Commercial plazas and multi-tenant properties support diverse tenant operations with varying electricity and HVAC requirements. Energy optimization can improve property efficiency while reducing common area operating expenses.',
    placeholder: 'PLAZA · MULTI-TENANT',
    img: `${window.GI_BASE}assets/industries/multi-tenant_commercial_properties.webp`,
  },
  {
    n: '04', stamp: 'Flex space · light industrial',
    title: 'Industrial Commercial Properties',
    desc: 'Industrial real estate facilities, including flex spaces and light industrial buildings, require energy for lighting, warehousing, HVAC, and operational equipment. Property owners increasingly prioritize efficiency and long-term asset value.',
    placeholder: 'INDUSTRIAL · FLEX',
    img: `${window.GI_BASE}assets/industries/industrial_commercial_properties.webp`,
  },
  {
    n: '05', stamp: 'Extended hours · refrigeration',
    title: 'Retail & Shopping Centres',
    desc: 'Retail properties depend on lighting, climate control, signage, refrigeration, and extended operating hours to support tenant operations and customer experience. Energy upgrades can significantly reduce operational overhead.',
    placeholder: 'RETAIL · CENTRE',
    img: `${window.GI_BASE}assets/industries/retail_centers.webp`,
  },
  {
    n: '06', stamp: 'Portfolio-scale · multi-site',
    title: 'Property Management & REIT Portfolios',
    desc: 'Large property portfolios require scalable energy strategies across multiple sites and building types. Asset managers often prioritize operational consistency, sustainability targets, and long-term cost predictability across their facilities.',
    placeholder: 'REIT · PORTFOLIO',
    img: `${window.GI_BASE}assets/industries/property_managers.webp`,
  },
];

const CreSubsectorTile = ({ s }) => {
  const [imgFailed, setImgFailed] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
      background: 'transparent',
      display: 'flex', flexDirection: 'column', gap: 0,
      height: '100%',
    }}>
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 3',
        overflow: 'hidden',
        background:
          'repeating-linear-gradient(45deg, rgba(15,33,51,0.04) 0 1px, transparent 1px 18px),' +
          'linear-gradient(135deg, var(--gi-wise-blue) 0%, #1B3450 100%)',
        border: '1px solid rgba(15,33,51,0.10)',
      }}>
        {!imgFailed && (
          <img
            src={s.img}
            alt={s.title}
            onError={() => setImgFailed(true)}
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%', objectFit: 'cover',
              display: 'block',
              filter: 'saturate(0.94) contrast(1.04)',
            }}
          />
        )}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(15,33,51,0.32) 0%, rgba(15,33,51,0.08) 36%, rgba(15,33,51,0.10) 100%)',
        }} />

        {/* corner crops */}
        {[
          { top: 10, left: 10 },
          { top: 10, right: 10 },
          { bottom: 10, left: 10 },
          { bottom: 10, right: 10 },
        ].map((c, i) => (
          <span key={i} aria-hidden="true" style={{
            position: 'absolute',
            top: c.top, left: c.left, right: c.right, bottom: c.bottom,
            width: 14, height: 14,
            borderTop:    c.top    != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderBottom: c.bottom != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderLeft:   c.left   != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
            borderRight:  c.right  != null ? '1.5px solid rgba(255,255,255,0.78)' : 'none',
          }} />
        ))}

        {/* stamp top-left */}
        <span style={{
          position: 'absolute', left: 14, top: 14,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '5px 9px',
          background: 'rgba(15,33,51,0.85)',
          backdropFilter: 'blur(4px)',
          fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.16em',
          textTransform: 'uppercase', color: '#fff', fontWeight: 500,
        }}>
          <span>{s.stamp}</span>
        </span>

        {imgFailed && (
          <div style={{
            position: 'absolute', inset: 0,
            display: 'grid', placeItems: 'center',
            color: 'rgba(255,255,255,0.50)',
            fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.20em',
            textTransform: 'uppercase', textAlign: 'center', padding: 16,
          }}>[ {s.placeholder} ]</div>
        )}
      </div>

      <h3 style={{
        font: '500 19px/26px var(--ff-sans)', letterSpacing: '-0.012em',
        color: 'var(--gi-deep-ink)', margin: '20px 0 10px',
        textWrap: 'balance',
      }}>{s.title}</h3>
      <p style={{
        font: '400 14px/22px var(--ff-sans)',
        color: 'var(--gi-slate)', margin: '0 0 16px', textWrap: 'pretty',
      }}>{s.desc}</p>

    {/* <div style={{
      marginTop: 'auto', paddingTop: 14,
      borderTop: '1px solid rgba(15,33,51,0.16)',
      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 application</span>
      <span aria-hidden="true" style={{
        color: 'var(--gi-amber)', fontSize: 14,
        transform: hover ? 'translateX(6px)' : 'none',
        transition: 'transform 300ms cubic-bezier(.2,.6,.2,1)',
      }}>→</span>
    </div> */}
    </article>
  );
};

const CreSubsectors = () => (
  <section data-screen-label="07 Subsectors" data-gi-resp="cre-subsectors" style={{
    background: 'var(--gi-paper-cream)', padding: '128px 0 0',
  }}>
    <div data-gi-resp="container" style={{
      maxWidth: 1440, margin: '0 auto', padding: '0 48px',
    }}>
      <div data-gi-reveal className="gi-section-head" style={{
        display: 'flex', justifyContent: 'space-between', gap: 96,
        alignItems: 'flex-end', marginBottom: 56,
      }}>
        <div>
          <div style={{ marginBottom: 22 }}>
            <Eyebrow className="gi-eyebrow--green">Sector applications</Eyebrow>
          </div>
          <h2 style={{
            font: '500 44px/52px var(--ff-sans)', letterSpacing: '-0.024em',
            color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
          }}>
            Different commercial properties.{' '}
            <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
              Different energy profiles.
            </span>
          </h2>
        </div>
        <p style={{
          font: '400 16px/26px var(--ff-sans)',
          color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
          textWrap: 'pretty',
        }}>
          Commercial real estate spans very different operating profiles — from
          single-tenant offices to multi-tenant plazas, mixed-use developments to
          retail centres, flex industrial to large REIT portfolios. Each calls for
          a different sequencing of measures.
        </p>
      </div>

      <div data-gi-reveal-stagger data-gi-resp="cre-subsectors-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        gap: '40px 28px',
      }}>
        {CRE_SUBSECTORS.map((s) => <CreSubsectorTile key={s.n} s={s} />)}
      </div>

      <div data-gi-resp="cre-subsectors-cta" style={{
        marginTop: 56, paddingTop: 32,
        borderTop: '1px solid rgba(15,33,51,0.18)',
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40,
        alignItems: 'center',
      }}>
        <p style={{
          font: '400 15px/24px var(--ff-sans)',
          color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty', maxWidth: 640,
        }}>
          Not sure which property type best describes your asset?{' '}
          <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic' }}>
            That&rsquo;s usually the right place to start a conversation.
          </span>{' '}
          A 20-minute call is enough to map your portfolio load profile against the right scope of work.
        </p>
        <div data-gi-resp="cre-subsectors-cta-buttons" style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          <Button target="_blank" variant="ink" size="md" href="https://zfrmz.com/y0HdnM9j70rWzPLTWfsA">Book a sector consult →</Button>
          <Button variant="outline" size="md" href="/projects/?category=cre">See all CRE projects</Button>
        </div>
      </div>
    </div>
  </section>
);


// ============================================================
// CreDiscovery — Our discovery process. 3 step cards on Paper Cream.
// ============================================================
const CreDiscovery = () => {
  const step02bullets = [
    'demand-charge exposure across HVAC and elevator loads',
    'common-area vs. tenant-metered consumption profile',
    'baseline emissions intensity for BEPS reporting',
    'potential solar, storage, and LED economics',
    'incentive and ITC eligibility against the asset model',
  ];

  return (
    <section data-screen-label="08 Our Discovery Process" data-gi-resp="cre-discovery" style={{
      background: 'var(--gi-paper-cream)', padding: '128px 0',
    }}>
      <div data-gi-resp="container" style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      }}>
        <div data-gi-reveal className="gi-section-head" data-gi-resp="cre-discovery-head" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80,
          alignItems: 'end', justifyItems: 'flex-end',
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow className="gi-eyebrow--green">Our discovery process</Eyebrow>
            </div>
            <h2 style={{
              font: '500 56px/62px var(--ff-sans)', letterSpacing: '-0.028em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
            }}>
              Start with a conversation.{' '}
              <span style={{ color: 'var(--gi-sage-accent)', fontStyle: 'italic', fontWeight: 400 }}>
                Not a commitment.
              </span>
            </h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
            textWrap: 'pretty',
          }}>
            Most commercial real estate assets already have enough utility and
            operational data to identify meaningful energy-saving opportunities.
            The first step is understanding how the asset consumes power across
            tenant operations, common areas, and base building systems — and
            where the strongest financial opportunities exist.
          </p>
        </div>

        <div data-gi-reveal-stagger data-gi-resp="cre-discovery-grid" style={{
          marginTop: 80,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {/* Step 01 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 01</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              textWrap: 'balance',
            }}>Quick 20-minute discovery call.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We review your asset type, portfolio profile, BEPS exposure, lease
              structure, and current energy concerns. No commitment required.
            </p>
          </article>

          {/* Step 02 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 02</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 14px',
              textWrap: 'balance',
            }}>12 months of utility bills.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: '0 0 16px', textWrap: 'pretty',
            }}>
              Interval and utility billing data — covering at least one full
              cooling season — help identify:
            </p>
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              {step02bullets.map((b) => (
                <li key={b} style={{
                  display: 'grid', gridTemplateColumns: '14px 1fr', gap: 12,
                  font: '400 14px/22px var(--ff-sans)',
                  color: 'var(--gi-deep-ink)',
                }}>
                  <span aria-hidden="true" style={{
                    width: 6, height: 6, marginTop: 8,
                    background: 'var(--gi-sage-accent)', display: 'inline-block',
                  }} />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </article>

          {/* Step 03 */}
          <article style={{
            background: 'var(--gi-paper-white)',
            border: '1px solid rgba(15,33,51,0.12)',
            padding: '40px 32px', display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 32,
            }}>
              <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.18em',
                color: 'var(--gi-amber)', fontWeight: 600,
              }}>STEP 03</span>
              <span aria-hidden="true" style={{
                flex: 1, height: 1, background: 'rgba(15,33,51,0.14)',
              }} />
            </div>
            <h3 style={{
              font: '500 24px/30px var(--ff-sans)', letterSpacing: '-0.014em',
              color: 'var(--gi-deep-ink)', margin: '0 0 16px',
              textWrap: 'balance',
            }}>Receive an asset opportunity overview.</h3>
            <p style={{
              font: '400 15px/24px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty',
            }}>
              We provide high-level insight into where solar, storage, LED
              lighting, recommissioning, or energy audits may create NOI and
              long-term value — alongside applicable incentive and ITC pathways.
            </p>
          </article>
        </div>

        <div data-gi-resp="cre-discovery-cta" style={{
          marginTop: 48, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
        }}>
          <Button target="_blank" variant="primary" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute discovery call</Button>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.10em',
            color: 'var(--gi-graphite)', textTransform: 'uppercase',
          }}>No commitment required.</span>
        </div>
      </div>
    </section>
  );
};


// ============================================================
// CreFAQ — Paper White. 5 sector questions specific to CRE.
// ============================================================
const CreFAQ = () => {
  const items = [
    {
      q: 'How does on-site solar actually affect commercial real estate asset value?',
      a: "Solar reduces the operating expense line that flows through to NOI.\n\nAt a typical CRE cap rate of 6%, every $100,000 of annual operating cost saved adds roughly $1.67M to asset value. The math is mechanical: NOI ÷ cap rate = asset value, so a permanent reduction in electricity expense compounds into the long-term valuation. For a fully owner-operated building, the impact is direct; for net-leased assets, the structure depends on how electricity costs flow through to tenants."
    },
    {
      q: 'What is BEPS and why does it matter for Ontario commercial real estate?',
      a: "BEPS — the Building Emissions Performance Standard — sets carbon-intensity limits for large commercial buildings on a defined compliance schedule.\n\nFailing to meet the standard attracts penalties, and increasingly affects financing access and institutional-investor disclosure requirements. On-site solar reduces a building's grid electricity consumption and the associated GHG emissions intensity — the input to BEPS calculations. The energy audit produces the documentation BEPS reporting requires."
    },
    {
      q: 'How is solar economic for a multi-tenant building where tenants pay their own electricity?',
      a: "The structure depends on the lease.\n\nWhere the landlord pays for common-area electricity, solar offsets that load directly. Where tenants pay separately, options include sizing solar to common-area load only, on-bill arrangements, or virtual net metering structures where applicable. We model the economics against your specific lease structure during the discovery process — most owners are surprised at how favourable the math is even on net-lease structures."
    },
    {
      q: 'What payback period should commercial real estate owners expect?',
      a: "On completed Green Integrations CRE projects, simple payback has typically ranged from 5–8 years before incentives, and 4–7 years after the federal Clean Technology ITC and accelerated CCA depreciation are applied.\n\nThe project IRR is what matters more than payback — and against a 30-year asset financial model, well-structured CRE energy projects typically deliver IRRs that exceed most other capital improvements on the asset."
    },
    {
      q: 'What incentives apply to commercial real estate energy projects in Canada?',
      a: "The full federal and provincial stack applies.\n\nHeadline programmes include the federal Clean Technology Investment Tax Credit (up to 30%), Enhanced First-Year CCA (100% accelerated depreciation), provincial saveONenergy / Save on Energy LED retrofit incentives, and IESO Demand Response programmes for assets with battery storage or flexible loads. We screen eligibility during the assessment and manage applications end-to-end alongside the project."
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section data-screen-label="09 FAQ" data-gi-resp="cre-faq" style={{ background: 'var(--gi-paper-white)', color: 'var(--gi-deep-ink)', padding: '128px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal data-gi-resp="cre-faq-head" style={{
          display: 'flex', justifyContent: 'space-between', gap: 96,
          alignItems: 'flex-end', marginBottom: 64,
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Questions from asset managers, owners &amp; finance teams</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
            }}>Frequently asked questions.</h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6,
          }}>
            Commercial real estate energy questions specific to Canadian asset operations.
          </p>
        </div>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: i === 0 ? '1px solid rgba(15,33,51,0.14)' : 'none',
                borderBottom: '1px solid rgba(15,33,51,0.14)',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} data-gi-resp="faq-trigger" style={{
                  width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: '32px 0', textAlign: 'left',
                  display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24, alignItems: 'center',
                  color: 'var(--gi-deep-ink)',
                }}>
                  <span style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.14em',
                    color: 'var(--gi-sage-accent)', fontWeight: 600,
                  }}>Q · {String(i+1).padStart(2, '0')}</span>
                  <h3 style={{
                    font: '500 22px/30px var(--ff-sans)', letterSpacing: '-0.014em',
                    color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance',
                  }}>{it.q}</h3>
                  <span style={{
                    fontFamily: 'var(--ff-sans)', fontSize: 26, fontWeight: 300,
                    color: 'var(--gi-deep-ink)', justifySelf: 'end',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform 260ms cubic-bezier(.2,0,0,1)', lineHeight: 1,
                  }}>+</span>
                </button>
                <div className="gi-faq-answer" data-open={isOpen ? 'true' : 'false'}>
                  <div className="gi-faq-answer-inner" data-gi-resp="faq-answer-inner" style={{
                    padding: isOpen ? '0 0 32px' : '0',
                    transition: 'padding 260ms cubic-bezier(0.4,0,0.2,1)',
                    display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24,
                  }}>
                    <span />
                    <p style={{
                      font: '400 16px/28px var(--ff-sans)',
                      color: 'var(--gi-slate)', margin: 0,
                      textWrap: 'pretty', maxWidth: 820, whiteSpace: 'pre-line',
                    }}>{it.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};


// ============================================================
// CreClosingCTA — Soft Green
// ============================================================
const CreClosingCTA = () => (
  <section data-screen-label="10 Closing CTA" data-gi-resp="cre-closing-cta" style={{
    background: 'var(--gi-soft-green)', color: '#fff',
    padding: '128px 0', position: 'relative', overflow: 'hidden',
  }}>
    <div aria-hidden="true" style={{
      position: 'absolute', right: -120, top: -120, opacity: 0.08, pointerEvents: 'none',
    }}>
      <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 640, height: 640 }} />
    </div>
    <div data-gi-resp="container" style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: 28 }}>
          <Eyebrow onDark className="gi-eyebrow--gold">Start your assessment</Eyebrow>
        </div>
        <h2 style={{
          font: '500 64px/70px var(--ff-sans)', letterSpacing: '-0.03em',
          color: '#fff', margin: 0, textWrap: 'balance',
        }}>
          Plan around your <span style={{ color: '#D4A24C' }}>asset</span>. Not against it.
        </h2>
        <p style={{
          font: '400 19px/30px var(--ff-sans)',
          color: 'rgba(255,255,255,0.86)', margin: '28px 0 44px', maxWidth: 720, textWrap: 'pretty',
        }}>
          A CRE asset assessment identifies what&rsquo;s addressable across HVAC,
          lighting, rooftop solar, EV charging, and recommissioning — and what
          the combined picture looks like once federal and provincial incentives
          are applied.
        </p>
        <div data-gi-resp="cre-closing-cta-buttons" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="onDark" size="lg" href="/about/contact/">Start your assessment</Button>
          <Button target="_blank" variant="outlineOnDark" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
        </div>
        <p data-gi-resp="cre-closing-cta-no-commitment" style={{
          font: '400 13px/20px var(--ff-sans)',
          color: 'rgba(255,255,255,0.62)', margin: '32px 0 0', fontStyle: 'italic',
        }}>
          No commitment required.
        </p>
      </div>
    </div>
  </section>
);

Object.assign(window, { CreSubsectors, CreDiscovery, CreFAQ, CreClosingCTA });