// === Escena 01 — "El acceso rápido" (contrato) ===
// Lo que hay al entrar en /App/CRM/ClienteLookup: UNA sola tarjeta, «Acceso rápido» con icono
// search (RCS.razor:18-19). Dentro, tres cosas en fila (RCS.razor:21-31): la ilustración animada
// de 64×64, la columna con el selector «Cliente» + «Selecciona un cliente para empezar.» y la
// línea «Pulsa F2 para buscar.», y el botón verde del más. Todo lo demás cuelga de tener cliente
// (RCS.razor:55), así que el lienzo se queda vacío a propósito. Cierra con LA ÚNICA COSA (promesa).
function EscenaFC01({ t }){
  // LOCUCIÓN (audio/escena-01.mp3): esta es la ficha de cliente → la abres desde el menú →
  // (pausa) → arriba hay una sola tarjeta → un buscador que te pide un cliente → debajo, escrita,
  // la tecla que lo abre → al lado, un botón verde → mientras no elijas a nadie, nada más →
  // LA ÚNICA COSA como promesa → elige uno y mira lo primero que aparece.
  const T = {
    head:0.0,        // "Esta es la ficha de cliente"
    menu:2.6,       // "desde el menú"
    pausa:5.5,      // (el silencio de medio segundo: quietud total)
    tarjeta:6.3,    // "una sola tarjeta"
    marcador:10.3,  // "te pide un cliente para empezar"
    tecla:13.7,     // "la tecla que lo abre"
    verde:16.6,     // "un botón verde"
    vacio:22.3,     // "la pantalla no enseña nada más"
    unica1:28.5,    // "Con el cliente en pantalla"
    unica2:31.0,    // "sin soltar el teclado"
    menuStep:0.04,   // desfase de atenuación entre entradas del menú
  };

  // ── Geometría del lienzo 1920×1080 ──
  const WX = 150, WY = 168, WW = 1620, WH = 832;   // ventana del navegador (y de 168 a 1000)
  const CY = WY + 140;                              // lienzo de la app: chrome 76 + cabecera 64
  const SBW = 330;                                  // menú lateral del CRM
  const CX = WX + SBW;                              // x donde arranca el lienzo
  const AX = CX + 46, AW = 1100;                    // tarjeta «Acceso rápido»
  const AY = CY + 40, AH = 300;

  const winP = clamp((t-0.35)/0.85,0,1), winE = Easing.easeOutCubic(winP);
  const menuP = clamp((t-T.menu)/0.45,0,1);
  const halo  = t >= T.menu && t < T.menu+1.2 ? Math.sin((t-T.menu)/1.2*Math.PI) : 0;

  const taP = clamp((t-T.tarjeta)/0.6,0,1), taE = Easing.easeOutBack(taP);
  const mkP = clamp((t-T.marcador)/0.3,0,1);
  const tkP = clamp((t-T.tecla)/0.4,0,1);
  const vePulse = t >= T.verde && t < T.verde+1.1 ? Math.sin((t-T.verde)/1.1*Math.PI) : 0;
  const vaP = Easing.easeInOutCubic(clamp((t-T.vacio)/0.9,0,1));

  // La Única Cosa: la tarjeta se retira a 0.35 + saturate(0.55)
  const veloOp = t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7,0,1)*0.92;
  const u1P = clamp((t-T.unica1)/0.6,0,1), u1E = Easing.easeOutCubic(u1P);
  const u2P = clamp((t-T.unica2)/0.6,0,1), u2E = Easing.easeOutCubic(u2P);

  // ── Iconografía (trazo simple, mismos nombres que los Icon= del .razor) ──
  const Ico = ({ n, s=22, c='#64748B', w=1.9 })=>{
    const g = {
      search:       <><circle cx="11" cy="11" r="7"/><path d="M16.4 16.4 L21 21"/></>,
      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"/></>,
      add:          <><path d="M12 5.2 V18.8 M5.2 12 H18.8"/></>,
    }[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>;
  };

  // ── Menú lateral del CRM, literal (CRMPage.razor:83-101) ──
  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' },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="FICHA DE CLIENTE · CÓMO SE USA" title={<span>Sin cliente, no hay ficha</span>}/>

      {/* ─────────── La ventana ─────────── */}
      <div style={{position:'absolute', left:WX, top:WY, width:WW, height:WH,
                   opacity:winE*(1-veloOp/0.92*0.85), transform:`translateY(${(1-winE)*18}px)`,
                   borderRadius:18, overflow:'hidden', background:'#fff',
                   border:'1px solid #E2E8F0', boxShadow:'0 34px 84px rgba(15,23,42,0.13)',
                   filter: 0 < veloOp ? 'saturate(0.55)' : 'none'}}>
        <BrowserChrome url="play.dinaup.com/App/CRM/ClienteLookup" title="Dinaup — CRM"/>
        <DinaupAppHeader breadcrumb={['CRM','Ficha de Cliente']} company="Suministros Ebro, S.L." initials="AM"/>

        {/* Menú lateral */}
        <div style={{position:'absolute', left:0, top:140, width:SBW, bottom:0,
                     background:'#F8FAFC', borderRight:'1px solid #E9EEF4', padding:'18px 14px'}}>
          {MENU.map((m,i)=>{
            if (m.sec) return (
              <div key={m.sec} className="f-plex" style={{fontSize:15, fontWeight:700, letterSpacing:'2.2px',
                     color:'#A6B2C2', padding:'16px 12px 8px', opacity:lerp(1,0.4,clamp((menuP-i*T.menuStep)*1.2,0,1))}}>
                {m.sec.toUpperCase()}
              </div>
            );
            const dim = m.on ? 1 : lerp(1, 0.4, clamp((menuP-i*T.menuStep)*1.2,0,1));
            return (
              <div key={m.txt} style={{display:'flex', alignItems:'center', gap:13, height:46, padding:'0 12px',
                     borderRadius:10, opacity:dim, position:'relative',
                     background:m.on ? 'rgba(0,133,255,0.10)' : 'transparent',
                     boxShadow:m.on && 0 < halo ? `0 0 0 ${halo*5}px rgba(0,133,255,${halo*0.22})` : 'none'}}>
                <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>

        {/* Lienzo de la app: rejilla apenas visible, y nada más */}
        <div className="dot-grid-bg" style={{position:'absolute', left:SBW, top:140, right:0, bottom:0, opacity:0.28}}/>
      </div>

      {/* ─────────── La tarjeta «Acceso rápido» ─────────── */}
      {taP > 0 && (
        <div style={{position:'absolute', left:AX, top:AY, width:AW, height:AH,
                     opacity:clamp(taP*1.3,0,1)*(1-veloOp/0.92*0.85),
                     transform:`translateY(${(1-taE)*-38}px)`,
                     filter: 0 < veloOp ? 'saturate(0.55)' : 'none'}}>
          <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:16,
                       boxShadow:'0 22px 54px rgba(15,23,42,0.10)', height:'100%', overflow:'hidden'}}>
            {/* DnzCardTitle Title="Acceso rápido" Icon="search" */}
            <div style={{display:'flex', alignItems:'center', gap:13, padding:'18px 28px', borderBottom:'1px solid #EEF2F6'}}>
              <Ico n="search" s={28} c="#0085FF" w={2.2}/>
              <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#0F172A'}}>Acceso rápido</span>
            </div>

            <div style={{display:'flex', alignItems:'center', gap:28, padding:'26px 28px'}}>
              {/* La ilustración de 64×64 que abre la fila (AnimatedJSONU, RCS.razor:23) */}
              <div style={{width:104, height:104, borderRadius:18, flexShrink:0,
                           background:'linear-gradient(150deg,#EAF4FF,#F5FBFF)', border:'1px solid #DCEBFA',
                           display:'flex', alignItems:'center', justifyContent:'center'}}>
                <Ico n="person_search" s={54} c="#6FA8DC" w={1.7}/>
              </div>

              {/* Columna central: selector + la línea de la tecla */}
              <div style={{flex:'1 1 auto', minWidth:0}}>
                <div className="f-plex" style={{fontSize:22, fontWeight:600, color:'#64748B', marginBottom:8}}>Cliente</div>
                <div style={{height:64, borderRadius:10, border:'1px solid #CBD5E1', background:'#fff',
                             display:'flex', alignItems:'center', padding:'0 18px', gap:12}}>
                  <span className="f-plex" style={{flex:1, fontSize:26, color:'#94A3B8', opacity:mkP}}>
                    Selecciona un cliente para empezar.
                  </span>
                  <span style={{color:'#94A3B8', fontSize:20}}>▾</span>
                </div>
                <div style={{display:'flex', alignItems:'center', gap:12, marginTop:14, opacity:clamp(tkP*1.4,0,1)}}>
                  <span className="f-plex" style={{fontSize:24, color:'#475569'}}>Pulsa</span>
                  <KeyCap t={t} label="F2" start={T.tecla} size={54}/>
                  <span className="f-plex" style={{fontSize:24, color:'#475569'}}>para buscar.</span>
                </div>
              </div>

              {/* El botón verde del más (RadzenButton Icon="add" ButtonStyle="Success") */}
              <div style={{width:76, height:76, borderRadius:12, flexShrink:0, background:'#10B981',
                           display:'flex', alignItems:'center', justifyContent:'center',
                           boxShadow: 0 < vePulse
                             ? `0 10px 26px rgba(16,185,129,0.34), 0 0 ${vePulse*44}px rgba(16,185,129,${vePulse*0.75})`
                             : '0 10px 26px rgba(16,185,129,0.30)',
                           transform:`scale(${1+vePulse*0.07})`}}>
                <Ico n="add" s={38} c="#fff" w={2.8}/>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ─────────── El vacío: lo que la pantalla NO enseña mientras no elijas ─────────── */}
      {vaP > 0 && veloOp < 0.5 && (
        <svg style={{position:'absolute', left:AX, top:AY+AH+42, pointerEvents:'none'}}
             width={AW} height={272} viewBox={`0 0 ${AW} 272`} opacity={vaP*0.5*(1-veloOp/0.92)}>
          <rect x="2" y="2" width={AW-4} height="268" rx="16" fill="none" stroke="#B7C6D8" strokeWidth="3"
                strokeDasharray="16 14"/>
        </svg>
      )}

      {/* Firma: el logo desde el fotograma 0 */}
      <div style={{position:'absolute', left:WX, top:1018, opacity:0.45*(1-veloOp/0.92)}}>
        <DinaupLogo size={30}/>
      </div>

      {/* ─────────── LA ÚNICA COSA · promesa ─────────── */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {u1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:402, textAlign:'center',
               fontSize:74, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A',
               opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          Con el cliente en pantalla,
        </div>
      )}
      {u2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:512, textAlign:'center',
               fontSize:74, fontWeight:800, letterSpacing:'-0.03em',
               opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">el pedido sale sin soltar el teclado.</span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaFC01 });