// var-accreditations.jsx — Accreditations A/B/C. Goal: clear trust signal, simple layout.

const MEMBERSHIPS = [
  { name: 'BBB Accredited Business',               file: 'bbb.webp',              w: 140 },
  { name: 'Canadian Renewable Energy Association', file: 'crea.webp',             w: 190 },
  { name: 'DCI',                                   file: 'dci.webp',              w: 100 },
  { name: 'Avetta Member',                         file: 'avetta.webp',           w:  78 },
  { name: 'Efficiency Nova Scotia',                file: 'efficiency-ns.webp',    w: 160 },
  { name: 'Solar Alberta',                         file: 'solar-alberta.webp',    w:  96 },
  { name: 'Toronto Hydro',                         file: 'toronto-hydro.webp',    w: 160 },
  { name: 'City of Toronto',                       file: 'city-of-toronto.webp',  w: 140 },
];

const A_HEAD = 'Licensed, accredited, and in good standing.';

// ============================================================
// A — HORIZONTAL STRIP
// Full-width band, all 8 logos in one row. Strong, simple, visible.
// ============================================================
const AccreditationsVersionA = () => (
  <section data-gi-resp="accreditations" style={{ background: 'var(--gi-paper-cream)', padding: '112px 0' }}>
    <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 56, paddingBottom: 18,
        borderBottom: '1px solid rgba(15,33,51,0.18)',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
            color: 'var(--gi-sage-accent)', fontWeight: 500,
            textTransform: 'uppercase', marginBottom: 12,
          }}>Accreditations · § 07</div>
          <h2 style={{
            font: '500 40px/44px var(--ff-sans)', letterSpacing: '-0.022em',
            color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 720,
          }}>{A_HEAD}</h2>
        </div>
        <span style={{
          fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em',
          color: 'var(--gi-graphite)', fontWeight: 500, textTransform: 'uppercase',
        }}>08 MEMBERSHIPS</span>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: `repeat(${MEMBERSHIPS.length}, 1fr)`,
        alignItems: 'center',
        paddingTop: 12,
      }}>
        {MEMBERSHIPS.map((m, i) => (
          <div key={m.name} title={m.name} style={{
            padding: '20px 18px',
            borderLeft: i > 0 ? '1px solid rgba(15,33,51,0.12)' : 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            minHeight: 110,
          }}>
            <img src={`${window.GI_BASE}assets/memberships/${m.file}`} alt={m.name}
              style={{
                maxWidth: Math.min(m.w, 150), maxHeight: 64,
                width: 'auto', height: 'auto', objectFit: 'contain',
                filter: 'grayscale(100%)', opacity: 0.9,
              }}
            />
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============================================================
// B — 2-ROW GRID
// Structured 4×2 grid, named under each logo, framed cells.
// ============================================================
const AccreditationsVersionB = () => (
  <section data-gi-resp="accreditations" style={{ background: 'var(--gi-paper-cream)', padding: '128px 0' }}>
    <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        alignItems: 'end', marginBottom: 64,
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
            color: 'var(--gi-sage-accent)', fontWeight: 500,
            textTransform: 'uppercase', marginBottom: 16,
          }}>Accreditations · § 07</div>
          <h2 style={{
            font: '500 44px/48px var(--ff-sans)', letterSpacing: '-0.022em',
            color: 'var(--gi-deep-ink)', margin: 0, textWrap: 'balance', maxWidth: 540,
          }}>{A_HEAD}</h2>
        </div>
        <p style={{
          font: '400 16px/26px var(--ff-sans)', color: 'var(--gi-slate)',
          margin: 0, maxWidth: 540, textWrap: 'pretty',
        }}>
          Certifications, industry memberships, and utility relationships that
          keep projects moving through approval, interconnection, and incentive
          capture.
        </p>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        borderTop: '1px solid rgba(15,33,51,0.14)',
        borderLeft: '1px solid rgba(15,33,51,0.14)',
      }}>
        {MEMBERSHIPS.map(m => (
          <div key={m.name} style={{
            background: '#fff',
            borderRight: '1px solid rgba(15,33,51,0.14)',
            borderBottom: '1px solid rgba(15,33,51,0.14)',
            padding: '40px 28px',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            minHeight: 168,
          }}>
            <img src={`${window.GI_BASE}assets/memberships/${m.file}`} alt={m.name} title={m.name}
              style={{
                maxWidth: Math.min(m.w, 170), maxHeight: 70,
                width: 'auto', height: 'auto', objectFit: 'contain',
                filter: 'grayscale(100%)', opacity: 0.9,
              }}
            />
            <div style={{
              fontFamily: 'var(--ff-sans)', fontSize: 11, fontWeight: 500,
              letterSpacing: '0.04em', textTransform: 'uppercase',
              color: 'var(--gi-graphite)', marginTop: 16, textAlign: 'center',
            }}>{m.name}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ============================================================
// C — COMPACT BLOCK WITH INTRO TEXT
// Intro paragraph on the left, logos as a tight 2-row condensed grid on the right.
// ============================================================
const AccreditationsVersionC = () => (
  <section data-gi-resp="accreditations" style={{ background: 'var(--gi-paper-cream)', padding: '112px 0' }}>
    <div style={{ maxWidth: 1440, margin: '0 auto', padding: '0 48px' }}>
      <div style={{
        background: '#fff',
        border: '1px solid rgba(15,33,51,0.10)',
        padding: '56px 56px',
        display: 'grid', gridTemplateColumns: '360px 1fr', gap: 64,
        alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.16em',
            color: 'var(--gi-sage-accent)', fontWeight: 500,
            textTransform: 'uppercase', marginBottom: 16,
          }}>Accreditations</div>
          <h2 style={{
            font: '500 30px/36px var(--ff-sans)', letterSpacing: '-0.018em',
            color: 'var(--gi-deep-ink)', margin: '0 0 16px', textWrap: 'balance',
          }}>{A_HEAD}</h2>
          <p style={{
            font: '400 14.5px/23px var(--ff-sans)', color: 'var(--gi-slate)',
            margin: 0, textWrap: 'pretty',
          }}>
            Active members of the Canadian renewable-energy industry, with
            utility and municipal relationships that carry projects through
            interconnection and incentive capture.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          borderTop: '1px solid rgba(15,33,51,0.10)',
          borderLeft: '1px solid rgba(15,33,51,0.10)',
        }}>
          {MEMBERSHIPS.map(m => (
            <div key={m.name} title={m.name} style={{
              padding: '28px 16px',
              borderRight: '1px solid rgba(15,33,51,0.10)',
              borderBottom: '1px solid rgba(15,33,51,0.10)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              minHeight: 110,
            }}>
              <img src={`${window.GI_BASE}assets/memberships/${m.file}`} alt={m.name}
                style={{
                  maxWidth: Math.min(m.w, 130), maxHeight: 54,
                  width: 'auto', height: 'auto', objectFit: 'contain',
                  filter: 'grayscale(100%)', opacity: 0.9,
                }}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { AccreditationsVersionA, AccreditationsVersionB, AccreditationsVersionC });