// EnterGate.jsx — institutional splash with the desk photograph + Enter / Skip.
// Slot for animator clip will drop in via prop. Honors first-visit logic + skip.
const EnterGate = ({ stillSrc, clipSrc, endStillSrc, onEnter, persistKey = 'taold-gate-seen' }) => {
  const [phase, setPhase] = React.useState('rest'); // rest | playing | done
  const videoRef = React.useRef(null);

  const dismiss = React.useCallback(() => {
    try { localStorage.setItem(persistKey, '1'); } catch (e) {}
    setPhase('done');
    onEnter && onEnter();
  }, [onEnter, persistKey]);

  const onEnterClick = () => {
    if (clipSrc && videoRef.current) {
      setPhase('playing');
      videoRef.current.play().catch(() => dismiss());
    } else {
      dismiss();
    }
  };

  if (phase === 'done') return null;

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 1000,
      background: 'var(--ld-navy)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      transition: 'opacity 800ms cubic-bezier(0.32,0.08,0.24,1)',
    }}>
      {/* Photograph framed in pearl matting */}
      <div style={{
        position: 'relative',
        maxWidth: 'min(92vw, 720px)',
        width: '100%',
        margin: 'clamp(24px, 6vh, 80px) auto',
        background: 'var(--ld-pearl-50)',
        padding: 'clamp(20px, 3vw, 36px)',
        boxShadow: '0 28px 64px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.3)',
        border: '1px solid rgba(201,162,74,0.35)',
        opacity: phase === 'rest' ? 1 : 0,
        transform: phase === 'rest' ? 'scale(1)' : 'scale(1.02)',
        transition: 'opacity 600ms ease, transform 800ms cubic-bezier(0.32,0.08,0.24,1)',
      }}>
        <div style={{
          position: 'relative',
          aspectRatio: '896 / 1195',
          background: '#0A1531',
          overflow: 'hidden',
        }}>
          <img src={stillSrc} alt="" style={{
            width: '100%', height: '100%', objectFit: 'contain', display: 'block',
          }} />
          {/* Bottom navy gradient for type protection */}
          <div aria-hidden="true" style={{
            position: 'absolute', left: 0, right: 0, bottom: 0,
            height: '40%',
            background: 'linear-gradient(to bottom, rgba(13,27,61,0) 0%, rgba(13,27,61,0.78) 100%)',
            pointerEvents: 'none',
          }} />
          {/* Centered Enter prompt over the photo */}
          <div style={{
            position: 'absolute', left: 0, right: 0, bottom: '5%',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              fontFamily: 'Montserrat, sans-serif', fontWeight: 600,
              fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase',
              color: 'var(--ld-gold)', textAlign: 'center',
            }}>The Art of Living Digitally<sup style={{ fontSize: 7, letterSpacing: 0 }}>™</sup></div>
            <button
              onClick={onEnterClick}
              style={{
                fontFamily: 'Cormorant Garamond, serif',
                fontVariantCaps: 'all-small-caps',
                fontWeight: 400, letterSpacing: '0.32em',
                fontSize: 22,
                background: 'transparent',
                color: 'var(--ld-pearl-100)',
                border: 'none',
                padding: '14px 44px',
                cursor: 'pointer',
                position: 'relative',
              }}
              onMouseEnter={e => { e.currentTarget.style.color = 'var(--ld-gold)'; }}
              onMouseLeave={e => { e.currentTarget.style.color = 'var(--ld-pearl-100)'; }}
            >
              <span style={{
                position: 'absolute', left: '50%', top: 0, transform: 'translateX(-50%)',
                width: 32, height: 1, background: 'var(--ld-gold)',
              }} />
              Enter
              <span style={{
                position: 'absolute', left: '50%', bottom: 0, transform: 'translateX(-50%)',
                width: 32, height: 1, background: 'var(--ld-gold)',
              }} />
            </button>
            <button
              onClick={dismiss}
              style={{
                fontFamily: 'Montserrat, sans-serif', fontWeight: 500,
                fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
                background: 'transparent', color: 'rgba(235,221,197,0.55)',
                border: 'none', cursor: 'pointer', padding: '6px 12px',
              }}
              onMouseEnter={e => { e.currentTarget.style.color = 'var(--ld-pearl-100)'; }}
              onMouseLeave={e => { e.currentTarget.style.color = 'rgba(235,221,197,0.55)'; }}
            >Skip →</button>
          </div>
        </div>

        {/* Caption strip below the photo */}
        <div style={{
          marginTop: 'clamp(16px, 2vw, 24px)',
          textAlign: 'center',
          fontFamily: 'Cormorant Garamond, serif',
          fontStyle: 'italic',
          fontSize: 14,
          color: 'var(--ld-ink-3)',
          letterSpacing: '0.04em',
        }}>
          A cultural institution at the intersection of digital literacy, lifestyle, and access.
        </div>
      </div>

      {/* Animator clip slot — invisible until phase === 'playing' */}
      {clipSrc && (
        <video
          ref={videoRef}
          src={clipSrc}
          poster={endStillSrc}
          playsInline
          muted
          onEnded={dismiss}
          style={{
            position: 'fixed', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover',
            opacity: phase === 'playing' ? 1 : 0,
            transition: 'opacity 600ms ease',
            pointerEvents: phase === 'playing' ? 'auto' : 'none',
            background: 'var(--ld-navy)',
          }}
        />
      )}
    </div>
  );
};

window.EnterGate = EnterGate;