/* ============ PROMO: explainer video autoplays on app open + skip ============
   Shown once per device (localStorage), right after the branded splash.
   Autoplays MUTED (so mobile browsers allow it and it starts instantly while it
   streams — no waiting for the full file). A small "tap for sound" pill unmutes;
   the skip button dismisses it. */
(function(){
  const { useState, useEffect, useRef } = React;
  const SRC = 'promo.mp4';

  function PromoVideo({ onDone }){
    const vref=useRef(null);
    const done=useRef(false);
    const [muted,setMuted]=useState(true);
    const [leaving,setLeaving]=useState(false);

    const finish=()=>{
      if(done.current) return; done.current=true;
      try{ const v=vref.current; if(v){ v.pause(); } }catch(e){}
      setLeaving(true);
      setTimeout(()=>{ onDone && onDone(); }, 420);
    };

    // autoplay muted on mount (allowed without a user gesture)
    useEffect(()=>{
      const v=vref.current; if(!v) return;
      v.muted=true;
      const p=v.play();
      if(p && p.catch) p.catch(()=>{});
    },[]);

    const unmute=()=>{
      const v=vref.current; if(!v) return;
      v.muted=false; v.volume=1; setMuted(false);
      if(v.paused){ const p=v.play(); if(p&&p.catch) p.catch(()=>{}); }
    };

    return (
      <div className={'promo'+(leaving?' leaving':'')} role="dialog" aria-label="סרטון הסבר על בנקבוק">
        <button type="button" className="promo-skip" onClick={finish}>דילוג ›</button>
        <div className="promo-stage">
          <video
            ref={vref}
            className="promo-video"
            src={SRC}
            playsInline
            autoPlay
            muted
            preload="auto"
            onEnded={finish}
            onClick={()=>{ if(muted) unmute(); }}
          />
          {muted && (
            <button type="button" className="promo-unmute" onClick={unmute} aria-label="הפעלת קול">
              🔊 הקישו לקול
            </button>
          )}
        </div>
      </div>
    );
  }

  window.PromoVideo = PromoVideo;
})();