// led-financial-cta.jsx
// LED Lighting Solutions Page — Financial Outcomes, Featured Project (Aryzta),
// Industries, Testimonial (Athletic Knit), FAQ, Related, Closing CTA.

const LED_AMBER_LOCAL = '#D4A24C';
const LED_AMBER_SOFT_LOCAL = 'rgba(212,162,76,0.16)';

// LedFinancial — REMOVED per page update (was a Wise Blue table; eliminated to
// reduce blue surface area on this page).

// ============================================================
// LedFeaturedProject — Aryzta Foods · 66.2% energy reduction
// 4-quadrant facts grid + project photo + key figures band
// ============================================================
const LedFeaturedProject = () => {
  const blocks = [
  { label: 'Facility', body: 'Food manufacturing · Ancaster, ON · 1770 Fiddlers Green Road. Production and support areas operating on extended schedules in a temperature-controlled food-safe environment.' },
  { label: 'Challenge', body: 'Legacy lighting across large production areas contributing to high electricity consumption and elevated peak demand. Consistent lighting quality essential in a food manufacturing environment.' },
  { label: 'Solution', body: 'High-efficiency LED fixtures specified for food manufacturing applications — designed for consistent performance in a demanding operating environment with reduced maintenance requirements.' },
  { label: 'Incentive', body: 'Qualified for saveONenergy Retrofit Incentive Program. Incentive calculated based on reductions in energy use and electrical demand. Documentation and submission managed by GI as part of project scope.' }];


  const figures = [
  { big: '667K', unit: 'kWh', label: 'Annual energy savings', sub: 'post-installation' },
  { big: '66.2%', unit: '', label: 'Lighting energy reduction', sub: 'Versus previous system' },
  { big: '66.15%', unit: '', label: 'System demand reduction', sub: 'From 115.15 kW to 38.97 kW' },
  { big: 'saveON', unit: '', label: 'Incentive program', sub: 'saveONenergy Retrofit · IESO' }];


  return (
    <section data-gi-resp="led-featured-project" style={{ background: 'var(--gi-paper-cream)', padding: '128px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>

        {/* Editorial header */}
        <div data-gi-reveal style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96, alignItems: 'end', marginBottom: 64 }}>
          <div>
            <div style={{ marginBottom: 22, display: 'flex', alignItems: 'center', gap: 14 }}>
              <Eyebrow>Featured project · Completed 2019</Eyebrow>
              <span aria-hidden="true" style={{ ...{
                  fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
                  background: LED_AMBER_LOCAL, color: 'var(--gi-deep-ink)',
                  padding: '4px 10px', textTransform: 'uppercase', fontWeight: 600
                }, background: "transparent", color: "transparent" }}></span>
            </div>
            <h2 style={{ font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em', color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance' }}>
              Aryzta Foods.{' '}
              <span style={{
                background: `linear-gradient(180deg, transparent 62%, ${LED_AMBER_SOFT_LOCAL} 62%, ${LED_AMBER_SOFT_LOCAL} 92%, transparent 92%)`,
                padding: '0 4px'
              }}>66.2% energy reduction.</span>
            </h2>
          </div>
          <p style={{ font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6, textWrap: 'pretty' }}>
            LED lighting retrofit at a food manufacturing facility in Ancaster, Ontario —
            replacing legacy lighting across production and support areas, qualifying for
            saveONenergy incentives.
          </p>
        </div>

        {/* Hero figures band */}
        <div data-gi-resp="led-featured-stats" data-gi-reveal-stagger style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          background: '#fff', border: '1px solid rgba(15,33,51,0.10)',
          borderBottom: 'none'
        }}>
          {figures.map((f, i) =>
          <div key={f.label} style={{
            padding: '36px 32px',
            borderRight: i < figures.length - 1 ? '1px solid rgba(15,33,51,0.10)' : 'none',
            position: 'relative'
          }}>
              <span aria-hidden="true" style={{
              position: 'absolute', top: 0, left: 0, height: 2, width: 32,
              background: LED_AMBER_LOCAL
            }} />
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 14 }}>
                <span style={{
                font: '500 48px/1 var(--ff-sans)', letterSpacing: '-0.03em',
                color: 'var(--gi-deep-ink)', fontFeatureSettings: '"tnum" 1'
              }}>{f.big}</span>
                {f.unit && <span style={{
                font: '500 18px/1 var(--ff-sans)', color: 'var(--gi-slate)',
                letterSpacing: '-0.01em'
              }}>{f.unit}</span>}
              </div>
              <div style={{
              font: '500 14px/20px var(--ff-sans)', color: 'var(--gi-deep-ink)',
              marginBottom: 6
            }}>{f.label}</div>
              <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.14em',
              color: '#5E8F6D', textTransform: 'uppercase'
            }}>{f.sub}</div>
            </div>
          )}
        </div>

        {/* Photo + quadrant detail */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 0,
          border: '1px solid rgba(15,33,51,0.10)', background: '#fff'
        }}>
          {/* Photo (stock) */}
          <div data-gi-image-reveal style={{ position: 'relative', minHeight: 600, overflow: 'hidden', background: 'var(--gi-soft-green)' }}>
            <img
              src={`${window.GI_BASE}assets/projects/aryzta/aryzta.webp`}
              alt="Industrial facility interior with LED high-bay lighting array — reference for Aryzta Foods retrofit"
              style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.94) contrast(1.04) brightness(0.96)' }} />
            
            {/* corner registration ticks */}
            {[
            { top: 16, left: 16, pos: 'tl' },
            { top: 16, right: 16, pos: 'tr' },
            { bottom: 16, left: 16, pos: 'bl' },
            { bottom: 16, right: 16, pos: 'br' }].
            map((t) =>
            <span key={t.pos} aria-hidden="true" style={{
              position: 'absolute', ...t, width: 14, height: 14,
              borderTop: t.pos === 'tl' || t.pos === 'tr' ? `1px solid ${LED_AMBER_LOCAL}` : 'none',
              borderBottom: t.pos === 'bl' || t.pos === 'br' ? `1px solid ${LED_AMBER_LOCAL}` : 'none',
              borderLeft: t.pos === 'tl' || t.pos === 'bl' ? `1px solid ${LED_AMBER_LOCAL}` : 'none',
              borderRight: t.pos === 'tr' || t.pos === 'br' ? `1px solid ${LED_AMBER_LOCAL}` : 'none'
            }} />
            )}

            <div style={{
              position: 'absolute', bottom: 18, left: 18,
              display: 'flex', gap: 8, flexWrap: 'wrap'
            }}>
              <div style={{
                padding: '8px 12px', background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(4px)',
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.14em',
                color: 'var(--gi-deep-ink)', fontWeight: 500, textTransform: 'uppercase'
              }}>Aryzta Foods · INDUSTRIAL FACILITY INTERIOR · 237 000SQFT</div>
            </div>
          </div>

          {/* 2×2 explanatory grid */}
          <div data-gi-resp="led-featured-blocks" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr' }}>
            {blocks.map((b, i) =>
            <div key={b.label} style={{
              padding: '36px 32px',
              borderBottom: i < 2 ? '1px solid rgba(15,33,51,0.10)' : 'none',
              borderRight: i % 2 === 0 ? '1px solid rgba(15,33,51,0.10)' : 'none'
            }}>
                <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 10.5, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: '#5E8F6D', fontWeight: 500,
                marginBottom: 14
              }}>{b.label}</div>
                <p style={{ font: '400 14px/22px var(--ff-sans)', color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'pretty' }}>
                  {b.body}
                </p>
              </div>
            )}
          </div>
        </div>
        
      </div>
    </section>);

};

