// careers-hero-why.jsx
// Careers page — C01 Hero + C02 Why work at GI
// Light-led throughout (cream → cream-tinted), per user direction.
// Editorial hero with a full-bleed photo plate below — same family as
// the Energy Audits and Solar Calculator pages.

// ============================================================
// Local accent tokens — sage led. No amber on careers.
// ============================================================
const CAR_SAGE       = '#5E8F6D';
const CAR_SAGE_SOFT  = 'rgba(94,143,109,0.18)';
const CAR_SAGE_LINE  = 'rgba(94,143,109,0.32)';
const CAR_SAGE_TINT  = '#E8EFE9';

// Smooth-scroll to a section by id
const scrollToId = (id) => {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 24;
  window.scrollTo({ top: y, behavior: 'smooth' });
};

// ============================================================
// C01 · HERO — Paper Cream, editorial. Photo plate below.
// ============================================================
const CareersHero = () => (
  <section data-screen-label="01 Hero" data-gi-resp="hero" style={{
    position: 'relative',
    background: 'var(--gi-paper-cream)',
    color: 'var(--gi-deep-ink)',
    overflow: 'hidden'
  }}>
    <div aria-hidden="true" style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(1400px 700px at 88% 0%, rgba(94,143,109,0.10), transparent 60%)',
      pointerEvents: 'none'
    }} />

    <div data-gi-resp="container" style={{
      position: 'relative', maxWidth: 1440, margin: '0 auto', padding: '0 48px'
    }}>
      {/* Running header
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 28, paddingBottom: 18,
        borderBottom: '1px solid rgba(15,33,51,0.10)',
        fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
        textTransform: 'uppercase', color: 'var(--gi-graphite)'
      }}>
        <span>Company &nbsp;›&nbsp; Careers</span>
        <span>Updated May 2026</span>
      </div> */}

      {/* Eyebrow */}
      <div className="gi-hero-animate" style={{ paddingTop: 64 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          fontFamily: 'var(--ff-mono)', fontSize: 11.5,
          letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500,
          color: CAR_SAGE, marginBottom: 28
        }}>
          <span aria-hidden="true" style={{
            width: 8, height: 8, background: CAR_SAGE,
            boxShadow: `0 0 0 4px ${CAR_SAGE_SOFT}`
          }} />
          Join the team
        </div>

        {/* Editorial 2-col: headline + side panel */}
        <div data-gi-resp="hero-split" data-car-hero-split style={{
          display: 'grid', gridTemplateColumns: '1.35fr 1fr', gap: 96,
          alignItems: 'end', paddingBottom: 64
        }}>
          <h1 style={{
            font: '500 84px/88px var(--ff-sans)', letterSpacing: '-0.034em',
            color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance'
          }}>
            Build a career in commercial energy with{' '}
            <span className="gi-text-soft-green">Green Integrations</span>.
          </h1>

          <div>
            <div style={{
              fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--gi-graphite)',
              fontWeight: 500, marginBottom: 18
            }}>What this team works on</div>
            <p style={{
              font: '400 17px/28px var(--ff-sans)',
              color: 'var(--gi-slate)', margin: 0, textWrap: 'pretty'
            }}>
              Real projects for real facilities — solar, storage, efficiency,
              and EV charging across Canada. Manufacturers, food processors,
              warehouses and farms. Remote and hybrid roles open to candidates
              anywhere in Canada.
            </p>

            <div data-gi-resp="hero-cta-buttons" style={{
              display: 'flex', gap: 12, alignItems: 'center',
              flexWrap: 'wrap', marginTop: 36
            }}>
              <button
                onClick={() => scrollToId('open-roles')}
                style={{
                  fontFamily: 'var(--ff-sans)', fontSize: 15, fontWeight: 500,
                  letterSpacing: '-0.003em',
                  padding: '16px 26px', borderRadius: 2,
                  background: 'var(--gi-soft-green)', color: '#fff',
                  border: 'none', cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 12,
                  transition: 'background 200ms cubic-bezier(.2,0,0,1)'
                }}
                onMouseOver={(e) => e.currentTarget.style.background = '#2E4A39'}
                onMouseOut={(e) => e.currentTarget.style.background = 'var(--gi-soft-green)'}>
                See open roles
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                  <path d="M8 3v10M4 9l4 4 4-4" stroke="currentColor" strokeWidth="1.8"
                    strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
              <a href="/about/our-story/" style={{
                fontFamily: 'var(--ff-sans)', fontSize: 15, fontWeight: 500,
                letterSpacing: '-0.003em',
                padding: '15px 22px', borderRadius: 2,
                background: 'transparent', color: 'var(--gi-wise-blue)',
                border: '1px solid rgba(15,33,51,0.22)',
                display: 'inline-flex', alignItems: 'center', gap: 10,
                textDecoration: 'none'
              }}>
                Learn about us →
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    {/* Full-bleed photo plate with a quiet caption strip */}
    <div style={{ position: 'relative' }}>
      <div className="gi-image-settle" data-gi-image-reveal style={{
        height: 520, position: 'relative', overflow: 'hidden',
        borderTop: '1px solid rgba(15,33,51,0.12)',
        borderBottom: '1px solid rgba(15,33,51,0.12)'
      }}>
        <img
          src={`${window.GI_BASE}assets/careers.webp`}
          alt="Green Integrations field team commissioning a commercial installation"
          style={{
            width: '100%', height: '100%', objectFit: 'cover',
            filter: 'saturate(0.96) contrast(1.02) brightness(0.94)'
          }} />
      </div>

      {/* Anchor strip — 4 plain facts, no fabricated numbers */}
      <div data-gi-resp="container" style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 48px'
      }}>
        <div data-gi-resp="hero-anchors" data-car-anchors style={{
          marginTop: 56, marginBottom: 96,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0
        }}>
          {[
            { big: '360+',  label: 'Projects completed' },
            { big: '$20M+', label: 'incentives secured' },
            { big: '4', label: 'Provinces served' },
            { big: '14+', label: 'Years in commercial energy' }
          ].map((c, i) => (
            <div key={c.label} style={{
              paddingLeft: i === 0 ? 0 : 24,
              borderLeft: i === 0 ? 'none' : '1px solid rgba(15,33,51,0.10)'
            }}>
              <div style={{
                font: '500 36px/40px var(--ff-sans)', letterSpacing: '-0.028em',
                color: 'var(--gi-deep-ink)', marginBottom: 10
              }}>{c.big}</div>
              <div style={{
                fontFamily: 'var(--ff-mono)', fontSize: 10.5,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: CAR_SAGE, fontWeight: 500
              }}>{c.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ============================================================
// C02 · WHY WORK AT GREEN INTEGRATIONS — Paper Cream tint
// 4 value blocks. Generous spacing, no icons-as-decoration filler.
// ============================================================
const CareersWhy = () => {
  const blocks = [
    {
      tag: 'The work',
      title: 'Real projects.',
      body: (
        <>
          Commercial and industrial facilities across manufacturing, logistics, agriculture, food processing, and commercial real estate. Work tied directly to operational performance, infrastructure, and long-term energy strategy.
        </>
      )
    },
    {
      tag: 'The team',
      title: 'High ownership.',
      body: (
        <>
          People here work across projects, clients, and disciplines with meaningful responsibility early on. The work is collaborative, fast-moving, and highly visible internally and externally.
        </>
      )
    },
    {
      tag: 'The scope',
      title: 'Integrated energy.',
      body: (
        <>
          Solar, storage, electrification, lighting, controls, and energy strategy delivered together. Exposure to how commercial energy projects are evaluated, modelled, and deployed end-to-end.
        </>
      )
    },
    {
      tag: 'The map',
      title: 'Canada-wide.',
      body: (
        <>
          Projects span Ontario, Alberta, BC, and Nova Scotia. Many roles are remote or hybrid, with opportunities to visit active commercial project sites across Canada.
        </>
      )
    }
  ];

  return (
    <section data-gi-resp="why-section" data-screen-label="02 Why GI" style={{
      background: 'var(--gi-paper-cream)',
      padding: '0 0 128px',
      borderTop: '1px solid rgba(15,33,51,0.06)'
    }}>
      <div data-gi-resp="container" style={{
        maxWidth: 1440, margin: '0 auto', padding: '0 48px'
      }}>
        <div data-gi-resp="why-section-head" style={{ paddingTop: 128, paddingBottom: 80 }}>
          <SectionHeader
            eyebrow="Why work here"
            eyebrowClassName="gi-eyebrow--green"
            title="What the work actually looks like."
            sub="We work on real commercial energy projects with direct operational impact. People here contribute across strategy, delivery, and execution — not just isolated tasks."
          />
        </div>

        <div data-gi-reveal-stagger data-car-why-grid style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 0,
          borderTop: '1px solid rgba(15,33,51,0.12)'
        }}>
          {blocks.map((b, i) => (
            <article key={b.title} style={{
              padding: '48px 48px 48px 0',
              borderBottom: i < blocks.length - (i % 2 === 0 ? 0 : 0) - (i >= blocks.length - 2 ? 0 : 0) ? '1px solid rgba(15,33,51,0.12)' : 'none',
              borderRight: (i % 2 === 0) ? '1px solid rgba(15,33,51,0.12)' : 'none',
              paddingLeft: (i % 2 === 1) ? 56 : 0,
              display: 'flex', flexDirection: 'column', gap: 18
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 14,
                fontFamily: 'var(--ff-mono)', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.16em', textTransform: 'uppercase',
                color: CAR_SAGE
              }}>
                {b.tag}
              </div>
              <h3 style={{
                font: '500 36px/42px var(--ff-sans)', letterSpacing: '-0.022em',
                color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance'
              }}>{b.title}</h3>
              <p style={{
                font: '400 17px/28px var(--ff-sans)', color: 'var(--gi-slate)',
                margin: 0, maxWidth: 520, textWrap: 'pretty'
              }}>{b.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, {
  CareersHero, CareersWhy,
  CAR_SAGE, CAR_SAGE_SOFT, CAR_SAGE_LINE, CAR_SAGE_TINT,
  scrollToId
});