// === Escena 04 — "Entrénalo" (VALLE de protección antes del clímax) ===
// Su ficha, pestaña System Prompt: un textarea donde escribes cómo trabaja.
// Tono de voz (se teclea) · qué mirar (3 chips) · qué ignorar (3 chips tachados).
// Remate: "No lo programas. Se lo explicas." → dos sellos: 1× y ∞. Sin cifras, sin contadores.
function EscenaBA04({ t }){
  // LOCUCIÓN (audio/escena-04.mp3): lo entrenas → en su ficha escribes cómo trabaja →
  // su tono (cercano, breve; nunca una fecha) → qué mirar (producto, proyecto, bono) →
  // qué ignorar (publicidad, firmas, boletines) → no lo programas, se lo explicas →
  // lo escribes una vez, lo aplica siempre → puente "una mañana cualquiera".
  const T = {
    ficha:0.3,      // "Antes de soltarlo, lo entrenas"
    focus:3.0,      // "En su ficha escribes cómo trabaja"
    tono:5.4,       // "Su tono de voz"
    tw1:6.5,        // "cercano, breve"
    tw2:9.0,        // "nunca prometa una fecha"
    mirar:11.7,     // "Qué mirar antes de contestar"
    m1:13.9,        // "el producto"
    m2:15.0,        // "el proyecto"
    m3:15.9,        // "las horas del bono"
    ignorar:18.0,   // "qué ignorar"
    ig1:19.4,       // "la publicidad"
    ig2:20.4,       // "las firmas"
    ig3:21.4,       // "los boletines"
    programa:23.1,  // "No lo programas" → se tacha la palabra
    explicas:24.5,  // "Se lo explicas"
    sello1:28.5,    // "Lo escribes una vez"
    sello2:30.2,    // "Lo aplica siempre"
    salida:32.7,    // "una mañana cualquiera"
  };

  // ---- iconos de sección (qué mirar) ----
  const IcoCaja = ()=>(
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#0085FF" strokeWidth="2" strokeLinejoin="round" style={{display:'block'}}>
      <path d="M12 2 L20 6.5 V16 L12 20.5 L4 16 V6.5 Z"/><path d="M4 6.5 L12 11 L20 6.5"/><path d="M12 11 V20.5"/>
    </svg>
  );
  const IcoProyecto = ()=>(
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#0085FF" strokeWidth="2" strokeLinejoin="round" style={{display:'block'}}>
      <path d="M3 6 h6 l2 2.5 h10 V19 H3 Z"/><path d="M8 12 v4"/><path d="M13 11 v5"/>
    </svg>
  );
  const IcoReloj = ()=>(
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#0085FF" strokeWidth="2" strokeLinecap="round" style={{display:'block'}}>
      <circle cx="12" cy="12" r="9"/><path d="M12 7 V12 L15.5 14"/>
    </svg>
  );
  const IcoIgnorar = ()=>(
    <svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="#94A3B8" strokeWidth="2.2" strokeLinecap="round" style={{display:'block'}}>
      <path d="M5 5 L15 15 M15 5 L5 15"/>
    </svg>
  );

  // ---- progresos ----
  const fichaP = clamp((t-T.ficha)/0.7,0,1), fichaE = Easing.easeOutCubic(fichaP);
  const focusP = clamp((t-T.focus)/0.5,0,1);
  const tonoP = clamp((t-T.tono)/0.5,0,1), tonoE = Easing.easeOutCubic(tonoP);
  const mirarP = clamp((t-T.mirar)/0.5,0,1), mirarE = Easing.easeOutCubic(mirarP);
  const ignorarP = clamp((t-T.ignorar)/0.5,0,1), ignorarE = Easing.easeOutCubic(ignorarP);

  const MIRAR = [ {label:'Productos', at:T.m1, ico:<IcoCaja/>}, {label:'Proyectos', at:T.m2, ico:<IcoProyecto/>}, {label:'Bonos de horas', at:T.m3, ico:<IcoReloj/>} ];
  const IGNORAR = [ {label:'Publicidad', at:T.ig1}, {label:'Firmas', at:T.ig2}, {label:'Boletines', at:T.ig3} ];

  // Remate: la palabra "programas" se cruza con una línea roja que se DIBUJA
  const remateP = clamp((t-T.programa)/0.5,0,1), remateE = Easing.easeOutCubic(remateP);
  const strike = Easing.easeInOutCubic(clamp((t-T.programa-0.45)/0.45,0,1));
  const explicasP = clamp((t-T.explicas)/0.5,0,1), explicasE = Easing.easeOutBack(explicasP);

  // Sellos
  const s1P = clamp((t-T.sello1)/0.5,0,1), s1E = Easing.easeOutBack(s1P);
  const s2P = clamp((t-T.sello2)/0.5,0,1), s2E = Easing.easeOutBack(s2P);
  const s2Pulse = t >= T.sello2 && t < T.sello2+1.1 ? Math.sin((t-T.sello2)/1.1*Math.PI) : 0;

  // Salida: todo el acto se atenúa (anticipación del clímax)
  const salidaOp = t < T.salida ? 1 : lerp(1, 0.4, clamp((t-T.salida)/0.8,0,1));
  const salidaSat = t < T.salida ? 1 : lerp(1, 0.55, clamp((t-T.salida)/0.8,0,1));

  // Chip genérico (qué mirar / qué ignorar)
  const Chip = ({ label, at, ico, muted })=>{
    const p = clamp((t-at)/0.4,0,1), e = Easing.easeOutBack(p);
    if (p <= 0) return null;
    return (
      <span style={{
        display:'inline-flex', alignItems:'center', gap:9, padding:'9px 16px',
        background: muted ? '#F1F5F9' : '#fff',
        border:`1px solid ${muted ? '#E2E8F0' : 'rgba(0,133,255,0.30)'}`,
        borderRadius:100,
        boxShadow: muted ? 'none' : '0 4px 12px rgba(0,133,255,0.10)',
        transform:`scale(${lerp(0.7,1,e)})`, opacity:clamp(p*1.3,0,1),
      }}>
        {ico || <IcoIgnorar/>}
        <span className="f-plex" style={{fontSize:15, fontWeight:600, color: muted ? '#94A3B8' : '#0F172A', textDecoration: muted ? 'line-through' : 'none', whiteSpace:'nowrap'}}>{label}</span>
      </span>
    );
  };

  // Etiqueta "# ..." de sección dentro del prompt
  const SecLabel = ({ text, p, e })=>(
    <div className="f-mono" style={{fontSize:14, fontWeight:700, letterSpacing:'0.5px', color:'#94A3B8', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*10}px)`}}>
      <span style={{color:'#CBD5E1'}}># </span>{text}
    </div>
  );

  const CARD = { x:440, y:184, w:1040 };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="ENTRÉNALO" title={<span>Su ficha. <span className="grad-text">Le explicas cómo trabaja</span></span>}/>

      <div style={{position:'absolute', inset:0, opacity:salidaOp, filter:salidaSat<1?`saturate(${salidaSat})`:'none'}}>
        {/* ===== FICHA DEL AGENTE (diálogo de configuración) ===== */}
        {fichaP > 0 && (
          <div style={{position:'absolute', left:CARD.x, top:CARD.y, width:CARD.w, opacity:clamp(fichaP*1.2,0,1), transform:`translateY(${(1-fichaE)*26}px) scale(${lerp(0.965,1,fichaE)})`, transformOrigin:'top center'}}>
            <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:18, boxShadow:'0 24px 60px rgba(15,23,42,0.12)', overflow:'hidden'}}>

              {/* Barra de título */}
              <div style={{display:'flex', alignItems:'center', gap:14, padding:'16px 22px', borderBottom:'1px solid #F1F5F9'}}>
                <div style={{width:42, height:42, borderRadius:12, background:'linear-gradient(135deg,#38BDF8,#0085FF)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, boxShadow:'0 8px 20px rgba(0,133,255,0.28)'}}>
                  <span className="f-plex" style={{color:'#fff', fontSize:16, fontWeight:800}}>IA</span>
                </div>
                <div style={{minWidth:0}}>
                  <div className="f-plex" style={{fontSize:17, fontWeight:700, color:'#0F172A', lineHeight:1.1}}>Agente de soporte</div>
                  <div className="f-plex" style={{fontSize:12.5, color:'#94A3B8'}}>Panadería El Molino, S.L.</div>
                </div>
                <div style={{marginLeft:'auto', display:'flex', alignItems:'center', gap:8}}>
                  <span className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'1.5px', color:'#CBD5E1'}}>CONFIGURACIÓN</span>
                  <span style={{width:26, height:26, borderRadius:8, border:'1px solid #E2E8F0', display:'flex', alignItems:'center', justifyContent:'center', color:'#CBD5E1', fontSize:14}}>×</span>
                </div>
              </div>

              {/* Pestañas */}
              <div style={{display:'flex', alignItems:'stretch', gap:4, padding:'0 22px', borderBottom:'1px solid #F1F5F9'}}>
                {['General','Permisos','System Prompt'].map((tab,i)=>{
                  const active = i === 2;
                  return (
                    <div key={i} className="f-plex" style={{position:'relative', padding:'13px 14px', fontSize:14, fontWeight:active?700:500, color:active?'#0085FF':'#94A3B8'}}>
                      {tab}
                      {active && <div style={{position:'absolute', left:6, right:6, bottom:-1, height:3, borderRadius:3, background:'#0085FF'}}/>}
                    </div>
                  );
                })}
              </div>

              {/* Cuerpo: el textarea del System Prompt */}
              <div style={{padding:'22px 24px 24px'}}>
                <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8', marginBottom:11}}>
                  SYSTEM PROMPT · cómo debe trabajar
                  {t >= T.focus && t < T.tw1 && <span className="caret" style={{marginLeft:4}}/>}
                </div>

                <div style={{
                  borderRadius:14, background:'#FBFDFF', padding:'22px 26px', minHeight:300,
                  border:`1.5px solid ${focusP>0 ? 'rgba(0,133,255,0.55)' : '#E2E8F0'}`,
                  boxShadow: focusP>0 ? '0 0 0 4px rgba(0,133,255,0.10)' : 'none',
                }}>
                  {/* Bloque TONO DE VOZ */}
                  {tonoP > 0 && (
                    <div style={{opacity:clamp(tonoP*1.3,0,1)}}>
                      <SecLabel text="Tono de voz" p={tonoP} e={tonoE}/>
                      <div className="f-plex" style={{marginTop:8, fontSize:23, fontWeight:600, color:'#0F172A', lineHeight:1.4}}>
                        <Typewriter text="Cercano y breve." start={T.tw1} cps={24} t={t} caret={t >= T.tw1}/>
                      </div>
                      <div className="f-plex" style={{marginTop:4, fontSize:23, fontWeight:600, color:'#0F172A', lineHeight:1.4}}>
                        <Typewriter text="Nunca prometas una fecha de entrega." start={T.tw2} cps={26} t={t} caret={t >= T.tw2}/>
                      </div>
                    </div>
                  )}

                  {/* Bloque QUÉ MIRAR */}
                  {mirarP > 0 && (
                    <div style={{marginTop:26, opacity:clamp(mirarP*1.3,0,1)}}>
                      <SecLabel text="Qué mirar antes de contestar" p={mirarP} e={mirarE}/>
                      <div style={{display:'flex', flexWrap:'wrap', gap:12, marginTop:12}}>
                        {MIRAR.map((c,i)=><Chip key={i} label={c.label} at={c.at} ico={c.ico}/>)}
                      </div>
                    </div>
                  )}

                  {/* Bloque QUÉ IGNORAR */}
                  {ignorarP > 0 && (
                    <div style={{marginTop:26, opacity:clamp(ignorarP*1.3,0,1)}}>
                      <SecLabel text="Qué ignorar" p={ignorarP} e={ignorarE}/>
                      <div style={{display:'flex', flexWrap:'wrap', gap:12, marginTop:12}}>
                        {IGNORAR.map((c,i)=><Chip key={i} label={c.label} at={c.at} muted/>)}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ===== REMATE: "No lo programas. Se lo explicas." ===== */}
        {remateP > 0 && (
          <div style={{position:'absolute', left:0, right:0, top:755, textAlign:'center', opacity:remateE, transform:`translateY(${(1-remateE)*14}px)`}}>
            <span className="f-plex" style={{fontSize:38, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A'}}>
              No lo{' '}
              <span style={{position:'relative', display:'inline-block'}}>
                <span style={{color: strike>0.6 ? '#94A3B8' : '#0F172A', transition:'color 120ms'}}>programas</span>
                {strike > 0 && (
                  <span style={{position:'absolute', left:0, top:'54%', height:5, width:`${strike*100}%`, background:'#EF4444', borderRadius:3, boxShadow:'0 2px 8px rgba(239,68,68,0.35)'}}/>
                )}
              </span>
              <span>. </span>
              {explicasP > 0 && (
                <span style={{color:'#0085FF', opacity:clamp(explicasP*1.3,0,1), transform:`scale(${lerp(0.94,1,explicasE)})`, display:'inline-block'}}>Se lo explicas.</span>
              )}
            </span>
            {explicasP > 0 && (
              <div className="f-plex" style={{marginTop:12, fontSize:19, fontWeight:500, color:'#64748B', opacity:clamp((explicasP-0.3)/0.7,0,1)}}>
                Como a alguien que entra a trabajar contigo.
              </div>
            )}
          </div>
        )}

        {/* ===== SELLOS: 1× · ∞ ===== */}
        <div style={{position:'absolute', left:0, right:0, top:880, display:'flex', justifyContent:'center', gap:28}}>
          {s1P > 0 && (
            <div style={{display:'inline-flex', alignItems:'center', gap:14, padding:'14px 26px', background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, boxShadow:'0 12px 30px rgba(15,23,42,0.08)', transform:`translateY(${(1-s1E)*16}px) scale(${lerp(0.9,1,s1E)})`, opacity:clamp(s1P*1.3,0,1)}}>
              <span className="f-mono" style={{fontSize:20, fontWeight:800, color:'#fff', background:'#0F172A', borderRadius:10, padding:'4px 12px', lineHeight:1}}>1×</span>
              <span className="f-plex" style={{fontSize:20, fontWeight:700, color:'#0F172A'}}>Lo escribes una vez</span>
            </div>
          )}
          {s2P > 0 && (
            <div style={{display:'inline-flex', alignItems:'center', gap:14, padding:'14px 26px', background:'#fff', border:'1px solid rgba(0,133,255,0.30)', borderRadius:100, boxShadow:`0 12px 30px rgba(0,133,255,${0.10+s2Pulse*0.14})`, transform:`translateY(${(1-s2E)*16}px) scale(${lerp(0.9,1,s2E)})`, opacity:clamp(s2P*1.3,0,1)}}>
              <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0085FF', lineHeight:1, transform:`scale(${1+s2Pulse*0.12})`, display:'inline-block'}}>∞</span>
              <span className="f-plex" style={{fontSize:20, fontWeight:700, color:'#0F172A'}}>Lo aplica siempre</span>
            </div>
          )}
        </div>
      </div>

      {/* Puente de salida (anticipación del clímax) */}
      {t >= T.salida && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:940, textAlign:'center', fontSize:26, fontWeight:600, color:'#334155', opacity:clamp((t-T.salida)/0.6,0,1)}}>
          Y ahora… <span style={{color:'#0085FF', fontWeight:800}}>una mañana cualquiera.</span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaBA04 });