// === Escena 01 — "Contrato profesional" (hero) ===
// Apertura del tutorial de Nóminas para contables: reconoce la rutina (6 o 60
// nóminas, los mismos conceptos, el mismo asiento que cuadrar), presenta a
// Dinaup, declara para quién es y promete 3 pasos. Cierra con la ÚNICA COSA:
// "El concepto lleva el asiento dentro."
// LOCUCIÓN (audio/escena-01.mp3, 37.6s): "Llevas nóminas. Da igual si son
// seis... o sesenta. Cada mes, los mismos conceptos, los mismos seguros
// sociales... y el mismo asiento que cuadrar. Esto es Dinaup. Y este tutorial
// es para ti, que gestionas nóminas y su contabilidad. En cuatro minutos:
// cómo se configura... cómo se registra... y cómo sale el asiento, cuadrado
// al céntimo. Quédate con esta idea: el concepto lleva el asiento dentro.
// Lo configuras una vez... y todo lo demás se deriva. Empezamos por esa
// configuración."
function EscenaNO01({ t }){
  const T = {
    titulo:    0.0,   // "Llevas nóminas"                        → título contrato
    chips:     3.2,   // "o sesenta"                             → chips 6 / 60
    volumen:   4.2,   //  (apoyo)                                → "da igual el volumen"
    conceptos: 5.3,   // "los mismos conceptos"                  → columna de conceptos repetidos
    tcuenta:   9.2,   // "el mismo asiento"                      → T contable esbozado con ¿?
    logo:     11.0,   // "Esto es Dinaup"                        → logo (quién habla)
    paraTi:   13.8,   // "es para ti"                            → línea "para quién"
    promesa:  17.8,   // "En cuatro minutos"                     → eyebrow de la promesa
    paso1:    18.9,   // "cómo se configura"                     → icono paso 1
    paso2:    20.5,   // "cómo se registra"                      → icono paso 2
    paso3:    23.8,   // "cuadrado al céntimo"                   → icono paso 3 (asiento con check)
    calma:    26.0,   // "Quédate con esta idea"                 → calma (anticipación)
    unica:    27.6,   // "el concepto lleva el asiento dentro"   → ÚNICA COSA
    sub1:     30.0,   // "Lo configuras una vez"                 → subtítulo 1
    sub2:     32.1,   // "todo lo demás se deriva"               → subtítulo 2
    salida:   34.7,   // "Empezamos por esa configuración"       → cue salida
  };

  // ---- Actos: 1 (rutina) sale al entrar Dinaup; 2 (contrato) sale en la calma ----
  const act1Op = 1 - clamp((t - T.logo)/0.35, 0, 1);
  const act2Op = 1 - clamp((t - T.calma)/0.40, 0, 1);
  const showAct1 = t < T.logo + 0.40;
  const showAct2 = t >= T.logo && t < T.calma + 0.45;
  const showAct3 = t >= T.calma + 0.25;

  // ---- Acto 1 ----
  const titP = clamp((t - T.titulo)/0.7, 0, 1), titE = Easing.easeOutBack(titP);
  const chip6P  = clamp((t - T.chips)/0.45, 0, 1),        chip6E  = Easing.easeOutCubic(chip6P); // secundario: el overshoot del beat lo lleva el 60
  const chip60P = clamp((t - (T.chips+0.35))/0.45, 0, 1), chip60E = Easing.easeOutBack(chip60P);
  const volP = clamp((t - T.volumen)/0.5, 0, 1);
  const cardConP = clamp((t - T.conceptos)/0.55, 0, 1), cardConE = Easing.easeOutCubic(cardConP);
  const cardTP = clamp((t - T.tcuenta)/0.55, 0, 1), cardTE = Easing.easeOutCubic(cardTP); // contenedor sin rebote: el overshoot del beat es del ¿?
  const tDrawP = clamp((t - (T.tcuenta+0.1))/0.8, 0, 1), tDrawE = Easing.easeInOutCubic(tDrawP);
  const tLblP = clamp((t - (T.tcuenta+0.5))/0.4, 0, 1);
  const qP = clamp((t - (T.tcuenta+1.0))/0.45, 0, 1), qE = Easing.easeOutBack(qP);

  const CONCEPTOS = ['Salario base', 'Plus convenio', 'IRPF', 'SS trabajador', 'Cuota patronal'];

  // ---- Acto 2 ----
  const logoP = clamp((t - (T.logo+0.1))/0.6, 0, 1), logoE = Easing.easeOutBack(logoP);
  const tiP = clamp((t - T.paraTi)/0.7, 0, 1), tiE = Easing.easeOutCubic(tiP);
  const proP = clamp((t - T.promesa)/0.5, 0, 1);
  const checkDrawP = clamp((t - (T.paso3+0.4))/0.5, 0, 1), checkDrawE = Easing.easeInOutCubic(checkDrawP);

  const PASOS = [
    { start:T.paso1, num:'1', label:'Configurar el catálogo', color:'#0085FF' },
    { start:T.paso2, num:'2', label:'Registrar la nómina',    color:'#0085FF' },
    { start:T.paso3, num:'3', label:'Asiento cuadrado',       color:'#10B981' },
  ];

  const iconPaso = (i)=>{
    if (i === 0) return ( // sliders de configuración
      <svg width="44" height="44" viewBox="0 0 48 48" fill="none">
        <path d="M8 14 H40 M8 24 H40 M8 34 H40" stroke="#CBD5E1" strokeWidth="3" strokeLinecap="round"/>
        <circle cx="18" cy="14" r="5" fill="#fff" stroke="#0085FF" strokeWidth="3"/>
        <circle cx="32" cy="24" r="5" fill="#fff" stroke="#0085FF" strokeWidth="3"/>
        <circle cx="14" cy="34" r="5" fill="#fff" stroke="#0085FF" strokeWidth="3"/>
      </svg>
    );
    if (i === 1) return ( // documento de nómina con líneas
      <svg width="44" height="44" viewBox="0 0 48 48" fill="none">
        <path d="M12 6 H30 L38 14 V42 H12 Z" stroke="#0085FF" strokeWidth="3" strokeLinejoin="round"/>
        <path d="M30 6 V14 H38" stroke="#0085FF" strokeWidth="3" strokeLinejoin="round"/>
        <path d="M18 24 H32 M18 31 H32" stroke="#94A3B8" strokeWidth="3" strokeLinecap="round"/>
      </svg>
    );
    return ( // mini-T contable + check que se dibuja en paso3+0.4
      <svg width="44" height="44" viewBox="0 0 48 48" fill="none">
        <path d="M7 11 H41 M24 11 V40" stroke="#94A3B8" strokeWidth="3" strokeLinecap="round"/>
        <path d="M13 28 L21 36 L37 18" stroke="#10B981" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round"
          strokeDasharray="38" strokeDashoffset={38*(1-checkDrawE)} opacity={checkDrawP > 0 ? 1 : 0}/>
      </svg>
    );
  };

  // ---- Acto 3 ----
  const ideaEyeP = clamp((t - (T.calma+0.35))/0.5, 0, 1);
  const unicaP = clamp((t - T.unica)/0.7, 0, 1), unicaE = Easing.easeOutBack(unicaP);
  const unicaPulse = Math.sin(clamp((t - (T.unica+0.8))/1.1, 0, 1) * Math.PI); // UN pulse de remate
  const s1P = clamp((t - T.sub1)/0.6, 0, 1), s1E = Easing.easeOutCubic(s1P);
  const s2P = clamp((t - T.sub2)/0.6, 0, 1);
  const salP = clamp((t - T.salida)/0.5, 0, 1), salE = Easing.easeOutBack(salP);

  return (
    <SlideCanvas variant="hero">

      {/* ================= ACTO 1 — la rutina que reconoce el contable ================= */}
      {showAct1 && (
        <div style={{position:'absolute', inset:0, opacity:act1Op}}>

          {/* Título contrato */}
          {titP > 0 && (
            <div style={{position:'absolute', left:0, right:0, top:150, textAlign:'center', opacity:clamp(titP*1.3,0,1), transform:`translateY(${(1-titE)*36}px)`}}>
              <h1 className="f-plex" style={{fontSize:94, fontWeight:800, letterSpacing:'-0.04em', color:'#0F172A', margin:0, lineHeight:1.02}}>
                Llevas nóminas.
              </h1>
            </div>
          )}

          {/* Chips 6 / 60 */}
          <div style={{position:'absolute', left:0, right:0, top:318, display:'flex', alignItems:'center', justifyContent:'center', gap:22}}>
            {chip6P > 0 && (
              <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:16, padding:'12px 28px', boxShadow:'0 14px 34px rgba(15,23,42,0.08)', textAlign:'center', opacity:clamp(chip6P*1.3,0,1), transform:`scale(${lerp(0.7,1,chip6E)})`}}>
                <div className="f-mono" style={{fontSize:42, fontWeight:700, color:'#0F172A', lineHeight:1}}>6</div>
                <div className="f-mono" style={{fontSize:11, fontWeight:600, letterSpacing:'2px', color:'#94A3B8', marginTop:4}}>NÓMINAS</div>
              </div>
            )}
            {chip60P > 0 && (
              <span className="f-plex" style={{fontSize:24, fontWeight:500, color:'#94A3B8', opacity:clamp(chip60P*1.3,0,1)}}>o</span>
            )}
            {chip60P > 0 && (
              <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:16, padding:'12px 28px', boxShadow:'0 14px 34px rgba(15,23,42,0.08)', textAlign:'center', opacity:clamp(chip60P*1.3,0,1), transform:`scale(${lerp(0.7,1,chip60E)})`}}>
                <div className="f-mono" style={{fontSize:42, fontWeight:700, color:'#0F172A', lineHeight:1}}>60</div>
                <div className="f-mono" style={{fontSize:11, fontWeight:600, letterSpacing:'2px', color:'#94A3B8', marginTop:4}}>NÓMINAS</div>
              </div>
            )}
          </div>
          {volP > 0 && (
            <div className="f-plex" style={{position:'absolute', left:0, right:0, top:426, textAlign:'center', fontSize:17, fontWeight:500, color:'#64748B', opacity:volP}}>
              da igual el volumen
            </div>
          )}

          {/* Banda inferior: conceptos repetidos + T esbozado */}
          <div style={{position:'absolute', left:0, right:0, top:490, display:'flex', justifyContent:'center', gap:60}}>

            {/* Columna de conceptos que se repiten cada mes */}
            {cardConP > 0 && (
              <div style={{width:400, background:'#fff', border:'1px solid #E2E8F0', borderRadius:20, boxShadow:'0 22px 50px rgba(15,23,42,0.07)', padding:'24px 30px', opacity:clamp(cardConP*1.3,0,1), transform:`translateY(${(1-cardConE)*24}px)`}}>
                <div className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8', marginBottom:16}}>CADA MES, LO MISMO</div>
                <div style={{display:'flex', flexDirection:'column', gap:9}}>
                  {CONCEPTOS.map((c,i)=>{
                    const cp = clamp((t - (T.conceptos + 0.25 + i*0.35))/0.4, 0, 1);
                    const ce = Easing.easeOutCubic(cp);
                    if (cp <= 0) return null;
                    return (
                      <div key={c} className="f-plex" style={{display:'flex', alignItems:'center', gap:10, background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:10, padding:'8px 16px', fontSize:17, fontWeight:500, color:'#475569', opacity:clamp(cp*1.3,0,1), transform:`translateY(${(1-ce)*12}px)`}}>
                        <span style={{width:6, height:6, borderRadius:100, background:'#94A3B8', flexShrink:0}}/>
                        {c}
                      </div>
                    );
                  })}
                </div>
                {t >= T.conceptos + 2.4 && (
                  <div className="f-plex" style={{marginTop:14, fontSize:14, fontStyle:'italic', color:'#94A3B8', opacity:clamp((t-(T.conceptos+2.4))/0.5,0,1)}}>
                    y otra vez el mes siguiente
                  </div>
                )}
              </div>
            )}

            {/* T contable esbozado con ¿? de cuadre */}
            {cardTP > 0 && (
              <div style={{width:400, background:'#fff', border:'1px solid #E2E8F0', borderRadius:20, boxShadow:'0 22px 50px rgba(15,23,42,0.07)', padding:'24px 30px', position:'relative', opacity:clamp(cardTP*1.3,0,1), transform:`translateY(${(1-cardTE)*28}px)`}}>
                <div className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8', marginBottom:8}}>Y EL MISMO ASIENTO</div>
                <svg width="340" height="230" viewBox="0 0 340 230" style={{display:'block'}}>
                  {/* T que se dibuja (dasharray/offset) */}
                  <path d="M20 46 H320" stroke="#94A3B8" strokeWidth="3" strokeLinecap="round" strokeDasharray="300" strokeDashoffset={300*(1-tDrawE)}/>
                  <path d="M170 46 V196" stroke="#94A3B8" strokeWidth="3" strokeLinecap="round" strokeDasharray="150" strokeDashoffset={150*(1-tDrawE)}/>
                  <text x="95" y="30" textAnchor="middle" fontSize="14" fontWeight="700" fontFamily="'JetBrains Mono',monospace" fill="#64748B" opacity={tLblP}>DEBE</text>
                  <text x="245" y="30" textAnchor="middle" fontSize="14" fontWeight="700" fontFamily="'JetBrains Mono',monospace" fill="#64748B" opacity={tLblP}>HABER</text>
                  {/* huecos de totales, punteados: aún sin cuadrar */}
                  <path d="M45 178 H145" stroke="#CBD5E1" strokeWidth="2.5" strokeDasharray="6 6" opacity={tLblP}/>
                  <path d="M195 178 H295" stroke="#CBD5E1" strokeWidth="2.5" strokeDasharray="6 6" opacity={tLblP}/>
                </svg>
                {/* ¿? de cuadre — protagonista del instante 10.3 */}
                {qP > 0 && (
                  <div className="f-mono" style={{position:'absolute', left:0, right:0, top:158, textAlign:'center', fontSize:52, fontWeight:700, color:'#D97706', opacity:clamp(qP*1.3,0,1), transform:`scale(${lerp(0.5,1,qE)})`}}>
                    ¿?
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}

      {/* ================= ACTO 2 — Dinaup, para quién y la promesa ================= */}
      {showAct2 && (
        <div style={{position:'absolute', inset:0, opacity:act2Op}}>

          {/* Logo — quién habla */}
          {logoP > 0 && (
            <div style={{position:'absolute', left:0, right:0, top:295, display:'flex', justifyContent:'center', opacity:clamp(logoP*1.3,0,1), transform:`translateY(${(1-logoE)*30}px) scale(${lerp(0.88,1,logoE)})`}}>
              <DinaupLogo size={62}/>
            </div>
          )}

          {/* Para quién es */}
          {tiP > 0 && (
            <div style={{position:'absolute', left:0, right:0, top:432, textAlign:'center', opacity:tiE, transform:`translateY(${(1-tiE)*14}px)`}}>
              <div className="f-plex" style={{fontSize:33, fontWeight:500, color:'#475569', letterSpacing:'-0.015em'}}>
                Para ti: <span style={{color:'#0F172A', fontWeight:700}}>nóminas y su contabilidad.</span>
              </div>
            </div>
          )}

          {/* Promesa en 3 pasos */}
          {proP > 0 && (
            <div className="f-mono" style={{position:'absolute', left:0, right:0, top:548, textAlign:'center', fontSize:13, fontWeight:700, letterSpacing:'3px', color:'#0085FF', opacity:proP}}>
              EN CUATRO MINUTOS
            </div>
          )}
          <div style={{position:'absolute', left:0, right:0, top:600, display:'flex', justifyContent:'center', gap:40}}>
            {PASOS.map((paso,i)=>{
              const pp = clamp((t - paso.start)/0.55, 0, 1);
              const pe = Easing.easeOutBack(pp);
              if (pp <= 0) return null;
              return (
                <div key={paso.num} style={{width:330, background:'#fff', border:`1px solid ${paso.color}2E`, borderRadius:18, boxShadow:`0 20px 46px ${paso.color}17, 0 4px 12px rgba(15,23,42,0.05)`, padding:'28px 24px 24px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, opacity:clamp(pp*1.3,0,1), transform:`translateY(${(1-pe)*34}px) scale(${lerp(0.9,1,pe)})`}}>
                  <div className="f-mono" style={{width:30, height:30, borderRadius:100, background:`${paso.color}14`, border:`1px solid ${paso.color}40`, color:paso.color, fontSize:14, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center'}}>{paso.num}</div>
                  {iconPaso(i)}
                  <div className="f-plex" style={{fontSize:20, fontWeight:700, color:'#0F172A', letterSpacing:'-0.01em', textAlign:'center'}}>{paso.label}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ================= ACTO 3 — la ÚNICA COSA ================= */}
      {showAct3 && (
        <div style={{position:'absolute', inset:0}}>

          {/* Anticipación: calma + eyebrow */}
          {ideaEyeP > 0 && (
            <div className="f-mono" style={{position:'absolute', left:0, right:0, top:408, textAlign:'center', fontSize:13, fontWeight:700, letterSpacing:'3.5px', color:'#94A3B8', opacity:ideaEyeP}}>
              QUÉDATE CON ESTA IDEA
            </div>
          )}

          {/* La ÚNICA COSA */}
          {unicaP > 0 && (
            <div style={{position:'absolute', left:0, right:0, top:468, textAlign:'center', opacity:clamp(unicaP*1.3,0,1), transform:`translateY(${(1-unicaE)*32}px) scale(${1 + 0.014*unicaPulse})`}}>
              <div className="f-plex" style={{fontSize:74, fontWeight:800, letterSpacing:'-0.035em', color:'#0F172A', lineHeight:1.05}}>
                El concepto lleva <span className="grad-text">el asiento dentro.</span>
              </div>
            </div>
          )}

          {/* Subtítulos */}
          {s1P > 0 && (
            <div style={{position:'absolute', left:0, right:0, top:606, textAlign:'center', opacity:s1E, transform:`translateY(${(1-s1E)*10}px)`}}>
              <div className="f-plex" style={{fontSize:29, fontWeight:500, color:'#64748B', letterSpacing:'-0.01em'}}>
                Lo configuras una vez
                {s2P > 0 && <span style={{opacity:s2P}}> · y todo lo demás <span style={{color:'#0F172A', fontWeight:700}}>se deriva.</span></span>}
              </div>
            </div>
          )}

          {/* Cue de salida hacia la configuración */}
          {salP > 0 && (
            <div style={{position:'absolute', left:0, right:0, bottom:78, textAlign:'center', opacity:clamp(salP*1.3,0,1), transform:`translateY(${(1-salE)*16}px)`}}>
              <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:12, fontSize:13, fontWeight:700, letterSpacing:'2.5px', color:'#64748B', background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'12px 26px', boxShadow:'0 10px 28px rgba(15,23,42,0.08)'}}>
                EMPEZAMOS POR LA CONFIGURACIÓN
                <span style={{color:'#0085FF', fontSize:16}}>↓</span>
              </span>
            </div>
          )}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaNO01 });