// ============================================================
// LedIndustries — editorial photo grid on paper cream (mirrors SolIndustries)
// ============================================================
const LedIndustryTile = ({ n, name, stamp, clients, img, why, href }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={`/industries/${href}`}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        display: 'grid',
        gridTemplateRows: 'subgrid',
        gridRow: 'span 5',
        rowGap: 18,   
        transition: 'transform 320ms var(--gi-ease)',
        transform: hover ? 'translate3d(0,-2px,0)' : 'none'
      }}>

      <div style={{
        position: 'relative',
        aspectRatio: '4 / 3',
        overflow: 'hidden',
        background: 'var(--gi-wise-blue)',
        isolation: 'isolate'
      }}>
        <img
          src={img}
          alt={name}
          loading="lazy"
          style={{
            width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            transform: hover ? 'scale(1.06)' : 'scale(1.02)',
            transition: 'transform 1.1s cubic-bezier(.2,.6,.2,1), filter 600ms ease'
          }} />

        {[
          { top: 10, left: 10, borderTopWidth: 1, borderLeftWidth: 1, t: hover ? 'translate(-3px,-3px)' : 'none' },
          { top: 10, right: 10, borderTopWidth: 1, borderRightWidth: 1, t: hover ? 'translate(3px,-3px)' : 'none' },
          { bottom: 10, left: 10, borderBottomWidth: 1, borderLeftWidth: 1, t: hover ? 'translate(-3px,3px)' : 'none' },
          { bottom: 10, right: 10, borderBottomWidth: 1, borderRightWidth: 1, t: hover ? 'translate(3px,3px)' : 'none' }
        ].map((b, i) => {
          const { t, ...pos } = b;
          return (
            <span
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                width: 18, height: 18,
                borderColor: '#f3f4f1', borderStyle: 'solid', borderWidth: 0,
                zIndex: 2, pointerEvents: 'none',
                mixBlendMode: 'screen',
                transform: t,
                transition: 'transform 320ms var(--gi-ease)',
                ...pos
              }} />
          );
        })}

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

      <h3 style={{
        margin: 0,
        font: '500 22px/26px var(--ff-sans)',
        letterSpacing: '-0.014em',
        color: 'var(--gi-deep-ink)',
        textWrap: 'balance'
      }}>{name}</h3>
      <p style={{
        margin: 0,
        font: '400 13.5px/22px var(--ff-sans)',
        color: 'var(--gi-slate)',
        textWrap: 'pretty',
      }}>{why}</p>

