/** Open-Graph / Twitter card — 1200 × 630 */
function OGImage({ kicker = 'craid.de', title = 'Design consultancy for the agentic era.', subtitle = 'Humans and AI agents, shipping outcomes as one team.' }) {
  return (
    <SocialCanvas w={1200} h={630} label="OG / Twitter Card">
      <HeroStack intensity={1.1} />

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

      {/* Content centered */}
      <div style={{ position: 'absolute', inset: 0, padding: '0 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <h1 style={{
          fontSize: 80, fontWeight: 300, lineHeight: 0.98, letterSpacing: '-0.025em',
          margin: '0 0 28px', maxWidth: 980,
        }}>
          Design consultancy<br />
          <span style={{ color: 'var(--primary)' }}>for the agentic era.</span>
        </h1>
        <p style={{ fontSize: 22, fontWeight: 300, lineHeight: 1.5, color: 'var(--fg-muted)', margin: 0, maxWidth: 720 }}>
          {subtitle}
        </p>
      </div>

      {/* Pill at bottom */}
      <div style={{
        position: 'absolute', bottom: 56, left: 56,
        display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '10px 20px', borderRadius: 9999,
        background: 'rgba(255,255,255,0.65)', border: '1px solid var(--border)',
        backdropFilter: 'blur(8px)',
      }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--primary)' }} />
        <span style={{ fontSize: 12, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>
          Berlin · Munich · Agentic Era
        </span>
      </div>
    </SocialCanvas>
  );
}

window.OGImage = OGImage;