/* ---------------------------------------------------------------------------
   Demo animada do hero — composição estilo Remotion rodando no DOM.
   Timeline determinística por frames (30fps, 440 frames em loop): um cursor
   percorre a Central e executa o fluxo real, do alerta ao cliente avisado.
   Base fixa de 560×350, escalada ao container — nunca muda a altura da página.
--------------------------------------------------------------------------- */

const PR_FPS=30, PR_DUR=440;

/* Equivalente ao useCurrentFrame() do Remotion. Pausa fora da viewport,
   com a aba oculta e sob prefers-reduced-motion. */
function usePrFrame(isActive){
  const [frame,setFrame]=React.useState(90);
  React.useEffect(()=>{
    if(!isActive) return;
    let raf,start=null;
    const tick=(ts)=>{
      if(start==null) start=ts;
      setFrame(Math.floor((ts-start)/1000*PR_FPS)%PR_DUR);
      raf=requestAnimationFrame(tick);
    };
    raf=requestAnimationFrame(tick);
    return ()=>cancelAnimationFrame(raf);
  },[isActive]);
  return frame;
}

/* Equivalente ao interpolate() do Remotion, com easeInOutCubic opcional. */
function prLerp(f,[a,b],[x,y],ease){
  if(f<=a) return x;
  if(f>=b) return y;
  let t=(f-a)/(b-a);
  if(ease) t=t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2;
  return x+(y-x)*t;
}
const prIn=(f,a,b)=>f>=a&&f<b;

/* Trajeto do cursor: segmentos [fIni, fFim, de, para]. */
const PR_PATH=[
  [0,55,[505,305],[505,305]],
  [55,95,[505,305],[196,228]],   // até o botão Tratar do card novo
  [95,140,[196,228],[196,228]],
  [140,175,[196,228],[418,166]], // até "Reportar invasão" no drawer
  [175,205,[418,166],[418,166]],
  [205,235,[418,166],[452,296]], // até "Abrir chamado"
  [235,265,[452,296],[452,296]],
  [265,315,[452,296],[505,305]], // recua e observa os toasts
  [315,440,[505,305],[505,305]],
];
function prCursor(f){
  for(const [a,b,p,q] of PR_PATH){
    if(f<b) return [prLerp(f,[a,b],[p[0],q[0]],true),prLerp(f,[a,b],[p[1],q[1]],true)];
  }
  return [505,305];
}

const PR_CLICKS=[100,180,240]; // frames dos cliques (ripple + cursor "pressiona")

function PrDemoCursor({f}){
  const [x,y]=prCursor(f);
  const pressing=PR_CLICKS.some(c=>prIn(f,c,c+10));
  return (
    <>
      {PR_CLICKS.map(c=>prIn(f,c,c+16)&&(
        <span key={c} style={{position:'absolute',left:x-prLerp(f,[c,c+16],[6,26]),top:y-prLerp(f,[c,c+16],[6,26]),width:prLerp(f,[c,c+16],[12,52]),height:prLerp(f,[c,c+16],[12,52]),borderRadius:'50%',border:'2px solid var(--rcem-green-600)',opacity:prLerp(f,[c,c+16],[.8,0]),pointerEvents:'none'}}/>
      ))}
      <svg width="20" height="22" viewBox="0 0 20 22" style={{position:'absolute',left:x,top:y,transform:pressing?'scale(.82)':'scale(1)',transformOrigin:'4px 4px',filter:'drop-shadow(0 2px 4px rgba(0,0,0,.35))',pointerEvents:'none',zIndex:40}}>
        <path d="M4 2 L4 17 L8 13.5 L10.6 19 L13.2 17.8 L10.6 12.4 L16 12 Z" fill="#0c0e0c" stroke="#fff" strokeWidth="1.4" strokeLinejoin="round"/>
      </svg>
    </>
  );
}

/* Peças da mini-Central (base 560×350, tema claro). */
const PR_D={ink:'#101318',sub:'#7f8c8d',line:'rgba(8,6,13,.08)',chip:'#f2f3f5'};