<p style={{
        margin: 0,
        font: '400 12.5px/20px var(--ff-sans)',
        color: 'var(--gi-graphite)',
        fontStyle: 'italic',
        textWrap: 'pretty'
      }}>{clients}</p>

      <div style={{
        borderTop: '1px solid rgba(15,33,51,0.16)',
        paddingTop: 14,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--ff-mono)', fontSize: 10.5,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--gi-deep-ink)', fontWeight: 500
      }}>
        <span>Explore industry</span>
        <span style={{
          color: LED_AMBER_LOCAL,
          transform: hover ? 'translateX(6px)' : 'none',
          transition: 'transform 300ms var(--gi-ease)',
          fontSize: 14
        }}>→</span>
      </div>
    </a>
  );
};

const LedIndustries = () => {
  const rows = [
  {
    n: '01',
    name: 'Warehousing & Logistics',
    stamp: 'HIGH RUNTIME HOURS',
    img: `${window.GI_BASE}assets/industries/warehousing_and_logistic.webp`,
    why: 'Large operating windows and high-bay lighting systems create strong opportunities for LED retrofits, lighting controls, and operational energy reduction.',
    clients: 'Distribution centres · Fulfillment hubs · Logistics facilities', 
    href: 'industries/warehousing/'
  },
  {
    n: '02',
    name: 'Food & Beverage',
    stamp: 'SANITATION + UPTIME',
    img: `${window.GI_BASE}assets/industries/food_and_beverage.webp`,
    why: 'Lighting systems in food facilities must support production visibility, sanitation requirements, and continuous operating schedules without disrupting operations.',
    clients: 'Food processing · Beverage production · Packaging lines',
    href: 'industries/food-and-beverage/'
  },
  {
    n: '03',
    name: 'Manufacturing',
    stamp: 'PROCESS ENVIRONMENTS',
    img: `${window.GI_BASE}assets/industries/manufacturing.webp`,
    why: 'Production facilities benefit from upgraded lighting quality, reduced maintenance interruptions, and lower electrical operating costs across process areas.',
    clients: 'Heavy manufacturing · Process equipment · Industrial production',
    href: 'industries/manufacturing/'
  },
  {
    n: '04',
    name: 'Commercial Real Estate',
    stamp: 'TENANT EXPERIENCE',
    img: `${window.GI_BASE}assets/industries/commercial_real_estate.webp`,
    why: 'Modern lighting systems improve building appearance, tenant comfort, and operating efficiency while supporting ESG and property modernization initiatives.',
    clients: 'Office towers · Retail centres · Mixed-use properties',
    href: 'industries/real-estate/'
  },
  {
    n: '05',
    name: 'Hazardous Environments',
    stamp: 'CLASSIFIED AREAS',
    img: `${window.GI_BASE}assets/industries/hazardous_environments.webp`,
    why: 'Hazardous-location lighting upgrades improve reliability, visibility, and maintenance access in environments requiring explosion-proof or specialty-rated fixtures.',
    clients: 'Oil & gas · Chemical processing · Dust-sensitive facilities',
    href: 'industries/warehousing/'
  },
  {
    n: '06',
    name: 'Cold Storage & Refrigeration',
    stamp: 'LOW-TEMPERATURE OPERATION',
    img: `${window.GI_BASE}assets/industries/cold_storage_logistics.webp`,
    why: 'Cold storage facilities require lighting systems designed for refrigerated environments, long operating hours, and maintenance-sensitive applications.',
    clients: 'Cold storage · Refrigerated logistics · Freezer facilities',
    href: 'industries/food-and-beverage/'
  }];

  return (
    <section
      data-gi-resp="led-industries"
      id="industries"
      style={{
        background: 'var(--gi-paper-cream)',
        padding: '128px 0',
        position: 'relative',
        overflow: 'hidden'
      }}>

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

        <div data-sol-industries-head data-gi-reveal style={{
          display: 'grid',
          gridTemplateColumns: '1.05fr 1fr',
          columnGap: 80,
          alignItems: 'end',
          paddingBottom: 56
        }}>
          <div>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Industries we serve</Eyebrow>
            </div>
            <h2 style={{
              font: '500 48px/52px var(--ff-sans)',
              letterSpacing: '-0.026em',
              color: 'var(--gi-deep-ink)',
              margin: 0,
              textWrap: 'balance',
              maxWidth: 640
            }}>
              Commercial lighting designed around {' '}

              <span className="gi-text-soft-green">how facilities operate.</span>
            </h2>
          </div>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-end',
            gap: 32
          }}>
            <p style={{
              font: '400 14.5px/22px var(--ff-sans)',
              color: 'var(--gi-slate)',
              margin: 0,
              maxWidth: '42ch',
              textWrap: 'pretty'
            }}>
              Lighting requirements vary significantly across commercial and industrial facilities. Runtime hours, environmental conditions, maintenance access, visibility requirements, and operating schedules all shape how lighting systems should be designed and upgraded.
            </p>
          </div>
        </div>

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

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

};

