// sol-benefits.jsx
// Solutions Page (Commercial Solar) — "Why commercial solar" benefits section.
//
// Lives between Hero and Proof Strip. Conversion-driven: answers the prospect's
// "why should I care" before any spec or process talk. Four reasons that turn
// rooftop into a business decision:
//   01 · Turn OpEx into ROI       (operating margin lift, sage)
//   02 · Maximize incentives      (tax stack, amber)
//   03 · Visible ESG progress     (reputation & reporting, sage)
//   04 · Hedge utility inflation  (30-yr fixed kWh cost, amber)
//
// Card vocabulary is original to Green Integrations: editorial document-style,
// mono numerals, sage/amber stat accents — same family as the hero spec sheet
// and the proof-strip ribbon. No icon-on-yellow-dot competitor language.

// ============================================================
// SolBenefitsCard — single benefit tile
// ============================================================
const SolBenefitsCard = ({
  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,
      }}>

      {/* top rule — appears on hover */}
      <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)',
        }} />


      {/* number badge + stat row */}
      <div style={{
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        marginBottom: 36,
      }} data-gi-resp="audit-benefits-card-stat-row">
        {/* <span style={{
          fontFamily: 'var(--ff-mono)',
          fontSize: 11,
          letterSpacing: '0.18em',
          fontWeight: 500,
          color: 'var(--gi-graphite)',
          paddingTop: 8,
        }}>
          {num}
        </span> */}
        <div>
          <div data-gi-resp="audit-benefits-card-stat" style={{
            font: '500 38px/1 var(--ff-sans)',
            letterSpacing: '-0.030em',
            color: accentColor,
            fontFeatureSettings: '"tnum" 1',
            minHeight: 76, /* reserves 2 lines (38px line-height × 2) so every card's eyebrow starts at the same y */
          }}>
            {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>

      {/* category label */}
      <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',
      }}>
        {label}
      </span>

      {/* benefit title — fixed min-height so paragraphs align across cards */}
      <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, /* reserves 2 lines so every card's body starts at the same y */
      }}>
        {title}
      </h3>

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

      {/* card CTA */}
      {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>);

};

// ============================================================
// SolBenefits — section
// ============================================================
const SolBenefits = ({ showClosingBand = true }) => {
  const cards = [
  {
    num: '01',
    accent: 'sage',
    statValue: '30-Year LCOE',
    label: 'Operating margin',
    title: 'Generate electricity at a predictable long-term cost.',
    body:
    'Commercial rooftop solar can deliver levelized electricity costs as low as $0.04/kWh over the life of the system — compared to commercial utility rates that can exceed $0.20/kWh all-in.'
  },
  {
    num: '02',
    accent: 'sage',
    statValue: 'Increase NOI',
    label: 'Incentive stack',
    title: 'Turn utility spend into property value.',
    body:
    'Every dollar not paid to the utility improves Net Operating Income and increases asset value — converting a recurring expense into a long-term operating asset.'
  },
  {
    num: '03',
    accent: 'sage',
    statValue: 'Up to 75% Funded',
    label: 'ESG & reputation',
    title: 'Capture available incentives and tax credits.',
    body:
    'On-site generation is the most legible ESG action a building can take — readable by tenants, investors, and procurement scorecards alike.'
  },
  {
    num: '04',
    accent: 'sage',
    statValue: 'Scope 2 Reduction',
    label: 'Inflation hedge',
    title: 'Lower building emissions with on-site generation.',
    body:
    'Commercial solar directly reduces Scope 2 emissions while supporting ESG reporting, procurement requirements, and long-term decarbonization targets.'
  }];


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

      {/* faint right-corner panel-row hairline motif, matches Proof Strip */}
      <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 — eyebrow + headline + supporting line, asymmetric
            ============================================================ */}
        <div data-sol-benefits-head style={{
          display: 'flex', justifyContent: 'space-between ',
          alignItems: 'center',
          marginBottom: 80
        }}>
          <div data-gi-reveal>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow>Why commercial solar</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
            }}>
              Commercial solar is long-term cost control 
              <span className="gi-text-soft-green">- not just electricity.</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
          }}>
            Commercial solar lowers operating costs, improves property economics, captures government incentives, and stabilizes long-term energy pricing — while reducing Scope 2 emissions.
          </p>
        </div>

        {/* ============================================================
            Card grid — 4 across, 1px dividers between cells.
            Background is a thin slate so the dividers read as hairlines.
            ============================================================ */}
        <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) =>
          <SolBenefitsCard key={c.num} {...c} />
          )}
        </div>

        {/* ============================================================
            Closing band — original positioning + primary CTA.
            Replaces the role of the "Unlock hidden value" tagline +
            paragraph + ROI button on the reference, but in GI vocabulary.
            ============================================================ */}
        {showClosingBand &&
        <div  data-gi-resp="audit-benefits-closing"
          data-gi-reveal
          data-sol-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: 'var(--gi-color-green)',
              marginBottom: 20,
              display: 'inline-flex',
              alignItems: 'center',
              gap: 12
            }}>
                <span aria-hidden="true" style={{
                width: 6, height: 6,
                background: 'var(--gi-color-green)',
                boxShadow: '0 0 0 4px rgba(var(--gi-color-green),0.18)',
                display: 'inline-block'
              }} />
                Unlock the value on your rooftop
              </div>
              <p style={{
              font: '400 19px/30px var(--ff-sans)',
              color: 'var(--gi-deep-ink)',
              margin: 0,
              textWrap: 'pretty',
              maxWidth: 680
            }}>
                Green Integrations designs, installs, and operates commercial solar systems that reduce operating costs and deliver long-term energy savings — from feasibility and incentives through construction and ongoing support.
              </p>
            </div>

            <div style={{
            display: 'flex',
            gap: 14,
            alignItems: 'center',
            flexWrap: 'wrap',
            justifyContent: 'flex-end'
          }}>
              {/* <Button variant="primary" size="lg" href="/solar-calculator/">Get your 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, { SolBenefits, SolBenefitsCard });