// === Escena 07 — "Se empieza por uno" · audio real 33.28s ===
// LOCUCIÓN: "¿Y por dónde se empieza? No por todo... por uno. De todo ese caos, ¿qué es lo
//   primero que te gustaría quitarte? Ese. Se monta una primera versión con tus datos reales, tu
//   equipo la usa en días, y si funciona... vamos a por el siguiente. ¿Otro programa más para el
//   equipo?... al revés. Si tienes mil apaños es porque ninguno te dejaba juntarlos. Aquí, cada
//   proceso que entra es un excel, un grupo de WhatsApp o una libreta que se apaga. Programas
//   fuera, no programas nuevos."
// BEATS: el marco de selección recorre los 5 huérfanos y ELIGE Checklist (click+anillo) ·
//   línea de 3 hitos · objeción con flip ("programas FUERA") · cascada de apagados con contador
//   5→4→3 (el judo de la objeción nº 9 del A3).
function Escena07({ t }){
  const T = {
    fila:      0.7,  // "por dónde se empieza"                 → fila
    scan:      5.4,  // "De todo ese caos"                     → escaneo
    scanStep:  0.5,                                         // (incremento, no instante)
    stop:      7.5,  // "te gustaría quitarte"                 → para
    click:     9.0,                                         // (apoyo) click
    hitos:     [10.6, 13.7, 17.1],   // "Se monta una primera versión" · "tu equipo la usa en días" · "vamos a por el siguiente"
    objecion: 19.2,  // "Otro programa más para el equipo"     → objeción
    flip:     21.3,  // "al revés"                             → giro
    off:       [28.2, 29.2, 30.8],   // "un excel" · "un grupo de WhatsApp" · "una libreta que se apaga"
    fin:      32.5,  // "Programas fuera"                      → cierre
  };
  const filaP = clamp((t-T.fila)/0.6, 0, 1);
  const HUERFANOS = [
    { tipo:'excel',    n:'Tiempos',         w:250 },
    { tipo:'papel',    n:'Autorizaciones',  w:230 },
    { tipo:'whatsapp', n:'Partes',          w:240 },
    { tipo:'libreta',  n:'Checklist',       w:220 },
    { tipo:'hoja',     n:'Turnos',          w:250 },
  ];
  const ELEGIDO = 3;   // Checklist calidad — el proceso que dio pie a la app del mecánico en D5
  // Escaneo: el marco pasa por 0,1,2,3,4 y vuelve al elegido
  const scanIdx = t < T.scan ? -1
    : t < T.stop ? Math.min(4, Math.floor((t-T.scan)/T.scanStep))
    : ELEGIDO;
  const clicked = t >= T.click;
  const ringP = clamp((t-T.click)/0.5, 0, 1);
  const elegidoPop = Easing.easeOutBack(clamp((t-T.click)/0.5, 0, 1));
  const hitoP = (i)=> clamp((t-T.hitos[i])/0.5, 0, 1);
  const objP = clamp((t-T.objecion)/0.5, 0, 1);
  const flipP = clamp((t-T.flip)/0.55, 0, 1), flipE = Easing.easeInOutCubic(flipP);
  const offP = (i)=> clamp((t-T.off[i])/0.5, 0, 1);
  const nApagados = T.off.reduce((a,at)=> a + (t>=at+0.25?1:0), 0);
  const contador = 5 - nApagados;
  const finOn = t >= T.fin;

  const HITOS = ['versión 1 · con tus datos', 'tu equipo la usa · en días', '→ el siguiente'];
  // qué huérfano se apaga con cada beat (excel · whatsapp · libreta)
  const offMap = { 0:0, 2:1, 3:2 };

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={Math.max(0,t-0.2)} eyebrow="EL ARRANQUE · SIN PROYECTAZO" title={<span>No por todo. <span className="grad-text">Por uno.</span></span>}/>

      {/* Contador de apaños */}
      <div style={{position:'absolute', top:52, right:70, zIndex:8, textAlign:'right', opacity:clamp((t-1.4)/0.5,0,1)}}>
        <div className="f-mono" style={{fontSize:40, fontWeight:700, color: nApagados>0?'#059669':'#0F172A', lineHeight:1, transition:'color 300ms'}}>{contador}</div>
        <div className="f-mono" style={{fontSize:9, color:'#94A3B8', letterSpacing:'1.5px'}}>APAÑOS ACTIVOS</div>
      </div>

      {/* Fila de huérfanos */}
      <div style={{position:'absolute', left:120, right:120, top:250, display:'flex', gap:26, alignItems:'flex-start', justifyContent:'center', opacity:filaP}}>
        {HUERFANOS.map((h,i)=>{
          const scanning = scanIdx === i && !clicked;
          const esElegido = i === ELEGIDO;
          const oi = offMap[i];
          const apagado = oi !== undefined && offP(oi) > 0.5;
          const oP = oi !== undefined ? offP(oi) : 0;
          return (
            <div key={i} style={{position:'relative', transform:`translateY(${esElegido&&clicked?-16*elegidoPop:0}px) scale(${esElegido&&clicked?lerp(1,1.08,elegidoPop):1})`, filter: apagado?'grayscale(1) brightness(0.92)':'none', opacity: apagado?0.45:1, transition:'filter 400ms, opacity 400ms', zIndex: esElegido?5:3}}>
              {/* Marco de selección */}
              {(scanning || (esElegido && clicked)) && (
                <div style={{position:'absolute', inset:-10, border:`2.5px solid ${clicked?'#0085FF':'rgba(0,133,255,0.55)'}`, borderRadius:14, boxShadow: clicked?'0 0 0 5px rgba(0,133,255,0.15), 0 18px 44px rgba(0,133,255,0.2)':'none', transition:'border 150ms'}}/>
              )}
              {/* Anillo del click */}
              {clicked && esElegido && ringP < 1 && (
                <span style={{position:'absolute', left:'50%', top:'50%', width:70, height:70, borderRadius:100, border:'3px solid rgba(0,133,255,0.8)', transform:`translate(-50%,-50%) scale(${lerp(0.5,2.6,Easing.easeOutCubic(ringP))})`, opacity:1-ringP, zIndex:8}}/>
              )}
              <H03Ficha tipo={h.tipo} w={h.w}/>
              <div className="f-mono" style={{textAlign:'center', marginTop:9, fontSize:10.5, fontWeight:700, color: esElegido&&clicked?'#0085FF':'#64748B'}}>{h.n}</div>
              {/* Tachado del apagado */}
              {apagado && (
                <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center', zIndex:6}}>
                  <span className="f-mono" style={{fontSize:11, fontWeight:800, color:'#fff', background:'#059669', borderRadius:100, padding:'5px 14px', transform:`rotate(-3deg) scale(${lerp(0.6,1,Easing.easeOutBack(clamp((oP-0.5)*2,0,1)))})`, boxShadow:'0 10px 26px rgba(5,150,105,0.4)'}}>se apaga ✓</span>
                </div>
              )}
              {esElegido && clicked && (
                <span className="f-mono" style={{position:'absolute', top:-24, left:'50%', transform:'translateX(-50%)', fontSize:10, fontWeight:800, color:'#fff', background:'#0085FF', borderRadius:100, padding:'3px 13px', whiteSpace:'nowrap', opacity:clamp(elegidoPop,0,1)}}>ESE</span>
              )}
            </div>
          );
        })}
      </div>

      {/* Línea de hitos del elegido */}
      <div style={{position:'absolute', left:'50%', top:600, transform:'translateX(-50%)', display:'flex', alignItems:'center', gap:0, zIndex:6}}>
        {HITOS.map((h,i)=>{
          const p = hitoP(i), e = Easing.easeOutBack(p);
          return (
            <React.Fragment key={i}>
              {i > 0 && <div style={{width:56, height:2.5, background: p>0?'#0085FF':'#E2E8F0', transition:'background 300ms'}}/>}
              <div style={{display:'flex', alignItems:'center', gap:9, background: p>0?'#fff':'#F8FAFC', border:`1.5px solid ${p>0?'rgba(0,133,255,0.5)':'#E2E8F0'}`, borderRadius:100, padding:'10px 20px', opacity: p>0?1:0.45, transform:`scale(${p>0?lerp(0.8,1,e):0.96})`, boxShadow: p>0?'0 10px 28px rgba(0,133,255,0.12)':'none'}}>
                <span className="f-mono" style={{width:22, height:22, borderRadius:100, background: p>0?'#0085FF':'#CBD5E1', color:'#fff', fontSize:11, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', transition:'background 300ms'}}>{i+1}</span>
                <span className="f-plex" style={{fontSize:13, fontWeight:700, color: p>0?'#0F172A':'#94A3B8'}}>{h}</span>
              </div>
            </React.Fragment>
          );
        })}
      </div>

      {/* Objeción con flip */}
      {objP > 0 && (
        <div style={{position:'absolute', left:'50%', bottom:150, transform:'translateX(-50%)', perspective:600, zIndex:7}}>
          <div style={{position:'relative', transformStyle:'preserve-3d', transform:`rotateX(${flipE*180}deg)`, transition:'none'}}>
            <div style={{backfaceVisibility:'hidden', background:'#fff', border:'1.5px solid #E2E8F0', borderRadius:100, padding:'12px 28px', boxShadow:'0 14px 36px rgba(15,23,42,0.12)', opacity:clamp(objP*1.3,0,1)}}>
              <span className="f-plex" style={{fontSize:16, fontStyle:'italic', color:'#64748B'}}>«¿Otro programa más para el equipo?»</span>
            </div>
            <div style={{position:'absolute', inset:0, backfaceVisibility:'hidden', transform:'rotateX(180deg)', background:'#0F172A', borderRadius:100, padding:'12px 28px', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 14px 36px rgba(15,23,42,0.3)'}}>
              <span className="f-plex" style={{fontSize:16, fontWeight:800, color:'#fff'}}>Al revés: programas <span style={{color:'#56E16A'}}>FUERA</span>, no programas nuevos</span>
            </div>
          </div>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { Escena07 });