// ev-financial-cta.jsx
// Solutions Page (Commercial EV Charging) — Financial Outcomes,
// Planning Context, Industries, Testimonial, FAQ, Related, Closing CTA.

const EV_AMBER_LOCAL = '#D4A24C';
const EV_AMBER_SOFT_LOCAL = 'rgba(212,162,76,0.16)';

// ============================================================
// EvFinancial — "Proof in numbers" (Wise Blue).
// Visualises the economics of commercial EV charging infrastructure
// using the BESS-style 2-row graph layout:
//   Row 1 — Capex offset bar: Federal ITC (30%) + Accelerated CCA (100% Yr 1)
//   Row 2 — Demand-charge management bar + Fuel cost EV vs ICE slider
// Numbers carried forward from the prior table.
// ============================================================
const EV_SAGE_LOCAL = '#7FA88A';


// ============================================================
// EvPlanningSchematic — Stylized facility on Wise Blue.
// Shows rooftop solar, BESS pad, electrical service, and EV chargers.
// Each of the 4 content blocks lights up the relevant subset of
// physical elements + a flow indicator between them.
//   01 Demand-Charge Reduction      → Solar + Battery + flow
//   02 Reduced Utility Upgrades     → Battery + Service + grid-offset
//   03 Solar-Powered Charging       → Solar + EV chargers + flow
//   04 Infrastructure for Expansion → Whole-facility ring (all elements)
// ============================================================
const EvPlanningSchematic = ({ activeIndex }) => {
  const W = 540;
  const H = 420;

  const amber     = EV_AMBER_LOCAL;
  const amberFill = 'rgba(212,162,76,0.18)';
  const ink       = 'rgba(255,255,255,0.55)';
  const inkDim    = 'rgba(255,255,255,0.32)';
  const inkFaint  = 'rgba(255,255,255,0.18)';
  const inkText   = 'rgba(255,255,255,0.62)';

  // Which elements are lit for each zone
  const showAll   = activeIndex === 3;
  const isSolar   = activeIndex === 2 || showAll;
  const isBattery = activeIndex === 0 || activeIndex === 1 || showAll;
  const isService = activeIndex === 1 || showAll;
  const isEV      = activeIndex === 2 || showAll;
  // Demand-charge: solar charges battery, battery serves chargers
  const isDemandCombo = activeIndex === 0;
  const flowSolarBatt = activeIndex === 0 || showAll;
  const flowBattGrid  = activeIndex === 1 || showAll;
  const flowSolarEV   = activeIndex === 2 || showAll;

  // For zone 0, also light up solar (since solar feeds battery)
  const solarLit   = isSolar   || isDemandCombo;
  const batteryLit = isBattery;
  const evLit      = isEV      || isDemandCombo; // chargers are end-point

  // Markers — placed near the primary element of each zone
  const zones = [
    { id: 0, label: '01', cx: 270, cy: 200 }, // Demand-charge — middle of building (integration)
    { id: 1, label: '02', cx: 60,  cy: 178 }, // Reduced utility — at grid drop
    { id: 2, label: '03', cx: 270, cy: 78  }, // Solar-powered charging — on roof
    { id: 3, label: '04', cx: 502, cy: 388 }, // Expansion — bottom-right, whole facility
  ];

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%"
        style={{ display: 'block', overflow: 'visible', aspectRatio: `${W} / ${H}` }}
        aria-label="Stylized commercial facility with integrated solar, battery storage, electrical service, and EV charging">

        {/* Ground line + horizon */}
        <line x1="0" y1="302" x2={W} y2="302" stroke={ink} strokeWidth="1" />
        <line x1="0" y1="358" x2={W} y2="358" stroke={inkFaint} strokeWidth="1" strokeDasharray="2 4" />

        {/* Utility line from off-canvas top-left (the grid) */}
        <g opacity={isService ? 1 : 0.55}>
          <line x1="0" y1="50" x2="60" y2="50"
            stroke={isService ? amber : inkDim} strokeWidth="0.9" strokeDasharray="3 4" />
          <line x1="60" y1="50" x2="60" y2="226"
            stroke={isService ? amber : inkDim} strokeWidth="0.9" strokeDasharray="3 4" />
          {/* Crossed-out grid indicator when zone 02 active (reduced utility draw) */}
          {flowBattGrid && (
            <g>
              <circle cx="60" cy="50" r="6" fill="none" stroke={amber} strokeWidth="1" />
              <line x1="56" y1="46" x2="64" y2="54" stroke={amber} strokeWidth="1" />
              <line x1="64" y1="46" x2="56" y2="54" stroke={amber} strokeWidth="1" />
            </g>
          )}
          <text x="12" y="42"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={isService ? amber : inkText} letterSpacing="1.4">UTILITY GRID</text>
        </g>

        {/* Building outline */}
        <path d="M 80 302 L 80 118 L 270 78 L 460 118 L 460 302 Z"
          fill="rgba(255,255,255,0.04)" stroke={ink} strokeWidth="1.25" />

        {/* Production / floor area divider */}
        <line x1="340" y1="148" x2="340" y2="302" stroke={inkDim} strokeWidth="1" />
        <text x="400" y="200" textAnchor="middle"
          fontFamily="ui-monospace, monospace" fontSize="9" fill={inkText}
          letterSpacing="1.4">FACILITY</text>
        {[350, 370, 390, 410, 430].map(x => (
          <line key={`fin${x}`} x1={x} y1="156" x2={x} y2="172" stroke={inkDim} strokeWidth="0.75" />
        ))}
        <rect x="356" y="158" width="24" height="6" fill="none" stroke={inkDim} strokeWidth="0.75" />
        <rect x="396" y="158" width="24" height="6" fill="none" stroke={inkDim} strokeWidth="0.75" />

        {/* Roof solar panels */}
        <g opacity={solarLit ? 1 : 0.55}>
          {(() => {
            const panelLen   = 26;
            const panelThick = 2;
            const legH       = 5;
            const slope = 40 / 190;
            const angleDeg = Math.atan(slope) * 180 / Math.PI;
            const positions = [];
            for (let i = 0; i < 5; i++) {
              const cx = 110 + i * 30;
              const roofY = 118 - (cx - 80) * slope;
              positions.push({ cx, roofY, angle: -angleDeg, key: `L${i}` });
            }
            for (let i = 0; i < 5; i++) {
              const cx = 310 + i * 30;
              const roofY = 78 + (cx - 270) * slope;
              positions.push({ cx, roofY, angle: angleDeg, key: `R${i}` });
            }
            const panelStroke = solarLit ? amber : ink;
            const panelFill   = solarLit ? amber : ink;
            const legStroke   = solarLit ? amber : inkDim;
            return positions.map(({ cx, roofY, angle, key }) => {
              const x0 = cx - panelLen / 2;
              const x1 = cx + panelLen / 2;
              const yPanelTop = roofY - legH - panelThick;
              const yLegTop = roofY - legH;
              const legInset = 4;
              return (
                <g key={key} transform={`rotate(${angle} ${cx} ${roofY})`}>
                  <line x1={x0 + legInset} y1={yLegTop}
                        x2={x0 + legInset} y2={roofY}
                        stroke={legStroke} strokeWidth="0.9" />
                  <line x1={x1 - legInset} y1={yLegTop}
                        x2={x1 - legInset} y2={roofY}
                        stroke={legStroke} strokeWidth="0.9" />
                  <rect x={x0} y={yPanelTop}
                        width={panelLen} height={panelThick}
                        fill={panelFill} stroke={panelStroke} strokeWidth="0.6" />
                </g>
              );
            });
          })()}
        </g>

        {/* Solar label */}
        <text x="100" y="60"
          fontFamily="ui-monospace, monospace" fontSize="9"
          fill={solarLit ? amber : inkText} letterSpacing="1.4">SOLAR PV</text>

        {/* Outdoor BESS pad — Battery */}
        <g opacity={batteryLit ? 1 : 0.55}>
          <rect x="468" y="298" width="68" height="6"
            fill={batteryLit ? amber : ink}
            opacity={batteryLit ? 0.6 : 0.4} />
          <rect x="476" y="252" width="24" height="46"
            fill={batteryLit ? amberFill : 'transparent'}
            stroke={batteryLit ? amber : ink} strokeWidth="1" />
          <rect x="504" y="252" width="24" height="46"
            fill={batteryLit ? amberFill : 'transparent'}
            stroke={batteryLit ? amber : ink} strokeWidth="1" />
          {[0,1,2,3,4].map(i => (
            <line key={`vL${i}`} x1="479" y1={260 + i*7} x2="497" y2={260 + i*7}
              stroke={batteryLit ? amber : ink} strokeWidth="0.75" />
          ))}
          {[0,1,2,3,4].map(i => (
            <line key={`vR${i}`} x1="507" y1={260 + i*7} x2="525" y2={260 + i*7}
              stroke={batteryLit ? amber : ink} strokeWidth="0.75" />
          ))}
          {/* conduit from building wall into BESS */}
          <path d={`M 460 272 L 476 272`} fill="none"
            stroke={batteryLit ? amber : inkDim} strokeWidth="1"
            strokeDasharray="2 3" />
          <text x="502" y="246" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={batteryLit ? amber : inkText}
            letterSpacing="1.4">BESS</text>
        </g>

        {/* Electrical service room / panel — Service */}
        <g opacity={isService ? 1 : 0.55}>
          {/* main service box on left exterior wall */}
          <rect x="92" y="226" width="36" height="72"
            fill={isService ? amberFill : 'transparent'}
            stroke={isService ? amber : ink} strokeWidth="1" />
          {/* twin meter boxes */}
          <rect x="98" y="232" width="10" height="8"
            fill="none" stroke={isService ? amber : ink} strokeWidth="0.75" />
          <rect x="112" y="232" width="10" height="8"
            fill="none" stroke={isService ? amber : ink} strokeWidth="0.75" />
          {/* panelboard breaker rows */}
          {[0,1,2,3,4,5].map(i => (
            <line key={`br${i}`} x1={98} y1={250 + i*7} x2={122} y2={250 + i*7}
              stroke={isService ? amber : ink} strokeWidth="0.75" />
          ))}
          {/* drop from utility line */}
          <line x1="60" y1="226" x2="92" y2="240"
            stroke={isService ? amber : inkDim} strokeWidth="0.9" strokeDasharray="2 3" />
          <text x="110" y="220" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={isService ? amber : inkText}
            letterSpacing="1.4">PANEL</text>
        </g>

        {/* EV charging — front parking apron */}
        <g opacity={evLit ? 1 : 0.55}>
          {/* paved apron */}
          <rect x="148" y="304" width="244" height="44"
            fill={evLit ? amberFill : 'transparent'}
            stroke={evLit ? amber : inkDim}
            strokeWidth={evLit ? 1 : 0.75} />
          {/* stall divider lines */}
          {[180, 220, 260, 300, 340].map(x => (
            <line key={`stall${x}`} x1={x} y1="310" x2={x} y2="346"
              stroke={evLit ? amber : ink} strokeWidth="0.75" />
          ))}
          {/* EVSE pedestals — pole + head */}
          {[200, 240, 280, 320, 360].map(x => (
            <g key={`ev${x}`}>
              <line x1={x} y1="318" x2={x} y2="304"
                stroke={evLit ? amber : ink} strokeWidth="1" />
              <rect x={x - 4} y="298" width="8" height="8"
                fill={evLit ? amber : 'transparent'}
                stroke={evLit ? amber : ink} strokeWidth="0.9" />
              {/* connector pip */}
              <circle cx={x} cy="318" r="1.3"
                fill={evLit ? amber : ink} />
            </g>
          ))}
          <text x="270" y="368" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={evLit ? amber : inkText}
            letterSpacing="1.4">EV CHARGERS</text>
        </g>

        {/* ============================================================
            FLOW INDICATORS — drawn on top of everything else
           ============================================================ */}

        {/* Solar → Battery (zone 01: Demand-Charge Reduction) */}
        {flowSolarBatt && (
          <g>
            <path d="M 410 88 Q 510 140 510 248"
              fill="none" stroke={amber} strokeWidth="1.2"
              strokeDasharray="4 4" opacity="0.9" />
            <polygon points="510,250 506,242 514,242" fill={amber} />
          </g>
        )}

        {/* Solar → EV chargers (zone 03: Solar-Powered Charging) */}
        {flowSolarEV && (
          <g>
            <path d="M 200 96 Q 200 200 200 295"
              fill="none" stroke={amber} strokeWidth="1.2"
              strokeDasharray="4 4" opacity="0.9" />
            <polygon points="200,298 196,290 204,290" fill={amber} />
            <path d="M 340 96 Q 340 200 340 295"
              fill="none" stroke={amber} strokeWidth="1.2"
              strokeDasharray="4 4" opacity="0.7" />
            <polygon points="340,298 336,290 344,290" fill={amber} />
          </g>
        )}

        {/* Battery → Panel offset (zone 02: Reduced Utility Upgrades) */}
        {flowBattGrid && (
          <g>
            <path d="M 476 268 Q 300 280 132 268"
              fill="none" stroke={amber} strokeWidth="1.2"
              strokeDasharray="4 4" opacity="0.9" />
            <polygon points="130,268 138,264 138,272" fill={amber} />
          </g>
        )}

        {/* Battery → EV chargers (zone 01: Demand-Charge Reduction, peak shaving) */}
        {isDemandCombo && (
          <g>
            <path d="M 476 280 Q 400 308 392 326"
              fill="none" stroke={amber} strokeWidth="1.2"
              strokeDasharray="4 4" opacity="0.9" />
            <polygon points="391,328 397,322 388,320" fill={amber} />
          </g>
        )}

        {/* Whole-facility ring — zone 04 expansion */}
        {showAll && (
          <rect x="44" y="40" width="488" height="340" fill="none"
            stroke={amber} strokeWidth="1.25" strokeDasharray="4 5" />
        )}

        {/* Numbered markers (drawn last, on top) */}
        {zones.map((z, i) => {
          const isActive = i === activeIndex;
          return (
            <g key={z.id}>
              <circle cx={z.cx} cy={z.cy} r={isActive ? 13 : 11}
                fill={isActive ? amber : 'var(--gi-wise-blue, #15334E)'}
                stroke={isActive ? amber : 'rgba(255,255,255,0.78)'} strokeWidth="1.25" />
              <text x={z.cx} y={z.cy + 3} textAnchor="middle"
                fontFamily="ui-monospace, monospace" fontSize="10" fontWeight="600"
                letterSpacing="0.5"
                fill={isActive ? 'var(--gi-wise-blue, #15334E)' : 'rgba(255,255,255,0.92)'}>
                {z.label}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

// ============================================================
// EvPlanning — Wise Blue interactive facility schematic + 4 content blocks.
// Hovering either side (map marker or content block) highlights the same zone.
// ============================================================
const EvPlanning = () => {
  const blocks = [
    {
      label: 'Demand-Charge Reduction',
      icon: 'activity',
      body: 'Solar generation offsets daytime charging demand while battery storage dispatches during peak charging periods—helping flatten facility demand spikes and reduce monthly demand charges.'
    },
    {
      label: 'Reduced Utility Upgrades',
      icon: 'zap-off',
      body: 'Battery storage can reduce the peak electrical demand placed on the grid, helping facilities avoid or defer costly utility infrastructure upgrades, transformer replacements, and service capacity expansions.'
    },
    {
      label: 'Solar-Powered Charging',
      icon: 'sun',
      body: 'Daytime EV charging aligns naturally with commercial solar production. Co-locating solar with EV infrastructure reduces net charging costs and improves long-term energy economics.'
    },
    {
      label: 'Infrastructure Designed for Expansion',
      icon: 'layers',
      body: 'Integrated systems allow facilities to scale fleet electrification over time while planning electrical infrastructure, charging loads, solar generation, and battery capacity together from the start.'
    }
  ];

  const [active, setActive] = React.useState(0);

  // Zone caption strings — element subset summary
  const captions = [
    { zone: 'Solar + Battery', flow: 'Peak demand flattened' },
    { zone: 'Battery + Service Panel', flow: 'Grid draw reduced' },
    { zone: 'Solar + EV Chargers', flow: 'Daytime self-supply' },
    { zone: 'Whole facility', flow: 'Designed for growth' },
  ];

  return (
    <section data-gi-resp="ev-planning" style={{ background: '#FBFBF9', color: 'var(--gi-deep-ink)', padding: '128px 0', position: 'relative', overflow: 'hidden' }}>
      {/* Decorative grid-rule pattern, bottom right */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: 0, top: 0,
        width: 480, height: 360,
        backgroundImage: 'linear-gradient(to right, rgba(212,162,76,0.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(212,162,76,0.16) 1px, transparent 1px)',
        backgroundSize: '48px 48px',
        maskImage: 'linear-gradient(to bottom left, #000, transparent 75%)',
        WebkitMaskImage: 'linear-gradient(to bottom left, #000, transparent 75%)',
        pointerEvents: 'none', zIndex: 0
      }} />

      <div data-gi-resp="container" style={{ position: 'relative', zIndex: 1, maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal style={{ display: 'flex', justifyContent: 'space-between', gap: 96, alignItems: 'center', marginBottom: 64 }}>
          <div>
            <div style={{ marginBottom: 22 }}><Eyebrow>Integrated energy infrastructure</Eyebrow></div>
            <h2 style={{ font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em', color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance' }}>
              The future of EV charging is{' '}
              <span style={{ color: EV_AMBER_LOCAL }}>integrated energy infrastructure</span>.
            </h2>
          </div>
          <p style={{ font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6, textWrap: 'pretty' }}>
            When EV charging, solar, and battery storage are designed together,
            facilities can reduce grid dependency, flatten peak demand, and avoid
            portions of the utility infrastructure upgrades often triggered by
            large charging loads.
          </p>
        </div>

        {/* Two-column editorial split: interactive map (left) + 2x2 explanatory grid (right) */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 0,
          border: '1px solid rgba(15,33,51,0.10)',
          background: '#fff'
        }}>
          {/* LEFT — dark-blue interactive facility schematic */}
          <div style={{
            position: 'relative',
            background: 'var(--gi-wise-blue)',
            color: '#fff',
            padding: '32px 36px 28px',
            display: 'flex', flexDirection: 'column',
            minHeight: 640,
          }}>
            {/* Header strip */}
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              marginBottom: 18,
            }}>
              <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: EV_AMBER_LOCAL, fontWeight: 500,
              }}>INTEGRTED ENERGY SYSTEMS</div>
            </div>

            {/* SVG schematic — flex-grow to fill */}
            <div style={{
              flex: 1,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '8px 0',
            }}>
              <EvPlanningSchematic activeIndex={active} />
            </div>

            {/* Zone caption strip */}
            <div style={{
              marginTop: 24, paddingTop: 18,
              borderTop: '1px solid rgba(255,255,255,0.18)',
              display: 'flex', alignItems: 'center', gap: 16,
              minHeight: 36, flexWrap: 'wrap',
            }}>
              <span style={{
                font: '500 15px/22px var(--ff-sans)', color: '#fff',
                letterSpacing: '-0.005em', whiteSpace: 'nowrap',
              }}>{captions[active].zone}</span>
              <span aria-hidden="true" style={{
                width: 1, height: 14, background: 'rgba(255,255,255,0.22)',
              }} />
              <span style={{
                font: '400 14px/22px var(--ff-sans)',
                color: 'rgba(255,255,255,0.72)',
              }}>{captions[active].flow}</span>
            </div>
          </div>

          {/* RIGHT — 2×2 explanatory grid (hoverable) */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr' }}>
            {blocks.map((b, i) => {
              const isActive = active === i;
              return (
                <div
                  key={b.label}
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  tabIndex={0}
                  style={{
                    padding: '40px 36px',
                    borderBottom: i < 2 ? '1px solid rgba(15,33,51,0.10)' : 'none',
                    borderRight: i % 2 === 0 ? '1px solid rgba(15,33,51,0.10)' : 'none',
                    display: 'flex', flexDirection: 'column',
                    position: 'relative',
                    background: isActive ? 'rgba(212,162,76,0.06)' : 'transparent',
                    transition: 'background 220ms cubic-bezier(.2,0,0,1)',
                    cursor: 'default', outline: 'none',
                  }}>
                  {/* active accent stripe on left edge */}
                  <span aria-hidden="true" style={{
                    position: 'absolute', left: 0, top: 0, bottom: 0, width: 2,
                    background: EV_AMBER_LOCAL,
                    opacity: isActive ? 1 : 0,
                    transition: 'opacity 220ms cubic-bezier(.2,0,0,1)',
                  }} />
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24,
                  }}>
                    <div style={{
                      width: 40, height: 40,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      border: `1px solid ${isActive ? EV_AMBER_LOCAL : 'rgba(212,162,76,0.55)'}`,
                      background: isActive ? 'rgba(212,162,76,0.16)' : 'rgba(212,162,76,0.08)',
                      transition: 'background 220ms, border-color 220ms',
                    }}>
                      <i data-lucide={b.icon} style={{ width: 20, height: 20, strokeWidth: 1.4, color: EV_AMBER_LOCAL }} />
                    </div>
                    <span style={{
                      fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                      textTransform: 'uppercase', color: EV_AMBER_LOCAL, fontWeight: 600,
                    }}>0{i + 1}</span>
                  </div>
                  <div style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
                    textTransform: 'uppercase', color: EV_AMBER_LOCAL, fontWeight: 600,
                    marginBottom: 14
                  }}>{b.label}</div>
                  <p style={{ font: '400 14px/22px var(--ff-sans)', color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty' }}>
                    {b.body}
                  </p>
                </div>
              );
            })}
          </div>
        </div>

        <div style={{ marginTop: 56 }}>
          <Button variant="outline" size="md" href="/projects/">See our integrated projects →</Button>
        </div>
      </div>
    </section>
  );
};