// ============================================================
// LedTestimonial — Athletic Knit · David Sliwin
// Wise-Blue dark anchor. Sole blue surface on the page — used here precisely
// so the dark moment isn't a duplicate of the Soft-Green Closing CTA that
// follows. Every detail tuned for the blue background:
//   - headline: pure white
//   - body: rgba(255,255,255,0.78)
//   - dividers: rgba(255,255,255,0.18)
//   - labels & highlight stripe: amber (LED accent)
//   - decorative monogram lifted to white at low opacity
// ============================================================
const LedTestimonial = () =>
<section data-gi-resp="led-testimonial" style={{ background: 'var(--gi-wise-blue)', color: '#fff', padding: '128px 0', position: 'relative', overflow: 'hidden' }}>
    {/* faint monogram — moved to right to balance left-aligned content */}
    <div aria-hidden="true" style={{
    position: 'absolute', right: -160, bottom: -160,
    opacity: 0.06, pointerEvents: 'none'
  }}>
      <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 560, height: 560 }} />
    </div>

    <div data-gi-resp="container" style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{ marginBottom: 44 }}><Eyebrow className="gi-eyebrow--gold" onDark>Client testimonial</Eyebrow></div>

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

      <p data-gi-resp="bess-testimonial-body" style={{
      font: '500 56px/64px var(--ff-sans)', letterSpacing: '-0.028em',
      color: '#fff', margin: '0 0 56px', textWrap: 'balance', maxWidth: 1100
    }}>
        Clear guidance across{' '}
        <span style={{
        background: `linear-gradient(180deg, transparent 62%, rgba(212,162,76,0.28) 62%, rgba(212,162,76,0.28) 92%, transparent 92%)`,
        padding: '0 4px'
      }}>multiple system options</span>.
      </p>

      <p style={{ font: '400 19px/30px var(--ff-sans)', color: 'rgba(255,255,255,0.78)', margin: '0 0 64px', maxWidth: 820, textWrap: 'pretty' }}>
        Green Integrations presented multiple system approaches and worked with us to
        evaluate each against our operational requirements and budget. The process
        provided clarity on the right technology and path forward.
      </p>

      <div data-gi-resp="led-testimonial-meta" style={{
      paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.18)',
      display: 'grid', gridTemplateColumns: 'repeat(3, auto) 1fr', gap: 80
    }}>
        {[
      { l: 'Client', v: 'David Sliwin' },
      { l: 'Company', v: 'Athletic Knit' },
      { l: 'Sector', v: 'Sports Apparel Mfg · Ontario' }].
      map((b) =>
      <div key={b.l}>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em', color: LED_AMBER_LOCAL, textTransform: 'uppercase', marginBottom: 8, fontWeight: 500 }}>{b.l}</div>
            <div style={{ font: '500 16px/24px var(--ff-sans)', color: '#fff' }}>{b.v}</div>
          </div>
      )}
      </div>
    </div>
  </section>;


