// led-benefits.jsx
// LED Lighting Solutions Page — "LED Lighting Retrofits" benefits section.
// Mirrors the SolBenefits layout from Commercial Solar: four-card grid with
// editorial header + closing CTA band on Paper Cream.

// ============================================================
// LedBenefitsCard — single benefit tile (parallels SolBenefitsCard)
// ============================================================
const LedBenefitsCard = ({
  num, label, statValue, statUnit, title, body, cta, accent = 'sage',
}) => {
  const [hovered, setHovered] = React.useState(false);
  const accentColor =
    accent === 'amber' ? 'var(--gi-color-gold)' : 'var(--gi-sage-accent)';

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

      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          top: 0, left: 0, right: 0, height: 2,
          background: accentColor,
          opacity: hovered ? 1 : 0,
          transition: 'opacity 220ms var(--gi-ease)',
        }} />

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

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

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

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

      {cta && (
        <div style={{
          marginTop: 28,
          paddingTop: 18,
          borderTop: '1px solid rgba(15,33,51,0.10)',
          fontFamily: 'var(--ff-mono)',
          fontSize: 10.5,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          fontWeight: 500,
          color: 'var(--gi-deep-ink)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 12,
        }}>
          <span>{cta}</span>
          <span aria-hidden="true" style={{
            color: accentColor,
            transform: hovered ? 'translate3d(4px, 0, 0)' : 'none',
            transition: 'transform 260ms var(--gi-ease)',
            fontSize: 14,
          }}>
            →
          </span>
        </div>
      )}
    </div>);

};

// ============================================================
// LedBenefits — section
// ============================================================
const LedBenefits = ({ showClosingBand = true }) => {
  const cards = [
  {
    num: '01',
    accent: 'sage',
    statValue: 'Up to 80%',
    label: 'ENERGY REDUCTION',
    title: 'Reduce lighting electricity consumption immediately.',
    body:
    'Modern LED systems significantly lower lighting energy use while improving operational efficiency across the facility.',
  },
  {
    num: '02',
    accent: 'sage',
    statValue: '50,000+ hr',
    label: 'LOWER MAINTENANCE',
    title: 'Reduce fixture failures and maintenance interruptions.',
    body:
    'Commercial LED fixtures last significantly longer than HID and fluorescent systems, reducing replacement and labor costs.',
  },
  {
    num: '03',
    accent: 'sage',
    statValue: 'Improved Visibility',
    label: 'OPERATIONAL PERFORMANCE',
    title: 'Improve lighting quality across critical work areas.',
    body:
    'Uniform lighting improves visibility, safety, and working conditions in production, warehousing, and loading environments.',
  },
  {
    num: '04',
    accent: 'sage',
    statValue: 'Incentive Funding',
    label: 'REBATE SUPPORT',
    title: 'Lower project cost through available programmes.',
    body:
    'Utility incentives and lighting controls can significantly improve project economics and shorten payback periods.',
  }];


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

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

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

        {/* Header */}
        <div data-sol-benefits-head style={{
          display: 'flex', justifyContent: 'space-between',
          gap: 96,
          alignItems: 'center',
          marginBottom: 80
        }}>
          <div data-gi-reveal>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>LED Lighting Retrofits</Eyebrow>
            </div>
            <h2 style={{
              font: '500 56px/60px var(--ff-sans)',
              letterSpacing: '-0.028em',
              color: 'var(--gi-deep-ink)',
              margin: 0,
              textWrap: 'balance',
              maxWidth: 760
            }}>
              Four reasons LED retrofits improve {' '}

              <span className="gi-text-soft-green">facility performance.</span>
            </h2>
          </div>
          <p data-gi-reveal style={{
            font: '400 16px/26px var(--ff-sans)',
            color: 'var(--gi-slate)',
            margin: 0,
            textWrap: 'pretty',
            maxWidth: 460,
            paddingBottom: 8
          }}>
            LED retrofits are among the fastest-return energy upgrades in commercial and industrial facilities — reducing electricity consumption, lowering maintenance requirements, and improving operational visibility across the building.
          </p>
        </div>

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

        {/* Closing band */}
        {showClosingBand &&
        <div
          data-gi-reveal
          data-sol-benefits-closing
          data-gi-resp="audit-benefits-closing"
          style={{
            marginTop: 80,
            paddingTop: 56,
            borderTop: '1px solid rgba(15,33,51,0.12)',
            display: 'grid',
            gridTemplateColumns: '1.1fr 1fr',
            gap: 96,
            alignItems: 'center'
          }}>

            <div>
              <div style={{
              fontFamily: 'var(--ff-mono)',
              fontSize: 11,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              fontWeight: 500,
              color: '#5E8F6D',
              marginBottom: 20,
              display: 'inline-flex',
              alignItems: 'center',
              gap: 12
            }}>
                <span aria-hidden="true" style={{
                width: 6, height: 6,
                background: '#5E8F6D',
                boxShadow: '0 0 0 4px rgba(212,162,76,0.18)',
                display: 'inline-block',
              }} />
                Upgrade lighting without disrupting operations
              </div>
              <p style={{
              font: '400 19px/30px var(--ff-sans)',
              color: 'var(--gi-deep-ink)',
              margin: 0,
              textWrap: 'pretty',
              maxWidth: 680
            }}>
                Green Integrations designs and manages commercial LED retrofit projects
                for manufacturing, warehousing, food processing, agriculture, and
                commercial facilities across Canada — including lighting design,
                incentive support, installation coordination, and long-term performance
                planning. The objective is simple: reduce operating costs, improve
                facility performance, and create measurable ROI with minimal
                operational disruption.
              </p>
            </div>

            <div style={{
            display: 'flex',
            gap: 14,
            alignItems: 'center',
            flexWrap: 'wrap',
            justifyContent: 'flex-end'
          }}>
              {/* <Button variant="primary" size="lg" href="/about/contact/">Get your lighting ROI estimate</Button> */}
              <Button target="_blank" variant="outline" size="lg" href="https://zfrmz.com/vjBUOoKTlKt4YAOW19oO">Book a 20-minute call</Button>
            </div>
          </div>
        }
      </div>
    </section>);

};

Object.assign(window, { LedBenefits, LedBenefitsCard });