/** LinkedIn company banner — 1128 × 191 (thinner, wordier ribbon) */
function LinkedInCompanyBanner() {
  return (
    <SocialCanvas w={1128} h={191} label="LinkedIn Company Banner">
      <HeroStack />
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '34%',
        backgroundImage: 'url(../assets/brand-image-020.jpeg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
      }} />
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '40%',
        background: 'linear-gradient(90deg, var(--bg) 0%, rgba(246,250,251,0.7) 20%, rgba(246,250,251,0) 55%)',
      }} />

      <div style={{
        position: 'absolute', top: 0, left: 40, right: 340, bottom: 0,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <h1 style={{
          fontSize: 40, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.02em',
          margin: '0 0 10px', color: 'var(--fg)',
        }}>
          Design consultancy <span style={{ color: 'var(--primary)' }}>for the agentic era.</span>
        </h1>
        <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>
          Berlin · Munich &nbsp;·&nbsp;  craid.de
        </div>
      </div>

      <div style={{ position: 'absolute', right: 28, top: 24, display: 'flex', alignItems: 'center', gap: 10 }}>
        <LogoMark size={22} />
      </div>
    </SocialCanvas>
  );
}

window.LinkedInCompanyBanner = LinkedInCompanyBanner;