const PR6 = Object.keys(window).filter(k=>/DesignSystem_/.test(k)).map(k=>window[k]).find(o=>o&&o.Button)||{};
const { Eyebrow: PrEyebrow6, GradientText: PrGrad6, Icon: PrIcon6 } = PR6;

/* ---------------------------------------------------------------------------
   Mural vivo de notificações: os avisos que a Central dispara em tempo real,
   entrando em loop num painel escuro — o "coração batendo" da plataforma.
--------------------------------------------------------------------------- */

const PR_LIVE_FEED=[
  {icon:'camera',tone:'#e8a013',title:'Novo evento na fila',body:'Pessoa detectada · CAM 04 · Solar Horizonte',tag:'#1532'},
  {icon:'userCheck',tone:'#4fb2ff',title:'Evento travado',body:'Operador 2 iniciou o tratamento',tag:'68s'},
  {icon:'fileText',tone:'#4fb2ff',title:'Chamado aberto',body:'CH-0483 criado automaticamente do evento',tag:'auto'},
  {icon:'phone',tone:'#31c161',title:'Cliente avisado',body:'Mensagem entregue no WhatsApp com link seguro',tag:'entregue'},
  {icon:'fileCheck',tone:'#e8a013',title:'Checklist pendente',body:'Checklist do turno agendado para 22:00',tag:'agora'},
  {icon:'shieldCheck',tone:'#e55039',title:'SLA estourado',body:'Evento #1529 sem tratamento — supervisor notificado',tag:'escalado'},
  {icon:'refresh',tone:'#31c161',title:'Conexão restabelecida',body:'CAM 07 · UFV Boa Vista voltou após 4 min',tag:'validar'},
  {icon:'userCheck',tone:'#4fb2ff',title:'Passagem de posto',body:'Turno 18h–06h registrado, aguardando ciência',tag:'nova'},
];

function PrLive(){
  const isMobile=useIsMobile();
  const idx=React.useRef(0);
  // Sempre 4 toasts montados: o novo entra, o mais antigo sai. Altura fixa.
  const [toasts,setToasts]=React.useState(()=>PR_LIVE_FEED.slice(0,4).map((n,i)=>({...n,key:i})));

  React.useEffect(()=>{
    idx.current=4;
    const id=setInterval(()=>{
      setToasts(prev=>{
        const next={...PR_LIVE_FEED[idx.current%PR_LIVE_FEED.length],key:idx.current};
        idx.current+=1;
        return [next,...prev].slice(0,4);
      });
    },2400);
    return ()=>clearInterval(id);
  },[]);

  return (
    <section id="tempo-real" style={{boxSizing:'border-box',display:'flex',justifyContent:'center',width:'100%',padding:isMobile?'64px 20px':'90px 24px',scrollMarginTop:100,background:'var(--surface-page)'}}>
      <div style={{display:'grid',gridTemplateColumns:isMobile?'1fr':'1fr 1fr',gap:isMobile?28:56,alignItems:'center',width:'100%',maxWidth:1040}}>
        <div className={isMobile?'reveal':'reveal-l'}>
          <PrEyebrow6 tone="darkCaps" style={{marginBottom:16}}>Tempo real</PrEyebrow6>
          <h2 style={{margin:'0 0 14px',fontSize:'var(--text-h2)',fontWeight:'var(--fw-extrabold)',lineHeight:'var(--leading-display)',letterSpacing:'var(--track-tight-lg)',color:'var(--text-heading)'}}>A Central avisa <PrGrad6>antes de você perguntar</PrGrad6></h2>
          <p style={{margin:'0 0 18px',fontSize:'var(--text-lead)',lineHeight:'var(--leading-loose)',color:'var(--text-heading)'}}>
            Nada de recarregar página nem conferir planilha. Cada acontecimento — evento novo, checklist no horário, SLA apertando, conexão que voltou — <strong style={{fontWeight:600}}>chega como notificação</strong> na tela de quem precisa ver, no segundo em que acontece.
          </p>
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            {[
              'Sino e toasts por operador, sem depender de e-mail',
              'Fila, locks e status atualizam em todas as telas abertas',
              'Escalonamento automático quando o prazo aperta',
            ].map(b=>(
              <div key={b} style={{display:'flex',alignItems:'flex-start',gap:9}}>
                <span style={{color:'var(--rcem-green-600)',flexShrink:0,marginTop:2}}><PrIcon6 name="check" size={15} strokeWidth={2.6}/></span>
                <span style={{fontSize:14,lineHeight:1.5,color:'var(--rcem-ink-900)'}}>{b}</span>
              </div>
            ))}
          </div>
        </div>

        <div className={isMobile?'reveal':'reveal-r'} style={{transitionDelay:'150ms'}}>
          <div style={{borderRadius:'var(--radius-panel)',background:'var(--surface-dark)',border:'1px solid rgba(255,255,255,.08)',boxShadow:'var(--shadow-table)',padding:isMobile?'18px 16px':'24px 22px',minHeight:340,display:'flex',flexDirection:'column',gap:10,overflow:'hidden'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:4}}>
              <span style={{fontSize:10,fontWeight:800,letterSpacing:'1.5px',textTransform:'uppercase',color:'rgba(255,255,255,.5)'}}>Notificações · agora</span>
              <span style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:10,fontWeight:700,color:'#4fb2ff'}}>
                <span style={{width:7,height:7,borderRadius:'50%',background:'#4fb2ff',animation:'acs-blink 1.6s infinite'}}></span>ao vivo
              </span>
            </div>
            {toasts.map((n,i)=>(
              <div key={n.key} style={{display:'flex',alignItems:'center',gap:12,background:'rgba(255,255,255,.05)',border:'1px solid rgba(255,255,255,.08)',borderRadius:'var(--radius-lg)',padding:'12px 14px',opacity:1-i*.18,animation:i===0?'pr-card-in .5s var(--ease-out-expo) both':'none',transition:'opacity .4s ease'}}>
                <span style={{width:34,height:34,borderRadius:10,flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',background:`${n.tone}22`,color:n.tone}}>
                  <PrIcon6 name={n.icon} size={16}/>
                </span>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:12,fontWeight:700,color:'#fff'}}>{n.title}</div>
                  <div style={{fontSize:10.5,color:'rgba(255,255,255,.55)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{n.body}</div>
                </div>
                <span style={{fontSize:9,fontFamily:'var(--font-mono)',fontWeight:700,color:n.tone,background:`${n.tone}18`,borderRadius:'var(--radius-pill)',padding:'3px 9px',flexShrink:0}}>{n.tag}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window,{PrLive});