// === Por qué importa (11s) — explainer de texto puro tras el agente ===
// Slide pausado, sin demo y sin cues: fondo oscuro, titular y tres frases que
// entran de una en una (2.6s de aire cada una) con su icono SVG de línea que
// se dibuja solo. Cierra en verde con el beneficio doble. El presentador puede
// saltarlo con → sin perder nada: no hay más contenido que estas cuatro ideas.

function SlideAgenteExplainer({ t }){
  const eyeP = clamp((t-0.3)/0.6, 0, 1);
  const h2P  = clamp((t-0.6)/1.0, 0, 1);
  const h2e  = Easing.easeOutCubic(h2P);
  const barP = clamp((t-1.4)/0.7, 0, 1);
  const barE = Easing.easeOutCubic(barP);

  // Tres frases, una cada 2.6s — que respiren y se lean enteras.
  const lines = [
    { at:2.0, icon:'key',   pre:'La credencial ',  hi:'vive en el agente',        post:', no repartida por el equipo.' },
    { at:4.6, icon:'power', pre:'Una baja ',       hi:'corta todos los accesos',  post:', en el momento.' },
    { at:7.2, icon:'eye',   pre:'El agente ve ',   hi:'lo mismo que esa persona', post:'. Ni un dato más.' },
  ];
  const footAt = 9.2; // último beat: 9.2 + 0.6 = 9.8 → muere 1.2s antes del dur (11)

  // Iconos de línea que se dibujan (pathLength normalizado → dashoffset paramétrico)
  const drawIcon = (kind, p) => {
    const off = 1 - Easing.easeInOutQuad(p);
    const common = { fill:'none', stroke:'#62B4FF', strokeWidth:1.8, strokeLinecap:'round', strokeLinejoin:'round', pathLength:1, strokeDasharray:1, strokeDashoffset:off };
    if (kind === 'key') return (
      <svg width="46" height="46" viewBox="0 0 24 24">
        <circle cx="7.2" cy="12" r="3.4" {...common}/>
        <path d="M10.6 12 H21" {...common}/>
        <path d="M17.4 12 V15.4" {...common}/>
        <path d="M21 12 V16" {...common}/>
      </svg>
    );
    if (kind === 'power') return (
      <svg width="46" height="46" viewBox="0 0 24 24">
        <path d="M12 3.5 V11" {...common}/>
        <path d="M8.1 5.8 A7.3 7.3 0 1 0 15.9 5.8" {...common}/>
      </svg>
    );
    return (
      <svg width="46" height="46" viewBox="0 0 24 24">
        <path d="M2.5 12 C5.6 6.9 18.4 6.9 21.5 12 C18.4 17.1 5.6 17.1 2.5 12 Z" {...common}/>
        <circle cx="12" cy="12" r="3.1" {...common}/>
      </svg>
    );
  };

  return (
    <SlideCanvas variant="dark-deep">
      {/* Glow suave de profundidad tras el bloque de texto */}
      <div style={{position:'absolute',inset:0,background:'radial-gradient(ellipse 62% 48% at 50% 34%, rgba(0,133,255,0.10), transparent 62%)',pointerEvents:'none'}}/>

      {/* Eyebrow */}
      <div style={{position:'absolute',top:160,left:0,right:0,textAlign:'center',opacity:eyeP,transform:`translateY(${(1-Easing.easeOutCubic(eyeP))*-8}px)`}}>
        <span className="f-mono" style={{fontSize:13,fontWeight:600,letterSpacing:'3px',color:'rgba(255,255,255,0.45)'}}>POR QUÉ IMPORTA</span>
      </div>

      {/* Titular */}
      <div style={{position:'absolute',top:212,left:0,right:0,textAlign:'center',opacity:h2e,transform:`translateY(${(1-h2e)*16}px)`}}>
        <h2 className="f-plex" style={{fontSize:60,fontWeight:700,letterSpacing:'-0.035em',color:'#fff',margin:0,lineHeight:1.08}}>
          La IA con gobierno, <span className="grad-text">en tres frases.</span>
        </h2>
      </div>

      {/* Hairline corporativa — 4 tramos sólidos, entra tras el titular */}
      <div style={{position:'absolute',top:330,left:'50%',transform:`translateX(-50%) scaleX(${barE})`,width:220,height:3,borderRadius:100,overflow:'hidden',display:'flex',opacity:barP}}>
        <div style={{flex:1,background:'#00C1FF'}}/>
        <div style={{flex:1,background:'#FF6751'}}/>
        <div style={{flex:1,background:'#56E16A'}}/>
        <div style={{flex:1,background:'#FFDC18'}}/>
      </div>

      {/* Las tres frases */}
      <div style={{position:'absolute',top:460,left:'50%',transform:'translateX(-50%)',width:990,display:'flex',flexDirection:'column',gap:60}}>
        {lines.map((ln,i)=>{
          const iconP = clamp((t-ln.at)/0.8, 0, 1);
          const txtP  = clamp((t-(ln.at+0.25))/0.7, 0, 1);
          const txtE  = Easing.easeOutCubic(txtP);
          return (
            <div key={i} style={{display:'flex',alignItems:'center',gap:30}}>
              <div style={{width:54,height:54,flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',opacity:clamp(iconP*1.6,0,1),filter:'drop-shadow(0 0 14px rgba(0,133,255,0.45))'}}>
                {drawIcon(ln.icon, iconP)}
              </div>
              <div className="f-plex" style={{fontSize:34,fontWeight:400,letterSpacing:'-0.015em',lineHeight:1.3,whiteSpace:'nowrap',color:'rgba(255,255,255,0.80)',opacity:txtE,transform:`translateY(${(1-txtE)*14}px)`}}>
                {ln.pre}<span style={{fontWeight:700,color:'#fff'}}>{ln.hi}</span>{ln.post}
              </div>
            </div>
          );
        })}
      </div>

      {/* Cierre en verde */}
      {(()=>{
        const p = clamp((t-footAt)/0.6, 0, 1);
        const e = Easing.easeOutCubic(p);
        return (
          <div style={{position:'absolute',bottom:110,left:0,right:0,textAlign:'center',opacity:e,transform:`translateY(${(1-e)*12}px)`}}>
            <div className="f-plex" style={{fontSize:28,fontWeight:700,letterSpacing:'-0.02em',color:'#56E16A',textShadow:'0 0 30px rgba(86,225,106,0.30)'}}>
              Menos fricción y más seguridad, a la vez.
            </div>
          </div>
        );
      })()}
    </SlideCanvas>
  );
}

Object.assign(window, { SlideAgenteExplainer });