// === Escena 03 — "Pieza 1: el CRM (F2)" · audio real 26.85s ===
// LOCUCIÓN: "La primera: el CRM. Te llama un cliente: ¿cuánto os debemos exactamente?. Antes,
//   eso era ahora te lo miro y te llamo. Aquí pulsas efe dos, escribes su nombre... y lo tienes
//   todo: sus facturas, lo pendiente, su banco, hasta cómo paga. Mil ochocientos cuarenta euros,
//   de dos facturas. Vencieron el día treinta. Diez segundos, y has quedado como un señor.
//   Segunda pieza: el trabajo del equipo."
// UI: adaptación fiel de slide-ficha360.jsx del master (slide 12): toast de llamada → F2 →
//   typewriter "acme" → ficha 360 con 4 paneles en cascada → respuesta verde en 10s.
function Escena03({ t }){
  const T = {
    badge:0.5, toast:2.3, antes:6.4, tacha:7.2,
    key:8.5, press:9.2, buscador:10.1, type:10.4, result:11.6,
    ficha:12.1, chips:[12.5, 12.8], panels:[13.0, 13.9, 14.8, 15.7],
    hlVentas:17.1, subPulse:18.2, respuesta:21.7,
    out:24.8, slot:25.4,
  };
  const toastP = clamp((t-T.toast)/0.5, 0, 1), toastE = Easing.easeOutBack(toastP);
  const ring = Math.sin(t*6)*0.5+0.5;
  const antesP = clamp((t-T.antes)/0.4, 0, 1);
  const tachaP = clamp((t-T.tacha)/0.45, 0, 1);
  const buscP = clamp((t-T.buscador)/0.45, 0, 1), buscE = Easing.easeOutBack(buscP);
  const resP  = clamp((t-T.result)/0.3, 0, 1);
  const fichaP = clamp((t-T.ficha)/0.5, 0, 1), fichaE = Easing.easeOutCubic(fichaP);
  const outP = clamp((t-T.out)/0.8, 0, 1);

  const hlOn = t >= T.hlVentas;
  const subPulseOn = t >= T.subPulse && t < T.subPulse+1.2;
  const subPulse = subPulseOn ? Math.sin((t-T.subPulse)/1.2*Math.PI) : 0;
  const respP = clamp((t-T.respuesta)/0.5, 0, 1), respE = Easing.easeOutBack(respP);
  const slotP = clamp((t-T.slot)/0.45, 0, 1), slotE = Easing.easeOutBack(slotP);

  const PANELS = [
    { icon:'📤', l:'Ventas',   v:'12 facturas · 48.000 €', sub:'2 pendientes · 1.840 €', subAmber:true },
    { icon:'📥', l:'Compras',  v:'También es tu proveedor', sub:'3 facturas recibidas este año' },
    { icon:'🏦', l:'Bancos',   v:'3.200 €', sub:'última transferencia · 3 nov' },
    { icon:'📊', l:'Análisis', v:'Factura media 2.100 €', sub:'Paga siempre a 30 días' },
  ];

  return (
    <SlideCanvas variant="light-soft">
      {/* Badge de pieza */}
      <div style={{position:'absolute', top:44, left:60, zIndex:7, opacity:clamp((t-T.badge)/0.4,0,1)}}>
        <div style={{display:'flex', alignItems:'center', gap:10, background:'rgba(15,23,42,0.92)', borderRadius:100, padding:'9px 20px 9px 12px', border:'1px solid rgba(255,255,255,0.12)'}}>
          <span className="f-mono" style={{width:24, height:24, borderRadius:100, background:'#0085FF', color:'#fff', fontSize:12, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>1</span>
          <span className="f-plex" style={{fontSize:13, fontWeight:700, color:'#fff', letterSpacing:'1px'}}>EL CRM</span>
        </div>
      </div>
      <DemoHeader t={Math.max(0, t-0.3)} eyebrow="CRM · FICHA 360°" title={<span>Te llaman. <span className="grad-text">F2. Lo tienes todo.</span></span>}/>

      {/* Toast de llamada entrante */}
      {toastP > 0 && (
        <div style={{position:'absolute', top:44, right:60, zIndex:8, display:'flex', alignItems:'center', gap:13, background:'rgba(15,23,42,0.94)', borderRadius:14, padding:'13px 20px', border:'1px solid rgba(255,255,255,0.1)', boxShadow:'0 18px 44px rgba(15,23,42,0.35)', opacity:clamp(toastP*1.3,0,1)*(1-outP), transform:`translateY(${(1-toastE)*-14}px)`}}>
          <div style={{position:'relative', width:38, height:38}}>
            <div style={{position:'absolute', inset:0, borderRadius:100, background:'#10B981', display:'flex', alignItems:'center', justifyContent:'center', fontSize:16}}>📞</div>
            <div style={{position:'absolute', inset:0, borderRadius:100, border:'2px solid #10B981', transform:`scale(${1+ring*0.35})`, opacity:1-ring}}/>
          </div>
          <div>
            <div className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#fff'}}>Acme Corp · entrante</div>
            <div style={{fontSize:11.5, color:'#94A3B8', fontStyle:'italic'}}>«¿Cuánto os debemos exactamente?»</div>
          </div>
        </div>
      )}

      {/* Ventana CRM */}
      <div style={{position:'absolute', left:250, top:185, width:1420, height:770, background:'#fff', borderRadius:14, 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:(1-outP*0.75), transform:`scale(${lerp(1,0.97,Easing.easeInOutCubic(outP))})`}}>
        <BrowserChrome url="play.dinaup.com/App/CRM" title="CRM — Dinaup"/>
        <DinaupAppHeader breadcrumb={["CRM","Entidades"]}/>

        <div style={{position:'relative', height:'calc(100% - 142px)', background:'#F8FAFC'}}>

          {/* "Antes": la nota que se tacha */}
          {antesP > 0 && fichaP < 0.4 && (
            <div style={{position:'absolute', top:36, left:'50%', transform:'translateX(-50%)', opacity:clamp(antesP*1.3,0,1)*(1-clamp((t-T.buscador)/0.3,0,1))}}>
              <span style={{fontSize:15, fontStyle:'italic', color:'#94A3B8', position:'relative', padding:'0 4px'}}>
                «ahora te lo miro y te llamo»
                <span style={{position:'absolute', left:0, top:'52%', height:2.5, background:'#DC2626', width:`${tachaP*100}%`, borderRadius:2}}/>
              </span>
            </div>
          )}

          {/* KeyCap F2 + hint */}
          {t >= T.key && fichaP < 0.5 && (
            <div style={{position:'absolute', top:96, left:'50%', transform:'translateX(-50%)', display:'flex', alignItems:'center', gap:14, opacity:1-clamp((t-T.ficha)/0.25,0,1)}}>
              <KeyCap t={t} label="F2" start={T.key} pressT={T.press} size={62}/>
              <span className="f-mono" style={{fontSize:12, color:'#64748B', letterSpacing:'1px', opacity:clamp((t-T.key-0.2)/0.4,0,1)}}>buscar cualquier entidad</span>
            </div>
          )}

          {/* Buscador */}
          {buscP > 0 && fichaP < 1 && (
            <div style={{position:'absolute', top:210, left:'50%', transform:`translateX(-50%) scale(${lerp(0.9,1,buscE)})`, width:520, opacity:clamp(buscP*1.3,0,1)*(1-clamp((t-T.ficha)/0.25,0,1))}}>
              <div style={{display:'flex', alignItems:'center', gap:12, background:'#fff', border:'2px solid #0085FF', borderRadius:14, padding:'16px 20px', boxShadow:'0 20px 50px rgba(0,133,255,0.18)'}}>
                <span style={{fontSize:18, color:'#94A3B8'}}>🔍</span>
                <span className="f-mono" style={{fontSize:19, color:'#0F172A'}}>
                  <Typewriter text="acme" start={T.type} cps={9} t={t} caret/>
                </span>
              </div>
              {resP > 0 && (
                <div style={{marginTop:10, display:'flex', alignItems:'center', gap:12, background:'#fff', border:'1px solid #E2E8F0', borderRadius:12, padding:'12px 18px', boxShadow:'0 12px 30px rgba(15,23,42,0.1)', opacity:clamp(resP*1.3,0,1)}}>
                  <div style={{width:34, height:34, borderRadius:9, background:'#0F172A', color:'#fff', fontSize:12, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>AC</div>
                  <div style={{flex:1}}>
                    <div className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#0F172A'}}>Acme Corp</div>
                    <div className="f-mono" style={{fontSize:10, color:'#94A3B8'}}>B-84112233 · Madrid</div>
                  </div>
                  <span className="f-mono" style={{fontSize:10, color:'#0085FF', background:'rgba(0,133,255,0.08)', border:'1px solid rgba(0,133,255,0.3)', borderRadius:7, padding:'3px 10px'}}>↵ abrir</span>
                </div>
              )}
            </div>
          )}

          {/* Ficha 360 */}
          {fichaP > 0 && (
            <div style={{position:'absolute', inset:0, padding:'26px 40px', opacity:fichaP, transform:`translateY(${(1-fichaE)*18}px)`}}>
              <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:20}}>
                <div style={{width:54, height:54, borderRadius:13, background:'#0F172A', color:'#fff', fontSize:19, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>AC</div>
                <div style={{flex:1}}>
                  <div style={{display:'flex', alignItems:'center', gap:12}}>
                    <span className="f-plex" style={{fontSize:24, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>Acme Corp</span>
                    <StatusChip label="Cliente" color="primary" start={T.chips[0]} t={t}/>
                    <StatusChip label="Proveedor" color="warning" start={T.chips[1]} t={t}/>
                  </div>
                  <div className="f-mono" style={{fontSize:11, color:'#94A3B8', marginTop:3}}>B-84112233 · cliente desde 2021 · Madrid</div>
                </div>
                <div style={{display:'flex', gap:10}}>
                  <span style={{fontSize:11.5, fontWeight:700, color:'#475569', background:'#fff', border:'1px solid #E2E8F0', borderRadius:9, padding:'7px 14px'}}>✎ Editar</span>
                  <span style={{fontSize:11.5, fontWeight:700, color:'#fff', background:'#0085FF', borderRadius:9, padding:'7px 14px'}}>+ Venta rápida</span>
                </div>
              </div>

              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
                {PANELS.map((p,i)=>{
                  const pp = clamp((t-T.panels[i])/0.5, 0, 1);
                  const pe = Easing.easeOutCubic(pp);
                  const loading = pp > 0 && pp < 0.55;
                  const isVentas = i === 0;
                  const hot = isVentas && hlOn;
                  return (
                    <div key={i} style={{background:'#fff', border:`1.5px solid ${hot?'rgba(0,133,255,0.55)':'#E2E8F0'}`, borderRadius:13, padding:'16px 20px', opacity:clamp(pp*1.3,0,1), transform:`translateY(${(1-pe)*14}px)`, boxShadow: hot?'0 16px 40px rgba(0,133,255,0.16)':'0 4px 14px rgba(15,23,42,0.04)', transition:'border 300ms, box-shadow 300ms'}}>
                      <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:8}}>
                        <span style={{fontSize:15}}>{p.icon}</span>
                        <span className="f-mono" style={{fontSize:10, fontWeight:700, color:'#94A3B8', letterSpacing:'1.5px', textTransform:'uppercase'}}>{p.l}</span>
                      </div>
                      {loading ? (
                        <div style={{display:'flex', alignItems:'center', gap:9, height:46}}>
                          <span style={{width:16, height:16, border:'2.5px solid rgba(0,133,255,0.2)', borderTopColor:'#0085FF', borderRadius:100, display:'inline-block', transform:`rotate(${(t*520)%360}deg)`}}/>
                          <span className="f-mono" style={{fontSize:10.5, color:'#94A3B8'}}>cargando…</span>
                        </div>
                      ) : pp >= 0.55 ? (
                        <div>
                          <div className="f-plex" style={{fontSize:19, fontWeight:800, color:'#0F172A'}}>{p.v}</div>
                          <div className="f-mono" style={{fontSize:11.5, marginTop:4, color: p.subAmber?'#D97706':'#94A3B8', fontWeight: p.subAmber?800:500, transform: p.subAmber&&subPulseOn?`scale(${1+subPulse*0.06})`:'none', transformOrigin:'left center', background: p.subAmber&&subPulseOn?`rgba(245,158,11,${0.08+subPulse*0.1})`:'transparent', borderRadius:5, padding: p.subAmber?'2px 6px':'2px 0', display:'inline-block'}}>{p.sub}</div>
                        </div>
                      ) : <div style={{height:46}}/>}
                    </div>
                  );
                })}
              </div>

              {/* Respuesta al cliente */}
              {respP > 0 && (
                <div style={{marginTop:18, display:'flex', alignItems:'center', gap:12, background:'rgba(16,185,129,0.08)', border:'1.5px solid rgba(16,185,129,0.45)', borderRadius:12, padding:'13px 20px', opacity:clamp(respP*1.3,0,1), transform:`scale(${lerp(0.95,1,respE)})`}}>
                  <span style={{fontSize:17}}>💬</span>
                  <span className="f-plex" style={{fontSize:14.5, fontWeight:600, color:'#065F46'}}>«Nos debéis 1.840 € de dos facturas. Vencieron el día 30.»</span>
                  <span className="f-mono" style={{marginLeft:'auto', fontSize:10.5, fontWeight:800, color:'#059669', background:'#fff', border:'1px solid rgba(16,185,129,0.4)', borderRadius:100, padding:'4px 12px'}}>respondido en 10 segundos</span>
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* Puente: slot 2 */}
      {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:'#8B5CF6', color:'#fff', fontSize:13, fontWeight:800, display:'flex', alignItems:'center', justifyContent:'center'}}>2</span>
          <span className="f-plex" style={{fontSize:13, fontWeight:700, color:'#fff'}}>El trabajo del equipo</span>
        </div>
      )}

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