// === Escena 03 — "Las tres tarjetas" ===  [VALLE, antes del clímax]
// Tres tarjetas con dos pestañas cada una: «Oportunidades» (handshake) → «Oportunidades» y
// «Eventos recientes» (RCS.razor:129-135); «Pedidos» (shopping_cart) → «Conceptos recientes» y
// «Pedidos recientes» (:152-158); «Ventas» (point_of_sale) → «Conceptos recientes» y «Ventas
// recientes» (:167-173). Todas filtran por el cliente. La de eventos es la rara: la sección
// Eventos de CRM no tiene campo de cliente, solo ReferenciaOportunidad («Eventos de CRM.vb»:146),
// así que el filtro va evento → oportunidad → cliente (RCS.razor:137-142).
// Sin cifras y sin importes: en esta pieza no hay una sola medición.
function EscenaFC03({ t }){
  // LOCUCIÓN (audio/escena-03.mp3): tres tarjetas más, seis listas dentro → oportunidades con sus
  // eventos → pedidos con los conceptos → ventas igual → todas filtradas por el cliente → la de
  // eventos es la rara → un evento guarda la oportunidad → del evento a la oportunidad y de la
  // oportunidad al cliente → y ahora, sin tocar el ratón.
  const T = {
    tarjetas:0.3,    // "Tres tarjetas más"
    listas:2.2,      // "seis listas dentro"
    op:4.6,          // "Oportunidades, con sus eventos recientes"
    ped:8.2,         // "Pedidos, con los conceptos"
    ven:12.2,        // "Ventas, igual"
    chip:16.4,       // "filtradas por el cliente"
    rara:19.9,       // "es la rara"
    c1:24.1,         // "guarda la oportunidad"
    c2:29.0,         // "de la oportunidad al cliente"
    fuera:35.5,      // "sin tocar el ratón"
    tarjetaStep:0.35, // cascada de entrada de las tres tarjetas
    pestanaStep:0.10, // cascada de la numeración de las seis pestañas
  };

  const WX = 150, WY = 168, WW = 1620, WH = 832;
  const CY = WY + 140, VH = WH - 140;
  const SBW = 330, CX = WX + SBW;
  const LX = 30, LW = 1230;              // relativos al lienzo de la app

  const chipP = clamp((t-T.chip)/0.5,0,1);
  const raraP = clamp((t-T.rara)/0.5,0,1);

  // El diagrama de dos saltos entra tras el foco y se lleva la pantalla entera
  const diagStart = T.rara + 1.7;
  const veloDiag = clamp((t-diagStart)/0.7,0,1)*0.99;
  const dgP = clamp((t-diagStart)/0.7,0,1), dgE = Easing.easeOutCubic(dgP);
  const draw1 = Easing.easeInOutCubic(clamp((t-T.c1)/0.45,0,1));
  const draw2 = Easing.easeInOutCubic(clamp((t-T.c2)/0.45,0,1));

  const curOp = 1 - clamp((t-T.fuera)/0.3,0,1);

  const Ico = ({ n, s=22, c='#64748B', w=1.9 })=>{
    const g = {
      person_search:<><circle cx="9.5" cy="8" r="3.4"/><path d="M3.2 19c0-3.2 2.8-5.3 6.3-5.3.8 0 1.6.1 2.3.3"/><circle cx="16.8" cy="15.8" r="3"/><path d="M19 18 L21.5 20.6"/></>,
      dashboard:    <><rect x="3" y="3" width="7.4" height="7.4" rx="1.2"/><rect x="13.6" y="3" width="7.4" height="4.8" rx="1.2"/><rect x="13.6" y="10.4" width="7.4" height="10.6" rx="1.2"/><rect x="3" y="13.6" width="7.4" height="7.4" rx="1.2"/></>,
      handshake:    <><path d="M2.5 10.5 L6.5 6.5 L11.5 8.5 L16.5 6.5 L21.5 10.5"/><path d="M6.5 12.5 L9.8 15.8 L12 13.8 L14.6 16.4 L16.8 14.2"/></>,
      event:        <><rect x="3.4" y="5" width="17.2" height="15" rx="2"/><path d="M3.4 9.6 H20.6 M8 3 V6.4 M16 3 V6.4"/></>,
      group:        <><circle cx="9" cy="9" r="3.2"/><path d="M3 19c0-3 2.7-5 6-5s6 2 6 5"/><circle cx="17.2" cy="9.6" r="2.5"/><path d="M16.2 14.3c2.9.2 4.8 2 4.8 4.7"/></>,
      cake:         <><path d="M4 20.5h16"/><rect x="4.6" y="12.4" width="14.8" height="5.8" rx="2"/><path d="M8 12.4V9.4 M12 12.4V9.4 M16 12.4V9.4 M8 6.6v.9 M12 6.6v.9 M16 6.6v.9"/></>,
      insights:     <><path d="M4 4.5 V19.5 H20.5"/><path d="M7.2 15.6 L11 10.4 L14 13.4 L19.4 6.6"/></>,
      shopping_cart:<><circle cx="9.6" cy="19.4" r="1.5"/><circle cx="17.2" cy="19.4" r="1.5"/><path d="M2.4 3.6h2.5l2.7 11.2h10.2l2-7.7H6.6"/></>,
      point_of_sale:<><rect x="3.4" y="9.2" width="17.2" height="10.8" rx="2"/><path d="M7 9.2V5.6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3.6"/><path d="M8 14h8"/></>,
      list_alt:     <><rect x="3.4" y="4.4" width="17.2" height="15.2" rx="2"/><path d="M7.4 9h9.2M7.4 12.2h9.2M7.4 15.4h5.2"/></>,
    }[n];
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={w}
                strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>{g}</svg>;
  };

  const MENU = [
    { ico:'dashboard',     txt:'Inicio' },
    { sec:'CRM' },
    { ico:'handshake',     txt:'Oportunidades' },
    { ico:'event',         txt:'Eventos' },
    { ico:'group',         txt:'Clientes' },
    { ico:'person_search', txt:'Ficha de Cliente', on:true },
    { ico:'cake',          txt:'Cumpleaños' },
    { sec:'Productividad' },
    { ico:'insights',      txt:'Análisis' },
  ];

  const TARJETAS = [
    { top:2,   ico:'handshake',     tit:'Oportunidades',
      tabs:[{txt:'Oportunidades', ico:'list_alt'}, {txt:'Eventos recientes', ico:'event'}],
      filas:[['Reposición trimestral','Abierta · 12/06'], ['Renovación de contrato','En curso · 03/06']] },
    { top:234, ico:'shopping_cart', tit:'Pedidos',
      tabs:[{txt:'Conceptos recientes', ico:'list_alt'}, {txt:'Pedidos recientes', ico:'event'}],
      filas:[['Filtro de aceite','Pedido 2026-0148 · 09/06'], ['Correa de distribución','Pedido 2026-0139 · 28/05']] },
    { top:466, ico:'point_of_sale', tit:'Ventas',
      tabs:[{txt:'Conceptos recientes', ico:'list_alt'}, {txt:'Ventas recientes', ico:'list_alt'}],
      filas:[['Pastillas de freno','Venta 2026-0311 · 11/06'], ['Batería de arranque','Venta 2026-0298 · 30/05']] },
  ];

  const starts = [T.op, T.ped, T.ven];
  const elevOf = (i)=>{
    const p = clamp((t-starts[i])/0.5,0,1);
    const nx = i < 2 ? clamp((t-starts[i+1])/0.5,0,1) : 0;
    return p*(1-nx);
  };
  const anyP = clamp((t-T.op)/0.5,0,1);

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="TRES TARJETAS · SEIS LISTAS" title={<span>Todo lo que te ha comprado</span>}/>

      <div style={{position:'absolute', left:WX, top:WY, width:WW, height:WH, borderRadius:18, overflow:'hidden',
                   background:'#fff', border:'1px solid #E2E8F0', boxShadow:'0 34px 84px rgba(15,23,42,0.13)'}}>
        <BrowserChrome url="play.dinaup.com/App/CRM/ClienteLookup" title="Dinaup — CRM"/>
        <DinaupAppHeader breadcrumb={['CRM','Ficha de Cliente']} company="Suministros Ebro, S.L." initials="AM"/>

        <div style={{position:'absolute', left:0, top:140, width:SBW, bottom:0,
                     background:'#F8FAFC', borderRight:'1px solid #E9EEF4', padding:'18px 14px', opacity:0.5}}>
          {MENU.map((m)=> m.sec
            ? <div key={m.sec} className="f-plex" style={{fontSize:15, fontWeight:700, letterSpacing:'2.2px', color:'#A6B2C2', padding:'16px 12px 8px'}}>{m.sec.toUpperCase()}</div>
            : <div key={m.txt} style={{display:'flex', alignItems:'center', gap:13, height:46, padding:'0 12px', borderRadius:10,
                                       background:m.on ? 'rgba(0,133,255,0.10)' : 'transparent'}}>
                <Ico n={m.ico} s={23} c={m.on ? '#0085FF' : '#8494A8'} w={m.on ? 2.2 : 1.9}/>
                <span className="f-plex" style={{fontSize:19, fontWeight:m.on ? 700 : 500, color:m.on ? '#0085FF' : '#475569'}}>{m.txt}</span>
              </div>)}
        </div>

        <div style={{position:'absolute', left:SBW, top:140, right:0, height:VH, overflow:'hidden'}}>
          <div className="dot-grid-bg" style={{position:'absolute', inset:0, opacity:0.22}}/>

          {TARJETAS.map((c,i)=>{
            const ent = clamp((t-T.tarjetas-i*T.tarjetaStep)/0.55,0,1), entE = Easing.easeOutCubic(ent);
            const elev = elevOf(i);
            // «es la rara»: foco cerrado en la pestaña «Eventos recientes» de la primera tarjeta
            const base = lerp(1, lerp(0.45,1,elev), anyP);
            const op = i === 0 ? lerp(base, 0.62, raraP) : lerp(base, 0.2, raraP);
            return (
              <div key={c.tit} style={{position:'absolute', left:LX, top:c.top, width:LW, height:224,
                     background:'#fff', border:'1px solid #E2E8F0', borderRadius:14,
                     boxShadow: 0.15 < elev ? `0 24px 60px rgba(15,23,42,${0.06+elev*0.10})` : '0 8px 20px rgba(15,23,42,0.05)',
                     opacity:clamp(ent*1.3,0,1)*op, transform:`translateY(${(1-entE)*12}px)`}}>
                {/* Cabecera */}
                <div style={{display:'flex', alignItems:'center', gap:12, height:44, padding:'0 22px'}}>
                  <Ico n={c.ico} s={26} c="#0085FF" w={2.1}/>
                  <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#0F172A'}}>{c.tit}</span>
                  {/* «filtradas por el cliente»: el chip se dibuja sobre las tres y se queda */}
                  {chipP > 0 && (
                    <span style={{marginLeft:'auto', display:'inline-flex', alignItems:'center', gap:8,
                                  padding:'6px 16px', borderRadius:99, background:'rgba(0,133,255,0.10)',
                                  border:'1px solid rgba(0,133,255,0.28)',
                                  opacity:lerp(0, 0.9, chipP), transform:`scale(${lerp(0.8,1,Easing.easeOutBack(chipP))})`}}>
                      <span style={{width:8, height:8, borderRadius:99, background:'#0085FF'}}/>
                      <span className="f-plex" style={{fontSize:20, fontWeight:600, color:'#0085FF'}}>Talleres Marbán, S.L.</span>
                    </span>
                  )}
                </div>
                {/* Pestañas */}
                <div style={{display:'flex', alignItems:'stretch', height:50, borderBottom:'1px solid #EEF2F6', padding:'0 22px', gap:10}}>
                  {c.tabs.map((tb,k)=>{
                    const idx = i*2+k;
                    const s = T.listas + idx*T.pestanaStep;
                    const numOp = clamp((t-s)/0.25,0,1) * clamp((s+1.5-t)/0.3,0,1);
                    const rara = i === 0 && k === 1;
                    const foco = rara ? raraP : 0;
                    return (
                      <div key={tb.txt} style={{position:'relative', display:'flex', alignItems:'center', gap:9, padding:'0 16px',
                             borderBottom:`3px solid ${k===0 ? '#0085FF' : 'transparent'}`,
                             borderRadius: 0 < foco ? 8 : 0,
                             background: 0 < foco ? `rgba(0,133,255,${foco*0.12})` : 'transparent',
                             boxShadow: 0 < foco ? `0 0 0 ${foco*3}px rgba(0,133,255,${foco*0.35})` : 'none'}}>
                        <Ico n={tb.ico} s={20} c={k===0 ? '#0085FF' : '#94A3B8'} w={2}/>
                        <span className="f-plex" style={{fontSize:22, fontWeight:k===0?700:500, color:k===0 ? '#0085FF' : '#64748B'}}>{tb.txt}</span>
                        {numOp > 0 && (
                          <span className="f-mono" style={{position:'absolute', top:-2, right:-6, fontSize:15, fontWeight:700,
                                 color:'#94A3B8', background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:99,
                                 width:24, height:24, display:'flex', alignItems:'center', justifyContent:'center', opacity:numOp}}>{idx+1}</span>
                        )}
                      </div>
                    );
                  })}
                </div>
                {/* Filas de la lista: atrezzo, nunca protagonistas */}
                {c.filas.map((f,k)=>(
                  <div key={f[0]} style={{display:'flex', alignItems:'center', gap:14, height:65, padding:'0 22px',
                         borderBottom:'1px solid #F4F7FA'}}>
                    <span style={{width:8, height:8, borderRadius:99, background:'#CBD5E1', flexShrink:0}}/>
                    <span className="f-plex" style={{fontSize:19, fontWeight:600, color:'#334155'}}>{f[0]}</span>
                    <span className="f-plex" style={{marginLeft:'auto', fontSize:16, color:'#94A3B8'}}>{f[1]}</span>
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      </div>

      {/* ─────────── El rodeo: evento → oportunidad → cliente ─────────── */}
      {veloDiag > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloDiag}}/>}
      {dgP > 0 && (
        <div style={{position:'absolute', inset:0, opacity:clamp(dgP*1.3,0,1)}}>
          <div className="f-mono" style={{position:'absolute', left:0, right:0, top:360, textAlign:'center',
                 fontSize:19, fontWeight:600, letterSpacing:'3px', color:'#94A3B8'}}>
            CÓMO LLEGA LA LISTA DE EVENTOS AL CLIENTE
          </div>

          {[['EVENTO','Eventos de CRM',300], ['OPORTUNIDAD','Oportunidades CRM',780], ['CLIENTE','Entidades',1260]].map((b,i)=>{
            const s = diagStart + i*0.18;
            const p = clamp((t-s)/0.5,0,1), e = Easing.easeOutBack(p);
            return (
              <div key={b[0]} style={{position:'absolute', left:b[2], top:470, width:360, height:140,
                     background:'#fff', border:`2px solid ${i===2 ? '#0085FF' : '#CBD5E1'}`, borderRadius:16,
                     boxShadow: i===2 ? '0 20px 50px rgba(0,133,255,0.16)' : '0 14px 34px rgba(15,23,42,0.08)',
                     display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:8,
                     opacity:clamp(p*1.3,0,1), transform:`scale(${lerp(0.88,1,e)})`}}>
                <span className="f-plex" style={{fontSize:34, fontWeight:800, letterSpacing:'-0.01em', color:i===2 ? '#0085FF' : '#0F172A'}}>{b[0]}</span>
                <span className="f-mono" style={{fontSize:17, color:'#94A3B8'}}>{b[1]}</span>
              </div>
            );
          })}

          {/* Los dos conectores SE DIBUJAN */}
          <svg style={{position:'absolute', left:0, top:0, pointerEvents:'none'}} width="1920" height="1080">
            <path d="M666 540 H1252" stroke="transparent" fill="none"/>
            <path d="M666 540 H762" stroke="#0085FF" strokeWidth="5" strokeLinecap="round"
                  strokeDasharray="96" strokeDashoffset={96*(1-draw1)}/>
            <path d="M752 528 L774 540 L752 552" stroke="#0085FF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"
                  fill="none" opacity={clamp((draw1-0.75)/0.25,0,1)}/>
            <path d="M1146 540 H1242" stroke="#0085FF" strokeWidth="5" strokeLinecap="round"
                  strokeDasharray="96" strokeDashoffset={96*(1-draw2)}/>
            <path d="M1232 528 L1254 540 L1232 552" stroke="#0085FF" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"
                  fill="none" opacity={clamp((draw2-0.75)/0.25,0,1)}/>
          </svg>
          {draw1 > 0 && (
            <div className="f-mono" style={{position:'absolute', left:590, top:432, width:250, textAlign:'center',
                   fontSize:17, color:'#0085FF', opacity:clamp(draw1*1.3,0,1)}}>ReferenciaOportunidad</div>
          )}
          {draw2 > 0 && (
            <div className="f-mono" style={{position:'absolute', left:1070, top:432, width:250, textAlign:'center',
                   fontSize:17, color:'#0085FF', opacity:clamp(draw2*1.3,0,1)}}>ReferenciaCliente</div>
          )}
        </div>
      )}

      {/* El ratón se despide EN IMAGEN: es lo que da sentido a la escena siguiente */}
      {curOp > 0 && (
        <div style={{opacity:curOp}}>
          <ScriptedCursor t={t} frames={[{t:0, x:1792, y:1004}, {t:T.fuera, x:1792, y:1004}]}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaFC03 });