// ============================================================
// EvIntegratedMobile — MOBILE port of the desktop "Integrated energy
// infrastructure" section (EvPlanning) from ev-financial-cta.jsx.
//
// Desktop = interactive facility schematic (left) + 2×2 hover grid (right).
// Mobile keeps the SAME story & visual language but swaps hover for touch:
//   • Intro (eyebrow + headline + supporting copy), stacked
//   • Interactive diagram, always visible, the visual focus
//   • Solution cards as a horizontal swipe carousel below the diagram
//   • Swiping / tapping a card -> updates the active diagram zone
//   • Tapping a diagram marker -> scrolls the matching card into view
//   • Default active zone: 01 — Demand-Charge Reduction
// Copy, colours, type, iconography all carried over verbatim.
// ============================================================
const EV_AMBER_LOCAL_M = '#D4A24C';

const EV_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 EV_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' }
];

// ============================================================
// EvSchematicMobile — identical SVG schematic to desktop, with the
// numbered markers made tappable (large invisible hit targets).
// ============================================================
const EvSchematicMobile = ({ activeIndex, onSelectZone }) => {
  const W = 540;
  const H = 420;

  const amber     = EV_AMBER_LOCAL_M;
  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)';

  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;
  const isDemandCombo = activeIndex === 0;
  const flowSolarBatt = activeIndex === 0 || showAll;
  const flowBattGrid  = activeIndex === 1 || showAll;
  const flowSolarEV   = activeIndex === 2 || showAll;

  const solarLit   = isSolar   || isDemandCombo;
  const batteryLit = isBattery;
  const evLit      = isEV      || isDemandCombo;

  const zones = [
    { id: 0, label: '01', cx: 270, cy: 200 },
    { id: 1, label: '02', cx: 60,  cy: 178 },
    { id: 2, label: '03', cx: 270, cy: 78  },
    { id: 3, label: '04', cx: 502, cy: 388 }
  ];

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="auto"
        style={{ display: 'block', overflow: 'visible' }}
        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" />
          {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" />
          ))}
          <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}>
          <rect x="92" y="226" width="36" height="72"
            fill={isService ? amberFill : 'transparent'}
            stroke={isService ? amber : ink} strokeWidth="1" />
          <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" />
          {[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" />
          ))}
          <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}>
          <rect x="148" y="304" width="244" height="44"
            fill={evLit ? amberFill : 'transparent'}
            stroke={evLit ? amber : inkDim}
            strokeWidth={evLit ? 1 : 0.75} />
          {[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" />
          ))}
          {[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" />
              <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 ===== */}
        {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>
        )}
        {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>
        )}
        {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>
        )}
        {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>
        )}
        {showAll && (
          <rect x="44" y="40" width="488" height="340" fill="none"
            stroke={amber} strokeWidth="1.25" strokeDasharray="4 5" />
        )}

        {/* Numbered markers — tappable */}
        {zones.map((z, i) => {
          const isActive = i === activeIndex;
          return (
            <g key={z.id}
              onClick={() => onSelectZone && onSelectZone(i)}
              role="button" tabIndex={0}
              aria-label={`Show ${EV_BLOCKS[i].label}`}
              style={{ cursor: 'pointer' }}>
              {/* large invisible touch target */}
              <circle cx={z.cx} cy={z.cy} r="26" fill="transparent" />
              <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>
  );
};

// ============================================================
// EvIntegratedMobile — full mobile section
// ============================================================
const EvIntegratedMobile = () => {
  const [active, setActive] = React.useState(0);
  const scrollerRef = React.useRef(null);
  const cardRefs = React.useRef([]);
  const programmatic = React.useRef(false);
  const rafId = React.useRef(0);

  // (Re)draw lucide icons whenever the active card changes.
  React.useEffect(() => {
    const t = setTimeout(() => window.lucide && window.lucide.createIcons({ attrs: { 'stroke-width': 1.4 } }), 20);
    return () => clearTimeout(t);
  }, [active]);

  const scrollToCard = (i) => {
    const sc = scrollerRef.current;
    const card = cardRefs.current[i];
    if (!sc || !card) return;
    programmatic.current = true;
    const target = card.offsetLeft - (sc.clientWidth - card.clientWidth) / 2;
    const max = sc.scrollWidth - sc.clientWidth;
    const end = Math.max(0, Math.min(max, target));
    const start = sc.scrollLeft;
    const dist = end - start;

    // Programmatic smooth scroll via scrollTo() is unreliable next to
    // scroll-snap, so animate scrollLeft by hand. Snap is suspended during
    // the tween and restored after we land on a snap point.
    sc.style.scrollSnapType = 'none';
    window.cancelAnimationFrame(scrollToCard._raf);
    if (Math.abs(dist) < 1) {
      sc.style.scrollSnapType = 'x mandatory';
      programmatic.current = false;
      return;
    }
    const dur = 420;
    const t0 = (window.performance || Date).now();
    const ease = (t) => 1 - Math.pow(1 - t, 3); // easeOutCubic
    const step = (now) => {
      const p = Math.min(1, (now - t0) / dur);
      sc.scrollLeft = start + dist * ease(p);
      if (p < 1) {
        scrollToCard._raf = window.requestAnimationFrame(step);
      } else {
        sc.style.scrollSnapType = 'x mandatory';
        programmatic.current = false;
      }
    };
    scrollToCard._raf = window.requestAnimationFrame(step);
  };

  // Tap a card OR a diagram marker -> select that zone + center its card.
  const selectZone = (i) => {
    setActive(i);
    scrollToCard(i);
  };

  // Swipe -> detect the card nearest the scroller centre, set it active.
  const handleScroll = () => {
    // Ignore scroll events fired by our own smooth-scroll (tap / marker / dot),
    // otherwise the in-flight scroll position resets `active` to card 0.
    if (programmatic.current) return;
    if (rafId.current) return;
    rafId.current = requestAnimationFrame(() => {
      rafId.current = 0;
      const sc = scrollerRef.current;
      if (!sc) return;
      const center = sc.scrollLeft + sc.clientWidth / 2;
      let best = 0, bestDist = Infinity;
      cardRefs.current.forEach((c, i) => {
        if (!c) return;
        const cc = c.offsetLeft + c.clientWidth / 2;
        const d = Math.abs(cc - center);
        if (d < bestDist) { bestDist = d; best = i; }
      });
      setActive((prev) => (prev === best ? prev : best));
    });
  };

  return (
    <section data-gi-resp="ev-integrated-mobile" style={{
      background: '#FBFBF9', color: 'var(--gi-deep-ink)',
      padding: '64px 0 72px', position: 'relative', overflow: 'hidden'
    }}>
      {/* Decorative grid-rule pattern, top right (mirrors desktop) */}
      <div aria-hidden="true" style={{
        position: 'absolute', right: 0, top: 0,
        width: 260, height: 220,
        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: '40px 40px',
        maskImage: 'linear-gradient(to bottom left, #000, transparent 75%)',
        WebkitMaskImage: 'linear-gradient(to bottom left, #000, transparent 75%)',
        pointerEvents: 'none', zIndex: 0
      }} />

      <div style={{ position: 'relative', zIndex: 1, padding: '0 24px' }}>

        {/* ===== 1 · INTRO ===== */}
        <div data-gi-reveal style={{ marginBottom: 32 }}>
          <div style={{ marginBottom: 18 }}><Eyebrow>Integrated energy infrastructure</Eyebrow></div>
          <h2 style={{
            font: '500 30px/34px var(--ff-sans)', letterSpacing: '-0.022em',
            color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance'
          }}>
            The future of EV charging is{' '}
            <span style={{ color: EV_AMBER_LOCAL_M }}>integrated energy infrastructure</span>.
          </h2>
          <p style={{
            font: '400 15px/25px var(--ff-sans)', color: 'var(--gi-slate)',
            margin: '20px 0 0', 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>

        {/* ===== 2 · INTERACTIVE DIAGRAM (always visible) ===== */}
        <div data-gi-reveal style={{
          position: 'relative',
          background: 'var(--gi-wise-blue)', color: '#fff',
          border: '1px solid rgba(15,33,51,0.10)',
          padding: '20px 18px 18px', marginBottom: 20
        }}>
          {/* header strip — matches desktop map title */}
          <div style={{ marginBottom: 8 }}>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: EV_AMBER_LOCAL_M, fontWeight: 500
            }}>INTEGRTED ENERGY SYSTEMS</div>
          </div>

          <EvSchematicMobile activeIndex={active} onSelectZone={selectZone} />

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

        {/* progress hint */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 14, padding: '0 2px'
        }}>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--gi-slate)', fontWeight: 500
          }}>Swipe to explore</span>
          <span style={{
            fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--gi-slate)', fontWeight: 500
          }}>0{active + 1} / 04</span>
        </div>
      </div>

      {/* ===== 3 · SOLUTION CARDS — swipe carousel ===== */}
      <div
        ref={scrollerRef}
        onScroll={handleScroll}
        className="ev-cards"
        style={{
          display: 'flex', gap: 14,
          overflowX: 'auto', overflowY: 'hidden',
          scrollSnapType: 'x mandatory',
          WebkitOverflowScrolling: 'touch',
          paddingInline: '11%', paddingBottom: 4
        }}>
        {EV_BLOCKS.map((b, i) => {
          const isActive = active === i;
          return (
            <article
              key={b.label}
              ref={(el) => (cardRefs.current[i] = el)}
              onClick={() => selectZone(i)}
              style={{
                flex: '0 0 78%',
                scrollSnapAlign: 'center',
                position: 'relative',
                background: isActive ? 'rgba(212,162,76,0.07)' : '#fff',
                border: `1px solid ${isActive ? 'rgba(212,162,76,0.45)' : 'rgba(15,33,51,0.12)'}`,
                padding: '26px 22px 28px',
                display: 'flex', flexDirection: 'column',
                cursor: 'pointer',
                transition: 'background 240ms cubic-bezier(.2,0,0,1), border-color 240ms cubic-bezier(.2,0,0,1)',
                minHeight: 230
              }}>
              {/* 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_M,
                opacity: isActive ? 1 : 0,
                transition: 'opacity 240ms cubic-bezier(.2,0,0,1)'
              }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
                <div style={{
                  width: 40, height: 40, flexShrink: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: `1px solid ${isActive ? EV_AMBER_LOCAL_M : 'rgba(212,162,76,0.55)'}`,
                  background: isActive ? 'rgba(212,162,76,0.16)' : 'rgba(212,162,76,0.08)',
                  transition: 'background 240ms, border-color 240ms'
                }}>
                  <i data-lucide={b.icon} style={{ width: 20, height: 20, strokeWidth: 1.4, color: EV_AMBER_LOCAL_M }} />
                </div>
                <span style={{
                  fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', color: EV_AMBER_LOCAL_M, 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_M, fontWeight: 600,
                marginBottom: 14, lineHeight: '16px'
              }}>{b.label}</div>
              <p style={{
                font: '400 14px/22px var(--ff-sans)', color: 'var(--gi-slate)',
                margin: 0, textWrap: 'pretty'
              }}>{b.body}</p>
            </article>
          );
        })}
      </div>

      {/* pagination dots */}
      <div style={{
        display: 'flex', justifyContent: 'center', gap: 8,
        marginTop: 20, marginBottom: 36
      }}>
        {EV_BLOCKS.map((b, i) => (
          <button
            key={i}
            onClick={() => selectZone(i)}
            aria-label={`Go to ${b.label}`}
            style={{
              width: active === i ? 22 : 8, height: 8,
              borderRadius: 999, border: 'none', padding: 0, cursor: 'pointer',
              background: active === i ? EV_AMBER_LOCAL_M : 'rgba(15,33,51,0.18)',
              transition: 'background 240ms cubic-bezier(.2,0,0,1)'
            }} />
        ))}
      </div>

      {/* ===== 4 · CTA ===== */}
      <div style={{ padding: '0 24px' }}>
        <Button variant="outline" size="md" href="/projects" data-gi-resp="ev-integrated-projects-cta">
          See our integrated projects →
        </Button>
      </div>
    </section>
  );
};

Object.assign(window, { EvIntegratedMobile });