// ev-hero-process.jsx
// Solutions Page (Commercial EV Charging) — Hero, Service Overview, Proof Strip,
// Process, and Charger Levels comparison.
//
// Mirrors the BESS structure but introduces an EV-specific motif:
//   - the "charge ramp" sketch in the hero (replacing BESS demand-flatten)
//   - a connector pip motif (●—●) used as the section through-line
//   - an L1/L2/L3 levels comparison table — the page's editorial centerpiece
//
// User asked: hero on Soft Green, brand colors w/ amber accents, section colors
// matching Battery Storage. So the section sequence here is:
//   Soft Green (hero) → Cream → Wise Blue → Cream → Wise Blue (Levels) → Cream → ...

const EV_AMBER = 'var(--gi-color-green)';
const EV_AMBER_SOFT = 'rgba(212,162,76,0.16)';

// ============================================================
// EvHero — Soft Green brand surface, document-cover layout
// Tagged trio + editorial headline + small "charge ramp" sketch
// ============================================================
const EvHero = () =>
<section style={{
  position: 'relative',
  background: '#f3f4f1',
  color: 'var(--gi-deep-ink)',
  overflow: 'hidden',
  paddingTop: 0,
  paddingBottom: 0
}}>
    <div aria-hidden="true" style={{
    position: 'absolute', inset: 0,
    background: 'radial-gradient(1400px 700px at 12% 0%, rgba(15,33,51,0.04), transparent 65%)',
    pointerEvents: 'none'
  }} />

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

      {/* CATEGORY TAGLINE — three EV-specific positioning marks */}
      <div data-gi-reveal data-gi-resp="sol-tag-strip" style={{
      paddingTop: 80,
      display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center',
      fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
      textTransform: 'uppercase', color: 'var(--gi-slate)', fontWeight: 500
    }}>
        {['Fleet electrification', 'BEPS compliance', 'BATTERY STORAGE INTEGRATION'].map((t, i, arr) =>
      <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
            <span aria-hidden="true" style={{
          width: 6, height: 6,
          background: 'var(--gi-color-green)',
          boxShadow: '0 0 0 4px rgba(var(--gi-color-green), 0.18)',
          display: 'inline-block'
        }} />
            <span style={{ color: i === 0 ? EV_AMBER : 'var(--gi-slate)' }}>{t}</span>
            {i < arr.length - 1 && <span style={{ color: 'rgba(var(--gi-color-green), 0.30)', marginLeft: 16 }}>/</span>}
          </span>
      )}
      </div>

      {/* EDITORIAL HEADLINE */}
      <div data-sol-hero-editorial className="gi-hero-animate" style={{
      display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 96,
      paddingTop: 56, paddingBottom: 56,
      alignItems: 'end'
    }}>
        <h1 style={{
        font: '500 96px/96px var(--ff-sans)', letterSpacing: '-0.038em',
        color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 1080
      }}>
          Commercial EV charging for{' '}
          <span className="gi-text-soft-green">Canadian businesses</span>.
        </h1>

        <div>
          <div data-gi-resp="ev-hero-tagline" style={{
          fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'var(--gi-graphite)',
          fontWeight: 500, marginBottom: 18
        }}>INFRASTRUCTURE · DESIGNED FOR COMMERCIAL OPERATIONS</div>
          <p style={{ font: '400 17px/28px var(--ff-sans)', color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty' }}>We build  EV charging systems engineered around your facility’s electrical profile, operational requirements, and long-term energy goals—ensuring infrastructure that performs today and scales for the future.



        </p>

          <div data-gi-resp="audit-closing-cta-buttons" style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', marginTop: 32 }}>
            <Button size="md" href="/about/contact/">Start your assessment</Button>
            <Button variant="outline" size="md" href="/projects/">See our projects</Button>
          </div>
        </div>
      </div>

      <div style={{ paddingBottom: 32 }} />
    </div>

    {/* FULL-BLEED PHOTO PLATE */}
    <div style={{ position: 'relative' }}>
      <div className="gi-image-settle" style={{
      height: 520, position: 'relative', overflow: 'hidden',
      borderTop: '1px solid rgba(15,33,51,0.12)',
      borderBottom: '1px solid rgba(15,33,51,0.12)'
    }}>
        <img
        src="https://images.unsplash.com/photo-1593941707882-a5bba14938c7?auto=format&fit=crop&w=2400&q=80"
        alt="Commercial Level 2 EV charging station servicing fleet vehicles in a corporate parking facility — stock reference"
        style={{
          width: '100%', height: '100%', objectFit: 'cover',
          filter: 'saturate(0.92) contrast(1.04) brightness(0.96)'
        }} />
      </div>

      <div style={{ height: 80 }} />
    </div>
  </section>;

// ============================================================
// EvChargeSketch — small inline SVG; ramping kWh fill into a battery
// ============================================================
const EvChargeSketch = () =>
<svg width="180" height="56" viewBox="0 0 180 56" style={{ display: 'block' }} aria-hidden="true">
    <defs>
      <linearGradient id="ev-fill" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stopColor={EV_AMBER} stopOpacity="0.10" />
        <stop offset="100%" stopColor={EV_AMBER} stopOpacity="0.55" />
      </linearGradient>
    </defs>

    {/* grid baseline */}
    <line x1="0" y1="48" x2="180" y2="48" stroke="rgba(15,33,51,0.22)" strokeWidth="1" />
    <line x1="0" y1="22" x2="180" y2="22" stroke="rgba(15,33,51,0.10)" strokeWidth="1" strokeDasharray="2 4" />

    {/* unmanaged spike — faint dashed */}
    <path d="M0,46 L40,46 L42,12 L70,12 L72,46 L180,46"
  stroke="rgba(15,33,51,0.36)" strokeWidth="1.25" fill="none" strokeDasharray="2 3" />

    {/* managed ramp — smooth amber curve, gentle slope */}
    <path d="M0,46 C30,44 50,38 80,30 C110,22 140,18 180,16 L180,48 L0,48 Z"
  fill="url(#ev-fill)" />
    <path d="M0,46 C30,44 50,38 80,30 C110,22 140,18 180,16"
  stroke={EV_AMBER} strokeWidth="1.5" fill="none" strokeLinecap="round" />

    {/* battery cap at far right */}
    <rect x="158" y="10" width="18" height="14" fill="none" stroke={EV_AMBER} strokeWidth="1.25" />
    <rect x="176" y="14" width="3" height="6" fill={EV_AMBER} />

    {/* connector pip on the left — entry */}
    <circle cx="2" cy="46" r="2.4" fill="var(--gi-deep-ink)" />
    <circle cx="2" cy="46" r="6" fill="none" stroke="rgba(15,33,51,0.5)" strokeWidth="1" />
  </svg>;


// ============================================================
// EvServiceOverview — 4-card benefits block on Paper Cream
// Mirrors the SolBenefits "Four reasons rooftop pays for itself" pattern,
// translated for commercial EV charging.
// ============================================================
const EvBenefitsCard = ({ num, label, statValue, statUnit, title, body, accent = 'sage' }) => {
  const [hovered, setHovered] = React.useState(false);
  const accentColor = accent === 'amber' ? 'var(--gi-color-gold)' : 'var(--gi-sage-accent)';

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      data-gi-resp="audit-benefits-card"
      style={{
        position: 'relative',
        background: hovered ? '#fff' : '#FBFBF9',
        padding: '32px 28px 28px',
        display: 'flex', flexDirection: 'column', minHeight: 360,
        transition: 'background 220ms var(--gi-ease), transform 260ms var(--gi-ease), box-shadow 260ms var(--gi-ease)',
        transform: hovered ? 'translate3d(0, -2px, 0)' : 'none',
        boxShadow: hovered
          ? '0 24px 56px -22px rgba(15,33,51,0.22), 0 6px 16px -8px rgba(15,33,51,0.10)'
          : 'none',
        zIndex: hovered ? 2 : 1
      }}>
      <div aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: accentColor,
        opacity: hovered ? 1 : 0,
        transition: 'opacity 220ms var(--gi-ease)'
      }} />

      {/* number + stat row */}
      <div data-gi-resp="audit-benefits-card-stat-row" style={{
        display: 'flex', alignItems: 'flex-start',
        marginBottom: 16
      }}>
        {/* <span style={{
          fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
          fontWeight: 500, color: 'var(--gi-graphite)', paddingTop: 8
        }}>{num}</span> */}
        <div>
          <div data-gi-resp="audit-benefits-card-stat" style={{
            font: '500 34px/1 var(--ff-sans)', letterSpacing: '-0.030em',
            color: accentColor, fontFeatureSettings: '"tnum" 1', minHeight: 76,
          }}>{statValue}</div>
          {/* {statUnit && (
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.18em',
              color: 'var(--gi-graphite)', textTransform: 'uppercase', marginTop: 8
            }}>{statUnit}</div>
          )} */}
        </div>
      </div>

      <span style={{
        fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
        textTransform: 'uppercase', fontWeight: 500,
        color: 'var(--gi-sage-accent)', marginBottom: 14, display: 'block'
      }}>{label}</span>

      <h3 style={{
        font: '500 22px/28px var(--ff-sans)', letterSpacing: '-0.018em',
        color: 'var(--gi-deep-ink)', margin: '0 0 14px',
        textWrap: 'balance', minHeight: 56
      }}>{title}</h3>

      <p style={{
        font: '400 14.5px/22px var(--ff-sans)', color: 'var(--gi-slate)',
        margin: 0, textWrap: 'pretty', flex: 1
      }}>{body}</p>
    </div>
  );
};

