// === Escena 02 — "La ficha que comparten las piezas iguales" (el Detalle) ===
// Una FICHA (Detalle) grande: existe para una combinación Versión-de-coche + Tipo-de-pieza.
// Guarda dos bloques: (a) las REFERENCIAS de catálogo — que SÍ viajan a la pieza — y (b) datos
// orientativos (precio/coste/categoría) que SE QUEDAN en la ficha. A la derecha, las 24 piezas
// iguales que la comparten, conectadas por líneas. Test del mudo total.
function EscenaRD02({ t }){
  const T = {
    ficha:0.2,       // "Esto es una ficha" → entra la ficha
    version:10.4,     // "para una versión de coche" → chips de versión + tipo
    refsTit:19.3,     // "Las referencias de catálogo" → bloque REFERENCIAS
    oem:21.4,         // "la del fabricante" → fila OEM
    ean:22.7,         // "el código de barras" → fila código de barras
    otras:24.1,       // "las equivalencias" → fila otras referencias
    attr:25.1,        // → fila atributos (huérfano, interpola)
    viajan:27.2,      // "se copia a cada pieza" → etiqueta se copian a la pieza
    orientTit:30.3,  // "un precio y un coste" → bloque orientativo
    orient:31.7,     // → items orientativos (huérfano)
    quedan:34.8,     // "se quedan en la ficha" → etiqueta se quedan
    piezas:40.6,     // "comparten esta misma ficha" → aparecen las 24 piezas
    contador:43.2,   // "Veinticuatro faros idénticos" → el contador 24 sube
    comparten:45.1,  // "una sola ficha" → rótulo 24 piezas, una ficha
    puente:49.5,     // "Se emparejan solas" → puente
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const fichaP = pr(T.ficha, 0.9), fichaE = Easing.easeOutCubic(fichaP);
  const viajanP = pr(T.viajan, 0.5), viajanE = Easing.easeOutBack(viajanP);
  const quedanP = pr(T.quedan, 0.5);
  const n24 = useCountUp(0, 24, T.contador, 1.1, t);

  // Referencias que VIAJAN a la pieza (las 6 reales, agrupadas para lectura)
  const REFS = [
    { start:T.oem,   k:'Ref. OEM',       v:'5G1 941 005' },
    { start:T.ean,   k:'Cód. barras',    v:'8412345 678901' },
    { start:T.otras, k:'Otras ref.',     v:'TYC 20-14740 · Valeo 45012' },
    { start:T.attr,  k:'Atributos',      v:'Halógeno · Con motor de regulación' },
  ];
  const ORIENT = [
    { k:'PVP ref.',  v:'145 €' },
    { k:'Coste ref.',v:'40 €' },
    { k:'Categoría', v:'Iluminación' },
  ];

  // Piezas que comparten la ficha (mostramos 5 + "+19")
  const PZ = ['#1023','#1044','#1051','#1078','#1090'];
  const FICHA = { x:150, w:770, y:200, h:640 };
  const PILE = { x:1030, y:288 };

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="DESGUACES · LA FICHA (DETALLE)"
        title={<span>Una ficha, <span className="grad-text">muchas piezas iguales</span></span>}/>

      {/* ================= FICHA (Detalle) ================= */}
      {fichaP > 0 && (
        <div style={{position:'absolute', left:FICHA.x, top:FICHA.y, width:FICHA.w,
          background:'#fff', borderRadius:22, border:'1px solid #E2E8F0',
          boxShadow:'0 30px 70px rgba(15,23,42,0.10), 0 6px 16px rgba(15,23,42,0.05)',
          padding:'26px 30px', opacity:clamp(fichaP*1.3,0,1), transform:`translateY(${(1-fichaE)*34}px)`}}>

          {/* Cabecera: tipo de pieza + versión de coche = los dos ejes */}
          <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8'}}>FICHA DE RECAMBIO</div>
          <div className="f-plex" style={{fontSize:32, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginTop:2}}>Faro delantero izquierdo</div>

          {/* dos llaves: versión + tipo */}
          {pr(T.version,0.5) > 0 && (
            <div style={{display:'flex', gap:10, marginTop:14, opacity:clamp(pr(T.version,0.5)*1.3,0,1),
              transform:`translateY(${(1-Easing.easeOutCubic(pr(T.version,0.5)))*8}px)`}}>
              <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:8, fontSize:13, fontWeight:700,
                color:'#334155', background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:100, padding:'7px 14px'}}>
                <span style={{color:'#94A3B8'}}>VERSIÓN</span> VW Golf VII 1.6 TDI · 2013–2020</span>
              <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:8, fontSize:13, fontWeight:700,
                color:'#334155', background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:100, padding:'7px 14px'}}>
                <span style={{color:'#94A3B8'}}>TIPO</span> Faro del. izq.</span>
            </div>
          )}
          {pr(T.version+0.35,0.5) > 0 && (
            <div className="f-plex" style={{fontSize:13, color:'#94A3B8', marginTop:9, opacity:pr(T.version+0.35,0.5)}}>
              La ficha existe para esa combinación: versión de coche + tipo de pieza.
            </div>
          )}

          <div style={{height:1, background:'#E2E8F0', margin:'20px 0'}}/>

          {/* ---- Bloque REFERENCIAS (viajan a la pieza) ---- */}
          {pr(T.refsTit,0.5) > 0 && (
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12, opacity:pr(T.refsTit,0.5)}}>
              <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#0085FF'}}>REFERENCIAS DE CATÁLOGO</div>
              {viajanP > 0 && (
                <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:7, fontSize:11, fontWeight:700,
                  color:'#0085FF', background:'rgba(0,133,255,0.10)', border:'1px solid rgba(0,133,255,0.3)', borderRadius:100,
                  padding:'5px 12px', transform:`scale(${lerp(0.7,1,viajanE)})`, opacity:clamp(viajanP*1.3,0,1)}}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M4 12 H18 M13 7 L19 12 L13 17" stroke="#0085FF" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  SE COPIAN A LA PIEZA
                </span>
              )}
            </div>
          )}
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            {REFS.map((r,i)=>{
              const p = pr(r.start,0.45), e = Easing.easeOutBack(p);
              if (p<=0) return null;
              const span2 = i>=2;
              return (
                <div key={i} style={{gridColumn: span2?'1 / -1':'auto', background:'#F8FBFF',
                  border:'1px solid rgba(0,133,255,0.22)', borderRadius:12, padding:'10px 14px',
                  opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*14}px)`}}>
                  <div className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8', marginBottom:3}}>{r.k.toUpperCase()}</div>
                  <div className="f-mono" style={{fontSize:16, fontWeight:800, color:'#0F172A'}}>{r.v}</div>
                </div>
              );
            })}
          </div>

          {/* ---- Bloque ORIENTATIVO (se queda en la ficha) ---- */}
          {pr(T.orientTit,0.5) > 0 && (
            <div style={{marginTop:20, opacity:pr(T.orientTit,0.5)}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
                <div className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2px', color:'#94A3B8'}}>DATOS ORIENTATIVOS</div>
                {quedanP > 0 && (
                  <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:7, fontSize:11, fontWeight:700,
                    color:'#64748B', background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:100, padding:'5px 12px', opacity:quedanP}}>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><rect x="5" y="10.5" width="14" height="9.5" rx="2.5" fill="#94A3B8"/><path d="M8 10.5 V7.5 a4 4 0 0 1 8 0 V10.5" stroke="#94A3B8" strokeWidth="2.4" fill="none"/></svg>
                    SE QUEDAN EN LA FICHA
                  </span>
                )}
              </div>
              <div style={{display:'flex', gap:10}}>
                {ORIENT.map((o,i)=>{
                  const p = pr(T.orient+i*0.1,0.4);
                  return (
                    <div key={i} style={{flex:1, background:'#FBFCFE', border:'1px dashed #E2E8F0', borderRadius:12, padding:'9px 14px', opacity:p}}>
                      <div className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#CBD5E1', marginBottom:3}}>{o.k.toUpperCase()}</div>
                      <div className="f-mono" style={{fontSize:15, fontWeight:700, color:'#64748B'}}>{o.v}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      )}

      {/* ================= Piezas que comparten la ficha ================= */}
      {/* líneas ficha → piezas */}
      {pr(T.piezas,0.6) > 0 && (
        <svg width="1920" height="1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
          {PZ.map((_,i)=>{
            const p = Easing.easeInOutCubic(pr(T.piezas+i*0.08, 0.5));
            const y2 = PILE.y + i*78 + 26;
            const x1 = FICHA.x+FICHA.w, y1 = 470;
            const len = Math.hypot(x1-PILE.x, y1-y2);
            return <line key={i} x1={x1} y1={y1} x2={PILE.x} y2={y2} stroke="#0085FF" strokeWidth="1.6"
              opacity="0.35" strokeDasharray={len} strokeDashoffset={len*(1-p)}/>;
          })}
        </svg>
      )}
      {/* contador + pila */}
      {pr(T.piezas,0.5) > 0 && (
        <>
          <div style={{position:'absolute', left:PILE.x, top:196, display:'flex', alignItems:'baseline', gap:12,
            opacity:pr(T.piezas,0.5)}}>
            <span className="f-mono" style={{fontSize:56, fontWeight:800, color:'#0085FF', lineHeight:1}}>{n24}</span>
            <span className="f-plex" style={{fontSize:17, fontWeight:600, color:'#64748B'}}>piezas la comparten</span>
          </div>
          {PZ.map((id,i)=>{
            const p = pr(T.piezas+i*0.08, 0.5), e = Easing.easeOutBack(p);
            if (p<=0) return null;
            return (
              <div key={i} style={{position:'absolute', left:PILE.x, top:PILE.y+i*78, width:520, height:60,
                background:'#fff', borderRadius:12, border:'1px solid #E2E8F0', boxShadow:'0 8px 22px rgba(15,23,42,0.06)',
                display:'flex', alignItems:'center', gap:12, padding:'0 18px',
                opacity:clamp(p*1.3,0,1), transform:`translateX(${(1-e)*24}px)`}}>
                <div style={{width:34, height:34, borderRadius:9, background:'#F1F5F9', flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 13 a8 8 0 0 1 16 0" stroke="#94A3B8" strokeWidth="2"/><circle cx="12" cy="13" r="3.2" fill="#CBD5E1"/></svg>
                </div>
                <span className="f-plex" style={{fontSize:15, fontWeight:700, color:'#0F172A', flex:1}}>Faro del. izq.</span>
                <span className="f-mono" style={{fontSize:13, fontWeight:700, color:'#94A3B8'}}>{id}</span>
              </div>
            );
          })}
          {pr(T.piezas+0.5,0.5) > 0 && (
            <div style={{position:'absolute', left:PILE.x, top:PILE.y+PZ.length*78, width:520, textAlign:'center',
              opacity:pr(T.piezas+0.5,0.5)}}>
              <span className="f-mono" style={{fontSize:14, fontWeight:700, color:'#94A3B8'}}>+19 más</span>
            </div>
          )}
        </>
      )}

      {/* ================= Rótulo + puente ================= */}
      {pr(T.comparten,0.6) > 0 && (
        <div style={{position:'absolute', left:PILE.x, top:PILE.y+PZ.length*78+52, width:520, textAlign:'center',
          opacity:pr(T.comparten,0.6), transform:`translateY(${(1-Easing.easeOutCubic(pr(T.comparten,0.6)))*8}px)`}}>
          <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A'}}>
            24 piezas iguales, <span style={{color:'#0085FF'}}>una sola ficha.</span>
          </span>
        </div>
      )}

      <Caption t={t} start={T.puente} style={{fontSize:24, fontWeight:700, color:'#0F172A', bottom:22}}>
        ¿Y cómo la encuentra cada pieza? <span style={{color:'#0085FF'}}>Se emparejan solas. →</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaRD02 });