/** LinkedIn post / OG image — 1200 × 627 */
function LinkedInPost({ kicker = 'Insight · 04 / 26', title = 'The agentic team beats the\nhuman-only team by 4.6×.', body = 'Eight months of data from CRAiD\'s Delivery Factory. Read the breakdown on craid.de/report.' }) {
  const [l1, l2] = title.split('\n');
  return (
    <SocialCanvas w={1200} h={627} label="LinkedIn Post / OG">
      <HeroStack intensity={1.2} />

      <div style={{ position: 'absolute', top: 48, left: 56, right: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <img src="../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 26 }} />
        <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>
          {kicker}
        </span>
      </div>

      <div style={{ position: 'absolute', inset: 0, padding: '0 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <h1 style={{ fontSize: 72, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.015em', margin: '0 0 28px', maxWidth: 960 }}>
          {l1}<br />
          {l2 && <span style={{ color: 'var(--fg-muted)' }}>{l2}</span>}
        </h1>
        <p style={{ fontSize: 20, fontWeight: 300, lineHeight: 1.5, color: 'var(--fg-muted)', margin: 0, maxWidth: 780 }}>
          {body}
        </p>
      </div>

      <div style={{ position: 'absolute', bottom: 44, left: 56, right: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          padding: '14px 22px', borderRadius: 9999,
          background: 'var(--primary)', color: '#fff',
        }}>
          <span style={{ fontSize: 15, fontWeight: 600 }}>Read on craid.de</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </div>
        <LogoMark size={34} />
      </div>
    </SocialCanvas>
  );
}

window.LinkedInPost = LinkedInPost;