// FotoViewer — abre uma foto em tela cheia (toque fora ou no ✕ para voltar)
function FotoViewer({ foto, onClose }) {
  return (
    <div className="foto-viewer-bg" onClick={onClose}>
      <button className="foto-viewer-fechar" onClick={onClose} aria-label="Fechar">✕</button>
      <img
        {...window.blurImg('foto-viewer-img')}
        src={foto.src}
        alt={foto.legenda || 'Foto da atividade'}
        onClick={(e) => e.stopPropagation()}
      />
      {foto.legenda && (
        <div className="foto-viewer-legenda" onClick={(e) => e.stopPropagation()}>
          {foto.legenda}
        </div>
      )}
    </div>
  );
}

window.FotoViewer = FotoViewer;