// cre2-page-2.jsx
// Commercial Real Estate Industry Page (v2) — Part 2
// Solutions (Soft Green w/ CRE schematic) + Featured Project (Vicwest with photo slider, no IMPACT).

// ============================================================
// Eyebrow — small monospace label used at top of section
// ============================================================
const Eyebrow = ({ children, style }) => (
  <span style={{
    fontFamily: 'var(--ff-mono, ui-monospace, monospace)',
    fontSize: 11,
    lineHeight: '16px',
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    color: 'var(--gi-amber, #E9C786)',
    fontWeight: 500,
    ...style,
  }}>{children}</span>
);

// ============================================================
// CreBuildingSchematic — Single-storey industrial CRE asset.
// Long flat-roof building (matches the Commercial Solar /
// Warehousing visual vocabulary). Solar panels sit FLAT on the
// roof. LED high-bays are ceiling-mounted only.
// ============================================================
const CreBuildingSchematic = ({ activeIndex }) => {
  const W = 540;
  const H = 360;
  const amber    = 'rgba(233,199,134,1)';
  const amberFill= 'rgba(233,199,134,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)';

  // --- Building geometry ---
  // Footprint: x 50→490, ground y=282, roof y=116 (single floor, flat roof)
  // Roof panel band:    y 122→144  (panels sit ON the roof, not floating)
  // Ceiling LED band:   y 156      (just below roof inside building)

  const zones = [
    // 01 Commercial Solar — rooftop panel array (sitting on the parapet)
    { id: 0, label: '01', cx: 270, cy: 90,
      hl: <rect x="56" y="98" width="408" height="20" fill="none" stroke={amber} strokeWidth="1.5" /> },
    // 02 LED Lighting — ceiling fixtures inside
    { id: 1, label: '02', cx: 270, cy: 172,
      hl: <rect x="56" y="150" width="428" height="22" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
    // 03 Energy Audits — utility / meter cabinet on left exterior
    { id: 2, label: '03', cx: 30, cy: 230,
      hl: <rect x="14" y="208" width="34" height="50" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
    // 04 EV Charging — parking strip on right
    { id: 3, label: '04', cx: 510, cy: 270,
      hl: <rect x="492" y="252" width="48" height="32" fill="none" stroke={amber} strokeWidth="1.5" /> },
  ];

  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 single-storey commercial real estate building schematic">

        <defs>
          <linearGradient id="ledGlow" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(233,199,134,0.55)" />
            <stop offset="100%" stopColor="rgba(233,199,134,0)" />
          </linearGradient>
        </defs>

        {/* Ground */}
        <line x1="0" y1="282" x2={W} y2="282" stroke={ink} strokeWidth="1" />
        <line x1="0" y1="320" x2={W} y2="320" stroke={inkFaint} strokeWidth="1" strokeDasharray="2 4" />
        {[290, 298, 306].map((y, i) => (
          <line key={`g${y}`} x1={i % 2 === 0 ? 12 : 220} y1={y}
            x2={i % 2 === 0 ? 80 : 380} y2={y}
            stroke={inkFaint} strokeWidth="0.5" strokeDasharray="2 6" />
        ))}

        {/* Building shell — single storey, flat roof */}
        <path d="M 50 282 L 50 116 L 490 116 L 490 282 Z"
          fill="rgba(255,255,255,0.03)" stroke={ink} strokeWidth="1.25" />
        {/* parapet */}
        <line x1="50" y1="116" x2="490" y2="114"
          stroke={activeIndex === 0 ? amber : ink} strokeWidth="1.25" />

        {/* Interior floor line (inside, for context) */}
        <line x1="50" y1="262" x2="490" y2="262" stroke={ink} strokeWidth="0.55" opacity="0.45" />

        {/* Windows / clerestory band along the upper wall */}
        <g opacity="0.6">
          {[80, 130, 180, 230, 280, 330, 380, 430].map(x => (
            <rect key={`win-${x}`} x={x} y="184" width="32" height="22"
              fill="rgba(255,255,255,0.05)" stroke={ink} strokeWidth="0.6" />
          ))}
        </g>

        {/* Entrance / lobby (centre) */}
        <g opacity="0.55">
          <rect x="248" y="240" width="44" height="42" fill="none" stroke={inkDim} strokeWidth="0.75" />
          <line x1="270" y1="240" x2="270" y2="282" stroke={inkDim} strokeWidth="0.5" />
        </g>

        {/* ===== ROOFTOP SOLAR — side-profile tilted panels sitting ON the roof ===== */}
        <g opacity={activeIndex === 0 ? 1 : 0.65} style={{ transition: 'opacity 220ms' }}>
          {(() => {
            const roofY      = 114;   // top of parapet — panels rest on this line
            const panelLen   = 22;    // side-profile panel width
            const panelThick = 2.2;
            const legFront   = 5;     // front leg height
            const legBack    = 10;    // back leg height (gives the tilt)
            const legInset   = 3;
            const lit        = activeIndex === 0;
            const stroke     = lit ? amber : ink;
            const fill       = lit ? amber : 'rgba(255,255,255,0.18)';
            const legStroke  = lit ? amber : inkDim;
            // Row of panels — west to east, tilted with back-leg taller
            const panels = [];
            for (let i = 0; i < 14; i++) {
              const cx = 70 + i * 28; // 14 panels across the rooftop
              panels.push(cx);
            }
            return panels.map((cx, i) => {
              const x0 = cx - panelLen / 2;
              const x1 = cx + panelLen / 2;
              // Back leg sits left (visually pointing south is to the right) —
              // panel front edge dips down toward the right
              const xLegBack  = x0 + legInset;
              const xLegFront = x1 - legInset;
              const yBackTop  = roofY - legBack;     // top of back leg
              const yFrontTop = roofY - legFront;    // top of front leg
              return (
                <g key={`panel-${i}`}>
                  {/* Back leg (taller) */}
                  <line x1={xLegBack}  y1={roofY} x2={xLegBack}  y2={yBackTop}
                    stroke={legStroke} strokeWidth="1" />
                  {/* Front leg (shorter) */}
                  <line x1={xLegFront} y1={roofY} x2={xLegFront} y2={yFrontTop}
                    stroke={legStroke} strokeWidth="1" />
                  {/* Panel body — tilted polygon connecting the two leg tops */}
                  <polygon
                    points={`
                      ${xLegBack - 2.5},${yBackTop}
                      ${xLegFront + 2.5},${yFrontTop}
                      ${xLegFront + 2.5},${yFrontTop + panelThick}
                      ${xLegBack - 2.5},${yBackTop + panelThick}
                    `}
                    fill={fill} stroke={stroke} strokeWidth="0.75"
                    style={{ transition: 'all 220ms' }} />
                  {/* Highlight strip on top edge */}
                  <line
                    x1={xLegBack - 1.5} y1={yBackTop - 0.4}
                    x2={xLegFront + 1.5} y2={yFrontTop - 0.4}
                    stroke={lit ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.28)'}
                    strokeWidth="0.5" />
                </g>
              );
            });
          })()}
          {/* HVAC unit on roof (kept visible always, sits on the roof too) */}
          <rect x="446" y="104" width="36" height="10"
            fill="rgba(255,255,255,0.04)" stroke={inkDim} strokeWidth="0.6"
            opacity={activeIndex === 0 ? 0.45 : 1} />
          <line x1="450" y1="107" x2="478" y2="107" stroke={inkDim} strokeWidth="0.4"
            opacity={activeIndex === 0 ? 0.4 : 1} />
          <line x1="450" y1="110" x2="478" y2="110" stroke={inkDim} strokeWidth="0.4"
            opacity={activeIndex === 0 ? 0.4 : 1} />
          <text x="464" y="98" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="7.5"
            fill={inkText} letterSpacing="1.4"
            opacity={activeIndex === 0 ? 0.45 : 1}>HVAC</text>
        </g>

        {/* ===== LED HIGH-BAY CEILING FIXTURES — ceiling only ===== */}
        <g opacity={activeIndex === 1 ? 1 : 0.5} style={{ transition: 'opacity 220ms' }}>
          {/* faint ceiling track line */}
          <line x1="60" y1="156" x2="480" y2="156"
            stroke={activeIndex === 1 ? amber : inkDim}
            strokeWidth="0.5"
            opacity={activeIndex === 1 ? 0.55 : 0.35}
            strokeDasharray={activeIndex === 1 ? "0" : "2 3"} />
          {[88, 138, 188, 238, 288, 338, 388, 438].map(x => {
            const lit = activeIndex === 1;
            return (
              <g key={`led-${x}`}>
                {/* drop stem */}
                <line x1={x} y1="150" x2={x} y2="156"
                  stroke={lit ? amber : inkDim} strokeWidth="0.6" />
                {/* fixture body (high-bay puck) */}
                <rect x={x - 9} y="156" width="18" height="4"
                  fill={lit ? amber : 'rgba(255,255,255,0.35)'}
                  stroke={lit ? amber : ink} strokeWidth="0.5"
                  style={{ transition: 'all 220ms' }} />
                {/* light cone */}
                {lit && (
                  <path d={`M ${x - 9} 160 L ${x - 22} 200 L ${x + 22} 200 L ${x + 9} 160 Z`}
                    fill="url(#ledGlow)" opacity="0.6" />
                )}
              </g>
            );
          })}
        </g>

        {/* ===== ENERGY AUDITS — utility / meter cabinet (left exterior) ===== */}
        <g opacity={activeIndex === 2 ? 1 : 0.55} style={{ transition: 'opacity 220ms' }}>
          <rect x="14" y="208" width="34" height="50"
            fill={activeIndex === 2 ? amberFill : 'rgba(255,255,255,0.02)'}
            stroke={activeIndex === 2 ? amber : ink} strokeWidth="1" />
          {/* meter dial */}
          <circle cx="31" cy="222" r="5.5"
            fill="none" stroke={activeIndex === 2 ? amber : ink} strokeWidth="0.85" />
          <line x1="31" y1="222" x2="34" y2="219"
            stroke={activeIndex === 2 ? amber : ink} strokeWidth="0.85" />
          {/* service bars */}
          <rect x="19" y="234" width="24" height="2.5" fill={activeIndex === 2 ? amber : ink} opacity="0.5" />
          <rect x="19" y="240" width="18" height="2.5" fill={activeIndex === 2 ? amber : ink} opacity="0.4" />
          <rect x="19" y="246" width="22" height="2.5" fill={activeIndex === 2 ? amber : ink} opacity="0.45" />
          <text x="31" y="202" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="7.5"
            fill={activeIndex === 2 ? amber : inkText}
            letterSpacing="1.4">AUDIT</text>
        </g>

        {/* ===== EV CHARGING — parking strip right of building ===== */}
        <g opacity={activeIndex === 3 ? 1 : 0.55} style={{ transition: 'opacity 220ms' }}>
          <line x1="490" y1="258" x2="540" y2="258"
            stroke={activeIndex === 3 ? amber : ink} strokeWidth="0.75" />
          {/* parking stall dividers */}
          {[498, 510, 522, 534].map(x => (
            <line key={`stall-${x}`} x1={x} y1="258" x2={x} y2="282"
              stroke={activeIndex === 3 ? amber : ink} strokeWidth="0.6" opacity="0.7" />
          ))}
          {/* EV charger post */}
          {[504, 528].map(x => (
            <g key={`ev-${x}`}>
              <line x1={x} y1="258" x2={x} y2="240"
                stroke={activeIndex === 3 ? amber : ink} strokeWidth="1.1" />
              <rect x={x - 5} y="228" width="10" height="14"
                fill={activeIndex === 3 ? amber : 'transparent'}
                stroke={activeIndex === 3 ? amber : ink} strokeWidth="0.85" />
              <line x1={x - 2.5} y1="233" x2={x + 2.5} y2="233"
                stroke={activeIndex === 3 ? '#375844' : ink} strokeWidth="0.6" />
              <line x1={x - 2.5} y1="237" x2={x + 2.5} y2="237"
                stroke={activeIndex === 3 ? '#375844' : ink} strokeWidth="0.6" />
            </g>
          ))}
          {[504, 528].map(x => (
            <text key={`evt-${x}`} x={x} y="276" textAnchor="middle"
              fontFamily="ui-monospace, monospace" fontSize="7"
              fill={activeIndex === 3 ? amber : 'rgba(255,255,255,0.45)'}
              letterSpacing="0.8">EV</text>
          ))}
          <text x="516" y="222" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="7.5"
            fill={activeIndex === 3 ? amber : inkText}
            letterSpacing="1.4">EV</text>
        </g>

        {/* Active overlay */}
        <g style={{ pointerEvents: 'none' }}>{zones[activeIndex].hl}</g>

        {/* Zone markers */}
        {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-soft-green, #375844)'}
                stroke={isActive ? amber : 'rgba(255,255,255,0.78)'} strokeWidth="1.25"
                style={{ transition: 'all 220ms cubic-bezier(.2,0,0,1)' }} />
              <text x={z.cx} y={z.cy + 3} textAnchor="middle"
                fontFamily="ui-monospace, monospace" fontSize="10" fontWeight="600"
                letterSpacing="0.5"
                fill={isActive ? '#375844' : 'rgba(255,255,255,0.92)'}>
                {z.label}
              </text>
            </g>
          );
        })}
      </svg>
    </div>
  );
};