const EvServiceOverview = () => {
  const cards = [
    {
      num: '01',
      accent: 'sage',
      statValue: 'Fleet Electrification', statUnit: 'Transportation electrification',
      label: 'TRANSPORTATION READINESS',
      title: 'Support electric fleet and operational vehicle charging.',
      body: 'EV infrastructure helps facilities prepare for fleet vehicles, service operations, and future transportation electrification.'
    },
    {
      num: '02',
      accent: 'sage',
      statValue: 'Property Modernization', statUnit: 'TENANT AMENITIES',
      label: 'TENANT AMENITIES',
      title: 'Add infrastructure modern tenants and employees expect.',
      body: 'Commercial charging stations improve property competitiveness and support workplace and visitor convenience.'
    },
    {
      num: '03',
      accent: 'sage',
      statValue: 'Incentive Funding', statUnit: 'Funding support',
      label: 'CAPITAL SUPPORT',
      title: 'Reduce project costs through available incentive programmes.',
      body: 'Federal and provincial funding can significantly offset EV charging infrastructure investments.'
    },
    {
      num: '04',
      accent: 'sage',
      statValue: 'Future Capacity', statUnit: 'Long-term planning',
      label: 'LONG-TERM PLANNING',
      title: 'Build electrical infrastructure designed for expansion.',
      body: 'Charging systems can be planned around future fleet growth, load management, and site capacity requirements.'
    }
  ];

  return (
    <section id="overview" style={{ background: 'var(--gi-paper-cream)', padding: '0', position: 'relative' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', top: 64, right: 48,
        display: 'flex', gap: 8, opacity: 0.5, pointerEvents: 'none'
      }}>
        {[0,1,2,3,4,5,6,7].map(n =>
          <span key={n} style={{
            width: 1, height: n % 2 === 0 ? 22 : 13,
            background: 'rgba(94,143,109,0.7)', display: 'block'
          }} />
        )}
      </div>

      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px', position: 'relative' }}>
        <div data-ev-benefits-head style={{
          display: 'flex', justifyContent: 'space-between',
          gap: 96, alignItems: 'center', marginBottom: 80
        }}>
          <div data-gi-reveal>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Why EV charging</Eyebrow>
            </div>
            <h2 style={{
              font: '500 56px/60px var(--ff-sans)', letterSpacing: '-0.028em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 760
            }}>
            Four reasons EV charging supports {' '}

            <span className="gi-text-soft-green">long-term facility value.</span>
            </h2>
          </div>
          <p data-gi-reveal style={{
            font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)',
            margin: 0, textWrap: 'pretty', maxWidth: 460, paddingBottom: 8
          }}>
            Commercial EV charging infrastructure supports fleet electrification, tenant expectations, and long-term property modernization — while positioning facilities for the next phase of transportation and energy transition.
          </p>
        </div>

        <div
          data-ev-benefits-grid
          data-gi-reveal-stagger
          style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 1,
            background: 'rgba(15,33,51,0.10)',
            border: '1px solid rgba(15,33,51,0.10)',
            boxShadow: '0 1px 0 rgba(15,33,51,0.04), 0 12px 28px -20px rgba(15,33,51,0.10)'
          }}>
          {cards.map(c => <EvBenefitsCard key={c.num} {...c} />)}
        </div>

        {/* Closing band */}
        <div
          data-gi-reveal
          data-ev-benefits-closing
          data-gi-resp="audit-benefits-closing"
          style={{
            marginTop: 80, paddingTop: 56,
            borderTop: '1px solid rgba(15,33,51,0.12)',
            display: 'grid', gridTemplateColumns: '1.1fr 1fr',
            gap: 96, alignItems: 'center'
          }}>
          <div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', fontWeight: 500,
              color: 'var(--gi-color-green)', marginBottom: 20,
              display: 'inline-flex', alignItems: 'center', gap: 12
            }}>
              <span aria-hidden="true" style={{
                width: 6, height: 6, background: 'var(--gi-color-green)',
                boxShadow: '0 0 0 4px rgba(var(--gi-color-green), 0.18)', display: 'inline-block'
              }} />
              Prepare your facility for electrification
            </div>
            <p style={{
              font: '400 19px/30px var(--ff-sans)', color: 'var(--gi-deep-ink)',
              margin: 0, textWrap: 'pretty', maxWidth: 680
            }}>
              Green Integrations designs and manages commercial EV charging projects
              including infrastructure planning, utility coordination, electrical
              design, incentives, and turnkey installation for commercial and
              industrial facilities across Canada.
            </p>
          </div>
          <div style={{
            display: 'flex', gap: 14, alignItems: 'center',
            flexWrap: 'wrap', justifyContent: 'flex-end'
          }}>
            {/* <Button variant="primary" size="lg" href="/about/contact/">Get your EV charging estimate</Button> */}
            <Button target="_blank" variant="outline" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// EvProofStrip — Wise Blue, 4 EV-specific markers
