// === Escena 03 — "La pieza recibe su ficha sola" (emparejamiento) — VALLE ===
// Una pieza nueva hereda de su coche la VERSIÓN + el TIPO. Con el interruptor "identificación
// automática" del coche activo, el sistema compara con las fichas candidatas: descarta la de tipo
// distinto y, entre las de misma combinación, elige la MÁS RECIENTE. Las referencias vuelan de la
// ficha a la pieza. Escena tranquila (una sola pieza) — protege el clímax de la 04.
function EscenaRD03({ t }){
  const T = {
    pieza:0.4,      // "Sale una pieza nueva" → entra la pieza nueva (vacía)
    llaves:6.7,     // "hereda del coche" → resalta versión + tipo heredados
    coche:13.9,      // "la identificación automática" → interruptor del coche ON
    cand:17.0,       // "buscar su ficha" → 3 fichas candidatas aparecen
    buscar:18.9,     // "Compara con las que hay" → líneas de comparación
    match:25.5,      // "encajan en versión y en tipo" → la correcta se ilumina, tipo≠ se atenúa
    reciente:29.4,   // "Con la más reciente" → sello la más reciente
    volar:32.2,     // "le pasa las referencias" → referencias vuelan ficha → pieza
    rellena:37.8,   // "puestos solos" → la pieza queda identificada
    ok:40.0,        // "emparejada con su ficha" → check emparejada
    puente:44.0,    // "esa ficha cambia mañana" → puente
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const PIEZA = { x:150, y:360, w:600, h:340 };
  // Candidatas (derecha). A = correcta y reciente · B = misma combo pero vieja · C = tipo distinto.
  const CAND = [
    { id:'A', tipo:'Faro del. izq.', ver:'Golf VII 1.6 TDI', fecha:'nov 2025', casa:true,  reciente:true  },
    { id:'B', tipo:'Faro del. izq.', ver:'Golf VII 1.6 TDI', fecha:'ene 2024', casa:true,  reciente:false },
    { id:'C', tipo:'Puerta del. izq.', ver:'Golf VII 1.6 TDI', fecha:'—',      casa:false, reciente:false },
  ];
  const CX=1070, CW=700, CY=250, CH=150, CG=20;
  const candY = (i)=> CY + i*(CH+CG);

  const winnerY = candY(0)+CH/2;   // ficha A
  const matchP = pr(T.match,0.6);
  const recP   = pr(T.reciente,0.5), recE = Easing.easeOutBack(recP);
  const okP    = pr(T.ok,0.5), okE = Easing.easeOutBack(okP);

  // Referencias que vuelan de la ficha A a la pieza
  const FLYREFS = [
    { k:'OEM', v:'5G1 941 005', t0:T.volar,      arc:120 },
    { k:'EAN', v:'8412345…',    t0:T.volar+0.25, arc:90  },
    { k:'+2',  v:'ref.',        t0:T.volar+0.5,  arc:60  },
  ];
  const flyFrom = { x:CX+40, y:winnerY };
  const flyTo   = { x:PIEZA.x+PIEZA.w-150, y:PIEZA.y+250 };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="DESGUACES · EL EMPAREJAMIENTO"
        title={<span>La pieza <span className="grad-text">encuentra su ficha</span> sola</span>}/>

      {/* ===== Interruptor del coche ===== */}
      {pr(T.coche,0.5) > 0 && (
        <div style={{position:'absolute', left:'50%', top:150, transform:`translateX(-50%) translateY(${(1-Easing.easeOutBack(pr(T.coche,0.5)))*-12}px)`,
          opacity:clamp(pr(T.coche,0.5)*1.3,0,1), display:'inline-flex', alignItems:'center', gap:14,
          background:'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'10px 18px', boxShadow:'0 10px 26px rgba(15,23,42,0.08)'}}>
          <span style={{fontSize:18}}>🚗</span>
          <span className="f-plex" style={{fontSize:15, fontWeight:700, color:'#0F172A'}}>Coche · Identificación automática</span>
          <span style={{position:'relative', width:46, height:26, borderRadius:100, background:'#10B981'}}>
            <span style={{position:'absolute', top:3, left:23, width:20, height:20, borderRadius:100, background:'#fff', boxShadow:'0 2px 5px rgba(15,23,42,0.25)'}}/>
          </span>
          <span className="f-mono" style={{fontSize:13, fontWeight:800, color:'#059669'}}>ON</span>
        </div>
      )}

      {/* ===== La pieza nueva ===== */}
      {pr(T.pieza,0.7) > 0 && (()=>{
        const p = pr(T.pieza,0.7), e = Easing.easeOutCubic(p);
        const rellena = pr(T.rellena,0.5);
        return (
          <div style={{position:'absolute', left:PIEZA.x, top:PIEZA.y, width:PIEZA.w,
            background:'#fff', borderRadius:20, border:`2px solid ${okP>0?'rgba(16,185,129,0.5)':'#0085FF'}`,
            boxShadow: okP>0?'0 24px 60px rgba(16,185,129,0.16)':'0 24px 60px rgba(0,133,255,0.14)',
            padding:'22px 26px', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*28}px)`}}>
            <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'2.5px', color:'#94A3B8'}}>PIEZA RECIÉN DESPIEZADA</div>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div className="f-plex" style={{fontSize:27, fontWeight:800, color:'#0F172A', marginTop:2}}>Faro delantero izq.</div>
              <span className="f-mono" style={{fontSize:14, fontWeight:700, color:'#94A3B8'}}>#1099</span>
            </div>

            {/* llaves heredadas del coche */}
            {pr(T.llaves,0.5) > 0 && (
              <div style={{display:'flex', gap:10, marginTop:14, opacity:clamp(pr(T.llaves,0.5)*1.3,0,1)}}>
                {[['VERSIÓN','Golf VII 1.6 TDI'],['TIPO','Faro del. izq.']].map(([k,v],i)=>(
                  <span key={i} className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:8, fontSize:13, fontWeight:700,
                    color:'#334155', background:'#EFF6FF', border:'1px solid rgba(0,133,255,0.25)', borderRadius:100, padding:'7px 14px'}}>
                    <span style={{color:'#94A3B8'}}>{k}</span>{v}</span>
                ))}
                <span className="f-plex" style={{fontSize:12, color:'#94A3B8', alignSelf:'center'}}>← del coche</span>
              </div>
            )}

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

            {/* referencias (vacías → se rellenan al volar) */}
            <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'2px', color:'#94A3B8', marginBottom:10}}>REFERENCIAS</div>
            <div style={{display:'flex', gap:10}}>
              {[['OEM','5G1 941 005'],['EAN','8412345 678901']].map(([k,v],i)=>(
                <div key={i} style={{flex:1, background: rellena>0?'#F8FBFF':'#FBFCFE',
                  border:`1px solid ${rellena>0?'rgba(0,133,255,0.25)':'#EEF2F7'}`, borderRadius:12, padding:'9px 14px'}}>
                  <div className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#CBD5E1', marginBottom:3}}>{k}</div>
                  {rellena>0
                    ? <div className="f-mono" style={{fontSize:15, fontWeight:800, color:'#0F172A', opacity:rellena}}>{v}</div>
                    : <div style={{width:'70%', height:9, borderRadius:100, background:'#EEF2F7'}}/>}
                </div>
              ))}
            </div>

            {/* check emparejada */}
            {okP > 0 && (
              <div style={{position:'absolute', right:22, bottom:-18, display:'inline-flex', alignItems:'center', gap:8,
                background:'#fff', border:'1px solid rgba(16,185,129,0.4)', borderRadius:100, padding:'7px 16px',
                boxShadow:'0 8px 22px rgba(16,185,129,0.18)', transform:`scale(${lerp(0.7,1,okE)})`, opacity:clamp(okP*1.3,0,1)}}>
                <span style={{color:'#059669', fontWeight:800}}>✓</span>
                <span className="f-plex" style={{fontSize:14, fontWeight:700, color:'#059669'}}>Emparejada con su ficha</span>
              </div>
            )}
          </div>
        );
      })()}

      {/* ===== Líneas de comparación pieza → candidatas ===== */}
      {pr(T.buscar,0.6) > 0 && (
        <svg width="1920" height="1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
          {CAND.map((c,i)=>{
            const p = Easing.easeInOutCubic(pr(T.buscar+i*0.1, 0.5));
            const x1=PIEZA.x+PIEZA.w, y1=PIEZA.y+120, x2=CX, y2=candY(i)+CH/2;
            const len=Math.hypot(x2-x1,y2-y1);
            const dead = matchP>0 && !c.casa;
            const faded = matchP>0 && c.casa && !c.reciente;
            const col = (matchP>0 && c.casa && c.reciente) ? '#10B981' : dead ? '#EF4444' : '#94A3B8';
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={col} strokeWidth="2"
              opacity={(dead||faded)?0.18:0.5} strokeDasharray={len} strokeDashoffset={len*(1-p)}/>;
          })}
        </svg>
      )}

      {/* ===== Fichas candidatas ===== */}
      {CAND.map((c,i)=>{
        const p = pr(T.cand+i*0.12, 0.55), e = Easing.easeOutBack(p);
        if (p<=0) return null;
        const isWinner = matchP>0 && c.casa && c.reciente;
        const dead = matchP>0 && !c.casa;
        const faded = matchP>0 && c.casa && !c.reciente;
        const dim = dead || faded;
        return (
          <div key={i} style={{position:'absolute', left:CX, top:candY(i), width:CW, height:CH,
            background:'#fff', borderRadius:16, border:`${isWinner?2:1}px solid ${isWinner?'#10B981':dead?'#FCA5A5':'#E2E8F0'}`,
            boxShadow: isWinner?'0 20px 46px rgba(16,185,129,0.20)':'0 10px 26px rgba(15,23,42,0.06)',
            padding:'16px 20px', opacity: dim?lerp(1,0.4,matchP):clamp(p*1.3,0,1),
            filter: dim?`saturate(${lerp(1,0.5,matchP)})`:'none',
            transform:`translateY(${(1-e)*20}px) scale(${isWinner?1+0.02*Easing.easeOutBack(matchP):1})`}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'2px', color:'#94A3B8'}}>FICHA</div>
              <span className="f-mono" style={{fontSize:11, fontWeight:700, color:'#94A3B8'}}>creada {c.fecha}</span>
            </div>
            <div className="f-plex" style={{fontSize:20, fontWeight:800, color:'#0F172A', marginTop:2}}>{c.tipo}</div>
            <div style={{display:'flex', gap:8, marginTop:10}}>
              <span className="f-mono" style={{fontSize:12, fontWeight:700, color: c.casa?'#334155':'#C2410C',
                background: c.casa?'#F1F5F9':'#FFF7ED', border:`1px solid ${c.casa?'#E2E8F0':'#FDBA74'}`, borderRadius:100, padding:'5px 12px'}}>{c.ver}</span>
              {dead && <span className="f-mono" style={{fontSize:12, fontWeight:700, color:'#DC2626'}}>✕ tipo distinto</span>}
              {isWinner && <span className="f-mono" style={{fontSize:12, fontWeight:700, color:'#059669'}}>✓ versión + tipo</span>}
            </div>
            {/* sello "la más reciente" sobre la ganadora */}
            {isWinner && recP > 0 && (
              <div className="f-mono" style={{position:'absolute', right:16, bottom:-14, padding:'6px 14px',
                border:'2px solid #10B981', borderRadius:10, color:'#059669', fontSize:12, fontWeight:800, letterSpacing:'1px',
                background:'rgba(16,185,129,0.06)', transform:`rotate(-5deg) scale(${lerp(1.8,1,Easing.easeOutCubic(recP))})`, opacity:clamp(recP*1.4,0,1)}}>
                LA MÁS RECIENTE
              </div>
            )}
          </div>
        );
      })}

      {/* ===== Referencias volando ficha → pieza ===== */}
      {FLYREFS.map((r,i)=>{
        const p = clamp((t-r.t0)/0.85, 0, 1);
        if (t<r.t0 || p>=1) return null;
        const e = Easing.easeInOutCubic(p);
        const x = lerp(flyFrom.x, flyTo.x, e);
        const y = lerp(flyFrom.y, flyTo.y, e) - Math.sin(p*Math.PI)*r.arc;
        return (
          <div key={i} style={{position:'absolute', left:x, top:y, transform:'translate(-50%,-50%)', zIndex:20,
            opacity:clamp(Math.min(p*5,(1-p)*3.5),0,1), background:'linear-gradient(180deg,#38BDF8,#0085FF)',
            borderRadius:10, padding:'7px 14px', display:'flex', alignItems:'center', gap:8, boxShadow:'0 12px 26px rgba(0,133,255,0.30)', whiteSpace:'nowrap'}}>
            <span className="f-mono" style={{fontSize:11, fontWeight:700, color:'rgba(255,255,255,0.8)'}}>{r.k}</span>
            <span className="f-mono" style={{fontSize:14, fontWeight:800, color:'#fff'}}>{r.v}</span>
          </div>
        );
      })}

      <Caption t={t} start={T.puente} style={{fontSize:24, fontWeight:700, color:'#0F172A', bottom:22}}>
        ¿Y si esa ficha cambia? <span style={{color:'#0085FF'}}>Mira lo que pasa. →</span>
      </Caption>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaRD03 });