// === Escena 06 — Recap + eco ===
// Las 3 ideas del tutorial en cascada (ficha compartida · se asigna sola · se mantiene al día),
// el modo manual como nota al pie, y el ECO de La Única Cosa (3/3) + logo.
function EscenaRD06({ t }){
  const T = {
    titulo:0.3,     // "Quédate con tres cosas" → cabecera
    idea1:3.7,      // "comparten una sola ficha" → idea 1
    idea2:8.6,      // "encuentra su ficha sola" → idea 2
    idea3:12.6,      // "editas la ficha una vez" → idea 3
    manual:18.4,     // "la marcas como manual" → nota manual
    eco:23.8,        // "tú dices qué pieza es" → eco de La Única Cosa
    logo:29.0,      // "Tú la identificas" → logo
  };
  const pr = (s,d)=> clamp((t-s)/d, 0, 1);

  const IDEAS = [
    {
      start:T.idea1, color:'#0085FF', tint:'rgba(0,133,255,0.10)',
      title:'Una ficha, muchas piezas',
      sub:'Misma versión de coche y mismo tipo de pieza: una sola ficha compartida.',
      icon:(c)=>(<><rect x="5" y="3.5" width="11" height="15" rx="2" stroke={c} strokeWidth="1.8"/>
        <path d="M8 8 H13 M8 11 H13 M8 14 H11" stroke={c} strokeWidth="1.6" strokeLinecap="round"/>
        <rect x="9" y="7" width="11" height="14" rx="2" fill="#fff" stroke={c} strokeWidth="1.8"/>
        <path d="M12 11 H17 M12 14 H17 M12 17 H15" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></>)
    },
    {
      start:T.idea2, color:'#10B981', tint:'rgba(16,185,129,0.10)',
      title:'Se empareja sola',
      sub:'Dices de qué coche sale; la pieza encuentra su ficha y recibe sus referencias.',
      icon:(c)=>(<><path d="M7 4 V11 a5 5 0 0 0 10 0 V4" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
        <path d="M5 4 H9 M15 4 H19" stroke={c} strokeWidth="1.8" strokeLinecap="round"/>
        <path d="M12 16 V21 M9.5 18.5 L12 21 L14.5 18.5" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></>)
    },
    {
      start:T.idea3, color:'#FB8C00', tint:'rgba(251,140,0,0.10)',
      title:'Se mantiene al día',
      sub:'Editas la ficha una vez y todas las piezas iguales se actualizan solas.',
      icon:(c)=>(<><path d="M20 6 a9 9 0 1 0 1.5 8" stroke={c} strokeWidth="1.8" strokeLinecap="round" fill="none"/>
        <path d="M20 3 V7 H16" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></>)
    },
  ];

  const CW=440, CG=40, N=3;
  const x0 = (1920 - (N*CW+(N-1)*CG))/2;   // 260
  const cardX = (i)=> x0 + i*(CW+CG);

  const ecoP = pr(T.eco, 0.7), ecoE = Easing.easeOutBack(ecoP);
  const manP = pr(T.manual, 0.6);
  const logoP = pr(T.logo, 0.7), logoE = Easing.easeOutCubic(logoP);

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="DESGUACES · EN RESUMEN"
        title={<span>Tú la identificas. <span className="grad-text">Dinaup la mantiene.</span></span>}/>

      {/* ===== 3 ideas en cascada ===== */}
      {IDEAS.map((idea,i)=>{
        const p = pr(idea.start, 0.6), e = Easing.easeOutCubic(p);
        if (p<=0) return null;
        const num = pr(idea.start+0.15, 0.4);
        return (
          <div key={i} style={{position:'absolute', left:cardX(i), top:360, width:CW, height:290,
            background:'#fff', borderRadius:20, border:'1px solid #E2E8F0',
            boxShadow:'0 20px 50px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.05)',
            padding:'30px 30px', opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*30}px)`}}>
            {/* nº */}
            <div className="f-mono" style={{position:'absolute', top:22, right:26, fontSize:13, fontWeight:800,
              color:idea.color, opacity:num}}>{i+1}</div>
            {/* icono */}
            <div style={{width:64, height:64, borderRadius:16, background:idea.tint,
              display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20}}>
              <svg width="30" height="30" viewBox="0 0 24 24" fill="none">{idea.icon(idea.color)}</svg>
            </div>
            <div className="f-plex" style={{fontSize:26, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em', marginBottom:12}}>{idea.title}</div>
            <div className="f-plex" style={{fontSize:17, fontWeight:400, color:'#64748B', lineHeight:1.45}}>{idea.sub}</div>
          </div>
        );
      })}

      {/* ===== Nota: modo manual ===== */}
      {manP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:686, textAlign:'center',
          opacity:Easing.easeOutCubic(manP), transform:`translateY(${(1-Easing.easeOutCubic(manP))*8}px)`}}>
          <span className="f-mono" style={{display:'inline-flex', alignItems:'center', gap:10, fontSize:14,
            fontWeight:600, color:'#64748B', background:'#fff', border:'1px solid #E2E8F0', borderRadius:100,
            padding:'9px 20px', boxShadow:'0 6px 16px rgba(15,23,42,0.05)'}}>
            <svg width="15" height="15" 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>
            ¿Una pieza especial? Márcala como manual y la gestionas tú.
          </span>
        </div>
      )}

      {/* ===== ECO de La Única Cosa (3/3) ===== */}
      {ecoP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:772, textAlign:'center',
          opacity:clamp(ecoP*1.3,0,1), transform:`translateY(${(1-ecoE)*14}px) scale(${lerp(0.95,1,ecoE)})`}}>
          <div className="f-plex" style={{fontSize:38, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A'}}>
            Tú dices qué pieza es. <span style={{color:'#0085FF'}}>Dinaup le pone la ficha y la mantiene al día.</span>
          </div>
        </div>
      )}

      {/* ===== Logo ===== */}
      {logoP > 0 && (
        <div style={{position:'absolute', left:0, right:0, bottom:52, display:'flex', justifyContent:'center',
          opacity:logoP, transform:`translateY(${(1-logoE)*10}px)`}}>
          <DinaupLogo size={30}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaRD06 });