// "3 levels · BEPS · iZEV · Solar"
// ============================================================
const EvProofStrip = () => {
  const stats = [
  { big: '3', unit: 'levels', label: 'Level 1 · 2 · DC Fast', sub: 'The right level for your application — not a default upgrade' },
  { big: 'BEPS', label: 'Building Emissions Performance Standard', sub: 'Ontario carbon-intensity compliance — EV enables fleet electrification' },
  { big: 'iZEV', label: 'Federal fleet incentives', sub: 'Up to $5,000 per eligible electric vehicle for commercial use' },
  { big: '☀', label: 'Solar-powered charging', sub: 'On-site generation reduces the operating cost of EV charging' }];


  return (
    <section data-gi-resp="ev-proof-strip" style={{ background: 'var(--gi-wise-blue)', color: '#fff', padding: '128px 0', position: 'relative', overflow: 'hidden' }}>
      {/* Faint monogram watermark */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: -160, bottom: -160, opacity: 0.045,
        pointerEvents: 'none', zIndex: 0
      }}>
        <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 620, height: 620 }} />
      </div>

      {/* Charge-pulse strip — runs across the top */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: 'rgba(255,255,255,0.06)', overflow: 'hidden', zIndex: 0
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, height: 2, width: 220,
          background: `linear-gradient(90deg, transparent, ${EV_AMBER} 50%, transparent)`,
          animation: 'ev-charge-sweep 6.5s var(--gi-ease) infinite'
        }} />
      </div>

      <div data-gi-resp="container" style={{ position: 'relative', zIndex: 1, maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96,
          alignItems: 'end', marginBottom: 88
        }}>
          <div>
            <div style={{ marginBottom: 22 }}><Eyebrow onDark>Why EV infrastructure</Eyebrow></div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: '#fff', margin: 0, textWrap: 'balance'
            }}>
              The picture EV planning lives inside.
            </h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)', color: 'rgba(255,255,255,0.7)',
            margin: 0, maxWidth: 480, paddingBottom: 6, textWrap: 'pretty'
          }}>
            Charger choice, compliance, fleet incentives, and on-site generation —
            all four reshape what a charging project actually costs and returns.
          </p>
        </div>

        <div data-gi-reveal-stagger style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
          borderTop: '1px solid rgba(255,255,255,0.22)',
          borderBottom: '1px solid rgba(255,255,255,0.22)'
        }}>
          {stats.map((s, i) =>
          <div key={s.label} style={{
            padding: '56px 24px',
            borderRight: i < stats.length - 1 ? '1px solid rgba(255,255,255,0.18)' : 'none',
            paddingLeft: i === 0 ? 0 : 24,
            paddingRight: i === stats.length - 1 ? 0 : 24,
            position: 'relative',
            display: 'flex', flexDirection: 'column',
            minWidth: 0
          }}>
              <div style={{
              font: '500 56px/1 var(--ff-sans)', letterSpacing: '-0.035em',
              color: EV_AMBER, marginBottom: 24,
              whiteSpace: 'nowrap',
              fontFeatureSettings: '"tnum" 1',
              display: 'inline-flex', alignItems: 'baseline', gap: 10
            }}>
                <span>{s.big}</span>
                {s.unit && <span style={{ font: '500 18px/1 var(--ff-mono)', letterSpacing: '0.10em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>{s.unit}</span>}
              </div>
              <div style={{
              font: '500 14px/20px var(--ff-sans)', color: '#fff',
              marginBottom: 8, letterSpacing: '-0.005em'
            }}>{s.label}</div>
              <div style={{
              font: '400 13px/20px var(--ff-sans)',
              color: 'rgba(255,255,255,0.62)', textWrap: 'pretty'
            }}>{s.sub}</div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @keyframes ev-charge-sweep {
          0%   { transform: translateX(-220px); }
          50%  { transform: translateX(calc(100vw + 220px)); }
          100% { transform: translateX(calc(100vw + 220px)); }
        }
      `}</style>
    </section>);

};

// ============================================================
// EvProcess — 4 phases, 2x2 grid (matches BESS rhythm)
// ============================================================
const EvProcess = () => {
  const steps = [
  {
    num: '01', label: 'Electrical & Fleet Assessment', title: 'Assess', icon: 'gauge',
    copy: 'Existing electrical capacity, panel headroom, and available load are assessed alongside current and projected fleet size. Charger level (Level 1, 2, or DC fast) is confirmed based on vehicle dwell time, charge speed requirements, and electrical capacity.',
    deliv: 'Site electrical assessment + fleet capacity analysis + charger level recommendation'
  },
  {
    num: '02', label: 'Infrastructure Design', title: 'Design', icon: 'drafting-compass',
    copy: 'Charging system design covers charger type and quantity, placement, load management strategy, and integration with solar or storage where in scope. Incentive applications are prepared in parallel with the design.',
    deliv: 'System design + load management strategy + financial model + incentive applications'
  },
  {
    num: '03', label: 'Installation & Commissioning', title: 'Install', icon: 'hammer',
    copy: 'ESA-licensed installation covering panel upgrades where required, conduit and cabling, charger mounting, and network configuration. Commissioning includes charge management platform setup and driver orientation.',
    deliv: 'Commissioned charging system + charge management platform'
  },
  {
    num: '04', label: 'Ongoing Management', title: 'Operate', icon: 'activity',
    copy: 'Charge management software monitors utilisation, manages load to avoid demand-charge increases, and provides fleet operators with charging cost and utilisation reporting.',
    deliv: 'Charge management platform + ongoing monitoring + utilisation reporting'
  }];


  return (
    <section data-gi-resp="ev-process" id="process" style={{ background: 'var(--gi-paper-cream)', padding: '128px 0 144px' }}>
      <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: 'center', marginBottom: 80
        }}>
          <div>
            <div style={{ marginBottom: 22 }}><Eyebrow>The process</Eyebrow></div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance'
            }}>
              From electrical assessment to{' '}
              <span style={{ color: EV_AMBER }}>operational fleet</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 EV infrastructure is an electrical project first — site
            capacity, panel headroom, and load management are determined before
            a charger model is specified.
          </p>
        </div>

        <div data-gi-reveal-stagger style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 20
        }}>
          {steps.map((s) =>
          <div key={s.num} className="gi-process-cell" style={{
            display: 'grid',
            gridTemplateColumns: '160px 1fr',
            background: '#fff',
            border: '1px solid rgba(15,33,51,0.10)',
            minHeight: 220
          }}>
              <div className="gi-process-numeral-block" style={{
              background: 'var(--gi-soft-green)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative', overflow: 'hidden'
            }}>
                <span style={{
                font: '300 96px/1 var(--ff-sans)', letterSpacing: '-0.04em',
                color: '#fff', fontFeatureSettings: '"tnum" 1'
              }}>{s.num}</span>
                <span aria-hidden="true" style={{
                position: 'absolute', top: 14, left: 14,
                fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.16em',
                color: 'rgba(255,255,255,0.62)', textTransform: 'uppercase'
              }}>STEP</span>
                <span aria-hidden="true" style={{
                position: 'absolute', bottom: 14, right: 14,
                width: 6, height: 6, background: EV_AMBER,
                boxShadow: `0 0 0 4px rgba(212,162,76,0.18)`
              }} />
              </div>

              <div style={{ padding: '28px 32px', display: 'flex', flexDirection: 'column' }}>
                <span style={{
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
                color: EV_AMBER, fontWeight: 500,
                textTransform: 'uppercase', display: 'block', marginBottom: 10
              }}>{s.label}</span>
                <h3 style={{
                font: '500 26px/30px var(--ff-sans)', letterSpacing: '-0.018em',
                color: 'var(--gi-deep-ink)', margin: '0 0 12px'
              }}>{s.title}</h3>
                <p style={{
                font: '400 14px/22px var(--ff-sans)',
                color: 'var(--gi-slate)', margin: '0 0 16px', textWrap: 'pretty', flexGrow: 1
              }}>{s.copy}</p>
                <div style={{
                paddingTop: 12,
                borderTop: '1px dashed rgba(15,33,51,0.15)',
                display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'baseline'
              }} data-gi-resp="ev-process-deliv">
                  <span style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.16em',
                  color: 'var(--gi-graphite)', textTransform: 'uppercase'
                }}>Deliverable</span>
                  <span style={{
                  font: '500 13px/20px var(--ff-sans)',
                  color: 'var(--gi-deep-ink)'
                }}>{s.deliv}</span>
                </div>
              </div>
            </div>
          )}
        </div>

        <div style={{ marginTop: 40, textAlign: 'center' }}>
          <Button size="md" href="/about/contact/">Start your assessment</Button>
        </div>
      </div>
    </section>);

};

// ============================================================
// EvLevels — Wise Blue. Three-card comparison (L1 / L2 ★ / L3)
// Centerpiece editorial section — Level 2 highlighted in Soft Green
// ============================================================
const EvLevels = () => {
  const levels = [
  {
    tag: 'L1',
    name: 'Level 1',
    sub: '120V AC',
    power: '1.4 – 1.9 kW',
    range: '~8–12 km/hr',
    best: 'Vehicles parked 8–12+ hours overnight. Personal vehicles with low daily mileage.',
    ctx: 'Rarely specified for commercial installations. No electrical panel upgrade typically required. Limited to very low charge volume applications.',
    featured: false
  },
  {
    tag: 'L2',
    name: 'Level 2',
    sub: '208–240V AC',
    power: '3.3 – 19.2 kW',
    powerNote: '7–22 kW typical',
    range: '~50–80 km/hr',
    rangeNote: 'commercial config',
    best: 'Employee parking, fleet vehicles, retail, warehousing, hospitality. Vehicles parked 2–8 hours.',
    ctx: 'Standard commercial installation. Networked with load management. Qualifies for federal Clean Technology ITC. Electrical upgrade may be required for larger deployments.',
    featured: true,
    badge: '★ Most common'
  },
  {
    tag: 'L3',
    name: 'Level 3 · DC Fast',
    sub: '400–1,000V DC',
    power: '50 – 350+ kW',
    range: '~100–350 km',
    rangeNote: 'per 30 minutes',
    best: 'High-throughput public charging, transit depots, commercial fleets needing fast turnaround.',
    ctx: 'Significant electrical infrastructure required — typically a dedicated transformer. Higher capital cost. Best justified for high-utilisation or mandatory fast-charge applications.',
    featured: false
  }];


  return (
    <section data-gi-resp="ev-levels" id="levels" style={{ background: 'var(--gi-wise-blue)', color: '#fff', padding: '128px 0', position: 'relative', overflow: 'hidden' }}>
      {/* Decorative dotted-rule pattern, top right */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: 0, top: 0,
        width: 460, height: 320,
        backgroundImage: 'radial-gradient(rgba(212,162,76,0.18) 1px, transparent 1px)',
        backgroundSize: '24px 24px',
        maskImage: 'linear-gradient(to bottom left, #000, transparent 75%)',
        WebkitMaskImage: 'linear-gradient(to bottom left, #000, transparent 75%)',
        pointerEvents: 'none'
      }} />

      <div data-gi-resp="container" style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96,
          alignItems: 'end', marginBottom: 80, justifyItems: 'flex-end'
        }}>
          <div>
            <div style={{ marginBottom: 22 }}><Eyebrow onDark>EV charger levels</Eyebrow></div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: '#fff', margin: 0, textWrap: 'balance'
            }}>
              The right charger for{' '}
              <span style={{ color: EV_AMBER }}>your application</span>.
            </h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)', color: 'rgba(255,255,255,0.7)',
            margin: 0, maxWidth: 480, paddingBottom: 6, textWrap: 'pretty'
          }}>
            The right level depends on how long vehicles are parked, how much
            charge they need per session, and what the facility&rsquo;s electrical
            infrastructure can support.
          </p>
        </div>

        {/* Connector rail under the level cards */}
        <div aria-hidden="true" style={{
          height: 1, background: 'rgba(255,255,255,0.18)',
          marginBottom: 32, position: 'relative'
        }}>
          {[16, 50, 84].map((p, i) =>
          <span key={i} style={{
            position: 'absolute', left: `${p}%`, top: -3,
            width: 6, height: 6, background: i === 1 ? EV_AMBER : 'rgba(255,255,255,0.35)',
            transform: 'translateX(-50%)',
            boxShadow: i === 1 ? '0 0 0 4px rgba(212,162,76,0.18)' : 'none'
          }} />
          )}
        </div>

        {/* Three-card comparison */}
        <div data-gi-reveal-stagger style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
          alignItems: 'stretch'
        }}>
          {levels.map((l) => {
            const featured = l.featured;
            return (
              <div key={l.tag} style={{
                padding: '40px 32px 36px',
                background: featured ? 'var(--gi-soft-green)' : 'rgba(255,255,255,0.03)',
                border: featured ? '1px solid rgba(212,162,76,0.55)' : '1px solid rgba(255,255,255,0.16)',
                position: 'relative',
                display: 'flex', flexDirection: 'column',
                transform: featured ? 'translateY(-12px)' : 'none',
                boxShadow: featured ? '0 24px 60px -28px rgba(0,0,0,0.55)' : 'none'
              }}>
                {featured &&
                <div style={{
                  position: 'absolute', top: -14, left: 24,
                  background: EV_AMBER, color: 'var(--gi-deep-ink)',
                  fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.18em',
                  textTransform: 'uppercase', fontWeight: 600,
                  padding: '6px 12px'
                }}>{l.badge}</div>
                }

                <div style={{
                  display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 24
                }}>
                  <span style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                    color: featured ? EV_AMBER : EV_AMBER,
                    fontWeight: 600, padding: '4px 8px',
                    border: `1px solid ${featured ? 'rgba(255,255,255,0.45)' : 'rgba(212,162,76,0.5)'}`,
                    background: featured ? 'rgba(255,255,255,0.08)' : 'transparent'
                  }}>{l.tag}</span>
                  <span style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
                    color: 'rgba(255,255,255,0.62)', textTransform: 'uppercase'
                  }}>{l.sub}</span>
                </div>

                <h3 style={{
                  font: '500 30px/34px var(--ff-sans)', letterSpacing: '-0.02em',
                  color: '#fff', margin: '0 0 28px'
                }}>{l.name}</h3>

                {/* Power + range stat block */}
                <div style={{
                  display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
                  paddingBottom: 24, marginBottom: 24,
                  borderBottom: '1px dashed rgba(255,255,255,0.22)'
                }}>
                  <div>
                    <div style={{
                      fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
                      textTransform: 'uppercase',
                      color: 'rgba(255,255,255,0.5)', marginBottom: 8
                    }}>Power output</div>
                    <div style={{
                      font: '500 22px/26px var(--ff-sans)', letterSpacing: '-0.014em',
                      color: featured ? '#fff' : EV_AMBER
                    }}>{l.power}</div>
                    {l.powerNote && <div style={{
                      font: '400 12px/18px var(--ff-mono)', letterSpacing: '0.06em',
                      color: 'rgba(255,255,255,0.5)', marginTop: 4
                    }}>{l.powerNote}</div>}
                  </div>
                  <div>
                    <div style={{
                      fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
                      textTransform: 'uppercase',
                      color: 'rgba(255,255,255,0.5)', marginBottom: 8
                    }}>Range added</div>
                    <div style={{
                      font: '500 22px/26px var(--ff-sans)', letterSpacing: '-0.014em',
                      color: featured ? '#fff' : EV_AMBER
                    }}>{l.range}</div>
                    {l.rangeNote && <div style={{
                      font: '400 12px/18px var(--ff-mono)', letterSpacing: '0.06em',
                      color: 'rgba(255,255,255,0.5)', marginTop: 4
                    }}>{l.rangeNote}</div>}
                  </div>
                </div>

                <div style={{ marginBottom: 20 }}>
                  <div style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
                    textTransform: 'uppercase',
                    color: featured ? 'rgba(255,255,255,0.62)' : 'rgba(255,255,255,0.5)',
                    marginBottom: 10
                  }}>Best suited for</div>
                  <p style={{
                    font: '400 14px/22px var(--ff-sans)',
                    color: featured ? 'rgba(255,255,255,0.92)' : 'rgba(255,255,255,0.82)',
                    margin: 0, textWrap: 'pretty'
                  }}>{l.best}</p>
                </div>

                <div style={{ marginTop: 'auto' }}>
                  <div style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
                    textTransform: 'uppercase',
                    color: featured ? 'rgba(255,255,255,0.62)' : 'rgba(255,255,255,0.5)',
                    marginBottom: 10
                  }}>Commercial context</div>
                  <p style={{
                    font: '400 13px/20px var(--ff-sans)',
                    color: featured ? 'rgba(255,255,255,0.78)' : 'rgba(255,255,255,0.66)',
                    margin: 0, textWrap: 'pretty'
                  }}>{l.ctx}</p>
                </div>
              </div>);

          })}
        </div>

        {/* Bottom editorial note */}
        <div data-gi-reveal style={{
          marginTop: 64,
          padding: '32px 36px',
          borderLeft: `2px solid ${EV_AMBER}`,
          background: 'rgba(212,162,76,0.06)',
          display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32, alignItems: 'start'
        }} data-gi-resp="ev-levels-note">
          <div style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: EV_AMBER, fontWeight: 600,
            paddingTop: 4
          }}>Our take</div>
          <p style={{
            font: '400 17px/28px var(--ff-sans)', color: 'rgba(255,255,255,0.86)',
            margin: 0, textWrap: 'pretty'
          }}>
            For most commercial and industrial facilities in Canada,{' '}
            <span style={{ color: '#fff', fontWeight: 500 }}>Level 2 is the right starting point</span>.
            It provides adequate charging speed for typical fleet and employee dwell
            times, qualifies for federal incentives, and does not require the
            electrical infrastructure investment of DC fast charging. Level 3 is
            specified where the application demands it — not as a default upgrade.
          </p>
        </div>
      </div>
    </section>);

};

Object.assign(window, {
  EvHero, EvServiceOverview, EvProofStrip, EvProcess, EvLevels, EV_AMBER, EV_AMBER_SOFT
});