// EvIndustries — Applications grid on Paper Cream
// Uses the SolIndustries editorial tile vocabulary (photo + brackets +
// stamp tag), translated to 6 EV application categories.
// ============================================================
const EvIndustryTile = ({ n, name, stamp, img, why }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        gap: 18,
        cursor: 'default',
        transition: 'transform 320ms var(--gi-ease)',
        transform: hover ? 'translate3d(0,-2px,0)' : 'none'
      }}>
      <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 */}
        {[
          { top: 10, left: 10, t: hover ? 'translate(-3px,-3px)' : 'none' },
          { top: 10, right: 10, t: hover ? 'translate(3px,-3px)' : 'none' },
          { bottom: 10, left: 10, t: hover ? 'translate(-3px,3px)' : 'none' },
          { bottom: 10, right: 10, t: hover ? 'translate(3px,3px)' : 'none' }
        ].map((b, i) => {
          const { t, ...pos } = b;
          const borderStyle = {};
          if (pos.top !== undefined) borderStyle.borderTopWidth = 1;
          if (pos.bottom !== undefined) borderStyle.borderBottomWidth = 1;
          if (pos.left !== undefined) borderStyle.borderLeftWidth = 1;
          if (pos.right !== undefined) borderStyle.borderRightWidth = 1;
          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, ...borderStyle
            }} />
          );
        })}

        {/* stamp tag */}
        <span style={{
          position: 'absolute', left: 0, bottom: 0, zIndex: 3,
          background: 'rgba(15,33,51,0.88)',
          color: '#f3f4f1',
          fontFamily: 'var(--ff-mono)', fontSize: 10,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          padding: '9px 14px',
          display: 'inline-flex', alignItems: 'center', gap: 10,
          backdropFilter: 'blur(2px)', fontWeight: 500
        }}>
          {stamp}
        </span>
      </div>

      <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>

      {/* <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 application</span>
        <span style={{
          color: EV_AMBER_LOCAL,
          transform: hover ? 'translateX(6px)' : 'none',
          transition: 'transform 300ms var(--gi-ease)',
          fontSize: 14
        }}>→</span>
      </div> */}
    </article>
  );
};

