// === Escena 01 — Contrato: "Entra un coche, salen 200 piezas" ===
// El mundo del desguace: un vehículo entra, se despieza, y cada pieza nace SIN datos
// (precio/descripción/foto en gris). El problema: rellenar cientos de fichas a mano.
// Cierra con la promesa (La Única Cosa) y un puente hacia la ficha.
// Beats anclados al guion (audio/guion.json) y recalibrados contra la locución.
function EscenaRD01({ t }){
  const T = {
    coche:0.0,      // "Entra un coche" → el coche entra desde la izquierda
    despiece:3.3,   // "son doscientas piezas" → el coche se despieza: piezas a la rejilla
    vacias:9.3,     // "una pieza suelta no vale nada" → las piezas quedan sin referencias
    pregunta:13.5,   // "Necesita la referencia del fabricante" → rótulo del problema
    promesa:30.8,    // "Dinaup le pone la ficha" → La Única Cosa (promesa): piezas se iluminan
    puente:33.6,    // "empecemos por entender esa ficha" → puente de salida
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  // Piezas del despiece. La protagonista (seguiremos en todo el tutorial): "Faro del. izq.".
  const PIEZAS = [
    { n:'Faro del. izq.',   hero:true  },
    { n:'Puerta del. dcha.',hero:false },
    { n:'Retrovisor dcho.', hero:false },
    { n:'Capó',             hero:false },
    { n:'Paragolpes del.',  hero:false },
    { n:'Aleta del. izq.',  hero:false },
    { n:'Motor 1.6 TDI',    hero:false },
    { n:'Alternador',       hero:false },
  ];
  // Rejilla 4×2 centrada.
  const COLW=320, COLG=30, ROWH=150, ROWG=40, NX=4;
  const gridW = NX*COLW + (NX-1)*COLG;                 // 1370
  const gx0 = (1920-gridW)/2;                          // 275
  const gy0 = 430;
  const cellPos = (i)=>({ x: gx0 + (i%NX)*(COLW+COLG), y: gy0 + Math.floor(i/NX)*(ROWH+ROWG) });
  const CAR = { x: 860, y: 470 };                      // origen del despiece (centro del coche)

  const cocheP = pr(T.coche, 0.9), cocheE = Easing.easeOutCubic(cocheP);
  // Sacudida del coche justo antes de estallar
  const shake = (t >= T.despiece-0.35 && t < T.despiece) ? Math.sin((t-(T.despiece-0.35))*60)*4 : 0;
  const cocheOut = clamp((t-T.despiece)/0.5, 0, 1);    // el coche se desvanece al despiezar
  const promP = pr(T.promesa, 0.7), promE = Easing.easeOutCubic(promP);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="DESGUACES · EL PUNTO DE PARTIDA"
        title={<span>Entra un coche. <span className="grad-text">Salen 200 piezas.</span></span>}/>

      {/* ===== El coche (silueta lateral) — entra y luego se despieza ===== */}
      {cocheP > 0 && cocheOut < 1 && (
        <div style={{position:'absolute', left:CAR.x-210, top:CAR.y-110,
          opacity:clamp(cocheP*1.3,0,1)*(1-cocheOut),
          transform:`translateX(${(1-cocheE)*-260 + shake}px) scale(${lerp(0.92,1,cocheE)*(1-0.06*cocheOut)})`}}>
          <svg width="420" height="220" viewBox="0 0 420 220">
            {/* sombra */}
            <ellipse cx="210" cy="196" rx="180" ry="14" fill="rgba(15,23,42,0.10)"/>
            {/* carrocería */}
            <path d="M28 132 C28 122 38 118 50 116 L92 108 C104 90 126 74 158 72 L252 68
                     C288 68 306 84 320 104 L378 118 C394 122 400 130 400 142 L400 152
                     C400 158 396 162 390 162 L40 162 C33 162 28 158 28 150 Z"
                  fill="#1E293B"/>
            {/* franja inferior */}
            <path d="M28 150 C28 158 33 162 40 162 L390 162 C396 162 400 158 400 152 L400 148 L28 148 Z" fill="#0F172A"/>
            {/* ventanas */}
            <path d="M120 106 C130 90 146 80 166 79 L204 77 L204 106 Z" fill="#7DD3FC" opacity="0.85"/>
            <path d="M214 77 L250 76 C276 76 290 88 302 104 L214 106 Z" fill="#7DD3FC" opacity="0.85"/>
            {/* faro delantero (protagonista, sutil glow) */}
            <ellipse cx="388" cy="132" rx="12" ry="9" fill="#FFDC18"/>
            {/* ruedas */}
            <circle cx="120" cy="164" r="34" fill="#0F172A"/><circle cx="120" cy="164" r="16" fill="#475569"/>
            <circle cx="316" cy="164" r="34" fill="#0F172A"/><circle cx="316" cy="164" r="16" fill="#475569"/>
          </svg>
          {/* matrícula / modelo */}
          <div className="f-mono" style={{position:'absolute', left:150, top:196, fontSize:13, fontWeight:700,
            letterSpacing:'1px', color:'#64748B'}}>VW GOLF VII · 2013–2020</div>
        </div>
      )}

      {/* ===== Piezas volando del coche a la rejilla ===== */}
      {PIEZAS.map((p,i)=>{
        const start = T.despiece + i*0.09;
        const fp = pr(start, 0.85);
        if (fp <= 0) return null;
        const fe = Easing.easeOutCubic(fp);
        const cell = cellPos(i);
        const x = lerp(CAR.x-COLW/2, cell.x, fe);
        const y = lerp(CAR.y-ROWH/2, cell.y, fe) - Math.sin(fp*Math.PI)*90;   // arco
        const settled = fp >= 1;

        const vacP = pr(T.vacias + i*0.05, 0.5);        // los datos vacíos aparecen al asentar
        const promHere = p.hero ? promP : promP*0.9;    // al prometer, shimmer azul
        const glow = promHere > 0 ? Math.sin(clamp((t-T.promesa)/1.2,0,1)*Math.PI) : 0;

        return (
          <div key={i} style={{position:'absolute', left:x, top:y, width:COLW, height:ROWH,
            transform: settled?'none':`scale(${lerp(0.8,1,fe)})`, zIndex: p.hero?6:5,
            opacity: clamp(fp*1.4,0,1)}}>
            <div style={{width:'100%', height:'100%', background:'#fff', borderRadius:14,
              border:`${p.hero?2:1}px solid ${p.hero?'#0085FF':'#E2E8F0'}`,
              boxShadow: p.hero
                ? `0 18px 44px rgba(0,133,255,${0.14+0.16*glow}), 0 4px 12px rgba(15,23,42,0.06)`
                : '0 10px 26px rgba(15,23,42,0.07)',
              padding:'14px 16px', position:'relative', overflow:'hidden'}}>
              {/* nombre */}
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div style={{width:34, height:34, borderRadius:9, flexShrink:0,
                  background: p.hero?'linear-gradient(135deg,#0085FF,#56E16A)':'#F1F5F9',
                  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={p.hero?'#fff':'#94A3B8'} strokeWidth="2" fill="none"/>
                    <circle cx="12" cy="13" r="3.2" fill={p.hero?'#fff':'#CBD5E1'}/>
                  </svg>
                </div>
                <span className="f-plex" style={{fontSize:16, fontWeight:700, color:'#0F172A'}}>{p.n}</span>
              </div>
              {/* referencias VACÍAS (gris) — la pieza nace sin identificar */}
              {vacP > 0 && (
                <div style={{marginTop:12, opacity:vacP, display:'flex', alignItems:'center', gap:8}}>
                  <span className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#CBD5E1'}}>OEM</span>
                  <div style={{flex:1, height:9, borderRadius:100, background:'#EEF2F7'}}/>
                  <span className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#CBD5E1'}}>EAN</span>
                  <div style={{width:54, height:9, borderRadius:100, background:'#EEF2F7'}}/>
                </div>
              )}
              {/* shimmer de la promesa */}
              {promHere > 0 && (
                <div style={{position:'absolute', inset:0, background:`linear-gradient(105deg, transparent 40%, rgba(0,133,255,${0.10*glow}) 50%, transparent 60%)`, pointerEvents:'none'}}/>
              )}
            </div>
          </div>
        );
      })}

      {/* ===== Rótulo del problema (¿qué le falta a cada pieza?) ===== */}
      {(()=>{ const p = pr(T.pregunta, 0.6); if (p<=0 || promP>0.15) return null;
        return (
          <div style={{position:'absolute', left:0, right:0, top:352, textAlign:'center',
            opacity: p*(1-clamp((promP)/0.3,0,1)), transform:`translateY(${(1-Easing.easeOutCubic(p))*-8}px)`}}>
            <span className="f-plex" style={{fontSize:23, fontWeight:600, color:'#64748B'}}>
              ¿Referencia del fabricante? ¿Código de barras?  <span style={{color:'#94A3B8'}}>— por cada una.</span>
            </span>
          </div>
        );
      })()}

      {/* ===== La promesa (La Única Cosa, 1/3) ===== */}
      {promP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:344, textAlign:'center',
          opacity:clamp(promP*1.3,0,1), transform:`translateY(${(1-promE)*12}px)`}}>
          <span className="f-plex" style={{fontSize:30, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A'}}>
            Tú dices qué pieza es. <span style={{color:'#0085FF'}}>Dinaup le pone la ficha.</span>
          </span>
        </div>
      )}

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