/* ============ Splash — MP4 video intro (guaranteed autoplay) ============ */
function SplashScreen({ onDone }) {
  const vidRef  = React.useRef(null);
  const doneRef = React.useRef(false);
  const [muted, setMuted] = React.useState(true);
  const [soundShown, setSoundShown] = React.useState(false);

  function exit() {
    if (doneRef.current) return;
    doneRef.current = true;
    const v = vidRef.current;
    if (v) { v.pause(); v.muted = true; }
    const el = document.getElementById('sv-wrap');
    if (el) el.style.opacity = '0';
    setTimeout(onDone, 500);
  }

  function toggleSound() {
    const v = vidRef.current;
    if (!v) return;
    const nowMuted = !v.muted;
    v.muted = nowMuted;
    setMuted(nowMuted);
  }

  React.useEffect(function () {
    const v = vidRef.current;
    if (!v) return;

    // muted autoplay — works on every browser, every device, guaranteed
    v.muted = true;
    v.play().then(function () {
      // video playing muted — now try to unmute silently
      v.muted = false;
      setSoundShown(false); // sound already on, no need for button
    }).catch(function () {
      // muted play succeeded but unmute blocked — show sound button
      v.muted = true;
      setSoundShown(true);
    });

    v.addEventListener('ended', exit);
    var t = setTimeout(exit, 90000); // 90s hard cap
    return function () {
      v.removeEventListener('ended', exit);
      clearTimeout(t);
    };
  }, []);

  var btnBase = {
    position: 'absolute',
    fontFamily: 'Inter,system-ui,sans-serif',
    fontWeight: 700,
    letterSpacing: '.14em',
    textTransform: 'uppercase',
    cursor: 'pointer',
    backdropFilter: 'blur(8px)',
    WebkitBackdropFilter: 'blur(8px)',
    border: '1px solid rgba(255,255,255,.35)',
    borderRadius: '40px',
    background: 'rgba(0,0,0,.5)',
    color: 'rgba(255,255,255,.85)',
    zIndex: 10,
  };

  return (
    <div id="sv-wrap" style={{
      position: 'fixed', inset: 0, zIndex: 9999,
      background: '#000',
      transition: 'opacity .5s ease',
      overflow: 'hidden',
    }}>
      <video
        ref={vidRef}
        src="images/intro-animation.mp4"
        muted
        playsInline
        autoPlay
        preload="auto"
        style={{
          width: '100%', height: '100%',
          objectFit: 'contain',
          display: 'block',
        }}
      />

      {/* Sound toggle — shown when browser blocks autoplay audio */}
      {soundShown && (
        <button onClick={toggleSound} style={{
          ...btnBase,
          bottom: '80px', left: '50%',
          transform: 'translateX(-50%)',
          fontSize: '.72rem',
          padding: '11px 26px',
          animation: 'svFadeIn .5s ease both',
        }}>
          {muted ? '🔇 Tap for Sound' : '🔊 Sound On'}
        </button>
      )}

      {/* Skip */}
      <button onClick={exit} style={{
        ...btnBase,
        bottom: '28px', right: '28px',
        fontSize: '.68rem',
        padding: '9px 22px',
        animation: 'svFadeIn .4s ease 2s both',
      }}>
        Skip ›
      </button>

      <style>{`
        @keyframes svFadeIn {
          from { opacity:0; transform: translateX(-50%) translateY(8px); }
          to   { opacity:1; transform: translateX(-50%) translateY(0); }
        }
      `}</style>
    </div>
  );
}
window.SplashScreen = SplashScreen;