// === Escena 04 — "Pieza 2: las tareas (Mi día)" · audio real 33.31s ===
// LOCUCIÓN: "¿Te acuerdas de que delegar era imposible? Mira. El proyecto entero, en un diagrama
//   de tiempos: cada tarea con su responsable y sus fechas. ¿Lo prefieres en tablero? La misma
//   información, cuatro vistas. Arrastras una tarjeta a en curso... y ya está repartido. Y cada
//   persona, al entrar, ve su Mi día: solo lo suyo, ya filtrado. Sin reuniones para repartir
//   trabajo, sin perseguir a nadie por WhatsApp. Tercera pieza: la puerta de entrada."
// UI: adaptación fiel de slide-equipo.jsx del master (slide 18): Gantt 5 tareas → hover tooltip →
//   click tab Kanban → drag "Pruebas" a En curso → toast «Mi día». + tachados del cierre.
function Escena04({ t }){
  const T = {
    badge:0.8, tacha:2.2,
    win:3.6, gantt0:4.9, hover:7.7, tooltip:8.3, hoverEnd:10.9,
    curTab:11.1, clickTab:12.2, xfade:12.4, tabsGlow:13.2,
    press:15.6, dropEnd:17.3, chipRep:18.6,
    midia:21.4,
    tach1:26.3, tach2:28.0,
    out:31.2, slot:31.9,
  };
  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);
  const badgeP = clamp((t-T.badge)/0.45, 0, 1), badgeE = Easing.easeOutBack(badgeP);
  const tachaP = clamp((t-T.tacha)/0.5, 0, 1);
  const outP = clamp((t-T.out)/0.8, 0, 1);
  const slotP = clamp((t-T.slot)/0.45, 0, 1), slotE = Easing.easeOutBack(slotP);

  const TAREAS = [
    { n:'Diseño',      who:'Marta R.',  ini:'MR', start:0, len:3, c:'#0085FF', col:2 },
    { n:'Contenidos',  who:'Jorge M.',  ini:'JM', start:2, len:3, c:'#00C1FF', col:1 },
    { n:'Desarrollo',  who:'Lucía P.',  ini:'LP', start:3, len:5, c:'#8B5CF6', col:1 },
    { n:'Pruebas',     who:'Dani S.',   ini:'DS', start:7, len:2, c:'#F59E0B', col:0 },
    { n:'Publicación', who:'Marta R.',  ini:'MR', start:9, len:1, c:'#FF6751', col:0 },
  ];
  const DIAS = ['L 12','M 13','X 14','J 15','V 16','L 19','M 20','X 21','J 22','V 23'];

  const xfP = clamp((t-T.xfade)/0.45, 0, 1);            // gantt → kanban
  const hovering = t >= T.hover && t < T.hoverEnd;
  const tipP = clamp((t-T.tooltip)/0.4, 0, 1), tipE = Easing.easeOutBack(tipP);
  const tabGlowIdx = (t >= T.tabsGlow && t < T.tabsGlow + 1.75) ? Math.min(3, Math.floor((t-T.tabsGlow)/0.38)) : -1;

  // Drag de "Pruebas": Pendiente → En curso (coords relativas al cuerpo kanban 1372px ancho)
  const dragP = clamp((t-T.press)/(T.dropEnd-T.press), 0, 1);
  const dragE = Easing.easeInOutCubic(dragP);
  const dragging = t >= T.press && t < T.dropEnd;
  const dropped = t >= T.dropEnd;
  const dropPop = clamp((t-T.dropEnd)/0.45, 0, 1);
  const cardX = lerp(36, 492, dragE);                    // de col 0 a col 1 (destino medido)
  const cardY = lerp(96, 234, dragE) - Math.sin(dragP*Math.PI)*46;
  const chipRepP = clamp((t-T.chipRep)/0.45, 0, 1);

  const midiaP = clamp((t-T.midia)/0.5, 0, 1), midiaE = Easing.easeOutBack(midiaP);

  const tachados = [
    { at:T.tach1, txt:'reuniones para repartir trabajo' },
    { at:T.tach2, txt:'perseguir por WhatsApp' },
  ];

  // Cursor: park → hover Desarrollo → tab Kanban → tarjeta Pruebas → drop → fuera
  // (targets medidos en el DOM real, coords canvas 1920×1080)
  const cursorFrames = [
    {t:6.6,  x:1500, y:940},
    {t:7.7,  x:790,  y:545, arc:60},   // hover barra Desarrollo
    {t:10.9, x:790,  y:545},
    {t:11.9, x:384,  y:343, arc:50},   // tab Kanban (medido)
    {t:14.9, x:384,  y:343},
    {t:15.5, x:504,  y:462, arc:40},   // card Pruebas en col Pendiente (medido)
    {t:15.7, x:504,  y:462},
    {t:17.3, x:960,  y:594, arc:46},   // sigue a la tarjeta hasta su sitio en En curso (medido)
    {t:19.4, x:960,  y:594},
    {t:20.6, x:1560, y:950, arc:40},
  ];

  return (
    <SlideCanvas variant="light-soft">
      {/* Badge callback D1: delegar imposible → tachado */}
      {badgeP > 0 && (
        <div style={{position:'absolute', top:44, left:60, zIndex:7, opacity:clamp(badgeP*1.3,0,1)*(1-outP), transform:`scale(${lerp(0.7,1,badgeE)})`}}>
          <div style={{display:'flex', alignItems:'center', gap:10, background:'rgba(15,23,42,0.92)', borderRadius:100, padding:'9px 20px', border:'1px solid rgba(255,255,255,0.12)', position:'relative'}}>
            <span className="f-mono" style={{fontSize:12.5, fontWeight:700, color: tachaP>0.5?'#64748B':'#F87171', letterSpacing:'1px', position:'relative'}}>
              delegar: imposible
              <span style={{position:'absolute', left:0, top:'50%', height:2.5, background:'#10B981', width:`${tachaP*100}%`, borderRadius:2}}/>
            </span>
            {tachaP >= 1 && <span style={{color:'#10B981', fontWeight:800, fontSize:13}}>✓ mira</span>}
          </div>
        </div>
      )}
      <DemoHeader t={Math.max(0,t-0.3)} eyebrow="TAREAS · PROYECTOS" title={<span>Todo el proyecto. <span className="grad-text">Cada uno, lo suyo.</span></span>}/>

      {/* Ventana Tareas */}
      <div style={{position:'absolute', left:230, top:170, width:1460, height:700, background:'#fff', borderRadius:12, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:'0 40px 100px rgba(0,133,255,0.15), 0 10px 26px rgba(15,23,42,0.09)', opacity:winP*(1-outP*0.75), transform:`translateY(${(1-winE)*24}px) scale(${lerp(1,0.97,Easing.easeInOutCubic(outP))})`}}>
        <BrowserChrome url="play.dinaup.com/App/ToDo/Proyecto" title="Tareas — Dinaup"/>
        <DinaupAppHeader breadcrumb={["Tareas","Web nueva", xfP>0.5?"Kanban":"Gantt"]}/>

        <div style={{padding:'16px 30px', height:'calc(100% - 142px)', display:'flex', flexDirection:'column'}}>
          {/* Selector de vistas + rango */}
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
            {['Gantt','Kanban','Tabla','Lista'].map((v,i)=>{
              const active = (xfP<0.5 && i===0) || (xfP>=0.5 && i===1);
              const glowing = tabGlowIdx === i;
              const pressing = i===1 && t>=T.clickTab && t<T.clickTab+0.25;
              return (
                <span key={v} className="f-plex" style={{fontSize:12.5, fontWeight:700, padding:'7px 18px', borderRadius:9, background: active?'var(--dn-primary)':'#F1F5F9', color: active?'#fff':'#64748B', border:`1.5px solid ${active?'var(--dn-primary)':glowing?'rgba(0,133,255,0.6)':'#E2E8F0'}`, transform:`scale(${pressing?0.93:glowing?1.06:1})`, boxShadow: glowing?'0 0 0 4px rgba(0,133,255,0.15)':'none', transition:'all 200ms'}}>{v}</span>
              );
            })}
            <span className="f-mono" style={{marginLeft:8, fontSize:10.5, color:'#94A3B8', opacity:clamp((t-T.win-0.8)/0.4,0,1)}}>el mismo proyecto, cuatro vistas</span>
            <span className="f-mono" style={{marginLeft:'auto', fontSize:11, color:'#475569', background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:100, padding:'5px 14px'}}>12 → 23 may</span>
          </div>

          <div style={{position:'relative', flex:1, background:'#fff', border:'1px solid #EEF2F7', borderRadius:10, overflow:'hidden'}}>

            {/* ====== GANTT ====== */}
            <div style={{position:'absolute', inset:0, padding:'18px 22px', opacity:1-xfP}}>
              <div style={{display:'grid', gridTemplateColumns:'170px 1fr', gap:'0 14px'}}>
                <div/>
                <div style={{display:'grid', gridTemplateColumns:'repeat(10,1fr)', marginBottom:6}}>
                  {DIAS.map((d)=><span key={d} className="f-mono" style={{fontSize:8.5, color:'#94A3B8', textAlign:'center'}}>{d}</span>)}
                </div>
              </div>
              {TAREAS.map((ta,i)=>{
                const rowP = clamp((t-(T.gantt0+i*0.14))/0.4, 0, 1);
                const barP = clamp((t-(T.gantt0+i*0.28))/0.55, 0, 1);
                const isHover = hovering && ta.n==='Desarrollo';
                const dim = hovering && !isHover;
                return (
                  <div key={ta.n} style={{display:'grid', gridTemplateColumns:'170px 1fr', gap:'0 14px', alignItems:'center', padding:'7px 0', opacity:(clamp(rowP*1.3,0,1))*(dim?0.55:1), transform:`translateX(${(1-Easing.easeOutCubic(rowP))*-18}px)`, background:isHover?'rgba(0,133,255,0.05)':'transparent', borderRadius:8, transition:'opacity 250ms'}}>
                    <span className="f-plex" style={{fontSize:12.5, fontWeight:600, color:isHover?'#0066CC':'#334155', paddingLeft:8}}>{ta.n}</span>
                    <div style={{position:'relative', height:30}}>
                      <div style={{display:'grid', gridTemplateColumns:'repeat(10,1fr)', position:'absolute', inset:0}}>
                        {DIAS.map((_,ci)=><div key={ci} style={{borderLeft:'1px solid #F1F5F9'}}/>)}
                      </div>
                      <div style={{position:'absolute', top:3, bottom:3, left:`${ta.start*10}%`, width:`${ta.len*10*barP}%`, background:ta.c, borderRadius:7, display:'flex', alignItems:'center', gap:6, padding:'0 8px', overflow:'hidden', boxShadow:isHover?`0 8px 22px ${ta.c}55`:'none', transformOrigin:'left center'}}>
                        <span style={{width:16, height:16, borderRadius:100, background:'rgba(255,255,255,0.25)', color:'#fff', fontSize:7.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>{ta.ini}</span>
                        {barP>0.6 && <span style={{fontSize:9.5, fontWeight:700, color:'#fff', whiteSpace:'nowrap'}}>{ta.who}</span>}
                      </div>
                      {/* Tooltip en hover */}
                      {isHover && tipP>0 && (
                        <div style={{position:'absolute', left:'42%', top:-52, background:'#0F172A', borderRadius:10, padding:'9px 14px', display:'flex', alignItems:'center', gap:9, transform:`scale(${lerp(0.8,1,tipE)})`, opacity:clamp(tipP*1.3,0,1), boxShadow:'0 14px 34px rgba(15,23,42,0.4)', zIndex:5}}>
                          <span style={{width:20, height:20, borderRadius:100, background:'#8B5CF6', color:'#fff', fontSize:8.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>LP</span>
                          <span className="f-plex" style={{fontSize:11.5, fontWeight:700, color:'#fff'}}>Lucía P.</span>
                          <span className="f-mono" style={{fontSize:10, color:'#BFE0FF'}}>15 may → 21 may</span>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>

            {/* ====== KANBAN ====== */}
            {xfP > 0 && (
              <div style={{position:'absolute', inset:0, padding:'18px 22px', opacity:xfP, display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16}}>
                {['Pendiente','En curso','Hecho'].map((col,ci)=>{
                  const items = TAREAS.filter((ta)=>{
                    if (ta.n==='Pruebas') return dropped ? ci===1 : ci===0;
                    return ta.col===ci;
                  });
                  const flash = (ci===0 || ci===1) && dropped && dropPop<1;
                  return (
                    <div key={col} style={{background:'#F8FAFC', border:'1px solid #EEF2F7', borderRadius:10, padding:'12px 12px', display:'flex', flexDirection:'column', gap:9}}>
                      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 4px'}}>
                        <span className="f-plex" style={{fontSize:12, fontWeight:800, color:['#64748B','#0085FF','#10B981'][ci]}}>{col}</span>
                        <span className="f-mono" style={{fontSize:10.5, fontWeight:800, color:'#64748B', background: flash?'rgba(0,133,255,0.12)':'#fff', border:'1px solid #E2E8F0', borderRadius:100, padding:'1px 9px', transition:'background 300ms'}}>{items.length}</span>
                      </div>
                      {items.map((ta)=>{
                        const isDragged = ta.n==='Pruebas';
                        if (isDragged && dragging) return <div key={ta.n} style={{height:64, border:'1.5px dashed #CBD5E1', borderRadius:9, background:'rgba(203,213,225,0.12)'}}/>;
                        return (
                          <div key={ta.n} style={{background:'#fff', border:'1px solid #E2E8F0', borderLeft:`3.5px solid ${ta.c}`, borderRadius:9, padding:'10px 12px', boxShadow:'0 2px 8px rgba(15,23,42,0.05)', animation: isDragged&&dropPop<1&&dropped?'none':undefined, transform: isDragged&&dropped?`translateY(${(1-Easing.easeOutBack(dropPop))*-10}px) scale(${lerp(1.04,1,dropPop)})`:'none', position:'relative'}}>
                            <div className="f-plex" style={{fontSize:12.5, fontWeight:700, color:'#0F172A'}}>{ta.n}</div>
                            <div style={{display:'flex', alignItems:'center', gap:6, marginTop:5}}>
                              <span style={{width:17, height:17, borderRadius:100, background:ta.c, color:'#fff', fontSize:7.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>{ta.ini}</span>
                              <span className="f-mono" style={{fontSize:9.5, color:'#94A3B8'}}>{ta.who}</span>
                            </div>
                            {isDragged && dropped && chipRepP>0 && (
                              <span className="f-mono" style={{position:'absolute', right:10, top:10, fontSize:9, fontWeight:800, color:'#059669', background:'rgba(16,185,129,0.12)', border:'1px solid rgba(16,185,129,0.4)', borderRadius:100, padding:'2px 9px', opacity:clamp(chipRepP*1.3,0,1), transform:`scale(${lerp(0.6,1,Easing.easeOutBack(chipRepP))})`}}>✓ repartido</span>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  );
                })}
                {/* Tarjeta voladora */}
                {dragging && (
                  <div style={{position:'absolute', left:cardX, top:cardY, width:'calc(33% - 40px)', background:'#fff', border:'1px solid #E2E8F0', borderLeft:'3.5px solid #F59E0B', borderRadius:9, padding:'10px 12px', boxShadow:'0 22px 50px rgba(15,23,42,0.3)', transform:`rotate(${dragP*2.5}deg) scale(1.04)`, zIndex:10}}>
                    <div className="f-plex" style={{fontSize:12.5, fontWeight:700, color:'#0F172A'}}>Pruebas</div>
                    <div style={{display:'flex', alignItems:'center', gap:6, marginTop:5}}>
                      <span style={{width:17, height:17, borderRadius:100, background:'#F59E0B', color:'#fff', fontSize:7.5, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>DS</span>
                      <span className="f-mono" style={{fontSize:9.5, color:'#94A3B8'}}>Dani S.</span>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Toast «Mi día» */}
      {midiaP > 0 && (
        <div style={{position:'absolute', right:120, bottom:190, display:'flex', alignItems:'center', gap:12, background:'#fff', border:'1.5px solid rgba(0,133,255,0.5)', borderRadius:14, padding:'14px 22px', boxShadow:'0 24px 60px rgba(0,133,255,0.2)', opacity:clamp(midiaP*1.3,0,1)*(1-outP), transform:`translateY(${(1-midiaE)*16}px) scale(${lerp(0.85,1,midiaE)})`, zIndex:7}}>
          <span style={{width:34, height:34, borderRadius:100, background:'rgba(0,133,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:16}}>🎯</span>
          <div>
            <div className="f-plex" style={{fontSize:13.5, fontWeight:800, color:'#0F172A'}}>«Mi día»</div>
            <div style={{fontSize:11.5, color:'#64748B'}}>cada uno ve solo lo suyo, ya filtrado</div>
          </div>
        </div>
      )}

      {/* Tachados del cierre */}
      <div style={{position:'absolute', bottom:126, left:0, right:0, display:'flex', justifyContent:'center', gap:18, zIndex:6}}>
        {tachados.map((x,i)=>{
          const p = clamp((t-x.at)/0.5, 0, 1);
          const strike = clamp((t-x.at-0.25)/0.45, 0, 1);
          if (p<=0) return null;
          return (
            <div key={i} style={{background:'rgba(15,23,42,0.92)', borderRadius:100, padding:'8px 18px', opacity:clamp(p*1.3,0,1)*(1-outP), transform:`scale(${lerp(0.7,1,Easing.easeOutBack(p))})`}}>
              <span className="f-mono" style={{fontSize:12, color:'#CBD5E1', position:'relative', padding:'0 2px'}}>
                {x.txt}
                <span style={{position:'absolute', left:0, top:'50%', height:2.5, background:'#EF4444', width:`${strike*100}%`, borderRadius:2}}/>
              </span>
              {strike>=1 && <span style={{marginLeft:8, color:'#10B981', fontWeight:800, fontSize:12}}>✓</span>}
            </div>
          );
        })}
      </div>

      {/* Puente: slot 3 */}
      {slotP > 0 && (
        <div style={{position:'absolute', bottom:60, left:'50%', transform:`translateX(-50%) scale(${lerp(0.6,1,slotE)})`, display:'flex', alignItems:'center', gap:10, background:'rgba(15,23,42,0.92)', border:'1px solid rgba(255,255,255,0.14)', borderRadius:100, padding:'10px 22px', opacity:clamp(slotP*1.3,0,1), zIndex:8}}>
          <span className="f-mono" style={{width:26, height:26, borderRadius:100, background:'#10B981', color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>3</span>
          <span className="f-plex" style={{fontSize:13, fontWeight:700, color:'#fff'}}>La puerta de entrada</span>
        </div>
      )}

      <ScriptedCursor frames={cursorFrames} t={t} clickTimes={[T.clickTab]}/>

    </SlideCanvas>
  );
}
Object.assign(window, { Escena04 });