function PrDemoCard({x,label,cam,type,state,fresh,f,id}){
  const entry=fresh?prLerp(f,[28,46],[0,1],true):1;
  const stateCfg=state==='pendente'?['Pendente','rgba(232,160,19,.16)','#b87709','#e8a013']
    :state==='tratando'?['Em tratamento','rgba(127,140,141,.15)','#6b7677','#9aa4a5']
    :['Chamado aberto','rgba(29,111,224,.12)','#1d6fe0','#1d6fe0'];
  return (
    <div style={{position:'absolute',left:x,top:70,width:135,height:172,background:'#fff',border:`1px solid ${PR_D.line}`,borderTop:`3px solid ${stateCfg[3]}`,borderRadius:10,padding:'9px 10px',boxSizing:'border-box',opacity:entry,transform:`translateY(${(1-entry)*-10}px) scale(${.94+entry*.06})`}}>
      <div style={{fontSize:9.5,fontWeight:800,color:PR_D.ink}}>{label}</div>
      <div style={{fontSize:7.5,color:PR_D.sub,marginBottom:5}}>{cam}</div>
      <span style={{display:'inline-block',fontSize:7,fontWeight:700,background:stateCfg[1],color:stateCfg[2],borderRadius:99,padding:'2px 7px',marginBottom:6}}>{stateCfg[0]}</span>
      <div style={{height:46,borderRadius:6,background:'rgba(79,178,255,.09)',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:6}}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1d6fe0" strokeWidth="2"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
      </div>
      <div style={{display:'flex',justifyContent:'space-between',fontSize:7,color:PR_D.sub,fontFamily:'var(--font-mono)',marginBottom:6}}><span>{type}</span><span>#{id}</span></div>
      <div style={{textAlign:'center',fontSize:8.5,fontWeight:700,color:'#fff',background:state==='pendente'?'#0c0e0c':'#1d6fe0',borderRadius:99,padding:'4px 0'}}>{state==='pendente'?'Tratar':state==='tratando'?'Classificando…':'Ver chamado'}</div>
    </div>
  );
}

function PrDemoDrawer({f}){
  // Abre após o clique em Tratar, fecha após "Abrir chamado".
  const slide=prLerp(f,[108,126],[196,0],true)+prLerp(f,[246,262],[0,196],true);
  if(slide>=196) return null;
  const picked=f>=182;
  const opts=['Vigilante no local','Atividade informada','Reportar invasão'];
  return (
    <div style={{position:'absolute',right:4,top:32,bottom:8,width:188,background:'#fff',border:`1px solid ${PR_D.line}`,borderRadius:10,boxShadow:'0 12px 32px rgba(0,0,0,.14)',padding:'12px 12px',boxSizing:'border-box',transform:`translateX(${slide}px)`,zIndex:20}}>
      <div style={{fontSize:9.5,fontWeight:800,color:PR_D.ink}}>Tratar evento #1532</div>
      <div style={{fontSize:7.5,color:PR_D.sub,marginBottom:9}}>Solar Horizonte · CAM 04</div>
      <div style={{fontSize:7.5,fontWeight:800,letterSpacing:.6,textTransform:'uppercase',color:PR_D.sub,marginBottom:5}}>Classificação</div>
      {opts.map((o,i)=>{
        const on=picked&&i===2;
        return (
          <div key={o} style={{display:'flex',alignItems:'center',gap:6,border:`1px solid ${on?'rgba(29,111,224,.45)':PR_D.line}`,background:on?'rgba(79,178,255,.08)':'transparent',borderRadius:7,padding:'5px 8px',marginBottom:4}}>
            <span style={{width:9,height:9,borderRadius:'50%',border:`1.5px solid ${on?'#1d6fe0':'#c9ced4'}`,background:on?'#1d6fe0':'transparent',boxSizing:'border-box'}}></span>
            <span style={{fontSize:8,fontWeight:on?700:500,color:PR_D.ink}}>{o}</span>
          </div>
        );
      })}
      <div style={{fontSize:7.5,fontWeight:800,letterSpacing:.6,textTransform:'uppercase',color:PR_D.sub,margin:'8px 0 5px'}}>Urgência</div>
      <div style={{display:'flex',gap:4,marginBottom:12}}>
        {['Baixa','Média','Alta'].map((u,i)=>(
          <span key={u} style={{fontSize:7.5,fontWeight:700,borderRadius:99,padding:'3px 9px',background:picked&&i===2?'rgba(229,80,57,.14)':PR_D.chip,color:picked&&i===2?'#c43a24':PR_D.sub}}>{u}</span>
        ))}
      </div>
      <div style={{position:'absolute',left:12,right:12,bottom:12,textAlign:'center',fontSize:8.5,fontWeight:700,color:'#fff',background:f>=244?'#1d6fe0':'#0c0e0c',borderRadius:99,padding:'6px 0',transition:'background .2s'}}>Abrir chamado</div>
    </div>
  );
}

