/** LinkedIn personal banner — 1584 × 396 */
function LinkedInPersonalBanner() {
  return (
    <SocialCanvas w={1584} h={396} label="LinkedIn Personal Banner">
      <HeroStack />
      {/* Full-bleed smoke image on right third */}
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '42%',
        backgroundImage: 'url(../assets/brand-image-021.jpeg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
      }} />
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '46%',
        background: 'linear-gradient(90deg, var(--bg) 0%, rgba(246,250,251,0.8) 18%, rgba(246,250,251,0) 40%)',
      }} />

      {/* Content — clear-of-avatar zone (avatar is at x≈120, y≈260, 160px ∅) */}
      <div style={{
        position: 'absolute', top: 60, left: 320, right: 560, bottom: 60,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        <div style={{ marginBottom: 22 }}>
          <Eyebrow size="md" />
        </div>
        <h1 style={{
          fontSize: 64, fontWeight: 300, lineHeight: 0.95, letterSpacing: '-0.025em',
          margin: 0, color: 'var(--fg)',
        }}>
          Humans &amp; agents,<br />
          <span style={{ color: 'var(--primary)' }}>as one team.</span>
        </h1>
      </div>

      {/* Wordmark bottom-right */}
      <div style={{ position: 'absolute', right: 48, bottom: 32, display: 'flex', alignItems: 'center', gap: 14 }}>
        <LogoMark size={28} />
        <img src="../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 24 }} />
      </div>
    </SocialCanvas>
  );
}

window.LinkedInPersonalBanner = LinkedInPersonalBanner;