/** Instagram / TikTok Story — 1080 × 1920 (9:16) */
function InstagramStory() {
  return (
    <SocialCanvas w={1080} h={1920} label="Story 9:16" bg="#0b1214">
      <HeroStack dark intensity={1.2} />
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(../assets/brand-image-018.jpeg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.65, mixBlendMode: 'screen',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(11,18,20,0.3) 0%, rgba(11,18,20,0.75) 100%)',
      }} />

      {/* Top safe zone — above the username overlay */}
      <div style={{ position: 'absolute', top: 140, left: 72, right: 72 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '10px 20px', borderRadius: 9999,
          background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.2)',
          backdropFilter: 'blur(8px)',
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--primary)' }} />
          <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.9)' }}>
            Report · Issue 04
          </span>
        </div>
      </div>

      {/* Center block */}
      <div style={{ position: 'absolute', top: '36%', left: 72, right: 72 }}>
        <h1 style={{
          fontSize: 128, fontWeight: 300, lineHeight: 0.95, letterSpacing: '-0.025em',
          margin: 0, color: '#fff',
        }}>
          The agentic<br />
          <span style={{ color: 'var(--primary)' }}>team wins.</span>
        </h1>
        <p style={{ fontSize: 24, fontWeight: 300, lineHeight: 1.5, color: 'rgba(255,255,255,0.78)', margin: '40px 0 0', maxWidth: 760 }}>
          Every month for eight months in a row.<br />
          Eight months of data, one conclusion.
        </p>
      </div>

      {/* Bottom swipe-up CTA */}
      <div style={{ position: 'absolute', bottom: 260, left: 72, right: 72, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
        <div style={{
          padding: '18px 40px', borderRadius: 9999,
          background: 'var(--primary)', color: '#fff',
          fontSize: 20, fontWeight: 600,
          boxShadow: '0 10px 30px rgba(236,22,245,0.35)',
        }}>
          Read full report →
        </div>
        <span style={{ fontSize: 14, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>
          craid.de/report
        </span>
      </div>

      {/* Bottom wordmark */}
      <div style={{ position: 'absolute', bottom: 140, left: 72, right: 72, display: 'flex', justifyContent: 'center' }}>
        <img src="../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 28, filter: 'brightness(0) invert(1)', opacity: 0.6 }} />
      </div>
    </SocialCanvas>
  );
}

window.InstagramStory = InstagramStory;