// whs2-page-2.jsx
// Warehousing & Logistics Industry Page — Part 2
// WhsSolutions (Solutions-for-this-sector with warehouse schematic)
// WhsCaseStudy (featured project with photo slider)

// ============================================================
// WhsFacilitySchematic — flat-roof distribution facility with
// rooftop solar, high-bay LED lighting (interior), BESS pad,
// dock doors, service entrance, and front-yard fleet/EV charging.
// 5 zones · 01 Audit · 02 LED · 03 Solar · 04 Battery · 05 EV/Forklift
// ============================================================
const WhsFacilitySchematic = ({ 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 footprint (flat-roof warehouse) — x 70..470, y 100..282
  const zones = [
    // 01 Energy Audits — whole facility ring
    { id: 0, label: '01', cx: 270, cy: 200,
      hl: <rect x="70" y="100" width="400" height="182" fill="none" stroke={amber} strokeWidth="1.5" strokeDasharray="4 5" /> },
    // 02 High-Bay LED — interior ceiling row
    { id: 1, label: '02', cx: 270, cy: 132,
      hl: <rect x="80" y="122" width="380" height="22" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
    // 03 Solar PV — flat rooftop
    { id: 2, label: '03', cx: 270, cy: 92,
      hl: <rect x="80" y="80" width="380" height="20" fill="none" stroke={amber} strokeWidth="1.5" /> },
    // 04 Battery — BESS pad
    { id: 3, label: '04', cx: 502, cy: 244,
      hl: <rect x="468" y="220" width="68" height="62" fill={amberFill} stroke={amber} strokeWidth="1.5" /> },
    // 05 EV / Forklift Charging — front apron
    { id: 4, label: '05', cx: 250, cy: 308,
      hl: <rect x="150" y="288" width="240" height="36" fill={amberFill} 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 distribution warehouse schematic">

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

        {/* Flat-roof warehouse outline (big-box) */}
        <path d="M 70 282 L 70 100 L 470 100 L 470 282 Z"
          fill="rgba(255,255,255,0.04)" stroke={ink} strokeWidth="1.25" />
        {/* Roof parapet line */}
        <line x1="70" y1="100" x2="470" y2="100" stroke={ink} strokeWidth="1" />

        {/* Loading-dock band along base (right end) */}
        <line x1="320" y1="270" x2="470" y2="270" stroke={inkDim} strokeWidth="0.75" />
        {[340, 360, 380, 400, 420, 440].map(x => (
          <g key={`dock${x}`}>
            <rect x={x - 7} y="266" width="14" height="16" fill="none" stroke={inkDim} strokeWidth="0.75" />
            <line x1={x} y1="266" x2={x} y2="282" stroke={inkFaint} strokeWidth="0.6" />
          </g>
        ))}
        <text x="395" y="262" textAnchor="middle"
          fontFamily="ui-monospace, monospace" fontSize="9" fill={inkText}
          letterSpacing="1.4">DOCK DOORS</text>

        {/* Racking grid — palette racks visible interior detail */}
        <g opacity="0.5">
          {[155, 195, 235, 275, 315].map(x => (
            <g key={`rack${x}`}>
              <line x1={x} y1="166" x2={x} y2="256" stroke={inkDim} strokeWidth="0.6" />
              {[180, 200, 220, 240].map(y => (
                <line key={`r${x}${y}`} x1={x - 8} y1={y} x2={x + 8} y2={y} stroke={inkFaint} strokeWidth="0.5" />
              ))}
            </g>
          ))}
        </g>

        {/* High-Bay LED — interior ceiling row of fixtures (zone 02) */}
        <g opacity={activeIndex === 1 ? 1 : 0.55}>
          {[110, 150, 190, 230, 270, 310, 350, 390, 430].map(x => (
            <g key={`led${x}`}>
              {/* fixture body */}
              <rect x={x - 10} y={126} width="20" height="4"
                fill={activeIndex === 1 ? amber : ink}
                stroke={activeIndex === 1 ? amber : ink} strokeWidth="0.6" />
              {/* light cone */}
              <path d={`M ${x - 10} 130 L ${x - 18} 150 L ${x + 18} 150 L ${x + 10} 130 Z`}
                fill={activeIndex === 1 ? 'rgba(233,199,134,0.18)' : 'rgba(255,255,255,0.06)'}
                stroke="none" />
            </g>
          ))}
          <text x="270" y="120" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={activeIndex === 1 ? amber : inkText}
            letterSpacing="1.4">HIGH-BAY LED</text>
        </g>

        {/* Rooftop solar — flat-roof array (zone 03)
            Panels lie low at a shallow tilt; many rows across full roof. */}
        <g opacity={activeIndex === 2 ? 1 : 0.65}>
          {(() => {
            const positions = [];
            const tilt = -6; // shallow tilt for ballasted flat-roof
            const startX = 86;
            const endX = 460;
            const step = 28;
            for (let x = startX; x <= endX; x += step) {
              positions.push({ cx: x, key: `flat${x}` });
            }
            const panelStroke = activeIndex === 2 ? amber : ink;
            const panelFill   = activeIndex === 2 ? amber : ink;
            const legStroke   = activeIndex === 2 ? amber : inkDim;
            const panelLen = 22;
            const panelThick = 2;
            const yPanel = 87;
            const yLeg = 96;
            return positions.map(({ cx, key }) => (
              <g key={key} transform={`rotate(${tilt} ${cx} ${yPanel + 2})`}>
                <line x1={cx - panelLen / 2 + 3} y1={yLeg}
                      x2={cx - panelLen / 2 + 3} y2={100}
                      stroke={legStroke} strokeWidth="0.8" />
                <line x1={cx + panelLen / 2 - 3} y1={yLeg}
                      x2={cx + panelLen / 2 - 3} y2={100}
                      stroke={legStroke} strokeWidth="0.8" />
                <rect x={cx - panelLen / 2} y={yPanel}
                      width={panelLen} height={panelThick}
                      fill={panelFill} stroke={panelStroke} strokeWidth="0.5" />
              </g>
            ));
          })()}
          <text x="270" y="76" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={activeIndex === 2 ? amber : inkText}
            letterSpacing="1.4">ROOFTOP PV</text>
        </g>

        {/* EV / FORKLIFT CHARGING — front apron stalls (zone 05) */}
        <g opacity={activeIndex === 4 ? 1 : 0.55}>
          <rect x="148" y="284" width="244" height="42"
            fill={activeIndex === 4 ? amberFill : 'transparent'}
            stroke={activeIndex === 4 ? amber : inkDim}
            strokeWidth={activeIndex === 4 ? 1 : 0.75} />
          {[180, 220, 260, 300, 340].map(x => (
            <line key={`stall${x}`} x1={x} y1="290" x2={x} y2="324"
              stroke={activeIndex === 4 ? amber : ink} strokeWidth="0.75" />
          ))}
          {/* EVSE pedestals — pole + head */}
          {[200, 240, 280, 320].map(x => (
            <g key={`ev${x}`}>
              <line x1={x} y1="298" x2={x} y2="284"
                stroke={activeIndex === 4 ? amber : ink} strokeWidth="1" />
              <rect x={x - 4} y="278" width="8" height="8"
                fill={activeIndex === 4 ? amber : 'transparent'}
                stroke={activeIndex === 4 ? amber : ink} strokeWidth="0.9" />
            </g>
          ))}
          <text x="270" y="346" textAnchor="middle"
            fontFamily="ui-monospace, monospace" fontSize="9"
            fill={activeIndex === 4 ? amber : inkText}
            letterSpacing="1.4">EV / FORKLIFT CHARGING</text>
        </g>

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

        {/* Whole-facility audit ring — Energy Audits (01) */}
        <g opacity={activeIndex === 0 ? 1 : 0}>
          <rect x="62" y="72" width="416" height="216" fill="none"
            stroke={amber} strokeWidth="1.25" strokeDasharray="4 5" />
        </g>

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

        {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" />
              <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>
  );
};

// ============================================================
// WhsSolutions — Soft Green. Mirrors Municipal "Solutions for
// this sector" layout exactly: header + schematic on left,
// 5-row interactive solutions list on right.
// ============================================================
const WhsSolutions = () => {
  const rows = [
    { idx: '01', icon: 'clipboard-list',   name: 'Energy Audits',             zone: 'Whole facility',          tag: 'Establish the documented baseline.',           why: 'A commercial energy audit produces the facility-specific baseline that sizes every subsequent measure — load profile, demand-charge exposure, refrigeration efficiency, and the strongest first-dollar opportunities.', href: '/solutions/energy-audits/' },
    { idx: '02', icon: 'lightbulb',        name: 'High-Bay LED Lighting',     zone: 'Interior · 24/7',         tag: 'The fastest payback in the building.',         why: 'High-bay LED retrofits in 24/7 warehouses typically pay back in two to four years through reduced electricity, longer maintenance intervals, and reduced HVAC heat-rejection load on cooled spaces.', href: '/solutions/led-lighting/' },
    { idx: '03', icon: 'sun',              name: 'Commercial Solar',          zone: 'Rooftop',                 tag: 'Large roofs, large arrays.',                   why: 'Modern distribution facilities have the largest unobstructed flat roofs in any commercial sector — well-suited to ballasted PV arrays that offset daytime base load and reduce exposure to rising utility rates.', href: '/solutions/commercial-solar/' },
    { idx: '04', icon: 'battery-charging', name: 'Battery Storage',           zone: 'Mechanical pad',          tag: 'Cut peak demand charges.',                     why: 'Battery storage discharges during short peak events to hold metered demand below the threshold that sets the monthly bill — operating cost reductions independent of energy savings, plus resilience for cold-chain and automation systems.', href: '/solutions/battery-storage/' },
    { idx: '05', icon: 'plug-zap',         name: 'EV / Forklift Charging',    zone: 'Yard · dock apron',       tag: 'Fleet electrification on a managed load.',     why: 'Truck-fleet, last-mile, and forklift charging — planned around available service capacity, smart load management, and fleet replacement schedules rather than emergency service upgrades under deadline pressure.', href: '/solutions/ev-charging/' },
  ];

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

  return (
    <section data-gi-resp="whs-solutions" data-screen-label="05 Solutions for this sector" style={{
      background: 'var(--gi-soft-green)',
      color: 'var(--gi-paper-white)',
      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)',
      }} />

      <div data-gi-resp="container" style={{ position: 'relative', zIndex: 1, maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal data-gi-resp="whs-solutions-head" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96,
          alignItems: 'end', marginBottom: 64,
          justifyItems: 'flex-end'
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow className="gi-eyebrow--gold">Solutions for this sector</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em',
              color: 'var(--gi-paper-white)', margin: 0, textWrap: 'balance', maxWidth: 760,
            }}>What warehousing & logistics 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',
          }}>
            A complete warehousing energy programme begins with a documented
            audit and proceeds through high-bay LED, rooftop solar, battery
            storage, and EV/forklift charging — sequenced for payback velocity
            and operational continuity over a multi-year capital plan.
          </p>
        </div>

        <div data-gi-reveal data-gi-resp="whs-solutions-body" style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56,
          alignItems: 'stretch',
        }}>

          {/* LEFT — facility 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={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              marginBottom: 24,
            }}>
              <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                textTransform: 'uppercase', color: 'var(--gi-amber-soft)', fontWeight: 500,
              }}>INTEGRTED ENERGY SYSTEMS</div>
            </div>

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

            <div style={{
              marginTop: 24, paddingTop: 18,
              borderTop: '1px solid rgba(255,255,255,0.18)',
              display: 'flex', alignItems: 'center', gap: 16,
              minHeight: 36, flexWrap: 'wrap',
            }}>
              <span style={{
                font: '500 15px/22px var(--ff-sans)', color: 'var(--gi-paper-white)',
                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 — service list */}
          <div style={{ display: 'flex', flexDirection: 'column', alignSelf: 'stretch' }}>
            {rows.map((r, i) => {
              const isActive = active === i;
              return (
                <a
                  key={r.name}
                  href={r.href}
                  data-gi-resp="whs-solution-row"
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                  style={{
                    display: 'grid',
                    flex: 1,
                    gridTemplateColumns: '44px 48px 1fr 24px',
                    gap: 18, alignItems: 'center',
                    padding: '22px 4px 22px 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',
                    borderRadius: 0,
                  }}>
                  <span aria-hidden="true" style={{
                    position: 'absolute', left: 0, top: 0, bottom: 0, width: 2,
                    background: 'var(--gi-amber)',
                    opacity: isActive ? 1 : 0,
                    transition: 'opacity 220ms cubic-bezier(.2,0,0,1)',
                  }} />

                  <div style={{
                    fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.18em',
                    textTransform: 'uppercase', fontWeight: 600,
                    color: isActive ? 'var(--gi-amber-soft)' : '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)' : '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)' : 'rgba(255,255,255,0.78)',
                    }} />
                  </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)', 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)', fontSize: 18,
                    color: isActive ? 'var(--gi-amber-soft)' : '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>
  );
};


// ============================================================
// WhsCaseStudy — Featured Project. Photo slider, results stats,
// spec sheet, and "also in this sector" list.
// IMPACT section removed per spec. Paper White surface.
// ============================================================
const WHS_FEATURED_SLIDES = [
  {
    label: 'Syfilco LTD · Commissioning',
    src: `${window.GI_BASE}assets/projects/syfilco/syfilco_01.webp`,
  },
  {
    label: 'Syfilco LTD · Inverter Detail',
    src: `${window.GI_BASE}assets/projects/syfilco/syfilco_02.webp`,
  },
  {
    label: 'Syfilco LTD · Mid-Installation',
    src: `${window.GI_BASE}assets/projects/syfilco/syfilco_03.webp`,
  },
  {
    label: 'Syfilco LTD · Electrical Install',
    src: `${window.GI_BASE}assets/projects/syfilco/syfilco_04.webp`,
  },
  {
    label: 'Syfilco LTD · Completed Array',
    src: `${window.GI_BASE}assets/projects/syfilco/syfilco_05.webp`,
  },
  {
    label: 'Syfilco LTD · Full Facility',
    src: `${window.GI_BASE}assets/projects/syfilco/syfilco_06.webp`,
  },
];

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

  const stats = [
    { big: '496 kW',     label: 'DC system size',         sub: 'Ballasted flat-roof PV array' },
    { big: '585,000',    label: 'kWh generated annually', sub: 'Based on facility model' },
    { big: 'Syfilco',    label: 'Client',                 sub: 'Syfilco LTD · textile distribution' },
    { big: 'Feb 2024',   label: 'Commercial operation',   sub: 'ESA inspection completed' },
  ];

  const spec = [
    { l: 'Location',     v: 'Exeter, Ontario' },
    { l: 'Client',       v: 'Syfilco LTD' },
    { l: 'Facility',     v: 'Distribution & manufacturing warehouse' },
    { l: 'System size',  v: '496 kW DC' },
    { l: 'Mounting',     v: 'Ballasted flat-roof racking' },
    { l: 'Interconnect', v: 'Behind-the-meter, net-metered' },
    { l: 'Commissioned', v: 'February 2024' },
  ];

  const also = [
    { name: 'Northland Building Supplies', loc: 'Edmonton, AB',      size: 'Commercial rooftop',  off: 'Distribution centre',          com: 'Commissioned Jun 2024' },
    { name: 'Goodspeeds Distribution',     loc: 'Nova Scotia',       size: 'Industrial rooftop',  off: 'Regional 3PL',                 com: 'Commissioned Apr 2025' },
    { name: 'Cold-Chain Facility · GTA',   loc: 'Brampton, ON',      size: 'In planning',         off: 'Cold storage retrofit',        com: 'Engagement 2026' },
    { name: 'Intermodal Yard · SW Ontario', loc: 'Sarnia, ON',        size: 'Scoping',             off: 'Yard lighting + EV charging',  com: 'Engagement 2026' },
  ];

  return (
    <section data-gi-resp="whs-case-study" data-screen-label="06 Featured Project" 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="Syfilco LTD — 496 kW distribution rooftop solar."
          sub="Ballasted flat-roof solar at a textile distribution facility in Exeter, Ontario. A representative example of large-rooftop PV at warehousing scale — sized to offset daytime base load and reduce exposure to rising utility rates."
        />

        {/* ===== 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',
              }}>
                {s.src ? (
                  <img src={s.src} alt={s.label}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                ) : (
                  <div style={{
                    width: '100%', height: '100%',
                    backgroundImage:
                      'repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px),' +
                      'repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px),' +
                      'linear-gradient(135deg,#1e3a5f 0%,#0f2540 60%,#13334d 100%)',
                    display: 'grid', placeItems: 'center',
                    color: 'rgba(255,255,255,0.55)',
                    fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.20em',
                    textTransform: 'uppercase', textAlign: 'center', padding: 32,
                  }}>
                    <div>
                      <div style={{
                        marginTop: 12, fontSize: 10.5, letterSpacing: '0.16em',
                        color: 'rgba(255,255,255,0.40)',
                      }}>{s.note}</div>
                    </div>
                  </div>
                )}
              </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: 'rgba(255,255,255,0.94)',
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.14em',
                color: 'var(--gi-deep-ink)', fontWeight: 500, textTransform: 'uppercase',
              }}>EXETER, ON</div> */}
              <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',
                }} />
                496 kW · COMMERCIAL OPERATION
              </div>
            </div>

            {/* Slide caption (bottom) */}
            {/* <div style={{
              position: 'absolute', left: 0, right: 0, bottom: 0,
              padding: '36px 24px 18px',
              background: 'linear-gradient(to top, rgba(15,33,51,0.85), transparent)',
              color: '#fff',
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
              textTransform: 'uppercase', fontWeight: 500,
              display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
              zIndex: 2,
            }}>
              <span style={{ color: 'var(--gi-amber)' }}>{slide.label}</span>
              <span style={{ color: 'rgba(255,255,255,0.82)' }}>{slide.caption}</span>
            </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="whs-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}</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="whs-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="whs-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 · Syfilco LTD</div>
            <dl style={{ margin: 0, padding: 0 }}>
              {spec.map((s, i) => (
                <div key={s.l} data-gi-resp="whs-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/syfilco">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} 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, { WhsSolutions, WhsCaseStudy, WhsFacilitySchematic });