// === Escena 02 — "Lo primero que sale" ===
// Con Talleres Marbán elegido aparece la fila de tres botones, cada uno con su tecla DENTRO de la
// etiqueta: «Ver ficha» F3, «Pedido» F4, «Venta» F6 (RCS.razor:62-83). La tarjeta de preferente va
// en SU PROPIA FILA, debajo, y es una DnzKpiCard con título «VIP», icono verified y sin valor
// (RCS.razor:85-91). Después «Información del Cliente» con sus seis casillas (RCS.razor:93-124);
// las Observaciones son un editor deshabilitado y sin barra de herramientas (RCS.razor:121).
function EscenaFC02({ t }){
  // LOCUCIÓN (audio/escena-02.mp3): una fila de tres botones → ver ficha, pedido y venta → cada
  // uno lleva su tecla dibujada → si está marcado como preferente, su tarjeta debajo →
  // información del cliente → nombre, tipo, país, provincia, municipio → las observaciones se ven
  // pero aquí no se tocan → debajo está todo lo que te ha comprado.
  const T = {
    botones:1.7,     // "una fila de tres botones"
    rotulos:3.5,     // "ver ficha, pedido y venta"
    teclas:7.7,      // "su tecla dibujada en la propia etiqueta"
    vip:14.4,        // "marcado como preferente"
    info:20.8,       // "información del cliente"
    geo:24.3,        // "país, provincia, municipio"
    apagado:30.4,    // "aquí no se tocan"
    scroll:36.3,     // "todo lo que este cliente te ha comprado"
    botonStep:0.12,   // cascada de entrada de los tres botones
    rotuloStep:0.45,  // desfase entre los subrayados de los tres rótulos
    geoStep:0.15,     // cascada de país / provincia / municipio
  };

  const WX = 150, WY = 168, WW = 1620, WH = 832;
  const CY = WY + 140;              // lienzo de la app
  const VH = WH - 140;              // alto visible del lienzo (692)
  const SBW = 330, CX = WX + SBW;
  const LX = CX + 30, LW = 1230;    // columna de tarjetas

  const scrollY = 60 * Easing.easeInOutCubic(clamp((t-T.scroll)/0.7,0,1));

  const boP  = clamp((t-T.botones)/0.5,0,1);
  const tkPulse = t >= T.teclas && t < T.teclas+0.6 ? Math.sin((t-T.teclas)/0.6*Math.PI) : 0;
  const viP  = clamp((t-T.vip)/0.5,0,1), viE = Easing.easeOutBack(viP);
  const botDim = lerp(1, 0.55, clamp((t-T.vip)/0.5,0,1));
  const inP  = clamp((t-T.info)/0.6,0,1), inE = Easing.easeOutCubic(inP);
  const apP  = clamp((t-T.apagado)/0.5,0,1);

  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"/></>,
      badge:        <><rect x="3.4" y="5" width="17.2" height="14" rx="2"/><circle cx="9" cy="10.6" r="2.2"/><path d="M5.8 16.2c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4"/><path d="M14.6 9.6h4 M14.6 13.6h4"/></>,
      add:          <><path d="M12 5.2 V18.8 M5.2 12 H18.8"/></>,
      open_in_new:  <><path d="M14 3.6h6.4V10"/><path d="M20.4 3.6 L11 13"/><path d="M18 13.6v5.4a1.6 1.6 0 0 1-1.6 1.6H5.2A1.6 1.6 0 0 1 3.6 19V7.8a1.6 1.6 0 0 1 1.6-1.6h5.4"/></>,
      verified:     <><path d="M12 2.4 14.4 4.9 17.8 4.5 18.4 7.9 21.4 9.6 19.9 12.7 21.4 15.8 18.4 17.5 17.8 20.9 14.4 20.5 12 23 9.6 20.5 6.2 20.9 5.6 17.5 2.6 15.8 4.1 12.7 2.6 9.6 5.6 7.9 6.2 4.5 9.6 4.9 Z"/><path d="M8.4 12.6 10.9 15.1 15.7 10"/></>,
      lock:         <><rect x="5" y="10.6" width="14" height="9.6" rx="2"/><path d="M8.2 10.6V7.7a3.8 3.8 0 0 1 7.6 0v2.9"/></>,
    }[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' },
  ];

  // ── Un botón de la barra de acciones, con su insignia de tecla DENTRO de la etiqueta ──
  const Accion = ({ i, x, w, ico, txt, tecla, verde })=>{
    const p = clamp((t-T.botones-i*T.botonStep)/0.5,0,1), e = Easing.easeOutCubic(p);
    const uP = Easing.easeOutCubic(clamp((t-T.rotulos-i*T.rotuloStep)/0.35,0,1));
    return (
      <div style={{position:'absolute', left:x, top:12, width:w, height:86, borderRadius:10,
                   background: verde ? '#10B981' : '#0085FF',
                   boxShadow: verde ? '0 8px 22px rgba(16,185,129,0.28)' : '0 8px 22px rgba(0,133,255,0.28)',
                   display:'flex', alignItems:'center', gap:14, padding:'0 22px',
                   opacity:clamp(p*1.3,0,1), transform:`translateY(${(1-e)*12}px)`}}>
        <Ico n={ico} s={30} c="#fff" w={2.4}/>
        <div style={{position:'relative'}}>
          <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#fff'}}>{txt}</span>
          <div style={{position:'absolute', left:0, right:0, bottom:-7, height:3, borderRadius:2,
                       background:'rgba(255,255,255,0.95)', transform:`scaleX(${uP})`, transformOrigin:'left'}}/>
        </div>
        <span style={{marginLeft:'auto', display:'inline-flex', alignItems:'center', justifyContent:'center',
                      width:64, height:44, borderRadius:8, background:'rgba(255,255,255,0.92)',
                      transform:`scale(${1+tkPulse*0.08})`,
                      boxShadow: 0 < tkPulse ? `0 0 ${tkPulse*22}px rgba(255,255,255,0.9)` : 'none'}}>
          <span className="f-mono" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>{tecla}</span>
        </span>
      </div>
    );
  };

  // ── Una casilla de «Información del Cliente» ──
  const Campo = ({ x, y, w, lab, val, hi=0 })=>(
    <div style={{position:'absolute', left:x, top:y, width:w}}>
      <div className="f-plex" style={{fontSize:18, fontWeight:600, color:'#94A3B8'}}>{lab}</div>
      <div className="f-plex" style={{fontSize:26, fontWeight:600, color: 0 < hi ? '#0085FF' : '#0F172A', marginTop:4,
                                      textShadow: 0 < hi ? `0 0 ${hi*16}px rgba(0,133,255,0.55)` : 'none'}}>{val}</div>
    </div>
  );
  const geoHi = (i)=>{ const s = T.geo + i*T.geoStep; return t >= s && t < s+1.1 ? Math.sin((t-s)/1.1*Math.PI) : 0; };

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="LO PRIMERO QUE SALE" title={<span>La tecla va escrita en el botón</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.55}}>
          {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>

        {/* ── Columna de tarjetas, con el desplazamiento corto del final ── */}
        <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}}/>
          <div style={{position:'absolute', left:0, top:0, right:0, transform:`translateY(${-scrollY}px)`}}>

            {/* «Acceso rápido», ya con el cliente elegido */}
            <div style={{position:'absolute', left:30, top:6, width:LW, height:86, background:'#fff',
                         border:'1px solid #E2E8F0', borderRadius:14, boxShadow:'0 10px 26px rgba(15,23,42,0.06)',
                         display:'flex', alignItems:'center', gap:20, padding:'0 22px'}}>
              <Ico n="search" s={24} c="#0085FF" w={2.2}/>
              <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>Acceso rápido</span>
              <div style={{flex:'1 1 auto', height:56, borderRadius:10, border:'1px solid #CBD5E1', background:'#fff',
                           display:'flex', alignItems:'center', padding:'0 16px', gap:12, maxWidth:620}}>
                <span className="f-plex" style={{flex:1, fontSize:24, fontWeight:600, color:'#0F172A'}}>Talleres Marbán, S.L.</span>
                <span style={{color:'#94A3B8', fontSize:18}}>▾</span>
              </div>
              <span className="f-plex" style={{fontSize:19, color:'#94A3B8'}}>Pulsa</span>
              <KeyCap t={t} label="F2" start={0} size={44}/>
              <span className="f-plex" style={{fontSize:19, color:'#94A3B8'}}>para buscar.</span>
              <div style={{width:56, height:56, borderRadius:10, background:'#10B981', display:'flex',
                           alignItems:'center', justifyContent:'center'}}>
                <Ico n="add" s={28} c="#fff" w={2.8}/>
              </div>
            </div>

            {/* La fila de tres botones */}
            <div style={{position:'absolute', left:30, top:102, width:LW, height:110, background:'#fff',
                         border:'1px solid #E2E8F0', borderRadius:14, boxShadow:'0 12px 30px rgba(15,23,42,0.07)',
                         opacity:botDim}}>
              <Accion i={0} x={22}   w={310} ico="open_in_new" txt="Ver ficha" tecla="F3"/>
              <Accion i={1} x={352}  w={268} ico="add"         txt="Pedido"    tecla="F4" verde/>
              <Accion i={2} x={640}  w={258} ico="add"         txt="Venta"     tecla="F6" verde/>
            </div>

            {/* La tarjeta de preferente: su propia fila, debajo. DnzKpiCard sin valor. */}
            {viP > 0 && (
              <div style={{position:'absolute', left:30, top:224, width:240, height:140,
                           background:'#fff', border:'1px solid #E2E8F0', borderRadius:14,
                           boxShadow:'0 18px 44px rgba(44,157,49,0.16)',
                           display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:6,
                           opacity:clamp(viP*1.3,0,1), transform:`translateY(${(1-viE)*30}px)`}}>
                <Ico n="verified" s={72} c="#2C9D31" w={1.6}/>
                <span className="f-plex" style={{fontSize:30, fontWeight:700, color:'#2C9D31'}}>VIP</span>
              </div>
            )}

            {/* «Información del Cliente» */}
            {inP > 0 && (
              <div style={{position:'absolute', left:30, top:376, width:LW, height:312, background:'#fff',
                           border:'1px solid #E2E8F0', borderRadius:14, boxShadow:'0 14px 36px rgba(15,23,42,0.07)',
                           opacity:clamp(inP*1.3,0,1), transform:`translateY(${(1-inE)*14}px)`}}>
                <div style={{display:'flex', alignItems:'center', gap:12, height:46, padding:'0 24px', borderBottom:'1px solid #EEF2F6'}}>
                  <Ico n="badge" s={26} c="#0085FF" w={2.1}/>
                  <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>Información del Cliente</span>
                </div>
                <Campo x={24}  y={62}  w={620} lab="Nombre:"          val="Talleres Marbán, S.L."/>
                <Campo x={680} y={62}  w={380} lab="Tipo de Cliente:" val="Mayorista"/>
                <Campo x={24}  y={128} w={340} lab="País:"            val="España"   hi={geoHi(0)}/>
                <Campo x={404} y={128} w={340} lab="Provincia:"       val="Zaragoza" hi={geoHi(1)}/>
                <Campo x={784} y={128} w={340} lab="Municipio:"       val="Zaragoza" hi={geoHi(2)}/>
                <div style={{position:'absolute', left:24, top:196}} className="f-plex">
                  <span style={{fontSize:18, fontWeight:600, color:'#94A3B8'}}>Observaciones:</span>
                </div>
                {/* RadzenHtmlEditor ShowToolbar=false Disabled=true → caja con borde, apagada */}
                <div style={{position:'absolute', left:24, top:220, width:LW-48, height:78, borderRadius:8,
                             border:`1px ${0 < apP ? 'dashed' : 'solid'} ${0 < apP ? '#CBD5E1' : '#E2E8F0'}`,
                             background: 0 < apP ? '#F1F5F9' : '#FCFDFE', padding:'11px 16px',
                             filter:`saturate(${lerp(1,0.55,apP)})`, opacity:lerp(1,0.82,apP)}}>
                  <div className="f-plex" style={{fontSize:19, color:'#475569', lineHeight:1.45}}>
                    Entrega solo por las mañanas.<br/>Albarán firmado obligatorio.
                  </div>
                </div>
              </div>
            )}

            {/* Lo que asoma al desplazar: la primera de las tres tarjetas de listas */}
            <div style={{position:'absolute', left:30, top:700, width:LW, height:120, background:'#fff',
                         border:'1px solid #E2E8F0', borderRadius:14, opacity:0.9}}>
              <div style={{display:'flex', alignItems:'center', gap:12, height:46, padding:'0 24px'}}>
                <Ico n="handshake" s={26} c="#0085FF" w={2.1}/>
                <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#0F172A'}}>Oportunidades</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Capa de anotación, FUERA del marco del navegador: el candado de las observaciones */}
      {apP > 0 && (
        <div style={{position:'absolute', left:1802, top:CY+606-scrollY, opacity:clamp(apP*1.4,0,1),
                     transform:`scale(${lerp(0.7,1,Easing.easeOutBack(clamp((t-T.apagado)/0.45,0,1)))})`}}>
          <div style={{width:56, height:56, borderRadius:12, background:'#EEF2F6', border:'1px solid #DDE4EC',
                       display:'flex', alignItems:'center', justifyContent:'center'}}>
            <Ico n="lock" s={30} c="#8494A8" w={2}/>
          </div>
        </div>
      )}

      <div style={{position:'absolute', left:WX, top:1018, opacity:0.4}}>
        <DinaupLogo size={28}/>
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaFC02 });