// ============================================================
// CreSolutions — Solutions for this sector section
// ============================================================
const CreSolutions = () => {
  const rows = [
    { idx: '01', icon: 'sun',             name: 'Commercial Solar', zone: 'Rooftop',
      tag: 'Turn unused roof into revenue.',
      why: 'Large flat CRE rooftops are unused real estate. On-site solar reduces grid electricity purchases — directly improving NOI and asset value at typical CRE cap rates.',
      href: 'Solutions - Commercial Solar.html' },
    { idx: '02', icon: 'lightbulb',       name: 'LED Lighting',     zone: 'Common areas & tenants',
      tag: 'Reduce operating costs immediately.',
      why: 'Common-area, parking-lot, and tenant-space LED retrofits reduce operating costs immediately. saveONenergy incentives cover a significant portion of project cost. Improves NOI before solar is sized.',
      href: 'Solutions - LED Lighting.html' },
    { idx: '03', icon: 'clipboard-check', name: 'Energy Audits',    zone: 'Whole-building',
      tag: 'Establish the baseline.',
      why: 'BEPS reporting requires documented energy and emissions baselines. The audit also uncovers HVAC, controls, and envelope efficiencies that further reduce operating cost.',
      href: 'Solutions - Energy Audits.html' },
    { idx: '04', icon: 'plug-zap',        name: 'EV Charging',      zone: 'Parking & garage',
      tag: 'Build before tenants demand it.',
      why: 'Adding EV charging now — before tenant demand forces a rush retrofit — is significantly cheaper. On-site solar provides a cost-effective power source and supports tenant retention.',
      href: 'Solutions - EV Charging.html' },
  ];

  // Per screenshot: highlight LED Lighting by default (index 1)
  const [active, setActive] = React.useState(1);

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  }, [active]);

  return (
    <section data-screen-label="05 Solutions for this sector" data-gi-resp="cre-solutions" style={{
      background: 'var(--gi-soft-green, #375844)',
      color: 'var(--gi-paper-white, #F5F1E8)',
      padding: '128px 0',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <span aria-hidden="true" style={{
        position: 'absolute', top: 0, left: 48, width: 64, height: 2,
        background: 'var(--gi-amber, #E9C786)',
      }} />

      <div data-gi-resp="container" style={{ position: 'relative', zIndex: 1, maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        {/* Title / description grid */}
        <div data-gi-resp="cre-sol-head" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96,
          alignItems: 'end', marginBottom: 64,
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Solutions for this sector</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-paper-white, #F5F1E8)', margin: 0, textWrap: 'balance', maxWidth: 760,
            }}>What CRE projects typically involve.</h2>
          </div>
          <p style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'rgba(255,255,255,0.72)', margin: 0, maxWidth: 480, paddingBottom: 6, textWrap: 'pretty',
          }}>
            For commercial real estate, the typical sequence is energy audit →
            LED retrofit → rooftop solar → EV charging — each stage building on
            the last and improving NOI and BEPS positioning along the way.
          </p>
        </div>

        {/* Schematic + list */}
        <div data-gi-resp="cre-sol-body" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56,
          alignItems: 'stretch',
        }}>
          {/* LEFT — Building schematic */}
          <div style={{
            background: 'transparent',
            border: '1px solid rgba(255,255,255,0.18)',
            padding: '32px 36px 28px',
            display: 'flex', flexDirection: 'column',
            alignSelf: 'stretch',
          }}>
            <div style={{ marginBottom: 24 }}>
              <div style={{
                fontFamily: 'var(--ff-mono, ui-monospace, monospace)',
                fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: 'var(--gi-amber-soft, #E9C786)', fontWeight: 500,
              }}>INTEGRTED ENERGY SYSTEMS</div>
            </div>

            <div style={{
              flex: 1,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '8px 0',
            }}>
              <CreBuildingSchematic activeIndex={active} />
            </div>

            {/* Bottom caption — solution title and position only */}
            <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: '600 14px/22px var(--ff-sans)',
                color: 'var(--gi-paper-white, #F5F1E8)',
                letterSpacing: '-0.005em', whiteSpace: 'nowrap',
              }}>{rows[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)',
              }}>{rows[active].name}</span>
            </div>
          </div>

          {/* RIGHT — Solutions list */}
          <div style={{ display: 'flex', flexDirection: 'column', alignSelf: 'stretch' }}>
            {rows.map((r, i) => {
              const isActive = active === i;
              return (
                <a
                  key={r.name}
                  data-gi-resp="cre-sol-row"
                  href={r.href}
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                  style={{
                    display: 'grid',
                    flex: 1,
                    gridTemplateColumns: '44px 48px 1fr 24px',
                    gap: 18, alignItems: 'center',
                    padding: '24px 4px 24px 14px',
                    borderTop: i === 0 ? '1px solid rgba(255,255,255,0.18)' : 'none',
                    borderBottom: '1px solid rgba(255,255,255,0.18)',
                    position: 'relative',
                    transition: 'background 220ms cubic-bezier(.2,0,0,1)',
                    background: isActive ? 'rgba(233,199,134,0.10)' : 'transparent',
                    cursor: 'pointer',
                    color: 'inherit',
                    textDecoration: 'none',
                    borderRadius: 0,
                  }}>
                  <span aria-hidden="true" style={{
                    position: 'absolute', left: 0, top: 0, bottom: 0, width: 2,
                    background: 'var(--gi-amber, #E9C786)',
                    opacity: isActive ? 1 : 0,
                    transition: 'opacity 220ms cubic-bezier(.2,0,0,1)',
                  }} />

                  <div style={{
                    fontFamily: 'var(--ff-mono, ui-monospace, monospace)',
                    fontSize: 11, letterSpacing: '0.18em',
                    textTransform: 'uppercase', fontWeight: 600,
                    color: isActive ? 'var(--gi-amber-soft, #E9C786)' : 'rgba(255,255,255,0.55)',
                    paddingTop: 6, transition: 'color 220ms',
                  }}>{r.idx}</div>

                  <div style={{
                    width: 44, height: 44,
                    border: `1px solid ${isActive ? 'var(--gi-amber-soft, #E9C786)' : 'rgba(255,255,255,0.28)'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: isActive ? 'rgba(233,199,134,0.14)' : 'transparent',
                    transition: 'background 220ms cubic-bezier(.2,0,0,1), border-color 220ms',
                  }}>
                    <i data-lucide={r.icon} style={{
                      width: 22, height: 22, strokeWidth: 1.4,
                      color: isActive ? 'var(--gi-amber-soft, #E9C786)' : 'rgba(255,255,255,0.78)',
                    }}></i>
                  </div>

                  <div style={{ minWidth: 0 }}>
                    <div style={{
                      display: 'flex', alignItems: 'baseline',
                      columnGap: 14, rowGap: 4,
                      marginBottom: 6, flexWrap: 'wrap',
                    }}>
                      <h3 style={{
                        font: '500 21px/26px var(--ff-sans)', letterSpacing: '-0.014em',
                        color: 'var(--gi-paper-white, #F5F1E8)', margin: 0, whiteSpace: 'nowrap',
                      }}>{r.name}</h3>
                      <span style={{
                        font: '500 13px/20px var(--ff-sans)', letterSpacing: '-0.005em',
                        color: 'rgba(255,255,255,0.62)', whiteSpace: 'nowrap', fontStyle: 'italic',
                      }}>— {r.tag}</span>
                    </div>
                    <p style={{
                      font: '400 14px/22px var(--ff-sans)',
                      color: 'rgba(255,255,255,0.72)', margin: 0, textWrap: 'pretty',
                      maxWidth: 540,
                    }}>{r.why}</p>
                  </div>

                  <span aria-hidden="true" style={{
                    fontFamily: 'var(--ff-mono, ui-monospace, monospace)',
                    fontSize: 18,
                    color: isActive ? 'var(--gi-amber-soft, #E9C786)' : 'rgba(255,255,255,0.40)',
                    paddingTop: 4,
                    transform: isActive ? 'translateX(2px)' : 'translateX(0)',
                    transition: 'transform 220ms cubic-bezier(.2,0,0,1), color 220ms',
                  }}>→</span>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// CreCaseStudy — Featured Project (Vicwest Inc.) with photo slider.
// Paper White surface. NO IMPACT section (per brief).
// ============================================================
const CRE_FEATURED_SLIDES = [
  {
    label: 'Vicwest Stratford · Material',
    caption: 'Stratford, ON · 590 kW DC · 1,297 panels · Commissioned Aug 2023',
    src: `${window.GI_BASE}assets/projects/vicwest/vicwest_01.webp`,
  },
  {
    label: 'Vicwest Stratford · Racking',
    caption: 'Roof-mounted modules across the flat membrane roofline',
    src: `${window.GI_BASE}assets/projects/vicwest/vicwest_02.webp`,
  },
  {
    label: 'Pinacle Edmonton · Panels',
    caption: 'Edmonton, AB · Rooftop solar · 90.8% solar offset',
    src: `${window.GI_BASE}assets/projects/vicwest/vicwest_03.webp`,
  },
  {
    label: 'Vicwest Mississauga · Inverters',
    caption: 'Mississauga, ON · Sister-site rooftop solar installation',
    src: `${window.GI_BASE}assets/projects/vicwest/vicwest_04.webp`,
  },
  {
    label: 'Vicwest Stratford · Full System',
    caption: 'Mississauga, ON · Sister-site rooftop solar installation',
    src: `${window.GI_BASE}assets/projects/vicwest/vicwest_05.webp`,
  },
];

const CreCaseStudy = () => {
  const [idx, setIdx] = React.useState(0);
  const slides = CRE_FEATURED_SLIDES;
  const total = slides.length;
  const slide = slides[idx];
  const go = (n) => setIdx(((n % total) + total) % total);

  const stats = [
    { big: '590 kW',    label: 'DC system size',         sub: 'Roof · 496 kW AC' },
    { big: '80.3%',     label: 'Annual solar offset',    sub: '719,855 kWh per year' },
    { big: 'Stratford', label: 'Location',               sub: 'Working CRE facility' },
    { big: 'Aug 2023',  label: 'Commercial operation',   sub: '1,297-panel rooftop' },
  ];

  const spec = [
    { l: 'Location',     v: '362 Lorne Ave E, Stratford, ON' },
    { l: 'Asset type',   v: 'Manufacturing & distribution facility' },
    { l: 'System size',  v: '590.2 kW DC / 496 kW AC' },
    { l: 'Modules',      v: '1,297 high-efficiency panels' },
    { l: 'Roof type',    v: 'Flat membrane · ballasted racking' },
    { l: 'Annual offset',v: '80.3% of facility consumption' },
    { l: 'Commissioned', v: 'August 2023' },
  ];

  const also = [
    { name: 'Pinacle Inc.',    loc: 'Edmonton, AB',     size: 'Rooftop solar', off: '90.8% solar offset',  com: 'Highest offset in CRE portfolio' },
    { name: 'Vicwest Inc.',    loc: 'Mississauga, ON',  size: 'Rooftop solar', off: 'Verified output',     com: 'Sister-site to Stratford' },
    { name: 'Vicwest Inc.',    loc: 'Stratford, ON',    size: '590 kW DC',     off: '80.3% solar offset',  com: 'Featured · Commissioned Aug 2023' },
    { name: 'CRE portfolio',   loc: 'ON · AB · NS',     size: '24+ assets',    off: 'Multi-province',      com: 'Active project pipeline' },
  ];

  return (
    <section data-screen-label="06 Featured Project" data-gi-resp="cre-case-study" style={{
      background: 'var(--gi-paper-white)',
      padding: '128px 0',
      borderTop: '1px solid rgba(15,33,51,0.08)',
      borderBottom: '1px solid rgba(15,33,51,0.08)',
    }}>
      <div data-gi-resp="container" style={{
        position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px',
      }}>
        <SectionHeader
          eyebrow="Featured project"
          eyebrowClassName="gi-color--green"
          title="Vicwest Inc. — 590 kW rooftop solar."
          sub="A commercial real estate asset in Stratford, Ontario. Roof-mounted high-efficiency modules across a flat membrane roofline — sized to the verified annual load profile across HVAC, lighting, and tenant operations."
        />

        {/* ===== SLIDER ===== */}
        <div data-gi-image-reveal style={{
          marginTop: 64,
          position: 'relative',
          border: '1px solid rgba(15,33,51,0.14)',
          background: 'var(--gi-wise-blue)',
        }}>
          <div style={{
            position: 'relative', height: 520, overflow: 'hidden',
          }}>
            {slides.map((s, i) => (
              <div key={i} style={{
                position: 'absolute', inset: 0,
                opacity: i === idx ? 1 : 0,
                transition: 'opacity 380ms cubic-bezier(.2,0,0,1)',
                pointerEvents: i === idx ? 'auto' : 'none',
              }}>
                <img src={s.src} alt={s.label}
                  style={{
                    width: '100%', height: '100%', objectFit: 'cover',
                    objectPosition: 'center 45%',
                    filter: 'saturate(0.96) contrast(1.02)',
                  }} />
              </div>
            ))}

            {/* Photo location/spec strip */}
            <div style={{
              position: 'absolute', top: 18, left: 18,
              display: 'flex', gap: 8, flexWrap: 'wrap',
              zIndex: 2,
            }}>
              <div style={{
                padding: '8px 12px', background: 'var(--gi-wise-blue)',
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.14em',
                color: '#fff', fontWeight: 500, textTransform: 'uppercase',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <span aria-hidden="true" style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: 'var(--gi-amber)', display: 'inline-block',
                }} />
                590 kW · 1,297 PANELS
              </div>
            </div>

            

            {/* Prev / Next */}
            <button onClick={() => go(idx - 1)} aria-label="Previous photo" style={{
              position: 'absolute', left: 18, top: '50%', transform: 'translateY(-50%)',
              width: 44, height: 44, border: '1px solid rgba(255,255,255,0.45)',
              background: 'rgba(15,33,51,0.55)', color: '#fff',
              cursor: 'pointer', fontSize: 18, lineHeight: 1,
              display: 'grid', placeItems: 'center', zIndex: 3,
            }}>‹</button>
            <button onClick={() => go(idx + 1)} aria-label="Next photo" style={{
              position: 'absolute', right: 18, top: '50%', transform: 'translateY(-50%)',
              width: 44, height: 44, border: '1px solid rgba(255,255,255,0.45)',
              background: 'rgba(15,33,51,0.55)', color: '#fff',
              cursor: 'pointer', fontSize: 18, lineHeight: 1,
              display: 'grid', placeItems: 'center', zIndex: 3,
            }}>›</button>
          </div>

          {/* Thumbnail strip */}
          <div data-gi-resp="cre-slider-tabs" style={{
            display: 'flex', gap: 0,
            borderTop: '1px solid rgba(255,255,255,0.14)',
            background: 'var(--gi-wise-blue)',
          }}>
            {slides.map((s, i) => (
              <button key={i} onClick={() => setIdx(i)}
                aria-label={'View ' + s.label}
                aria-current={i === idx ? 'true' : 'false'}
                style={{
                  flex: 1,
                  padding: '14px 14px',
                  background: i === idx ? 'rgba(255,255,255,0.08)' : 'transparent',
                  border: 'none',
                  borderRight: i < slides.length - 1 ? '1px solid rgba(255,255,255,0.14)' : 'none',
                  borderTop: i === idx ? '2px solid var(--gi-amber)' : '2px solid transparent',
                  cursor: 'pointer',
                  display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6,
                  fontFamily: 'var(--ff-mono)', textAlign: 'left',
                  color: i === idx ? '#fff' : 'rgba(255,255,255,0.55)',
                  transition: 'all 220ms cubic-bezier(.2,0,0,1)',
                }}>
                <span style={{
                  fontSize: 11.5, letterSpacing: '0.10em',
                  textTransform: 'uppercase',
                }}>{(s.label.split(' · ')[1] || s.label).slice(0, 28)}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Results */}
        <div style={{ marginTop: 48 }}>
          <div style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--gi-color-green)', fontWeight: 500,
            marginBottom: 28,
          }}>Project results</div>

          <div data-gi-reveal-stagger data-gi-resp="cre-stats" style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            borderTop: '1px solid rgba(15,33,51,0.18)',
            borderBottom: '1px solid rgba(15,33,51,0.18)',
          }}>
            {stats.map((s, i) => (
              <div className="mfg-stats-item" key={s.label} style={{
                padding: '40px 28px 40px 0',
                paddingLeft: i > 0 ? 28 : 0,
                borderRight: i < stats.length - 1 ? '1px solid rgba(15,33,51,0.14)' : 'none',
              }}>
                <div style={{
                  font: '500 48px/1 var(--ff-sans)', letterSpacing: '-0.030em',
                  color: 'var(--gi-deep-ink)', marginBottom: 18,
                }}>{s.big}</div>
                <div style={{
                  font: '500 14px/20px var(--ff-sans)', color: 'var(--gi-deep-ink)',
                  marginBottom: 4, letterSpacing: '-0.005em',
                }}>{s.label}</div>
                <div style={{
                  font: '400 13px/20px var(--ff-sans)',
                  color: 'var(--gi-slate)', textWrap: 'pretty', maxWidth: 240,
                }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Spec + Also-in-sector */}
        <div data-gi-resp="cre-spec-split" style={{
          marginTop: 64,
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64,
          alignItems: 'start',
        }}>
          <div style={{
            border: '1px solid rgba(15,33,51,0.18)',
            background: 'var(--gi-paper-cream)',
            padding: '36px 36px 24px',
          }}>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--gi-sage-accent)', fontWeight: 500,
              marginBottom: 24,
            }}>System details · Vicwest Inc. Stratford</div>
            <dl style={{ margin: 0, padding: 0 }}>
              {spec.map((s, i) => (
                <div key={s.l} data-gi-resp="cre-spec-row" style={{
                  display: 'grid', gridTemplateColumns: '160px 1fr', gap: 24,
                  padding: '14px 0',
                  borderTop: i === 0 ? '1px solid rgba(15,33,51,0.14)' : 'none',
                  borderBottom: '1px solid rgba(15,33,51,0.14)',
                }}>
                  <dt style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
                    textTransform: 'uppercase', color: 'var(--gi-graphite)', fontWeight: 500,
                    paddingTop: 3,
                  }}>{s.l}</dt>
                  <dd style={{
                    margin: 0, font: '400 15px/22px var(--ff-sans)', color: 'var(--gi-deep-ink)',
                  }}>{s.v}</dd>
                </div>
              ))}
            </dl>

            <div style={{ marginTop: 28 }}>
              <Button variant="primary" size="md" href="/projects/vicwest">View full project breakdown →</Button>
            </div>
          </div>

          <div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--gi-color-green)', fontWeight: 500,
              marginBottom: 24,
            }}>Also in this sector</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {also.map((p, i) => (
                <li key={p.name + i} style={{
                  padding: '20px 0',
                  borderTop: i === 0 ? '1px solid rgba(15,33,51,0.18)' : 'none',
                  borderBottom: '1px solid rgba(15,33,51,0.18)',
                }}>
                  <div style={{
                    font: '500 18px/24px var(--ff-sans)', letterSpacing: '-0.010em',
                    color: 'var(--gi-deep-ink)', marginBottom: 4,
                  }}>{p.name}</div>
                  <div style={{
                    font: '400 13px/20px var(--ff-sans)', color: 'var(--gi-slate)',
                    marginBottom: 10,
                  }}>{p.loc}</div>
                  <div style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.12em',
                    textTransform: 'uppercase', color: 'var(--gi-sage-accent)', fontWeight: 500,
                    display: 'flex', flexWrap: 'wrap', gap: '6px 16px',
                  }}>
                    <span>{p.size}</span>
                    <span style={{ color: 'rgba(15,33,51,0.30)' }}>·</span>
                    <span>{p.off}</span>
                    <span style={{ color: 'rgba(15,33,51,0.30)' }}>·</span>
                    <span style={{ color: 'var(--gi-graphite)' }}>{p.com}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CreBuildingSchematic, CreSolutions, CreCaseStudy });