// components-video.jsx — Video Teaser variants

function VideoWatermark() {
  return (
    <span className="video__watermark" aria-hidden>@gaby_rosa8</span>
  );
}

function VideoTeaserStandard({ blur, scrollToOffer, openCheckout }) {
  return (
    <div className="video">
      <video className="video__media" style={{ filter: `blur(${blur}px) saturate(110%)` }} src="assets/teaser.mp4" autoPlay muted loop playsInline />
      <div className="video__darken" />
      <div className="video__fade" />
      <VideoWatermark />
      <div className="video__content">
        <div className="video__lock">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FF2070" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="11" width="16" height="10" rx="2"/>
            <path d="M8 11V7a4 4 0 018 0v4"/>
          </svg>
        </div>
        <p className="video__head">"Esse é só o começo..."</p>
        <p className="video__sub">Desbloqueia pra ver tudo</p>
        <button className="btn btn--primary" data-plano="mensal" onClick={openCheckout || scrollToOffer}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="11" width="16" height="10" rx="2"/>
            <path d="M8 11V7a4 4 0 018 0v4"/>
          </svg>
          Desbloquear conteúdo
        </button>
      </div>
    </div>
  );
}

function VideoTeaserPlayful({ blur, scrollToOffer, openCheckout }) {
  // play-button overlay style — feels like a tappable preview thumbnail
  return (
    <div className="video">
      <video className="video__media" style={{ filter: `blur(${blur}px) saturate(110%)` }} src="assets/teaser.mp4" autoPlay muted loop playsInline />
      <div className="video__darken" />
      <VideoWatermark />
      <div style={{
        position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%, -50%)',
        zIndex: 2,
      }}>
        <div style={{
          width: 72, height: 72, borderRadius: '50%',
          background: 'rgba(255,32,112,0.18)',
          border: '2px solid rgba(255,32,112,0.6)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 0 32px rgba(255,32,112,0.5)',
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
        }}>
          <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
      </div>
      <div className="video__fade" />
      <div className="video__content">
        <p className="video__head" style={{ fontSize: 18 }}>Prévia bloqueada 🔒</p>
        <p className="video__sub">Mais de 30 vídeos te esperando</p>
        <button className="btn btn--primary" data-plano="mensal" onClick={openCheckout || scrollToOffer}>
          Ver tudo agora
        </button>
      </div>
    </div>
  );
}

function VideoTeaserMinimal({ blur, scrollToOffer, openCheckout }) {
  // minimal: just blur + a single inline CTA bar at the bottom
  return (
    <div className="video">
      <video className="video__media" style={{ filter: `blur(${blur}px) saturate(110%)` }} src="assets/teaser.mp4" autoPlay muted loop playsInline />
      <div className="video__darken" style={{ background: 'rgba(0,0,0,0.25)' }} />
      <VideoWatermark />
      <div className="video__fade" />
      <div style={{
        position: 'absolute', left: 16, right: 16, bottom: 24, zIndex: 2,
        display: 'flex', alignItems: 'center', gap: 12,
        background: 'rgba(22,22,22,0.85)',
        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
        border: '1px solid rgba(255,255,255,0.08)',
        padding: '12px 14px', borderRadius: 14,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: '50%',
          background: 'rgba(255,32,112,0.15)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FF2070" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="4" y="11" width="16" height="10" rx="2"/>
            <path d="M8 11V7a4 4 0 018 0v4"/>
          </svg>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 500, color: '#fff' }}>Conteúdo bloqueado</div>
          <div style={{ fontSize: 11, color: '#888' }}>Assine pra desbloquear tudo</div>
        </div>
        <button className="btn btn--primary" style={{ padding: '10px 16px', fontSize: 13 }} data-plano="mensal" onClick={openCheckout || scrollToOffer}>
          Abrir
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { VideoTeaserStandard, VideoTeaserPlayful, VideoTeaserMinimal, VideoWatermark });