/** YouTube thumbnail — 1280 × 720. Loud + readable at small size. */
function YouTubeThumbnail({ big = 'Doro\nexplains', small = 'Why we sell outcomes, not hours.' }) {
  const [l1, l2] = big.split('\n');
  return (
    <SocialCanvas w={1280} h={720} label="YouTube Thumbnail">
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, #0b1214 0%, #1a2530 100%)' }} />
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '54%',
        backgroundImage: 'url(../assets/brand-image-022.jpeg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.85,
      }} />
      <div style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '60%',
        background: 'linear-gradient(90deg, #0b1214 0%, rgba(11,18,20,0) 40%)',
      }} />

      {/* Left — text block */}
      <div style={{ position: 'absolute', top: 60, left: 60, right: 560, bottom: 60, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', width: 'fit-content', gap: 10, marginBottom: 24,
          padding: '8px 18px', borderRadius: 9999,
          background: 'var(--primary)', color: '#fff',
          fontSize: 13, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
        }}>
          Episode · 07
        </div>
        <h1 style={{
          fontSize: 120, fontWeight: 700, lineHeight: 0.95, letterSpacing: '-0.025em',
          margin: 0, color: '#fff',
        }}>
          {l1}<br />
          {l2 && <span style={{ color: 'var(--primary)' }}>{l2}</span>}
        </h1>
        <p style={{
          fontSize: 22, fontWeight: 400, lineHeight: 1.3, color: 'rgba(255,255,255,0.75)',
          margin: '24px 0 0', maxWidth: 480,
        }}>
          {small}
        </p>
      </div>

      {/* Bottom wordmark */}
      <div style={{ position: 'absolute', bottom: 32, left: 60, display: 'flex', alignItems: 'center', gap: 10 }}>
        <LogoMark size={22} />
        <img src="../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 18, filter: 'brightness(0) invert(1)', opacity: 0.9 }} />
      </div>
      <div style={{ position: 'absolute', bottom: 32, right: 60, fontSize: 14, fontWeight: 500, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.1em' }}>
        12:47
      </div>
    </SocialCanvas>
  );
}

window.YouTubeThumbnail = YouTubeThumbnail;