const EvIndustries = () => {
  const rows = [
    {
      n: '01', name: 'Condominiums', stamp: 'Multi-unit residential',
      img: `${window.GI_BASE}assets/industries/condominiums.webp`,
      why: 'Residential buildings with structured parking require charging infrastructure planned around suite count, electrical service capacity, and strata or ownership governance requirements.'
    },
    {
      n: '02', name: 'Warehouses & Logistics', stamp: 'Commercial fleets',
      img: `${window.GI_BASE}assets/industries/warehouses_logistics.webp`,
      why: 'Distribution and fulfilment facilities operate continuous loading schedules and increasing electric fleet requirements. Charging infrastructure is planned around operating hours, load management, and available electrical capacity.'
    },
    {
      n: '03', name: 'Retail Centers', stamp: 'Customer charging',
      img: `${window.GI_BASE}assets/industries/retail_centers.webp`,
      why: 'Retail properties with customer parking benefit from Level 2 charging stations that support longer dwell times. Infrastructure is planned around parking turnover, service capacity, and co-location with on-site solar where applicable.'
    },
    {
      n: '04', name: 'Office Buildings', stamp: 'Workplace charging',
      img: `${window.GI_BASE}assets/industries/office_buildings.webp`,
      why: 'Office and mixed-use properties require charging infrastructure for employees, tenants, and visitors — planned around daytime occupancy patterns, parking allocation, and building electrical capacity.'
    },
    {
      n: '05', name: 'Parking Facilities', stamp: 'Public & private',
      img: `${window.GI_BASE}assets/industries/parking_facilities.webp`,
      why: 'Stand-alone and structure-integrated parking facilities require charging systems scaled to stall count, turnover rate, and utility service constraints — with load management to control demand charges.'
    },
    {
      n: '06', name: 'Fleet Depots', stamp: 'Dedicated systems',
      img: `${window.GI_BASE}assets/industries/fleet_depots.webp`,
      why: 'Commercial and service vehicle depots require dedicated charging infrastructure planned around fleet size, overnight charge windows, vehicle mix, and connection to on-site solar or battery storage where applicable.'
    }
  ];

  return (
    <section data-gi-resp="ev-industries" id="applications" style={{
      background: 'var(--gi-paper-cream)', color: 'var(--gi-deep-ink)',
      padding: '128px 0', position: 'relative', overflow: 'hidden'
    }}>
      <div data-gi-resp="container" style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-ev-applications-head data-gi-reveal style={{
          display: 'flex', justifyContent: 'space-between', gap: 80,
          alignItems: 'center', paddingBottom: 56
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Applications</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/52px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720
            }}>
              EV charging infrastructure for{' '}
              <span className="gi-text-soft-green">commercial properties</span>.
            </h2>
          </div>
          <div style={{
            display: 'flex', justifyContent: 'center',
            alignItems: 'flex-end', gap: 32
          }}>
            <p style={{
              font: '400 14.5px/22px var(--ff-sans)', color: 'var(--gi-slate)',
              margin: 0, maxWidth: '42ch', textWrap: 'pretty'
            }}>
              Commercial EV charging applies across property types — from
              residential and office to retail, logistics, and fleet operations.
              The right scope depends on dwell time, vehicle mix, and electrical
              capacity.
            </p>
          </div>
        </div>

        <div
          data-gi-reveal-stagger
          data-ev-applications-grid
          style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: '40px 32px'
          }}>
          {rows.map(r => <EvIndustryTile key={r.n} {...r} />)}
        </div>

        <div style={{
          marginTop: 80, paddingTop: 36,
          borderTop: '1px solid rgba(15,33,51,0.18)',
          display: 'grid', gridTemplateColumns: '1fr auto',
          gap: 24, alignItems: 'center'
        }} data-gi-resp="audit-industries-cta">
          <p style={{
            font: '400 15px/24px var(--ff-sans)', color: 'var(--gi-slate)',
            margin: 0, maxWidth: '62ch'
          }}>
            Not sure where your facility fits?{' '}
            <span className="gi-text-soft-green">That's usually the right place to start a conversation.</span>{' '}
            A 20-minute call is enough to map your charging requirements against the right scope of work.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <Button target="_blank" variant="primary" size="md" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
            <Button variant="outline" size="md" href="/projects/">See all projects</Button>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// EvTestimonial — Markland · John Blanchard (on Wise Blue per doc)
