function VoteView(){
  const[topic,setTopic]=useState(null);
  const[voteData,setVoteData]=useState({dead:0,alive:0});
  const[voted,setVoted]=useState(null);
  const[flash,setFlash]=useState(null);
  const[voteError,setVoteError]=useState(null);

  useEffect(()=>{
    if(!fbdb)return;
    const topicRef=fbdb.ref('currentTopic');
    topicRef.on('value',snap=>{
      const t=snap.val();
      setTopic(t);
      setVoted(null);
      setVoteData({dead:0,alive:0});
    });
    return()=>topicRef.off();
  },[]);

  useEffect(()=>{
    if(!fbdb||!topic)return;
    const key=topic.replace(/[^a-zA-Z0-9]/g,'_');
    const voteRef=fbdb.ref('votes/'+key);
    voteRef.on('value',snap=>{
      const v=snap.val()||{};
      setVoteData({dead:v.dead||0,alive:v.alive||0});
    });
    return()=>voteRef.off();
  },[topic]);

  function doVote(side){
    if(voted||!topic)return;
    setVoted(side);
    setFlash(side);
    setVoteError(null);
    setTimeout(()=>setFlash(null),300);
    const key=topic.replace(/[^a-zA-Z0-9]/g,'_');
    if(!fbdb){setVoted(null);setVoteError("can't reach the server — tap again");return}
    fbdb.ref('votes/'+key+'/'+side).transaction(function(c){return(c||0)+1}).then(function(res){
      if(!res||res.committed===false){setVoted(null);setVoteError('vote not registered — tap again')}
    }).catch(function(){setVoted(null);setVoteError("couldn't send your vote — tap again")});
  }

  const total=voteData.dead+voteData.alive;
  const deadPct=total?Math.round(voteData.dead/total*100):50;
  const alivePct=total?100-deadPct:50;
  const waiting=!topic;

  return(
    <div data-testid="vote-view" style={{background:'#000',color:'#fff',fontFamily:"'Neue Haas Grotesk Display Pro','Impact',sans-serif",minHeight:'100vh',display:'flex',alignItems:'center',justifyContent:'center'}}>
      <div style={{maxWidth:420,padding:'40px 24px',textAlign:'center',width:'100%'}}>
        <div style={{fontSize:72,color:'var(--signal)',textShadow:'0 0 10px rgba(255,0,127,.9),0 0 30px rgba(255,0,127,.5),0 0 60px rgba(255,0,127,.2)',marginBottom:8,letterSpacing:'.08em'}}>L</div>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:'rgba(255,255,255,.3)',letterSpacing:'.15em',textTransform:'uppercase',marginBottom:48}}>DEAD OR ALIVE</div>
        <div style={{fontSize:14,fontFamily:"'Space Mono',monospace",color:'rgba(255,255,255,.5)',letterSpacing:'.1em',textTransform:'uppercase',marginBottom:24}}>IS THIS CULTURALLY...</div>
        <div data-testid="vote-topic" style={{fontSize:'clamp(36px,10vw,56px)',textTransform:'uppercase',letterSpacing:'.04em',color:waiting?'rgba(255,255,255,.15)':'#fff',textShadow:waiting?'none':'0 0 10px rgba(255,255,255,.6),0 0 30px rgba(255,255,255,.3)',marginBottom:40,lineHeight:1.1,transition:'all .3s'}}>{topic||'WAITING FOR HOST...'}</div>
        <div style={{display:'flex',gap:16,width:'100%',marginBottom:32,opacity:waiting?.15:1,pointerEvents:waiting?'none':'auto'}}>
          <button onClick={()=>doVote('dead')} data-testid="vote-dead" style={{flex:1,padding:'24px 16px',fontFamily:"'Neue Haas Grotesk Display Pro',sans-serif",fontSize:28,letterSpacing:'.08em',cursor:'pointer',textTransform:'uppercase',background:flash==='dead'?'#FF007F':'transparent',color:flash==='dead'?'#000':'#FF007F',border:'2px solid #FF007F',boxShadow:'0 0 12px rgba(255,0,127,.3)',opacity:voted&&voted!=='dead'?.15:1,pointerEvents:voted?'none':'auto'}}>DEAD</button>
          <button onClick={()=>doVote('alive')} data-testid="vote-alive" style={{flex:1,padding:'24px 16px',fontFamily:"'Neue Haas Grotesk Display Pro',sans-serif",fontSize:28,letterSpacing:'.08em',cursor:'pointer',textTransform:'uppercase',background:flash==='alive'?'#00FFFF':'transparent',color:flash==='alive'?'#000':'#00FFFF',border:'2px solid #00FFFF',boxShadow:'0 0 12px rgba(0,255,255,.3)',opacity:voted&&voted!=='alive'?.15:1,pointerEvents:voted?'none':'auto'}}>ALIVE</button>
        </div>
        <div style={{width:'100%',marginBottom:16}}>
          <div style={{display:'flex',justifyContent:'space-between',marginBottom:6}}>
            <span style={{fontFamily:"'Space Mono',monospace",fontSize:11,letterSpacing:'.08em',color:'#FF007F'}}>{voteData.dead} DEAD</span>
            <span style={{fontFamily:"'Space Mono',monospace",fontSize:11,letterSpacing:'.08em',color:'#00FFFF'}}>{voteData.alive} ALIVE</span>
          </div>
          <div style={{width:'100%',height:8,background:'rgba(255,255,255,.05)',position:'relative',overflow:'hidden'}}>
            <div style={{position:'absolute',left:0,top:0,bottom:0,width:deadPct+'%',background:'linear-gradient(90deg,#FF007F,rgba(255,0,127,.3))',transition:'width .4s ease'}}/>
            <div style={{position:'absolute',right:0,top:0,bottom:0,width:alivePct+'%',background:'linear-gradient(270deg,#00FFFF,rgba(0,255,255,.3))',transition:'width .4s ease'}}/>
          </div>
        </div>
        <div style={{display:'flex',justifyContent:'space-between'}}>
          <span style={{fontSize:'clamp(24px,6vw,36px)',fontFamily:"'Space Mono',monospace",color:'#FF007F',textShadow:'0 0 8px rgba(255,0,127,.4)'}}>{deadPct}%</span>
          <span style={{fontSize:'clamp(24px,6vw,36px)',fontFamily:"'Space Mono',monospace",color:'#00FFFF',textShadow:'0 0 8px rgba(0,255,255,.4)'}}>{alivePct}%</span>
        </div>
        {voted&&!voteError&&<div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:'rgba(255,255,255,.3)',marginTop:24,letterSpacing:'.08em',textTransform:'uppercase'}}>VOTE CAST — {voted.toUpperCase()}</div>}
        {voteError&&<div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:'#FF007F',marginTop:24,letterSpacing:'.08em',textTransform:'uppercase'}}>{voteError}</div>}
      </div>
    </div>
  );
}