function PrDemoToast({f,at,icon,title,body}){
  const t=prLerp(f,[at,at+12],[0,1],true);
  const out=prLerp(f,[at+95,at+110],[1,0],true);
  const o=Math.min(t,out);
  if(o<=0) return null;
  return (
    <div style={{display:'flex',alignItems:'center',gap:8,width:212,background:'#fff',border:`1px solid ${PR_D.line}`,borderRadius:9,boxShadow:'0 10px 28px rgba(0,0,0,.14)',padding:'8px 10px',boxSizing:'border-box',opacity:o,transform:`translateY(${(1-t)*-8}px)`}}>
      <span style={{width:24,height:24,borderRadius:7,flexShrink:0,background:'rgba(79,178,255,.12)',color:'#1d6fe0',display:'flex',alignItems:'center',justifyContent:'center',fontSize:11,fontWeight:800}}>{icon}</span>
      <div style={{minWidth:0}}>
        <div style={{fontSize:8.5,fontWeight:800,color:PR_D.ink}}>{title}</div>
        <div style={{fontSize:7.5,color:PR_D.sub,whiteSpace:'nowrap',overflow:'hidden',textOverflowEllipsis:'ellipsis',textOverflow:'ellipsis'}}>{body}</div>
      </div>
    </div>
  );
}

function PrDemoComposition({f}){
  const treated=f>=110;
  const opened=f>=250;
  const cardState=opened?'chamado':treated?'tratando':'pendente';
  const menu=['Monitor','Eventos','Chamados','Checklist','WhatsApp'];
  const kpi=prLerp(f,[330,348],[0,1],true);
  return (
    <div style={{position:'absolute',inset:0,background:'#fff',fontFamily:'var(--font-display)',overflow:'hidden',borderRadius:12}}>
      {/* Chrome do navegador */}
      <div style={{height:26,display:'flex',alignItems:'center',gap:8,padding:'0 12px',background:'#0c0e0c'}}>
        <span style={{display:'flex',gap:4}}>{['#e55039','#e8a013','#31c161'].map(c=>(<span key={c} style={{width:7,height:7,borderRadius:'50%',background:c}}/>))}</span>
        <span style={{flex:1,maxWidth:230,margin:'0 auto',fontSize:7.5,color:'rgba(255,255,255,.55)',background:'rgba(255,255,255,.08)',borderRadius:99,padding:'3px 12px',textAlign:'center',fontFamily:'var(--font-mono)'}}>connect.central — Dashboard de Eventos</span>
      </div>
      {/* Sidebar */}
      <div style={{position:'absolute',left:0,top:26,bottom:0,width:112,borderRight:`1px solid ${PR_D.line}`,background:'#fafafb',padding:'10px 8px',boxSizing:'border-box'}}>
        <div style={{display:'flex',alignItems:'center',gap:5,marginBottom:10,paddingLeft:2}}>
          <span style={{width:14,height:14,borderRadius:4,background:'var(--gradient-brand)'}}></span>
          <span style={{fontSize:7.5,fontWeight:800,letterSpacing:1,color:PR_D.ink}}>CONNECT</span>
        </div>
        {menu.map((m,i)=>(
          <div key={m} style={{fontSize:8,fontWeight:i===1?700:500,color:i===1?'#1d6fe0':PR_D.ink,background:i===1?'rgba(79,178,255,.1)':'transparent',borderRadius:6,padding:'5px 8px',marginBottom:2}}>{m}</div>
        ))}
        <div style={{position:'absolute',bottom:10,left:10,display:'flex',alignItems:'center',gap:4,fontSize:6.5,color:PR_D.sub}}>
          <span style={{width:5,height:5,borderRadius:'50%',background:'#31c161'}}></span>Operação ativa
        </div>
      </div>
      {/* Header da área principal */}
      <div style={{position:'absolute',left:112,right:0,top:26,height:34,display:'flex',alignItems:'center',justifyContent:'space-between',padding:'0 14px',borderBottom:`1px solid ${PR_D.line}`}}>
        <div>
          <div style={{fontSize:9.5,fontWeight:800,color:PR_D.ink}}>Central de Monitoramento</div>
          <div style={{fontSize:7,color:PR_D.sub}}>Fila em tempo real</div>
        </div>
        <span style={{display:'inline-flex',alignItems:'center',gap:4,fontSize:7.5,fontWeight:700,color:'#1d6fe0',background:'rgba(79,178,255,.1)',borderRadius:99,padding:'3px 9px'}}>
          <span style={{width:5,height:5,borderRadius:'50%',background:'#1d6fe0'}}></span>Ao vivo
        </span>
      </div>
      {/* Cards da fila */}
      <PrDemoCard x={129} label="Solar Horizonte" cam="CAM 04 · Portão leste" type="Pessoa" state={cardState} fresh f={f} id="1532"/>
      <PrDemoCard x={274} label="PCH Rio Claro" cam="CAM 02 · Casa de força" type="Veículo" state="pendente" f={f} id="1531"/>
      <PrDemoCard x={419} label="Eólica Vento Sul" cam="CAM 12 · Perímetro N" type="Conexão" state="pendente" f={f} id="1530"/>
      {/* Rodapé de métricas — fecha a história */}
      <div style={{position:'absolute',left:126,right:12,bottom:10,display:'flex',gap:8,opacity:kpi,transform:`translateY(${(1-kpi)*8}px)`}}>
        {[['1m42s','tempo de resposta'],['CH-0482','chamado aberto'],['Entregue','cliente no WhatsApp']].map(([v,l])=>(
          <div key={l} style={{flex:1,display:'flex',alignItems:'center',gap:6,border:`1px solid ${PR_D.line}`,borderRadius:8,background:'#fff',padding:'6px 9px'}}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#1d6fe0" strokeWidth="3"><path d="M20 6 9 17l-5-5"/></svg>
            <div><div style={{fontSize:8.5,fontWeight:800,color:PR_D.ink,fontFamily:'var(--font-mono)'}}>{v}</div><div style={{fontSize:6.5,color:PR_D.sub}}>{l}</div></div>
          </div>
        ))}
      </div>
      <PrDemoDrawer f={f}/>
      {/* Toasts */}
      <div style={{position:'absolute',right:10,top:34,display:'flex',flexDirection:'column',gap:6,zIndex:30}}>
        <PrDemoToast f={f} at={256} icon="C" title="Chamado CH-0482 aberto" body="Criado automaticamente do evento #1532"/>
        <PrDemoToast f={f} at={292} icon="W" title="Cliente avisado no WhatsApp" body="Mensagem entregue com link da imagem"/>
      </div>
      <PrDemoCursor f={f}/>
    </div>
  );
}

