// === Escena 06 — "Lo que ya existe · solo se dibuja la punta" · audio real 43.44s ===
// LOCUCIÓN: '"Ya... esto será un desarrollo a medida, y costará lo que cuesta un desarrollo a
//   medida." No... y ahora vas a entender por qué. De todo lo que acabas de ver, ¿sabes cuánto hay
//   que desarrollar? Solo la pantalla del mecánico. Solo la del minigolf. Esa interfaz, y nada más.
//   Todo lo demás... los listados del administrador, los buscadores, los usuarios y permisos, los
//   avisos, las copias de seguridad... ya está hecho y funcionando: es Dinaup. En un desarrollo
//   desde cero pagas el cien por cien; aquí, solo la parte que es genuinamente tuya. Y el día que
//   alguien se vaya de la empresa... quitas un acceso. Uno. No mil.'
// BEATS: objeción tachada · DOS wireframes (app mecánico + app minigolf = la punta) se dibujan +
//   aro "solo esto" · 5 capas DINAUP·YA HECHO se apilan · barras 100% vs ~20% · un acceso (callback D2).
function Escena06({ t }){
  const T = {
    objecion:  1.4,  // "esto será un desarrollo a medida"     → objeción
    tacha:     7.4,  // "ahora vas a entender por qué"         → tacha
    mecTrazo: 13.6,  // "Solo la pantalla del mecánico"        → trazo mecánico
    golfTrazo:15.7,  // "Solo la del minigolf"                 → trazo minigolf
    trazoDur:  1.9,                                         // (duración, no instante)
    aro:      17.6,  // "Esa interfaz, y nada más"             → aro
    capas:    [21.3, 23.1, 24.2, 26.0, 26.9],   // "los listados del administrador" · "los buscadores" · "los usuarios y permisos" · "los avisos" · "las copias de seguridad"
    verdes:   28.7,  // "ya está hecho y funcionando"          → capas verdes
    barraGris:34.8,  // "pagas el cien por cien"               → barra gris
    barraAzul:37.4,  // "solo la parte que es genuinamente tuya" → barra azul
    fila:     40.9,  // "alguien se vaya de la empresa"        → fila
    toggle:   42.7,  // "quitas un acceso"                     → toggle
    barrido:  45.0,  // "No mil"                               → barrido
  };
  const objP = clamp((t-T.objecion)/0.6, 0, 1);
  const tachaP = clamp((t-T.tacha)/0.5, 0, 1);
  const mecTrazoP = clamp((t-T.mecTrazo)/T.trazoDur, 0, 1);
  const golfTrazoP = clamp((t-T.golfTrazo)/T.trazoDur, 0, 1);
  const aroOn = t >= T.aro;
  const aroPulse = (t >= T.aro && t < T.aro+1.0) ? Math.sin((t-T.aro)/1.0*Math.PI) : 0;
  const capaP = (i)=> clamp((t-T.capas[i])/0.5, 0, 1);
  const verdesOn = t >= T.verdes;
  const verdesPulse = (t >= T.verdes && t < T.verdes+0.9) ? Math.sin((t-T.verdes)/0.9*Math.PI) : 0;
  const bgP = clamp((t-T.barraGris)/1.1, 0, 1), bgE = Easing.easeInOutCubic(bgP);
  const baP = clamp((t-T.barraAzul)/0.6, 0, 1), baE = Easing.easeOutBack(baP);
  const filaP = clamp((t-T.fila)/0.5, 0, 1);
  const toggleOff = t >= T.toggle;
  const barridoP = clamp((t-T.barrido)/0.8, 0, 1), barridoE = Easing.easeInOutCubic(barridoP);

  const CAPAS = ['Listados del administrador','Buscadores','Usuarios y permisos','Avisos','Copias de seguridad'];

  // Un wireframe de app (móvil) que se autodibuja
  const AppWire = ({ p, label, accent })=>{
    const draw = Easing.easeInOutCubic(p);
    return (
      <div style={{position:'relative', width:196, height:206}}>
        <span className="f-mono" style={{position:'absolute', top:-22, left:'50%', transform:'translateX(-50%)', fontSize:9.5, fontWeight:800, letterSpacing:'1px', color:accent, whiteSpace:'nowrap'}}>{label}</span>
        <svg style={{position:'absolute', inset:0}} width="196" height="206" viewBox="0 0 196 206">
          <g fill="none" stroke={accent} strokeWidth="2.2" strokeLinecap="round"
             strokeDasharray="900" strokeDashoffset={900*(1-draw)}>
            <rect x="30" y="4" width="136" height="198" rx="18"/>
            <rect x="42" y="20" width="112" height="34" rx="7"/>
            <rect x="42" y="66" width="112" height="30" rx="6"/>
            <rect x="42" y="104" width="112" height="30" rx="6"/>
            <rect x="42" y="142" width="112" height="30" rx="6"/>
            <circle cx="98" cy="188" r="6"/>
          </g>
        </svg>
      </div>
    );
  };

  return (
    <SlideCanvas variant="light-soft">
      {/* Objeción citada → tachada */}
      <div style={{position:'absolute', top:52, left:0, right:0, textAlign:'center', zIndex:8, opacity:objP}}>
        <div style={{display:'inline-block', position:'relative'}}>
          <span className="f-plex" style={{fontSize:24, fontStyle:'italic', color:'#94A3B8'}}>«Esto será un desarrollo a medida... y costará lo que cuesta»</span>
          <span style={{position:'absolute', left:0, top:'52%', height:3, background:'#10B981', width:`${tachaP*100}%`, borderRadius:2}}/>
          {tachaP >= 1 && <span className="f-plex" style={{marginLeft:14, fontSize:24, fontWeight:800, color:'#059669'}}>No.</span>}
        </div>
        <div className="f-plex" style={{fontSize:38, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em', marginTop:10, opacity:clamp((t-T.tacha-0.6)/0.5,0,1)}}>Solo se desarrolla <span className="grad-text">la punta.</span></div>
      </div>

      <div style={{position:'absolute', left:170, right:170, top:250, bottom:80, display:'grid', gridTemplateColumns:'1.15fr 1fr', gap:40}}>

        {/* Izquierda: DOS apps (la punta) sobre la pila DINAUP */}
        <div style={{position:'relative', display:'flex', flexDirection:'column', justifyContent:'flex-end', alignItems:'center', paddingBottom:8}}>
          {/* Las dos apps que se desarrollan */}
          <div style={{position:'relative', marginBottom:16}}>
            <span className="f-mono" style={{position:'absolute', top:-46, left:'50%', transform:'translateX(-50%)', fontSize:10.5, fontWeight:800, letterSpacing:'2px', color:'#0085FF', whiteSpace:'nowrap'}}>↓ LO ÚNICO QUE SE DESARROLLA</span>
            {/* aro alrededor de las dos */}
            {aroOn && (
              <div style={{position:'absolute', inset:-14, border:`2.5px solid rgba(0,133,255,${0.5+aroPulse*0.4})`, borderRadius:18, boxShadow: aroPulse>0?`0 0 0 ${aroPulse*8}px rgba(0,133,255,0.08)`:'none'}}/>
            )}
            <div style={{display:'flex', gap:22}}>
              <AppWire p={mecTrazoP} label="App del mecánico" accent="#0085FF"/>
              <AppWire p={golfTrazoP} label="App del minigolf" accent="#FF6751"/>
            </div>
          </div>
          {/* Etiqueta DINAUP sobre la pila */}
          <div className="f-mono" style={{width:470, textAlign:'left', fontSize:9.5, fontWeight:800, letterSpacing:'2px', color:'#059669', marginBottom:8, opacity:clamp(capaP(0)*1.5,0,1)}}>DINAUP · YA HECHO ↓</div>
          {/* Las 5 capas */}
          <div style={{width:470, display:'flex', flexDirection:'column-reverse', gap:7}}>
            {CAPAS.map((c,i)=>{
              const p = capaP(i), e = Easing.easeOutBack(p);
              return (
                <div key={i} style={{height:44, background:'linear-gradient(180deg, #EFF4FA, #E2EBF5)', border:'1px solid #C9D6E6', borderRadius:10, display:'flex', alignItems:'center', gap:11, padding:'0 18px', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*-18}px) scale(${lerp(0.94,1,e)})`, boxShadow:'0 4px 12px rgba(15,23,42,0.05)'}}>
                  <span style={{width:10, height:10, borderRadius:100, background: verdesOn?'#10B981':'#B6C2D2', boxShadow: verdesOn?`0 0 ${6+verdesPulse*8}px rgba(16,185,129,0.7)`:'none', transition:'background 300ms'}}/>
                  <span className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#334155'}}>{c}</span>
                  <span className="f-mono" style={{marginLeft:'auto', fontSize:9, color: verdesOn?'#059669':'#94A3B8', letterSpacing:'1px', transition:'color 300ms'}}>{verdesOn?'funcionando':'incluido'}</span>
                </div>
              );
            })}
          </div>
        </div>

        {/* Derecha: la asimetría económica + callback acceso */}
        <div style={{display:'flex', flexDirection:'column', justifyContent:'center', gap:26}}>
          <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:14, padding:'22px 26px'}}>
            <div className="f-plex" style={{fontSize:15, fontWeight:700, color:'#0F172A', marginBottom:16}}>¿Y cuánto se paga?</div>
            <div style={{marginBottom:16}}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:6}}>
                <span className="f-plex" style={{fontSize:12.5, color:'#64748B'}}>A medida, desde cero</span>
                <span className="f-mono" style={{fontSize:12, fontWeight:800, color:'#64748B', opacity:bgP}}>el 100%</span>
              </div>
              <div style={{height:22, background:'#F1F5F9', borderRadius:100, overflow:'hidden'}}>
                <div style={{height:'100%', width:`${bgE*100}%`, background:'linear-gradient(90deg, #94A3B8, #64748B)', borderRadius:100}}/>
              </div>
            </div>
            <div>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:6}}>
                <span className="f-plex" style={{fontSize:12.5, color:'#0F172A', fontWeight:700}}>Sobre Dinaup</span>
                <span className="f-mono" style={{fontSize:12, fontWeight:800, color:'#0085FF', opacity:baP, transform:`scale(${lerp(0.7,1,baE)})`, display:'inline-block'}}>solo la interfaz</span>
              </div>
              <div style={{height:22, background:'#F1F5F9', borderRadius:100, overflow:'hidden', position:'relative'}}>
                <div style={{height:'100%', width:`${baE*21}%`, background:'linear-gradient(90deg, #0085FF, #00C1FF)', borderRadius:100, boxShadow:'0 0 16px rgba(0,133,255,0.4)'}}/>
                {baP>0.5 && <span className="f-mono" style={{position:'absolute', left:`${baE*21+2}%`, top:3, fontSize:11, fontWeight:800, color:'#0085FF'}}>~20%</span>}
              </div>
            </div>
          </div>
          {filaP > 0 && (
            <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:14, padding:'18px 22px', opacity:filaP, position:'relative'}}>
              <div className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#0F172A', marginBottom:12}}>¿Se va alguien?</div>
              <div style={{display:'flex', alignItems:'center', gap:12, padding:'10px 14px', background: toggleOff?'rgba(239,68,68,0.04)':'#F8FAFC', border:`1.5px solid ${toggleOff?'rgba(239,68,68,0.35)':'#E2E8F0'}`, borderRadius:11, transition:'all 300ms'}}>
                <div style={{width:32, height:32, borderRadius:100, background: toggleOff?'#CBD5E1':'#F59E0B', color:'#fff', fontSize:11, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', transition:'background 300ms'}}>LU</div>
                <div style={{flex:1}}>
                  <div className="f-plex" style={{fontSize:12.5, fontWeight:700, color:'#0F172A'}}>Luis · Taller</div>
                  {toggleOff && <span className="f-mono" style={{fontSize:9, fontWeight:800, color:'#DC2626'}}>Acceso bloqueado — de TODO a la vez</span>}
                </div>
                <div style={{width:46, height:25, borderRadius:100, background: toggleOff?'#CBD5E1':'#10B981', position:'relative', transition:'background 250ms'}}>
                  <div style={{position:'absolute', top:3, left: toggleOff?3:24, width:19, height:19, borderRadius:100, background:'#fff', boxShadow:'0 2px 5px rgba(15,23,42,0.25)', transition:'left 250ms'}}/>
                </div>
              </div>
              <div style={{display:'flex', alignItems:'center', gap:10, marginTop:12}}>
                <span className="f-mono" style={{fontSize:10, color:'#94A3B8', letterSpacing:'1px', flexShrink:0}}>Y NO ESTO →</span>
                <div style={{position:'relative', flex:1, height:30, overflow:'hidden'}}>
                  <div style={{display:'flex', gap:6, transform:`translateX(${barridoE*420}px)`, opacity:1-barridoE*0.9}}>
                    {['drive','excel','fotos','usb','email'].map((c,i)=>(
                      <span key={i} className="f-mono" style={{fontSize:8.5, color:'#64748B', background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:6, padding:'4px 9px', transform:`rotate(${(i%2?1:-1)*2}deg)`, whiteSpace:'nowrap'}}>{c} · ¿clave?</span>
                    ))}
                  </div>
                  {barridoP >= 1 && <span className="f-mono" style={{position:'absolute', left:0, top:5, fontSize:11, fontWeight:800, color:'#059669', opacity:clamp((barridoP-0.9)*8,0,1)}}>Uno. No mil. ✓</span>}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { Escena06 });