/** Instagram Feed post — 1080 × 1080 square */
function InstagramFeed({ kicker = '01 / Philosophy', quote = 'Wir arbeiten schon so, wie eure\u00a0Organisation morgen arbeiten wird.' }) {
  return (
    <SocialCanvas w={1080} h={1080} label="Instagram Feed 1:1">
      <HeroStack intensity={1.4} />

      {/* Top chrome */}
      <div style={{ position: 'absolute', top: 56, left: 64, right: 64, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LogoMark size={32} />
          <img src="../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 22 }} />
        </div>
        <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--primary)' }}>
          {kicker}
        </span>
      </div>

      {/* Quote mark */}
      <div style={{
        position: 'absolute', top: 160, left: 64,
        fontSize: 180, lineHeight: 0.4, color: 'var(--primary)', fontWeight: 300,
      }}>“</div>

      {/* Body */}
      <div style={{ position: 'absolute', inset: 0, padding: '0 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <h1 style={{
          fontSize: 76, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em',
          margin: 0, color: 'var(--fg)',
        }}>
          {quote}
        </h1>
      </div>

      {/* Footer */}
      <div style={{ position: 'absolute', bottom: 56, left: 64, right: 64, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--fg-muted)' }}>@craid.de</span>
        <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)' }}>
          swipe · →
        </span>
      </div>
    </SocialCanvas>
  );
}

window.InstagramFeed = InstagramFeed;