// === Escena 06 — "El circuito" (repaso + reglas + eco) ===
// Los cinco pasos de un vistazo, separando lo que se monta UNA vez de lo que se repite en cada
// envío, y las tres reglas que evitan los tres errores clásicos. Cierra con el eco de la escena 3.
function EscenaSF06({ t }){
  // LOCUCIÓN (audio/escena-06.mp3): cinco pasos, solo los tres primeros son de montaje → creas el
  // documento con sus preguntas → lo das de alta como tipo → aparece solo en las fichas → enviar es
  // un botón y aceptar es otro → tres reglas para no tropezar → las preguntas se contestan antes →
  // no dibujes un recuadro → la foto del momento → ECO.
  const T = {
    cinco:0.26,      // "Cinco pasos"
    montaje:1.36,    // "solo los tres primeros son de montaje"
    p1:3.70,         // "Creas el documento con sus preguntas"
    p2:5.97,         // "Lo das de alta como tipo"
    p3:10.20,        // "aparece solo en las fichas"
    p45:12.93,       // "Enviar es un botón"
    reglas:16.77,    // "Tres reglas para no tropezar"
    r1:19.95,        // "se contestan antes"
    r1b:24.23,       // "no se guarda"
    r2:25.71,        // "No dibujes un recuadro"
    r2b:29.92,       // "el certificado de detrás"
    r3:33.87,        // "la foto del momento"
    eco1:36.19,      // "Lo montas una vez"
    eco2:38.38,      // "Y aparece solo en cada ficha"
  };

  const PASOS = [
    { n:'El documento', s:'con sus preguntas',       start:T.p1,  fase:'montaje' },
    { n:'El tipo',      s:'y su relevancia',         start:T.p2,  fase:'montaje' },
    { n:'Aparece solo', s:'en las fichas que le tocan', start:T.p3,  fase:'montaje' },
    { n:'Lo envías',    s:'un botón',                start:T.p45, fase:'envío' },
    { n:'Lo aceptas',   s:'otro botón',              start:T.p45+1.4, fase:'envío' },
  ];

  const REGLAS = [
    { n:'Las preguntas se contestan antes, en tu programa',
      s:'lo que se teclea encima del visor no se guarda', start:T.r1, sub:T.r1b },
    { n:'No dibujes un recuadro que diga «Firme aquí»',
      s:'la firma va en el certificado que se añade detrás', start:T.r2, sub:T.r2b },
    { n:'El documento es la foto del momento en que lo enviaste',
      s:'lo que cambies después no cambia lo firmado', start:T.r3, sub:T.r3 },
  ];

  const ciP = clamp((t-T.cinco)/0.5,0,1);
  const moP = clamp((t-T.montaje)/0.6,0,1);
  const rgP = clamp((t-T.reglas)/0.6,0,1);
  const sube = Easing.easeInOutCubic(clamp((t-T.reglas)/0.9,0,1));   // el circuito se compacta arriba

  const velo = t < T.eco1 ? 0 : clamp((t-T.eco1)/0.7,0,1)*0.95;
  const e1E = Easing.easeOutCubic(clamp((t-T.eco1)/0.6,0,1));
  const e2E = Easing.easeOutCubic(clamp((t-T.eco2)/0.6,0,1));
  const atenua = 1-velo/0.95;

  return (
    <SlideCanvas variant="hero">
      <div style={{position:'absolute', top:40, left:0, right:0, textAlign:'center', opacity:ciP*atenua, zIndex:5}}>
        <div className="f-plex" style={{fontSize:15, fontWeight:600, letterSpacing:'2.4px', color:'var(--dn-primary)'}}>TUTORIAL · EL CIRCUITO ENTERO</div>
        <h2 className="f-plex" style={{fontSize:44, fontWeight:700, letterSpacing:'-0.03em', margin:'14px 0 0', color:'#0F172A'}}>Cinco pasos</h2>
      </div>

      {/* ─────────── Los cinco pasos, separando montaje de envío ─────────── */}
      {0 < ciP && (
        <div style={{position:'absolute', left:96, right:96, top:lerp(256, 208, sube), opacity:atenua,
                     transform:`scale(${lerp(1, 0.88, sube)})`, transformOrigin:'50% 0'}}>
          {/* Las dos etiquetas de fase */}
          {0 < moP && (
            <div style={{display:'flex', gap:26, marginBottom:16, opacity:moP}}>
              <div style={{flex:'0 0 62%'}}>
                <div className="f-plex" style={{fontSize:19, fontWeight:700, letterSpacing:'2.2px', color:'#0085FF'}}>SE MONTA UNA VEZ</div>
                <div style={{height:4, borderRadius:99, background:'rgba(0,133,255,0.28)', marginTop:9}}/>
              </div>
              <div style={{flex:'1 1 auto'}}>
                <div className="f-plex" style={{fontSize:19, fontWeight:700, letterSpacing:'2.2px', color:'#059669'}}>EN CADA ENVÍO</div>
                <div style={{height:4, borderRadius:99, background:'rgba(16,185,129,0.28)', marginTop:9}}/>
              </div>
            </div>
          )}

          <div style={{display:'flex', alignItems:'stretch', gap:26}}>
            {PASOS.map((p,i)=>{
              const pr = clamp((t-p.start)/0.55,0,1), pe = Easing.easeOutBack(pr);
              const glow = t >= p.start && t < p.start+1.0 ? Math.sin((t-p.start)/1.0*Math.PI) : 0;
              const col = p.fase === 'montaje' ? '#0085FF' : '#059669';
              return (
                <div key={p.n} style={{flex:'1 1 0', minWidth:0, background:'#fff', borderRadius:20,
                                       border:`2px solid ${pr < 0.4 ? '#E2E8F0' : col}`, padding:'26px 24px 24px',
                                       opacity:clamp(pr*1.5,0,1), transform:`translateY(${(1-pe)*20}px)`,
                                       boxShadow:0 < glow ? `0 22px 52px ${col}33` : '0 12px 30px rgba(15,23,42,0.06)'}}>
                  <div style={{display:'flex', alignItems:'center', gap:14}}>
                    <span style={{width:48, height:48, borderRadius:99, flexShrink:0, display:'grid', placeItems:'center',
                                  background:pr < 0.4 ? '#EEF2F6' : col}}>
                      <span className="f-mono" style={{fontSize:21, fontWeight:700, color:pr < 0.4 ? '#94A3B8' : '#fff'}}>{i+1}</span>
                    </span>
                  </div>
                  <div className="f-plex" style={{fontSize:27, fontWeight:700, color:'#0F172A', marginTop:20, lineHeight:1.2, letterSpacing:'-0.015em'}}>{p.n}</div>
                  <div className="f-plex" style={{fontSize:19, color:'#94A3B8', marginTop:9}}>{p.s}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ─────────── Las tres reglas ─────────── */}
      {0 < rgP && (
        <div style={{position:'absolute', left:96, right:96, top:600, opacity:rgP*atenua}}>
          <div className="f-plex" style={{fontSize:22, fontWeight:700, letterSpacing:'2.4px', color:'#C2410C'}}>
            TRES REGLAS PARA NO TROPEZAR
          </div>
          <div style={{display:'flex', gap:26, marginTop:22}}>
            {REGLAS.map((r,i)=>{
              const p = clamp((t-r.start)/0.6,0,1), pe = Easing.easeOutCubic(p);
              const sub = clamp((t-r.sub)/0.5,0,1);
              return (
                <div key={r.n} style={{flex:'1 1 0', minWidth:0, background:'#fff', borderRadius:20,
                                       border:`2px solid ${p < 0.4 ? '#E2E8F0' : '#FED7AA'}`, padding:'28px 28px 26px',
                                       opacity:clamp(p*1.5,0,1), transform:`translateY(${(1-pe)*18}px)`,
                                       boxShadow:'0 14px 34px rgba(194,65,12,0.09)'}}>
                  <span style={{width:52, height:52, borderRadius:14, display:'grid', placeItems:'center', background:'#FFF7ED'}}>
                    <span className="f-mono" style={{fontSize:22, fontWeight:700, color:'#C2410C'}}>{i+1}</span>
                  </span>
                  <div className="f-plex" style={{fontSize:25, fontWeight:700, color:'#0F172A', marginTop:20, lineHeight:1.26}}>{r.n}</div>
                  <div className="f-plex" style={{fontSize:20, color:'#64748B', marginTop:12, opacity:sub, lineHeight:1.4}}>{r.s}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ─────────── ECO (bookend con la escena 3) ─────────── */}
      {0 < velo && <div style={{position:'absolute', inset:0, background:'#fff', opacity:velo}}/>}
      {0 < e1E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:398, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:e1E, transform:`translateY(${(1-e1E)*18}px)`}}>
          Lo montas una vez.
        </div>
      )}
      {0 < e2E && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:518, textAlign:'center', fontSize:76, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:e2E, transform:`translateY(${(1-e2E)*18}px)`}}>
          <span className="grad-text">Y aparece solo en cada ficha.</span>
        </div>
      )}
      {0 < e2E && (
        <div style={{position:'absolute', left:0, right:0, top:700, display:'flex', justifyContent:'center', opacity:e2E*0.9}}>
          {/* Logo oficial desde el CDN (doc-in · marca) */}
          <img src="https://dinaupcdn.com/dinaup/logo-sign.svg" alt="Dinaup Sign" style={{height:58, width:'auto', display:'block'}}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaSF06 });