// ============================================================
const EvTestimonial = () => (
  <section data-gi-resp="ev-testimonial" style={{ background: 'var(--gi-wise-blue)', color: '#fff', padding: '128px 0' }}>
    <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{ marginBottom: 44 }}><Eyebrow className="gi-eyebrow--gold">Client testimonial</Eyebrow></div>

      <div aria-hidden="true" style={{
        fontFamily: 'var(--ff-mono)', fontSize: 56, lineHeight: 1,
        color: EV_AMBER_LOCAL, marginBottom: 8
      }}>“</div>

      <p data-gi-resp="bess-testimonial-body" style={{
        font: '500 56px/64px var(--ff-sans)', letterSpacing: '-0.028em',
        color: '#fff', margin: '0 0 56px', textWrap: 'balance', maxWidth: 1100
      }}>
        Responsive and aligned with{' '}
        <span style={{
          background: `linear-gradient(180deg, transparent 62%, ${EV_AMBER_SOFT_LOCAL} 62%, ${EV_AMBER_SOFT_LOCAL} 92%, transparent 92%)`,
          padding: '0 4px'
        }}>operational constraints</span>.
      </p>

      <p style={{ font: '400 19px/30px var(--ff-sans)', color: 'rgba(255,255,255,0.78)', margin: '0 0 64px', maxWidth: 820, textWrap: 'pretty' }}>
        Green Integrations worked within our site requirements and timelines,
        delivering a professional and responsive experience from assessment
        through execution.
      </p>

      <div data-gi-resp="ev-testimonial-meta" style={{
        paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.22)',
        display: 'grid', gridTemplateColumns: 'repeat(3, auto) 1fr', gap: 80
      }}>
        {[
          { l: 'Client', v: 'John Blanchard' },
          { l: 'Company', v: 'Markland' },
          { l: 'Sector', v: 'Commercial Real Estate · Ontario' }
        ].map(b => (
          <div key={b.l}>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginBottom: 8 }}>{b.l}</div>
            <div style={{ font: '500 16px/24px var(--ff-sans)', color: '#fff' }}>{b.v}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============================================================
// EvFAQ — 7 questions on the soft accent surface
// ============================================================
const EvFAQ = () => {
  const items = [
    { q: 'What are the differences between Level 1, Level 2, and Level 3 EV chargers for commercial facilities?', a: 'Level 1 uses a standard 120V outlet and delivers 1.4–1.9 kW — roughly 8–12 km of range per hour. No electrical upgrade required. Suitable only for very small fleets with long overnight dwell times. Rarely specified for commercial installations.\n\nLevel 2 uses 208–240V AC and delivers 3.3–19.2 kW — typically 50–80 km of range per hour in commercial configurations. It is the standard for C&I facilities: employee parking, fleet vehicles, warehousing, retail. Qualifies for the federal Clean Technology Investment Tax Credit. May require a panel upgrade for larger deployments.\n\nLevel 3 (DC fast charging) delivers 50–350+ kW of DC power directly to the battery — 100–350 km of range in 30 minutes. Requires significant electrical infrastructure, typically a dedicated transformer. Best justified for high-throughput public charging, transit depots, or fleets requiring fast turnaround.\n\nFor most C&I facilities, Level 2 is the right starting point. Electrical infrastructure installed for Level 2 can often accommodate DC fast charging later without a full rebuild.' },
    { q: 'How does commercial EV charging affect a facility\u2019s electricity bill?', a: 'Without load management, EV charging can trigger peak demand charges — particularly when multiple vehicles charge simultaneously during high-demand periods.\n\nCharge scheduling software distributes charging across lower-demand periods, preventing the demand spikes that increase monthly billing. For facilities with battery storage, the storage system can buffer EV charging demand during peak hours.\n\nA properly designed charging system does not materially increase a facility\u2019s demand charges — but an unmanaged one can. This is why the electrical profile is assessed before any charger is specified.' },
    { q: 'What does BEPS mean for buildings with EV charging?', a: 'Ontario\u2019s Building Emissions Performance Standard sets carbon intensity limits for large commercial buildings. EV charging infrastructure supports BEPS compliance by enabling fleet electrification — reducing on-site fossil fuel use and documented scope 1 emissions.\n\nBuildings where EV charging is powered by renewable electricity from rooftop solar can document a direct emissions reduction relevant to BEPS reporting cycles.' },
    { q: 'What federal incentives are available for commercial EV charging?', a: 'The incentive stack for commercial EV charging in Canada typically includes:\n\nFederal Clean Technology Investment Tax Credit — up to 30%, refundable, on eligible EV charging infrastructure capital costs.\n\nAccelerated First-Year Capital Cost Allowance — 100% first-year CCA on eligible clean energy assets, enhancing depreciation in the year of acquisition.\n\nUtility & regional incentives — utility, municipal, and provincial funding programs that vary by region and availability.\n\nAll applicable incentives are identified and built into the project financial model as part of the assessment process.' },
    { q: 'Can we run EV charging from our rooftop solar system?', a: 'Yes—but commercial EV charging systems are not typically powered directly from solar panels alone.\n\nBecause solar production is intermittent, it may not align with when vehicles actually need to charge. Instead, rooftop solar, battery storage, EV charging infrastructure, and the building electrical system usually operate together in parallel as part of a broader energy system.\n\nDuring daytime hours, on-site solar generation can offset a portion of the facility’s electrical consumption—including EV charging demand—reducing grid consumption and helping lower peak demand charges.\n\nBattery storage adds additional flexibility by storing excess solar generation for later use during higher-demand charging periods or evening fleet charging windows.\n\nThis integrated approach provides a larger long-term benefit because the solar and battery systems continue supporting the building’s overall energy profile even when EV charging demand is low or inactive.\n\nWhen EV charging, solar, and battery storage are all in scope, the systems should be designed and financially modelled together to optimize electrical infrastructure sizing, operating costs, demand management, and long-term expansion planning.' },
    { q: 'How many EV chargers does a commercial facility need?', a: 'The number depends on fleet size, vehicle dwell time, and how much charge each vehicle needs per session. A Level 2 charger running for 8 hours delivers roughly 50–80 km of range — one charger per two or three vehicles is typically adequate for overnight fleet charging.\n\nFor employee parking or retail, charger count is based on the proportion of EV drivers and projected growth. The electrical assessment establishes how many chargers the existing infrastructure can support before upgrades are specified.' },
    { q: 'How long does commercial EV charging installation take?', a: 'A typical installation of 4–12 Level 2 chargers at a single site takes two to four weeks from permit approval to commissioning. Panel upgrades, if required, add two to four weeks.\n\nDC fast charging installations requiring transformer upgrades may take six to ten weeks. For multi-site fleet programs, installations are sequenced to minimize disruption at each location.\n\nAll permits, utility notifications, and ESA inspections are managed as part of the project scope.' }
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section data-gi-resp="ev-faq" style={{ background: 'var(--gi-accent-soft)', 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 style={{ display: 'flex', justifyContent: 'space-between', gap: 96, alignItems: 'end', marginBottom: 80 }}>
          <div>
            <div style={{ marginBottom: 22 }}><Eyebrow>Questions from operations directors and facility managers</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 }}>
            EV charging questions specific to commercial and fleet applications in Canada.
          </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.18)' : 'none',
                borderBottom: '1px solid rgba(15,33,51,0.18)'
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} data-gi-resp="faq-trigger" style={{
                  width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: '28px 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: EV_AMBER_LOCAL, fontWeight: 600 }}>Q · {String(i+1).padStart(2, '0')}</span>
                  <h3 style={{ font: '500 21px/28px var(--ff-sans)', letterSpacing: '-0.012em', color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance' }}>{it.q}</h3>
                  <span style={{
                    fontFamily: 'var(--ff-sans)', fontSize: 24, 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>
  );
};

// ============================================================
// EvRelated — 3 cards (Solar / Battery / Audits) on Paper Cream
// ============================================================
const EvRelated = () => {
  // Hrefs added per GI Link Audit (Fix 3).
  const items = [
    { name: 'Commercial Solar', icon: 'sun', href: '/solutions/commercial-solar/', why: 'On-site solar reduces the net operating cost of EV charging — particularly for daytime Level 2 fleet charging.' },
    { name: 'Battery Storage', icon: 'battery-charging', href: '/solutions/battery-storage/', why: 'Storage buffers EV charging demand to prevent demand-charge increases and enables overnight charging from solar.' },
    { name: 'Energy Audits', icon: 'clipboard-list', href: '/solutions/energy-audits/', why: 'An electrical capacity assessment establishes whether existing infrastructure can support EV charging without upgrades.' }
  ];
  return (
    <section data-gi-resp="ev-related" style={{ background: 'var(--gi-paper-cream)', padding: '128px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ marginBottom: 22 }}><Eyebrow>Often planned alongside EV</Eyebrow></div>
        <h2 style={{ font: '500 40px/46px var(--ff-sans)', letterSpacing: '-0.024em', color: 'var(--gi-deep-ink)', margin: '0 0 16px', textWrap: 'balance', maxWidth: 720 }}>
          Services that complement EV infrastructure.
        </h2>
        <p data-gi-resp="audit-related-body" style={{ font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)', margin: '0 0 72px', maxWidth: 560, textWrap: 'pretty' }}>
          Each integrates with the same assessment, financial model, and operating relationship.
        </p>

        <div data-gi-reveal-stagger style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {items.map(it => (
            <a key={it.name} href={it.href} className="gi-related-card" style={{
              display: 'flex', flexDirection: 'column',
              padding: '40px 28px 32px',
              background: '#fff',
              border: '1px solid rgba(15,33,51,0.10)',
              color: 'inherit', textDecoration: 'none',
              position: 'relative', overflow: 'hidden'
            }}>
              <div className="gi-related-icon" aria-hidden="true" style={{
                width: 56, height: 56, marginBottom: 36,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: '1px solid rgba(15,33,51,0.18)'
              }}>
                <Icon name={it.icon} size={26} color="var(--gi-deep-ink)" strokeWidth={1.4} />
              </div>
              <h3 className="gi-related-title" style={{ font: '500 22px/28px var(--ff-sans)', letterSpacing: '-0.018em', color: 'var(--gi-deep-ink)', margin: '0 0 12px' }}>{it.name}</h3>
              <p style={{ font: '400 14px/22px var(--ff-sans)', color: 'var(--gi-slate)', margin: '0 0 32px', textWrap: 'pretty', flexGrow: 1 }}>{it.why}</p>
              <span className="gi-related-cta" style={{
                font: '500 12px/22px var(--ff-mono)', letterSpacing: '0.14em',
                textTransform: 'uppercase',
                color: 'var(--gi-color-green)',
                display: 'inline-flex', alignItems: 'center', gap: 8
              }}>
                Explore <span className="gi-related-arrow" style={{ transition: 'transform 280ms cubic-bezier(0.4,0,0.2,1)', display: 'inline-block' }}>→</span>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// EvClosingCTA — Soft Green
// ============================================================
const EvClosingCTA = () => (
  <section data-gi-resp="ev-closing-cta" style={{ background: 'var(--gi-soft-green)', color: '#fff', padding: '128px 0', position: 'relative', overflow: 'hidden' }}>
    <div 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 your charging infrastructure{' '}
          <span style={{ color: EV_AMBER_LOCAL }}>before the deadline</span>.
        </h2>
        <p style={{ font: '400 19px/30px var(--ff-sans)', color: 'rgba(255,255,255,0.86)', margin: '28px 0 44px', maxWidth: 680, textWrap: 'pretty' }}>
          A facility assessment establishes electrical capacity, fleet requirements,
          and incentive eligibility — before any equipment is specified.
        </p>
        <div data-gi-resp="audit-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 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, {
  EvPlanning, EvIndustries,
  EvTestimonial, EvFAQ, EvRelated, EvClosingCTA
});