// ============================================================
// LedFAQ — 6 questions, on Wise Blue per copy spec
// ============================================================
const LedFAQ = () => {
  const items = [
  { q: 'What is the payback period for a commercial LED lighting retrofit in Ontario?',
    a: 'With saveONenergy Retrofit Incentive Program funding, commercial LED retrofits in Ontario typically achieve payback in one to three years.\n\nWithout incentives, payback is typically two to five years depending on current fixture type, operating hours, and local electricity rates. The fastest payback is in facilities with the oldest, highest-wattage legacy fixtures running the longest hours — which describes most large manufacturing and warehouse environments.\n\nLED retrofits consistently deliver the shortest payback of any commercial energy measure.' },
  { q: 'What saveONenergy incentives are available for commercial LED lighting in Ontario?',
    a: 'The IESO saveONenergy Retrofit Program provides incentives for commercial LED lighting upgrades in Ontario through two primary approaches:\n\nPrescriptive incentives: Fixed incentive amounts based on approved fixture and retrofit types\nCustom incentives: Calculated based on verified reductions in electricity consumption (kWh) and electrical demand (kW) for more complex or larger-scale projects\n\nMost straightforward LED retrofit projects qualify under the prescriptive stream, while facilities with more advanced lighting systems, controls strategies, or larger energy reductions may benefit from a custom engineering approach.\n\nIncentive amounts vary based on fixture type, operating hours, project scale, and the total energy and demand reductions achieved.\n\nGI manages the full incentive process as part of the project scope—including eligibility review, application preparation, supporting documentation, submission coordination, and final incentive payout support.' },
  { q: 'How disruptive is a commercial LED lighting retrofit to daily operations?',
    a: 'Commercial LED lighting retrofits can be disruptive if they are not properly planned—but experienced project coordination significantly reduces operational impact.\n\nMost commercial and industrial LED retrofit projects are completed in phases, with installation scheduled around production hours, shift changes, occupancy schedules, and operational requirements. Work can often be completed area-by-area without requiring a full facility shutdown.\n\nFor manufacturing plants, warehouses, distribution centres, and 24/7 operations, careful sequencing is critical. Temporary lighting, lift coordination, electrical shutdown planning, and safety procedures all need to be managed to maintain productivity and site safety throughout the retrofit process.\n\nGI has completed LED retrofits in active commercial and industrial environments ranging from warehouses and food manufacturing facilities to complex operating facilities with continuous production requirements. The installation approach is developed around the facility.\n\nIn most cases, the largest operational risk is not the installation itself, but poor planning and coordination. A properly managed retrofit minimizes disruption while improving lighting quality, reducing maintenance requirements, and lowering ongoing electricity costs.' },
  { q: 'What is the difference between LED and fluorescent lighting for industrial facilities?',
    a: 'LED lighting systems use significantly less electricity than traditional fluorescent fixtures while delivering the same—or better—light output. In most commercial and industrial facilities, LED retrofits reduce lighting energy consumption by 40–70%, while also lowering maintenance requirements and improving overall lighting quality.\n\nOne of the biggest differences is system lifespan. Industrial-grade LED fixtures commonly operate for 50,000–100,000+ hours, compared to roughly 10,000–20,000 hours for fluorescent systems. This substantially reduces lamp replacements, ballast failures, maintenance labour, and lift rental costs in high-bay or difficult-to-access environments.\n\nLED systems also perform better in demanding industrial conditions, including:\n\nCold storage and low-temperature environments\nFacilities with vibration or mechanical movement\nLong operating-hour applications\nWarehouses, manufacturing plants, and distribution centres requiring consistent illumination levels\n\nUnlike fluorescent fixtures, LED systems maintain more stable light output over time, reach full brightness instantly, and integrate more effectively with occupancy sensors, daylight controls, and advanced energy management strategies.\n\nFor many industrial facilities, the upgrade is not just about energy savings—it is also about improving visibility, safety, maintenance efficiency, and long-term operating costs.' },
  { q: 'Does LED lighting reduce peak demand charges?',
    a: 'Yes — LED fixtures draw less power than the legacy fixtures they replace, which reduces the facility\u2019s electrical demand in real time.\n\nIn facilities where lighting operates during peak demand windows, the reduction in lighting load contributes directly to a lower demand figure and a lower monthly demand charge. For facilities where lighting represents a significant share of total load, the demand saving can be material.' },
  { q: 'Can LED lighting be combined with solar to improve overall project economics?',
    a: 'Yes — LED retrofits reduce baseline consumption before a solar system is sized. A smaller solar system sized to a lower, optimised baseline costs less in capital and achieves better performance across its operating life.\n\nThe saveONenergy Retrofit Incentive Program for LED and the solar incentive program can be stacked on the same project — reducing the upfront cost of both investments simultaneously.' }];

  const [open, setOpen] = React.useState(0);

  return (
    <section data-gi-resp="led-faq" style={{ background: 'var(--gi-accent-soft)', color: 'var(--gi-deep-ink)', padding: '128px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div data-gi-reveal style={{ display: 'flex', justifyContent: 'space-between', gap: 96, marginBottom: 80, alignItems: 'flex-end' }}>
          <div>
            <div style={{ marginBottom: 22 }}><Eyebrow style={{ color: LED_AMBER_LOCAL }}>Questions from facility managers</Eyebrow></div>
            <h2 style={{ font: '500 48px/54px var(--ff-sans)', letterSpacing: '-0.026em', color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance' }}>
              Frequently asked questions.
            </h2>
          </div>
          <p style={{ font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)', margin: 0, maxWidth: 480, paddingBottom: 6 }}>
            LED retrofit questions specific to commercial and industrial facilities.
          </p>
        </div>

        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: i === 0 ? '1px solid rgba(15,33,51,0.18)' : 'none',
                borderBottom: '1px solid rgba(15,33,51,0.18)'
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} data-gi-resp="faq-trigger" style={{
                  width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: '28px 0', textAlign: 'left',
                  display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24, alignItems: 'center',
                  color: 'var(--gi-deep-ink)'
                }}>
                  <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.14em', color: LED_AMBER_LOCAL, fontWeight: 600 }}>Q · {String(i + 1).padStart(2, '0')}</span>
                  <h3 style={{ font: '500 21px/28px var(--ff-sans)', letterSpacing: '-0.012em', color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance' }}>{it.q}</h3>
                  <span style={{
                    fontFamily: 'var(--ff-sans)', fontSize: 24, fontWeight: 300,
                    color: 'var(--gi-deep-ink)', justifySelf: 'end',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    transition: 'transform 260ms cubic-bezier(.2,0,0,1)', lineHeight: 1
                  }}>+</span>
                </button>
                <div className="gi-faq-answer" data-open={isOpen ? 'true' : 'false'}>
                  <div className="gi-faq-answer-inner" data-gi-resp="faq-answer-inner" style={{
                    padding: isOpen ? '0 0 32px' : '0',
                    transition: 'padding 260ms cubic-bezier(0.4,0,0.2,1)',
                    display: 'grid', gridTemplateColumns: '70px 1fr 40px', gap: 24
                  }}>
                    <span />
                    <p style={{ font: '400 16px/28px var(--ff-sans)', color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty', maxWidth: 820, whiteSpace: 'pre-line' }}>{it.a}</p>
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

};

// ============================================================
// LedRelated — 3 cards (Audits / Solar / Storage) on Paper Cream
// ============================================================
const LedRelated = () => {
  // Hrefs added per GI Link Audit (Fix 3).
  const items = [
  { name: 'Energy Audits', icon: 'clipboard-list', href: '/solutions/energy-audits/', why: 'LED retrofits are one of the most common energy conservation measures identified in commercial energy audits.' },
  { name: 'Commercial Solar', icon: 'sun', href: '/solutions/commercial-solar/', why: 'Reducing lighting consumption lowers the solar system size needed — improving the economics of both investments.' },
  { name: 'Battery Storage', icon: 'battery-charging', href: '/solutions/battery-storage/', why: 'Demand reduction from LED combines with storage demand management for a larger impact on monthly billing.' }];

  return (
    <section data-gi-resp="led-related" style={{ background: 'var(--gi-paper-cream)', padding: '128px 0' }}>
      <div data-gi-resp="container" style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ marginBottom: 22 }}><Eyebrow style={{ color: '#5e8f6d'}}>Often paired with LED</Eyebrow></div>
        <h2 style={{ font: '500 40px/46px var(--ff-sans)', letterSpacing: '-0.024em', color: 'var(--gi-deep-ink)', margin: '0 0 16px', textWrap: 'balance', maxWidth: 720 }}>
          Services that extend the value of LED.
        </h2>
        <p style={{ font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)', margin: '0 0 72px', maxWidth: 560, textWrap: 'pretty' }}>
          Each integrates with the same assessment, financial model, and operating relationship.
        </p>

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

};

// ============================================================
// LedClosingCTA — Soft Green
// ============================================================
const LedClosingCTA = () =>
<section data-gi-resp="led-closing-cta" style={{ background: 'var(--gi-soft-green)', color: '#fff', padding: '128px 0', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', right: -120, top: -120, opacity: 0.08, pointerEvents: 'none' }}>
      <img src={`${window.GI_BASE}assets/logos/monogram-white.svg`} alt="" style={{ width: 640, height: 640 }} />
    </div>

    <div data-gi-resp="container" style={{ position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{ maxWidth: 920, paddingTop: 56 }}>
        <div style={{ marginBottom: 28 }}>
          <Eyebrow onDark className="gi-eyebrow--gold">Start your assessment</Eyebrow>
        </div>
        <h2 style={{ font: '500 64px/70px var(--ff-sans)', letterSpacing: '-0.03em', color: '#fff', margin: 0, textWrap: 'balance' }}>
          See what your{' '}
          <span style={{ color: LED_AMBER_LOCAL }}>lighting is costing you</span>.
        </h2>
        <p style={{ font: '400 19px/30px var(--ff-sans)', color: 'rgba(255,255,255,0.86)', margin: '28px 0 44px', maxWidth: 720, textWrap: 'pretty' }}>
          A lighting assessment identifies the savings available from a retrofit and
          confirms saveONenergy incentive eligibility — at no cost.
        </p>
        <div data-gi-resp="audit-closing-cta-buttons" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button variant="onDark" size="lg" href="/about/contact/">Start your assessment</Button>
          <Button target="_blank" variant="outlineOnDark" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
        </div>
        <p style={{ font: '400 13px/20px var(--ff-sans)', color: 'rgba(255,255,255,0.62)', margin: '32px 0 0', fontStyle: 'italic' }}>
          No commitment required.
        </p>
      </div>
    </div>
  </section>;


Object.assign(window, {
  LedFeaturedProject, LedIndustries,
  LedTestimonial, LedFAQ, LedRelated, LedClosingCTA
});