function RemoteView({state}){
  const[phase,setPhase]=useState('enter'); // 'enter' | 'paired'
  const[code,setCode]=useState('');
  const[error,setError]=useState('');
  const[showId,setShowId]=useState(null);
  const[remoteState,setRemoteState]=useState(null);
  const[deviceId]=useState(function(){var id=localStorage.getItem('lc_remote_device');if(id)return id;var nid='rem_'+Math.random().toString(36).slice(2,10);localStorage.setItem('lc_remote_device',nid);return nid});

  // Listen for active show
  useEffect(function(){
    if(!fbdb)return;
    var ref=fbdb.ref('active_show');
    ref.on('value',function(snap){
      var id=snap.val();
      setShowId(id||null);
      if(!id){setPhase('enter');setCode('')}
    });
    return function(){ref.off()};
  },[]);

  // When paired, sync remote state from Firebase
  useEffect(function(){
    if(!fbdb||!showId||phase!=='paired')return;
    var ref=fbdb.ref('live/'+showId+'/state');
    ref.on('value',function(snap){setRemoteState(snap.val())});
    return function(){ref.off()};
  },[showId,phase]);

  // Listen for pairing code changes (operator regenerated) — unpair if code changes
  useEffect(function(){
    if(!fbdb||!showId||phase!=='paired')return;
    var ref=fbdb.ref('live/'+showId+'/pairing_code');
    ref.on('value',function(snap){
      var val=snap.val();
      if(!val){setPhase('enter');setCode('')}
    });
    return function(){ref.off()};
  },[showId,phase]);

  function doPair(){
    if(!fbdb||!showId){setError('NO ACTIVE SHOW');return}
    if(code.length!==4){setError('ENTER 4-DIGIT CODE');return}
    fbdb.ref('live/'+showId+'/pairing_code').once('value',function(snap){
      var serverCode=String(snap.val()||'');
      if(serverCode!==code){setError('WRONG CODE');return}
      var pairedRef=fbdb.ref('live/'+showId+'/remote_paired');
      pairedRef.set({deviceId:deviceId,ts:Date.now()});
      pairedRef.onDisconnect().remove();
      setPhase('paired');
      setError('');
    });
  }

  function sendCmd(type){
    if(!fbdb||!showId)return;
    if(navigator.vibrate)navigator.vibrate(30);
    fbdb.ref('live/'+showId+'/remote_cmd').set({type:type,ts:Date.now(),deviceId:deviceId});
  }

  // Dispatch wrapper — maps reducer actions to Firebase commands
  function remoteDispatch(action){
    switch(action.type){
      case'NEXT_SLIDE':sendCmd('NEXT');break;
      case'PREV_SLIDE':sendCmd('PREV');break;
      case'TOGGLE_REVEAL':sendCmd('REVEAL');break;
      case'SCORE_CYAN':sendCmd(action.payload>0?'SCORE_CYAN_UP':'SCORE_CYAN_DOWN');break;
      case'SCORE_PINK':sendCmd(action.payload>0?'SCORE_PINK_UP':'SCORE_PINK_DOWN');break;
      case'TOGGLE_SCOREBOARD':sendCmd('TOGGLE_SCOREBOARD');break;
      case'TOGGLE_SCOREBOARD_POS':sendCmd('TOGGLE_SCOREBOARD_POS');break;
      case'JUMP_SECTION':sendCmd('JUMP_SECTION:'+action.payload);break;
      case'TOGGLE_MUTE':sendCmd('TOGGLE_MUTE');break;
    }
  }

  function remoteTimerAction(action,duration){
    sendCmd('TIMER:'+action+(duration?':'+duration:''));
  }

  function remoteFx(fxType){
    sendCmd('FX:'+fxType);
  }

  // Build merged state: show data from local state, position/scores from Firebase
  function getMergedState(){
    if(!remoteState)return state;
    return {
      ...state,
      currentSlide:remoteState.slide!=null?remoteState.slide:state.currentSlide,
      scores:remoteState.scores||state.scores,
      revealState:remoteState.revealState||state.revealState,
      showScoreboard:remoteState.scoreboard!=null?remoteState.scoreboard:state.showScoreboard,
      scoreboardPosition:remoteState.scoreboardPosition||state.scoreboardPosition,
      muted:remoteState.muted!=null?remoteState.muted:state.muted,
      extrasBypassed:remoteState.extrasBypassed!=null?remoteState.extrasBypassed:state.extrasBypassed,
      bonusSections:Array.isArray(remoteState.bonusSections)?remoteState.bonusSections:state.bonusSections
    };
  }

  var mono={fontFamily:"'Space Mono',monospace"};
  var base={background:'#000',color:'#fff',width:'100vw',height:'100vh',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',padding:24,boxSizing:'border-box',userSelect:'none',WebkitUserSelect:'none'};

  if(!showId){
    return React.createElement('div',{style:base},
      React.createElement('div',{style:{...mono,color:'rgba(255,255,255,.3)',fontSize:14,textAlign:'center'}},'WAITING FOR SHOW...'),
      React.createElement('button',{onClick:function(){if(fbauth)fbauth.signOut()},style:{...mono,marginTop:32,padding:'8px 24px',fontSize:10,letterSpacing:'.06em',background:'transparent',color:'rgba(255,255,255,.25)',border:'none',cursor:'pointer',textTransform:'uppercase'}},'SIGN OUT')
    );
  }

  if(phase==='enter'){
    return React.createElement('div',{style:base},
      React.createElement('div',{style:{...mono,fontSize:12,letterSpacing:'.12em',color:'rgba(255,255,255,.5)',marginBottom:24}},'ENTER PAIRING CODE'),
      React.createElement('input',{
        type:'tel',inputMode:'numeric',maxLength:4,value:code,
        onChange:function(e){var v=e.target.value.replace(/\D/g,'').slice(0,4);setCode(v);setError('')},
        onKeyDown:function(e){if(e.key==='Enter')doPair()},
        style:{...mono,fontSize:48,letterSpacing:'.3em',textAlign:'center',width:240,padding:'12px 0',background:'transparent',border:'none',borderBottom:'2px solid #FF007F',color:'#fff',outline:'none'},
        autoFocus:true
      }),
      error?React.createElement('div',{style:{...mono,color:'#FF007F',fontSize:12,marginTop:12}},error):null,
      React.createElement('button',{onClick:doPair,style:{...mono,marginTop:24,padding:'14px 48px',fontSize:14,letterSpacing:'.08em',background:'#FF007F',color:'#fff',border:'none',cursor:'pointer',textTransform:'uppercase'}},'PAIR'),
      React.createElement('button',{onClick:function(){if(fbauth)fbauth.signOut()},style:{...mono,marginTop:32,padding:'8px 24px',fontSize:10,letterSpacing:'.06em',background:'transparent',color:'rgba(255,255,255,.25)',border:'none',cursor:'pointer',textTransform:'uppercase'}},'SIGN OUT')
    );
  }

  // Paired phase — render HostRemoteLayout (dedicated host view)
  var ms=getMergedState();
  var mFlat=flattenSlides(ms.show,ms.redFlags,ms.extrasBypassed,ms.bonusSections);
  var mSlide=mFlat[ms.currentSlide];
  if(!mSlide)return React.createElement('div',{style:base},React.createElement('div',{style:{...mono,color:'rgba(255,255,255,.3)',padding:40}},'LOADING...'));

  return <HostRemoteLayout
    state={ms} dispatch={remoteDispatch}
    flat={mFlat} slide={mSlide}
    showId={showId}
    onDisconnect={function(){setPhase('enter');setCode('')}}
  />;
}