/* global React */
// Jullia — a lite YouTube embed. Shows the thumbnail behind the same hairline
// play affordance as VideoPlate; only swaps in the real iframe (autoplaying)
// once clicked, so no third-party script loads until the visitor asks for it.

function VideoEmbed({ youtubeId, start, caption, ratio = '16 / 9', style = {} }) {
  const [playing, setPlaying] = React.useState(false);
  const startParam = start ? `&start=${start}` : '';

  return (
    <figure
      style={{ margin: 0, position: 'relative', aspectRatio: ratio, background: 'var(--gray-990)', border: '1px solid var(--hairline)', overflow: 'hidden', ...style }}
    >
      {playing ? (
        <iframe
          title={caption || 'Jullia — film'}
          src={`https://www.youtube-nocookie.com/embed/${youtubeId}?autoplay=1&rel=0&modestbranding=1${startParam}`}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
        />
      ) : (
        <button
          onClick={() => setPlaying(true)}
          aria-label="Play film"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', padding: 0, border: 'none', cursor: 'pointer', background: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
        >
          <img
            src={`https://i.ytimg.com/vi/${youtubeId}/maxresdefault.jpg`}
            alt=""
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(0.5) contrast(1.05) brightness(0.75)' }}
          />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45) 88%), radial-gradient(90% 90% at 50% 45%, rgba(255,255,255,0.05), transparent 62%)' }} />
          <div style={{ position: 'relative', width: 74, height: 74, borderRadius: '50%', border: '1px solid var(--hairline-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'border-color var(--dur-med) var(--ease-quiet)' }}>
            <span style={{ width: 0, height: 0, borderTop: '11px solid transparent', borderBottom: '11px solid transparent', borderLeft: '18px solid var(--text-primary)', marginLeft: 4 }} />
          </div>
          {caption && (
            <figcaption style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 'var(--space-5)', textAlign: 'left', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-base)', color: 'var(--text-secondary)', lineHeight: 1.4 }}>
              {caption}
            </figcaption>
          )}
        </button>
      )}
    </figure>
  );
}

window.VideoEmbed = VideoEmbed;