// === Escena 05 — "La pieza que gestionas tú (manual)" ===
// Cinco piezas en fila. A la del centro la marcas "manual sin detalles": se desengancha de la ficha
// (candado). Cuando llega una ola de actualización (como la del clímax), barre las vecinas y las
// pone al día, pero PASA DE LARGO sobre la manual (escudo). Sus referencias las pones tú. Nota: si
// el coche no tiene identificación automática, todas van a mano.
function EscenaRD05({ t }){
  const T = {
    piezas:1.1,     // "una pieza especial" → 5 piezas normales en fila
    foco:2.5,       // "Una de importación" → foco en la central
    marca:9.8,      // "Marcas la casilla de pieza manual" → toggle manual ON
    candado:12.4,    // "fuera del automático" → candado, se desengancha
    ola:15.1,        // "llega una actualización" → ola de barrido izq→der
    tuyo:22.0,       // "se las pones tú" → campo editable manual
    coche:28.3,     // "apagas su identificación automática" → nota del coche
    puente:37.4,    // "Vamos a recapitular" → puente
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const N=5, CW=300, CGX=30, CH=210, MANUAL=2;
  const gridW = N*CW+(N-1)*CGX;           // 1620
  const gx0 = (1920-gridW)/2;             // 150
  const gy0 = 440;
  const cardX = (i)=> gx0 + i*(CW+CGX);
  const cardCX = (i)=> cardX(i)+CW/2;

  // Ola: barrido horizontal desde la izquierda (lenta: acompaña a la narración)
  const ORIGX = 100, WSPEED = 210;
  const waveX = ORIGX + (t-T.ola)*WSPEED;
  const litAt = (i)=> T.ola + (cardCX(i)-ORIGX)/WSPEED;

  const marcaP = pr(T.marca,0.4), marcaE = Easing.easeOutBack(marcaP);
  const candP  = pr(T.candado,0.5), candE = Easing.easeOutBack(candP);
  const cocheP = pr(T.coche,0.6), cocheE = Easing.easeOutCubic(cocheP);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="DESGUACES · EL MODO MANUAL"
        title={<span>La pieza que <span className="grad-text">gestionas tú</span></span>}/>

      {/* ===== Ola (anillo de barrido) ===== */}
      {t >= T.ola && waveX < 1920 && (
        <svg width="1920" height="1080" style={{position:'absolute', inset:0, pointerEvents:'none', zIndex:3}}>
          {[0,0.28].map((off,k)=>{
            const x = waveX - off*WSPEED;
            if (x<=ORIGX) return null;
            return <line key={k} x1={x} y1={gy0-30} x2={x} y2={gy0+CH+30} stroke="#0085FF" strokeWidth={k===0?3:2}
              opacity={clamp(1-(x-ORIGX)/1700,0,1)*0.55}/>;
          })}
        </svg>
      )}

      {/* ===== 5 piezas ===== */}
      {Array.from({length:N}).map((_,i)=>{
        const p = pr(T.piezas+i*0.08, 0.5), e = Easing.easeOutCubic(p);
        if (p<=0) return null;
        const isManual = i===MANUAL;
        const focoK = isManual ? pr(T.foco,0.5) : 0;
        const lit = !isManual && t >= litAt(i);           // vecinas se actualizan
        const litK = clamp((t-litAt(i))/0.4, 0, 1);
        const litE = Easing.easeOutBack(litK);
        const deflect = isManual && t >= litAt(i);        // la ola llega a la manual y no la cambia

        // color/estilo según estado
        const borderCol = isManual
          ? (candP>0 ? '#94A3B8' : '#0085FF')
          : (lit ? 'rgba(16,185,129,0.5)' : '#E2E8F0');
        const scale = isManual ? 1+0.04*focoK : (lit ? 1+0.05*(1-litK) : 1);

        return (
          <div key={i} style={{position:'absolute', left:cardX(i), top:gy0, width:CW, height:CH,
            background:'#fff', borderRadius:16, border:`${(isManual||lit)?2:1}px solid ${borderCol}`,
            boxShadow: isManual
              ? (candP>0?'0 16px 40px rgba(15,23,42,0.10)':'0 20px 46px rgba(0,133,255,0.16)')
              : (lit?`0 12px 30px rgba(16,185,129,${0.10+0.12*(1-litK)})`:'0 8px 22px rgba(15,23,42,0.06)'),
            padding:'16px 18px', opacity:clamp(p*1.3,0,1),
            transform:`translateY(${(1-e)*16}px) scale(${scale})`, zIndex: isManual?7:(lit?5:4)}}>

            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#0F172A'}}>Faro del. izq.</span>
              <span className="f-mono" style={{fontSize:11, fontWeight:700, color:'#94A3B8'}}>#{1090+i}</span>
            </div>
            {isManual && (
              <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'1px', color:'#94A3B8', marginTop:2}}>IMPORTACIÓN · SIN CATÁLOGO</div>
            )}

            {/* cuerpo según tipo */}
            {isManual ? (
              <div style={{marginTop:14}}>
                {/* toggle manual */}
                <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:12}}>
                  <span style={{position:'relative', width:44, height:25, borderRadius:100, background: marcaP>0?'#0F172A':'#CBD5E1', transition:'none'}}>
                    <span style={{position:'absolute', top:3, left:lerp(3,22,marcaE), width:19, height:19, borderRadius:100, background:'#fff', boxShadow:'0 2px 5px rgba(15,23,42,0.25)'}}/>
                  </span>
                  <span className="f-plex" style={{fontSize:13, fontWeight:700, color: marcaP>0?'#0F172A':'#94A3B8'}}>Manual sin detalles</span>
                  {candP>0 && <span style={{display:'inline-flex', transform:`scale(${candE})`}}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="5" y="10.5" width="14" height="9.5" rx="2.5" fill="#64748B"/><path d="M8 10.5 V7.5 a4 4 0 0 1 8 0 V10.5" stroke="#64748B" strokeWidth="2.4" fill="none"/></svg>
                  </span>}
                </div>
                {/* referencia manual: la pones tú (typewriter) */}
                <div style={{background:'#F8FAFC', border:`2px solid ${pr(T.tuyo,0.3)>0?'#64748B':'#E2E8F0'}`, borderRadius:10, padding:'9px 12px'}}>
                  <div className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8', marginBottom:3}}>OEM · MANUAL</div>
                  <div className="f-mono" style={{fontSize:15, fontWeight:800, color:'#0F172A'}}>
                    {pr(T.tuyo,0.3)>0
                      ? <Typewriter text="IMP-7788-LX" start={T.tuyo} cps={10} t={t} caret={t<T.coche}/>
                      : <span style={{color:'#CBD5E1'}}>— la pones tú</span>}
                  </div>
                </div>
                {/* escudo cuando la ola pasa de largo */}
                {deflect && (()=>{ const dp=clamp((t-litAt(i))/0.4,0,1);
                  return (
                    <div className="f-mono" style={{position:'absolute', right:14, top:52, display:'inline-flex', alignItems:'center', gap:6,
                      fontSize:11, fontWeight:700, color:'#64748B', background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:100, padding:'4px 10px',
                      transform:`scale(${lerp(0.7,1,Easing.easeOutBack(dp))})`, opacity:clamp(dp*1.3,0,1)}}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M12 3 L20 6 V11 C20 16 16 20 12 21 C8 20 4 16 4 11 V6 Z" stroke="#64748B" strokeWidth="1.8" fill="none"/></svg>
                      no la toca
                    </div>
                  );
                })()}
              </div>
            ) : (
              <div style={{marginTop:24}}>
                <div className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#CBD5E1', marginBottom:6}}>OEM</div>
                {lit
                  ? <span className="f-mono" style={{fontSize:14, fontWeight:800, color:'#059669',
                      background:'rgba(16,185,129,0.10)', border:'1px solid rgba(16,185,129,0.3)', borderRadius:8, padding:'4px 10px',
                      transform:`scale(${lerp(0.6,1,litE)})`, display:'inline-block'}}>5G1…005 C ✓</span>
                  : <span className="f-mono" style={{fontSize:14, fontWeight:800, color:'#0F172A'}}>5G1 941 005</span>}
                <div style={{marginTop:12}} className="f-plex">
                  <span style={{fontSize:11, fontWeight:600, color: lit?'#059669':'#94A3B8'}}>{lit?'actualizada':'al día'}</span>
                </div>
              </div>
            )}
          </div>
        );
      })}

      {/* etiqueta bajo la manual */}
      {candP > 0 && (
        <div style={{position:'absolute', left:cardX(MANUAL), top:gy0+CH+14, width:CW, textAlign:'center', opacity:candP}}>
          <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#64748B'}}>Fuera del automatismo · <span style={{color:'#0F172A'}}>mandas tú</span></span>
        </div>
      )}

      {/* ===== Nota: interruptor del coche ===== */}
      {cocheP > 0 && (
        <div style={{position:'absolute', left:0, right:0, bottom:84, textAlign:'center',
          opacity:cocheE, transform:`translateY(${(1-cocheE)*8}px)`}}>
          <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:12, fontSize:15, fontWeight:600,
            color:'#64748B', background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'10px 22px', boxShadow:'0 6px 16px rgba(15,23,42,0.05)'}}>
            <span style={{fontSize:16}}>🚗</span>
            ¿El coche entero sin identificación automática?
            <span style={{position:'relative', width:40, height:22, borderRadius:100, background:'#CBD5E1'}}>
              <span style={{position:'absolute', top:3, left:3, width:16, height:16, borderRadius:100, background:'#fff'}}/>
            </span>
            <span style={{color:'#0F172A', fontWeight:700}}>Todas sus piezas, a mano.</span>
          </span>
        </div>
      )}

      <Caption t={t} start={T.puente} style={{fontSize:24, fontWeight:700, color:'#0F172A', bottom:22}}>
        Recapitulemos. <span style={{color:'#0085FF'}}>→</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaRD05 });