/** YouTube banner — 2560 × 1440, safe zone 1546 × 423 centered */
function YouTubeBanner() {
  return (
    <SocialCanvas w={2560} h={1440} label="YouTube Channel Banner" bg="#0b1214">
      <HeroStack dark intensity={1.3} />

      {/* Safe area guide (rendered as subtle outline) */}
      {/* Safe zone: 1546 × 423 centered — we place all important content within 1235 × 338 for TV-safe */}

      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 1546, height: 423, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center',
      }}>
        <div style={{ marginBottom: 28 }}>
          <LogoMark size={72} color="#EC16F5" />
        </div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          padding: '10px 22px', borderRadius: 9999,
          background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)',
          backdropFilter: 'blur(10px)', marginBottom: 28,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--primary)' }} />
          <span style={{ fontSize: 14, fontWeight: 400, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.88)' }}>
            The CRAiD Report · Monthly
          </span>
        </div>
        <h1 style={{
          fontSize: 96, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.02em',
          margin: 0, color: '#fff',
        }}>
          Field notes from the <span style={{ color: 'var(--primary)' }}>agentic era.</span>
        </h1>
      </div>

      {/* Subscribe nudge off-safe-zone bottom-right */}
      <div style={{ position: 'absolute', bottom: 520, right: 260, display: 'flex', alignItems: 'center', gap: 14, color: 'rgba(255,255,255,0.5)' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M15 10l-4 5-2-2"/></svg>
        <span style={{ fontSize: 20, letterSpacing: '0.1em' }}>New drops every first Tuesday</span>
      </div>
    </SocialCanvas>
  );
}

window.YouTubeBanner = YouTubeBanner;