/** Instagram Carousel cover — 1080 × 1350 (4:5 portrait) */
function InstagramCarousel({ num = '03', title = 'How a 2-person + 4-agent team beats an 8-person team.' }) {
  return (
    <SocialCanvas w={1080} h={1350} label="Instagram Carousel 4:5">
      <HeroStack intensity={1.3} />

      {/* Top chrome */}
      <div style={{ position: 'absolute', top: 72, left: 72, right: 72, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <img src="../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 26 }} />
        <div style={{
          padding: '10px 22px', borderRadius: 9999,
          background: 'rgba(255,255,255,0.7)', border: '1px solid var(--border)',
          backdropFilter: 'blur(8px)',
          fontSize: 13, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-muted)',
        }}>
          Carousel · 1 / 7
        </div>
      </div>

      {/* Big number */}
      <div style={{ position: 'absolute', top: 220, left: 72, right: 72 }}>
        <div style={{
          fontSize: 380, fontWeight: 300, lineHeight: 0.85, letterSpacing: '-0.05em',
          color: 'var(--primary)', fontVariantNumeric: 'tabular-nums',
        }}>{num}</div>
      </div>

      {/* Title */}
      <div style={{ position: 'absolute', bottom: 240, left: 72, right: 72 }}>
        <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 20 }}>
          Delivery Factory
        </div>
        <h1 style={{
          fontSize: 68, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.015em',
          margin: 0, color: 'var(--fg)',
        }}>
          {title}
        </h1>
      </div>

      {/* CTA bar */}
      <div style={{
        position: 'absolute', bottom: 72, left: 72, right: 72,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 24, borderTop: '1px solid var(--border)',
      }}>
        <span style={{ fontSize: 15, fontWeight: 500, color: 'var(--fg-muted)' }}>craid.de/office</span>
        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--primary)', letterSpacing: '0.05em', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
          Swipe for the breakdown
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
        </span>
      </div>
    </SocialCanvas>
  );
}

window.InstagramCarousel = InstagramCarousel;