function AlienRoomMedia({room=false}) {
  const video=React.useRef(null);
  const [paused,setPaused]=React.useState(()=>window.matchMedia?.('(prefers-reduced-motion: reduce)').matches || navigator.connection?.saveData || (navigator.deviceMemory > 0 && navigator.deviceMemory <= 4) || false);
  const [sound,setSound]=React.useState(room);
  const [failed,setFailed]=React.useState(false);
  React.useEffect(()=>{
    const el=video.current;if(!el)return;
    let live=true;
    el.muted=!room || !sound;
    if(paused || document.hidden)el.pause();
    else el.play()?.catch(()=>{if(!live)return;el.muted=true;setSound(false);el.play()?.catch(()=>{});});
    const visibility=()=>{if(document.hidden)el.pause();else if(!paused)el.play()?.catch(()=>{});};
    document.addEventListener('visibilitychange',visibility);
    return ()=>{live=false;el.pause();document.removeEventListener('visibilitychange',visibility);};
  },[room,paused,sound]);
  const poster=room?'assets/ALIEN/room.poster.jpg':'assets/ALIEN/sb.poster.jpg';
  return <><div className="alien-room-media" aria-hidden="true" style={{backgroundImage:`url(${poster})`,backgroundSize:'cover',backgroundPosition:'center'}}>
    {!failed && <video ref={video} key={room?'room':'space'} src={room?'assets/ALIEN/room.web.mp4':'assets/ALIEN/sb.web.mp4'} poster={poster} loop playsInline preload="metadata" muted={!room || !sound} onError={()=>{setFailed(true);setSound(false);}}/>}
    <div className="alien-room-shade"/>
  </div><div className="alien-media-controls">
    <button type="button" onClick={()=>setPaused(value=>!value)}>{paused?'Activar video':'Pausar video'}</button>
    {room && <button type="button" aria-pressed={sound} onClick={()=>{setSound(value=>!value);if(!sound){setPaused(false);if(video.current){video.current.muted=false;video.current.play()?.catch(()=>setSound(false));}}}}>{sound?'Silenciar':'Activar sonido'}</button>}
    {failed && <span>Video no disponible</span>}
  </div></>;
}

function AlienAnswerGuide({difficulty,topicIds=[]}) {
  const [missing,setMissing]=React.useState({});
  const topic=topicIds[0] || 't2';
  const guides=window.ALIEN_CONTACT_CONFIG?.formatGuides?.[topic];
  if(!guides)return null;
  return <div className="alien-answer-guide" aria-label="Guía de respuesta"><span>Entrega una respuesta completa:</span>
    {['a','n'].map(kind=><div key={kind}><strong>{kind==='a'?'YES':'NO'}</strong>{!missing[kind] && guides[kind]
      ? <img src={guides[kind]} alt={kind==='a'?'Fórmula afirmativa':'Fórmula negativa'} onError={()=>setMissing(prev=>({...prev,[kind]:true}))}/>
      : <span>{kind==='a'?'Yes + objective + am / is / are + característica.':'No + objective + am / is / are + not + característica.'}</span>}</div>)}
  </div>;
}