function PrHeroDemo(){
  const isMobile=useIsMobile();
  const wrapRef=React.useRef(null);
  const [scale,setScale]=React.useState(1);
  const [isVisible,setIsVisible]=React.useState(true);
  const [isHidden,setIsHidden]=React.useState(false);
  const reduced=useMediaQuery('(prefers-reduced-motion: reduce)');

  React.useEffect(()=>{
    const el=wrapRef.current;
    if(!el) return;
    const ro=new ResizeObserver(es=>setScale(es[0].contentRect.width/560));
    ro.observe(el);
    const io=new IntersectionObserver(es=>setIsVisible(es[0].isIntersecting),{threshold:.15});
    io.observe(el);
    const onVis=()=>setIsHidden(document.hidden);
    document.addEventListener('visibilitychange',onVis);
    return ()=>{ro.disconnect();io.disconnect();document.removeEventListener('visibilitychange',onVis);};
  },[]);

  const f=usePrFrame(isVisible&&!isHidden&&!reduced);

  // Tilt 3D sutil seguindo o mouse — desktop apenas, transform-only.
  const [tilt,setTilt]=React.useState([0,0]);
  const onMove=(e)=>{
    if(isMobile||reduced) return;
    const r=wrapRef.current.getBoundingClientRect();
    const px=(e.clientX-r.left)/r.width-.5;
    const py=(e.clientY-r.top)/r.height-.5;
    setTilt([py*-5,px*7]);
  };

  return (
    <div className="pr-word" style={{animationDelay:'1250ms',width:'100%',maxWidth:720,marginTop:isMobile?32:44,paddingInline:isMobile?16:0,boxSizing:'border-box',perspective:1100}}>
      <div ref={wrapRef} onMouseMove={onMove} onMouseLeave={()=>setTilt([0,0])}
        style={{position:'relative',width:'100%',aspectRatio:'560/350',borderRadius:Math.max(8,12*scale),boxShadow:'0 24px 64px rgba(8,6,13,.18)',border:'1px solid var(--border-default)',overflow:'hidden',background:'#fff',transform:`rotateX(${tilt[0]}deg) rotateY(${tilt[1]}deg)`,transition:'transform .25s var(--ease-out-expo)',willChange:'transform'}}>
        <div style={{position:'absolute',top:0,left:0,width:560,height:350,transform:`scale(${scale})`,transformOrigin:'top left'}}>
          <PrDemoComposition f={f}/>
        </div>
      </div>
      <div style={{marginTop:12,textAlign:'center',fontSize:11,textTransform:'uppercase',letterSpacing:'.1em',fontWeight:'var(--fw-bold)',color:'var(--rcem-grey-500)'}}>
        O fluxo real, do alerta ao cliente avisado · simulação com dados fictícios
      </div>
    </div>
  );
}

Object.assign(window,{PrHeroDemo});