// Partner logos, supplied as real brand assets (see readme ICONOGRAPHY / ASSETS).
// Rendered on a light surface at a common optical height with generous clear
// space — never recolored, never placed on the red.
window.CORNER_PARTNERS = [
  { key: 'bianchi', src: '../../assets/partner-bianchi.webp', h: 62 },
];

function PartnerStrip({ t, compact = false }) {
  return (
    <section style={{
      background: 'var(--surface-alt)',
      borderTop: 'var(--border-width-hairline) solid var(--border-default)',
      padding: compact ? '32px 20px 40px' : '56px var(--page-gutter) 64px',
    }}>
      <h2 style={{
        font: compact ? 'var(--text-h3)' : 'var(--text-h2)',
        color: 'var(--text-primary)', margin: '0 0 8px',
      }}>
        {t.partners.title}
      </h2>
      <p style={{
        font: 'var(--text-body-m)', color: 'var(--text-secondary)',
        margin: '0 0 32px', maxWidth: 520,
      }}>
        {t.partners.lead}
      </p>
      <div className="c-partners-grid" style={{
        display: 'grid',
        // One column per partner rather than a fixed three, so the strip does
        // not leave empty tracks when a supplier comes off the list.
        gridTemplateColumns: compact ? '1fr' : `repeat(${window.CORNER_PARTNERS.length}, 1fr)`,
        gap: compact ? 24 : 20,
        maxWidth: compact ? 'none' : window.CORNER_PARTNERS.length * 340,
      }}>
        {window.CORNER_PARTNERS.map((p) => (
          <div key={p.key} style={{
            background: 'var(--surface-card)',
            border: 'var(--border-width-hairline) solid var(--border-default)',
            borderRadius: 'var(--radius-md)',
            boxShadow: 'var(--shadow-stamp-sm)',
            padding: '28px 24px',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 18,
            minHeight: compact ? 0 : 150,
          }}>
            <img src={p.src} alt="" style={{ height: p.h, maxWidth: '100%', objectFit: 'contain' }} />
            <span style={{
              font: 'var(--text-label-caps)', letterSpacing: 'var(--tracking-caps)',
              textTransform: 'uppercase', color: 'var(--text-muted)',
            }}>
              {t.partners.roles[p.key]}
            </span>
          </div>
        ))}
      </div>
    </section>
  );
}
window.PartnerStrip = PartnerStrip;