// === Escena 06 — "Las tres piezas" (recapitulación + eco / bookend) ===
// Recap en 3 tarjetas: interruptor→dirección · regla de reenvío (tú decides / nadie entra) ·
// lo entrenas→contesta con tus datos. Luego los 3 NUNCA en fila. Calma "Privacidad primero",
// logo, y ECO final con LA ÚNICA COSA rimando con la promesa de la escena 1.
function EscenaBA06({ t }){
  // LOCUCIÓN (audio/escena-06.mp3, 29.83s): recuerda las tres piezas → uno/dos/tres con sus
  // remates → los tres nunca → privacidad primero → como siempre en Dinaup → ECO bookend.
  const T = {
    recap:0.4,        // "Recuerda las tres piezas"
    uno:2.0,          // "Uno"
    interruptor:2.7,  // "un interruptor"
    propia:4.8,       // "dirección propia"
    dos:6.2,          // "Dos"
    regla:6.8,        // "una regla de reenvío"
    decides:8.4,      // "Tú decides qué le llega"
    nadie:10.2,       // "nadie entra en tu buzón"
    tres:11.7,        // "Tres"
    entrenas:12.5,    // "lo entrenas"
    datos:13.7,       // "contesta con tus datos delante"
    nunca1:16.2,      // "Nunca borra un correo"
    nunca2:18.0,      // "Nunca lo envía por ti"
    nunca3:20.0,      // "Nunca te pide la contraseña"
    privacidad:22.5,  // "Privacidad primero"
    logo:24.3,        // "Como siempre en Dinaup"
    eco1:26.2,        // "El correo pregunta"
    eco2:28.0,        // "tus datos responden" (bookend con la escena 1)
  };

  // ---- iconografía ----
  const Check = ({ start, size=20 })=>{
    const p = clamp((t-start)/0.45,0,1), e = Easing.easeOutBack(p);
    if (p <= 0) return null;
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" style={{transform:`scale(${lerp(0.4,1,e)})`, flexShrink:0}}>
        <circle cx="12" cy="12" r="10" fill="rgba(16,185,129,0.15)"/>
        <path d="M7 12.5 L10.5 16 L17 9" fill="none" stroke="#059669" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    );
  };
  const Candado = ({ size=20 })=>(
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2" style={{display:'block', flexShrink:0}}>
      <rect x="4" y="10" width="16" height="10" rx="2" fill="rgba(16,185,129,0.12)"/>
      <path d="M8 10 V7 a4 4 0 0 1 8 0 v3"/>
    </svg>
  );
  // Icono con tachado rojo (para los tres "nunca")
  const Strike = ({ children })=>(
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#64748B" strokeWidth="2" style={{flexShrink:0}}>
      {children}
      <line x1="4" y1="20" x2="20" y2="4" stroke="#EF4444" strokeWidth="2.4" strokeLinecap="round"/>
    </svg>
  );
  const IconTrash = ()=>(<Strike><path d="M4 7 h16"/><path d="M9 7 V5 a1 1 0 0 1 1-1 h4 a1 1 0 0 1 1 1 V7"/><path d="M6 7 l1 12 a2 2 0 0 0 2 1.8 h6 a2 2 0 0 0 2-1.8 l1-12"/></Strike>);
  const IconPlane = ()=>(<Strike><path d="M22 2 L11 13"/><path d="M22 2 L15 22 L11 13 L2 9 Z"/></Strike>);
  const IconKey   = ()=>(<Strike><circle cx="7.5" cy="7.5" r="3.5"/><path d="M10 10 L19 19"/><path d="M16.5 16.5 L19 14"/><path d="M14 14 L16.5 11.5"/></Strike>);

  // ---- tarjetas de recap ----
  const c1 = { p: clamp((t-T.uno)/0.55,0,1) };  c1.e = Easing.easeOutBack(c1.p);
  const c2 = { p: clamp((t-T.dos)/0.55,0,1) };  c2.e = Easing.easeOutBack(c2.p);
  const c3 = { p: clamp((t-T.tres)/0.55,0,1) }; c3.e = Easing.easeOutBack(c3.p);

  const swE    = Easing.easeOutCubic(clamp((t-T.interruptor)/0.35,0,1));
  const arrowE = Easing.easeInOutCubic(clamp((t-T.regla)/0.6,0,1));

  const CardShell = ({ c, x, num, titulo, children })=>(
    c.p > 0 ? (
      <div style={{position:'absolute', left:x, top:240, width:440, background:'#fff', border:'1px solid #E2E8F0', borderRadius:18, padding:'22px 26px', boxShadow:'0 14px 40px rgba(15,23,42,0.08)', transform:`translateY(${(1-c.e)*26}px) scale(${lerp(0.92,1,c.e)})`, opacity:clamp(c.p*1.3,0,1)}}>
        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:14}}>
          <div className="f-mono" style={{width:36, height:36, borderRadius:100, background:'rgba(0,133,255,0.1)', color:'#0085FF', fontSize:17, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>{num}</div>
          <span className="f-plex" style={{fontSize:22, fontWeight:800, letterSpacing:'-0.01em', color:'#0F172A'}}>{titulo}</span>
        </div>
        {children}
      </div>
    ) : null
  );

  const Linea = ({ start, children, icon })=>(
    t >= start ? (
      <div className="f-plex" style={{display:'flex', alignItems:'center', gap:9, padding:'5px 0', fontSize:16, color:'#334155', opacity:clamp((t-start)/0.4,0,1)}}>
        {icon || <Check start={start}/>}
        <span>{children}</span>
      </div>
    ) : null
  );

  const chip = { display:'inline-flex', alignItems:'center', fontFamily:"'JetBrains Mono',monospace", fontSize:12, fontWeight:600, padding:'5px 10px', background:'#F1F5F9', borderRadius:8, color:'#475569' };

  // ---- pastillas "nunca" ----
  const NuncaPill = ({ start, icon, label })=>{
    const p = clamp((t-start)/0.5,0,1), e = Easing.easeOutBack(p);
    if (p <= 0) return null;
    return (
      <div style={{display:'inline-flex', alignItems:'center', gap:11, padding:'13px 22px', background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, boxShadow:'0 8px 24px rgba(15,23,42,0.06)', transform:`translateY(${(1-e)*16}px) scale(${lerp(0.9,1,e)})`, opacity:clamp(p*1.3,0,1)}}>
        {icon}
        <span className="f-plex" style={{fontSize:16.5, fontWeight:700, color:'#0F172A'}}>{label}</span>
      </div>
    );
  };

  // ---- cierre sereno + eco ----
  // Acto recap (tarjetas + nunca): se asienta con "Privacidad primero", se vela con el eco.
  let act1Op = 1;
  if (t >= T.privacidad) act1Op = lerp(1, 0.5, clamp((t-T.privacidad)/0.8,0,1));
  if (t >= T.eco1)       act1Op = lerp(0.5, 0.12, clamp((t-T.eco1)/0.6,0,1));
  const act1Filter = t >= T.privacidad ? 'saturate(0.6)' : 'none';

  const privE   = Easing.easeOutCubic(clamp((t-T.privacidad)/0.6,0,1));
  const privOut = t < T.eco1 ? 1 : lerp(1, 0, clamp((t-T.eco1)/0.6,0,1));
  const privOp  = privE * privOut;

  const logoP   = clamp((t-T.logo)/0.5,0,1), logoE = Easing.easeOutBack(logoP);
  const logoOp  = clamp(logoP*1.2,0,1) * (t < T.eco1 ? 1 : 0.6);

  const eco1P = clamp((t-T.eco1)/0.55,0,1), eco1E = Easing.easeOutCubic(eco1P);
  const eco2P = clamp((t-T.eco2)/0.55,0,1), eco2E = Easing.easeOutCubic(eco2P);

  return (
    <SlideCanvas variant="promise">
      <DemoHeader t={t} eyebrow="RECUERDA" title="Las tres piezas"/>

      {/* ===== ACTO RECAP: tres piezas + tres nunca ===== */}
      <div style={{position:'absolute', inset:0, opacity:act1Op, filter:act1Filter}}>

        {/* 1 · Un interruptor → dirección propia */}
        <CardShell c={c1} x={130} num="1" titulo="Un interruptor">
          {t >= T.interruptor && (
            <div style={{display:'flex', alignItems:'center', gap:12, padding:'4px 0 12px', opacity:clamp((t-T.interruptor)/0.4,0,1)}}>
              <div style={{width:46, height:26, borderRadius:100, background:swE>0.5?'#0085FF':'#CBD5E1', position:'relative', transition:'none'}}>
                <div style={{position:'absolute', top:3, left:lerp(3,23,swE), width:20, height:20, borderRadius:100, background:'#fff', boxShadow:'0 1px 4px rgba(15,23,42,0.3)'}}/>
              </div>
              <span className="f-plex" style={{fontSize:15, fontWeight:600, color:'#0F172A'}}>Buzón de emails</span>
            </div>
          )}
          <Linea start={T.propia}>Dirección propia</Linea>
        </CardShell>

        {/* 2 · Una regla de reenvío → tú decides / nadie entra */}
        <CardShell c={c2} x={740} num="2" titulo="Una regla de reenvío">
          {t >= T.regla && (
            <div style={{display:'flex', alignItems:'center', gap:10, padding:'4px 0 12px', opacity:clamp((t-T.regla)/0.4,0,1)}}>
              <span style={chip}>tu correo</span>
              <svg width="34" height="16" viewBox="0 0 34 16">
                <line x1="2" y1="8" x2="26" y2="8" stroke="#0085FF" strokeWidth="2.2" strokeDasharray="26" strokeDashoffset={lerp(26,0,arrowE)}/>
                <path d="M24 3 L30 8 L24 13" fill="none" stroke="#0085FF" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" opacity={clamp((arrowE-0.6)/0.4,0,1)}/>
              </svg>
              <span style={{...chip, background:'rgba(0,133,255,0.1)', color:'#0085FF'}}>el agente</span>
            </div>
          )}
          <Linea start={T.decides}>Tú decides qué le llega</Linea>
          <Linea start={T.nadie} icon={<Candado/>}>Nadie entra en tu buzón</Linea>
        </CardShell>

        {/* 3 · Lo entrenas → contesta con tus datos delante */}
        <CardShell c={c3} x={1350} num="3" titulo="Lo entrenas">
          {t >= T.entrenas && (
            <div style={{marginTop:2, marginBottom:12, background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:10, padding:'11px 13px', opacity:clamp((t-T.entrenas)/0.4,0,1)}}>
              <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8', marginBottom:8}}>SU FICHA · SYSTEM PROMPT</div>
              <div style={{height:6, borderRadius:4, background:'#E2E8F0', width:'92%', marginBottom:6}}/>
              <div style={{height:6, borderRadius:4, background:'#E2E8F0', width:'70%', marginBottom:6}}/>
              <div style={{height:6, borderRadius:4, background:'#E2E8F0', width:'82%'}}/>
            </div>
          )}
          <Linea start={T.datos}>Contesta con tus datos delante</Linea>
        </CardShell>

        {/* Los tres NUNCA en fila */}
        {t >= T.nunca1 && (
          <div style={{position:'absolute', left:0, right:0, top:640, display:'flex', justifyContent:'center', gap:22}}>
            <NuncaPill start={T.nunca1} icon={<IconTrash/>} label="Nunca borra un correo"/>
            <NuncaPill start={T.nunca2} icon={<IconPlane/>} label="Nunca lo envía por ti"/>
            <NuncaPill start={T.nunca3} icon={<IconKey/>}   label="Nunca te pide la contraseña"/>
          </div>
        )}
      </div>

      {/* ===== CIERRE SERENO ===== */}
      {/* Privacidad primero (calma) */}
      {privOp > 0.01 && (
        <div style={{position:'absolute', left:0, right:0, top:712, display:'flex', alignItems:'center', justifyContent:'center', gap:14, opacity:privOp, transform:`translateY(${(1-privE)*12}px)`}}>
          <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2">
            <path d="M12 2 L4 6 V12 C4 17 7.5 20.5 12 22 C16.5 20.5 20 17 20 12 V6 L12 2Z" fill="rgba(16,185,129,0.12)"/>
            <path d="M9 12 l2 2 l4-4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          <span className="f-plex" style={{fontSize:42, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A'}}>Privacidad primero</span>
        </div>
      )}

      {/* Marca — como siempre en Dinaup */}
      {logoOp > 0.01 && (
        <div style={{position:'absolute', left:0, right:0, top:770, display:'flex', justifyContent:'center', transform:`scale(${lerp(0.8,1,logoE)})`, opacity:logoOp}}>
          <DinaupLogo size={40}/>
        </div>
      )}

      {/* ===== ECO — bookend con la promesa de la escena 1 ===== */}
      {eco1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:436, textAlign:'center', fontSize:58, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A', opacity:eco1E, transform:`translateY(${(1-eco1E)*16}px)`}}>
          El correo pregunta…
        </div>
      )}
      {eco2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:524, textAlign:'center', fontSize:58, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A', opacity:eco2E, transform:`translateY(${(1-eco2E)*16}px)`}}>
          y <span className="grad-text">tus datos responden.</span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaBA06 });