// === 13:05 · El local (14s) — 4 taps, cobro automático, ticket Verifactu ===
// Mientras comes, el mostrador sigue vendiendo: buscador táctil + botón
// Automático + ticket térmico con QR. Y la cadena: stock, factura, asiento.

function SlideTpv({ t }){
  const cats = ['Bebidas','Café','Comida','Postres'];
  const tapCafe = 2.7, tapCortado = 3.5, tapComida = 4.2, tapTostada = 4.9, tapAuto = 5.8;

  const activeCat = t >= tapComida ? 2 : t >= tapCafe ? 1 : -1;
  const prodsCafe   = ['Cortado','Café solo','Con leche','Capuchino','Descafeinado','Manchado','Doble','Bombón'];
  const prodsComida = ['Tostada tomate','Croissant','Bocadillo','Napolitana','Pincho tortilla','Sándwich','Palmera','Donut'];
  const prods = activeCat === 2 ? prodsComida : prodsCafe;

  const line1 = t >= tapCortado + 0.2;
  const line2 = t >= tapTostada + 0.2;
  const printing = t >= tapAuto + 0.3 && t < tapAuto + 2.4;
  const done = t >= tapAuto + 2.4;

  const segs = Math.min(6, Math.max(0, t - tapCafe)).toFixed(0);

  const chain = [
    { l:'Stock −2 unidades', at:10.0, i:'📦' },
    { l:'Factura simplificada', at:10.5, i:'🧾' },
    { l:'Asiento contable', at:11.0, i:'📒' },
  ];

  const taps = [
    { t:tapCafe,    x:269, y:57  },
    { t:tapCortado, x:103, y:158 },
    { t:tapComida,  x:435, y:57  },
    { t:tapTostada, x:103, y:158 },
    { t:tapAuto,    x:914, y:508 },
  ];

  return (
    <SlideCanvas variant="light-soft">
      <TimeBadge t={t} hora="13:05" label="Mientras, en el local"/>
      <DemoHeader t={t} eyebrow="TPV · MOSTRADOR" title={<>TPV táctil. <span className="grad-text">Ticket legal. Siguiente.</span></>}/>

      <div style={{position:'absolute',top:170,left:130,right:130,bottom:60,background:'#fff',borderRadius:12,boxShadow:'0 30px 80px rgba(0,133,255,0.15)',overflow:'hidden',border:'1px solid #E2E8F0',opacity:clamp((t-0.4)/0.6,0,1)}}>
        <BrowserChrome url="play.dinaup.com/App/TPV/POS" title="TPV — Dinaup"/>
        <DinaupAppHeader breadcrumb={["TPV","Barra"]}/>

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

          {/* ===== Buscador táctil ===== */}
          <div style={{position:'absolute',left:24,top:20,width:676}}>
            <div style={{display:'flex',gap:8}}>
              {cats.map((c,i)=>{
                const p = clamp((t-(0.7+i*0.1))/0.4, 0, 1);
                const active = i === activeCat;
                return (
                  <div key={i} style={{width:158,height:74,borderRadius:12,display:'flex',alignItems:'center',justifyContent:'center',
                    background: active ? 'var(--dn-primary)' : '#fff',
                    color: active ? '#fff' : '#0F172A',
                    border:`1px solid ${active ? 'var(--dn-primary)' : '#E2E8F0'}`,
                    fontSize:15,fontWeight:700,fontFamily:"'IBM Plex Sans',sans-serif",
                    boxShadow: active ? '0 8px 22px rgba(0,133,255,0.35)' : '0 2px 8px rgba(15,23,42,0.05)',
                    opacity:p, transition:'background 200ms, color 200ms, box-shadow 200ms'}}>
                    {c}
                  </div>
                );
              })}
            </div>
            {/* Productos */}
            <div style={{display:'grid',gridTemplateColumns:'repeat(4, 158px)',gap:8,marginTop:16}}>
              {prods.map((p,i)=>{
                const isHit = (activeCat===1 && p==='Cortado' && t >= tapCortado && t < tapCortado+0.5)
                           || (activeCat===2 && p==='Tostada tomate' && t >= tapTostada && t < tapTostada+0.5);
                const vis = activeCat >= 0 ? clamp((t-(activeCat===2?tapComida:tapCafe)-0.1-i*0.04)/0.3,0,1) : 0;
                return (
                  <div key={`${activeCat}-${i}`} style={{height:96,borderRadius:12,background: isHit ? 'rgba(0,133,255,0.12)' : '#fff',border:`1px solid ${isHit ? 'var(--dn-primary)' : '#E2E8F0'}`,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:6,opacity:vis,transform:`scale(${isHit?0.96:1})`,transition:'transform 120ms'}}>
                    <span style={{fontSize:22}}>{activeCat===2 ? '🥖' : '☕'}</span>
                    <span className="f-plex" style={{fontSize:12,fontWeight:600,color:'#0F172A',textAlign:'center',lineHeight:1.15,padding:'0 6px'}}>{p}</span>
                  </div>
                );
              })}
              {activeCat < 0 && (
                <div style={{gridColumn:'1 / -1',padding:'34px 0',textAlign:'center',color:'#94A3B8',fontSize:13,fontStyle:'italic'}}>
                  Toca una categoría…
                </div>
              )}
            </div>
          </div>

          {/* ===== Venta actual ===== */}
          <div style={{position:'absolute',left:724,top:20,width:380,bottom:140,background:'#fff',border:'1px solid #E2E8F0',borderRadius:12,padding:'16px 18px',display:'flex',flexDirection:'column'}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:10}}>
              <div style={{fontSize:11,fontWeight:700,color:'#94A3B8',letterSpacing:1,textTransform:'uppercase'}}>Venta · barra</div>
              <span className="f-mono" style={{fontSize:11,fontWeight:700,color: +segs >= 6 ? '#059669' : 'var(--dn-primary)',padding:'3px 9px',background:'rgba(0,133,255,0.07)',borderRadius:100,border:'1px solid rgba(0,133,255,0.2)'}}>⏱ {segs}s</span>
            </div>
            <div style={{flex:1,display:'flex',flexDirection:'column',gap:8}}>
              {line1 && (
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 12px',background:'#F8FAFC',borderRadius:8,animation:'defCardDrop 0.4s ease-out'}}>
                  <span style={{fontSize:13,color:'#0F172A',fontWeight:600}}>☕ Cortado</span>
                  <span className="f-mono" style={{fontSize:13,fontWeight:700,color:'#0F172A'}}>1,30 €</span>
                </div>
              )}
              {line2 && (
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 12px',background:'#F8FAFC',borderRadius:8,animation:'defCardDrop 0.4s ease-out'}}>
                  <span style={{fontSize:13,color:'#0F172A',fontWeight:600}}>🥖 Tostada tomate</span>
                  <span className="f-mono" style={{fontSize:13,fontWeight:700,color:'#0F172A'}}>3,50 €</span>
                </div>
              )}
              {!line1 && <div style={{padding:'24px 0',textAlign:'center',color:'#CBD5E1',fontSize:12,fontStyle:'italic'}}>Sin líneas</div>}
            </div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'10px 4px',borderTop:'1px solid #F1F5F9',marginBottom:10}}>
              <span style={{fontSize:13,fontWeight:700,color:'#64748B'}}>TOTAL</span>
              <span className="f-mono" style={{fontSize:24,fontWeight:800,color:'#0F172A'}}>{line2 ? '4,80' : line1 ? '1,30' : '0,00'} €</span>
            </div>
            {/* Botón Automático */}
            <button style={{
              height:88,border:'none',borderRadius:14,
              background: done ? '#10B981' : (t >= tapAuto && t < tapAuto+0.3) ? '#0066CC' : 'linear-gradient(135deg,#0085FF,#56E16A)',
              color:'#fff',fontFamily:"'IBM Plex Sans',sans-serif",
              display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:3,
              boxShadow: done ? '0 12px 30px rgba(16,185,129,0.4)' : '0 12px 30px rgba(0,133,255,0.3)',
              transform: (t >= tapAuto && t < tapAuto+0.3) ? 'scale(0.96)' : 'scale(1)',
              transition:'all 180ms',
            }}>
              <span style={{fontSize:26}}>{done ? '✓' : '⚡'}</span>
              <span style={{fontSize:17,fontWeight:800}}>{done ? 'Cobrada · siguiente' : 'Automático'}</span>
              <span style={{fontSize:10,opacity:0.85}}>{done ? 'venta registrada' : 'cobra · imprime · cierra'}</span>
            </button>
          </div>

          {/* ===== Ticket térmico ===== */}
          <div style={{position:'absolute',left:1140,top:20,width:250}}>
            <div className="f-mono" style={{
              background:'#fff',border:'2px dashed #CBD5E1',borderRadius:4,padding:'14px 16px',fontSize:9.5,color:'#334155',
              opacity: printing || done ? 1 : 0,
              transform: printing ? `translateY(${(1-clamp((t-tapAuto-0.3)/2,0,1))*26}px)` : 'translateY(0)',
              boxShadow: printing || done ? '0 20px 40px rgba(15,23,42,0.18)' : 'none',
              transition:'opacity 400ms',
            }}>
              <div style={{textAlign:'center',fontWeight:700,fontSize:11,marginBottom:6}}>PANADERÍA EL MOLINO</div>
              <div style={{textAlign:'center',fontSize:8.5,color:'#64748B',marginBottom:10}}>CIF B12345678 · Barra 1</div>
              <div style={{borderTop:'1px dashed #CBD5E1',paddingTop:7,marginBottom:7}}>
                <div style={{display:'flex',justifyContent:'space-between',padding:'2px 0'}}><span>Cortado</span><span>1,30</span></div>
                <div style={{display:'flex',justifyContent:'space-between',padding:'2px 0'}}><span>Tostada tomate</span><span>3,50</span></div>
              </div>
              <div style={{borderTop:'1px dashed #CBD5E1',paddingTop:6,display:'flex',justifyContent:'space-between',fontWeight:700,fontSize:11}}><span>TOTAL</span><span>4,80 €</span></div>
              <div style={{marginTop:9,padding:7,background:(t >= 8.0 && t < 9.6) ? '#EFF6FF' : '#F8FAFC',textAlign:'center',boxShadow:(t >= 8.0 && t < 9.6) ? `0 0 0 3px rgba(0,133,255,${0.5+0.3*Math.sin((t-8)*4)})` : 'none'}}>
                <div style={{fontSize:8,marginBottom:3}}>⬛⬛⬛ QR VERIFACTU ⬛⬛⬛</div>
                <div style={{fontSize:6.5,color:'#64748B'}}>hash:ab8f9d…fc32a1e6 · encadenado</div>
              </div>
              <div style={{marginTop:7,textAlign:'center',fontSize:7.5,color:'#94A3B8'}}>Gracias por tu visita</div>
            </div>
            {printing && <div style={{position:'absolute',top:-26,left:'50%',transform:'translateX(-50%)',fontSize:24}}>🖨️</div>}
          </div>

          {/* ===== Cadena del motor ===== */}
          <div style={{position:'absolute',left:1430,top:20,width:200,display:'flex',flexDirection:'column',gap:10}}>
            <div className="f-mono" style={{fontSize:9,fontWeight:700,letterSpacing:1.5,color:'#94A3B8',textTransform:'uppercase',opacity:clamp((t-9.6)/0.4,0,1)}}>Mismo motor →</div>
            {chain.map((c,i)=>{
              const p = clamp((t-c.at)/0.4, 0, 1);
              const e = Easing.easeOutBack(p);
              return (
                <div key={i} style={{display:'flex',alignItems:'center',gap:9,padding:'10px 13px',background:'rgba(16,185,129,0.08)',border:'1px solid rgba(16,185,129,0.35)',borderRadius:10,opacity:clamp(p*1.3,0,1),transform:`translateX(${(1-e)*16}px)`}}>
                  <span style={{fontSize:15}}>{c.i}</span>
                  <span className="f-plex" style={{fontSize:12,fontWeight:600,color:'#065F46'}}>✓ {c.l}</span>
                </div>
              );
            })}
          </div>

          <FingerTap t={t} taps={taps}/>
        </div>
      </div>

      <style>{`@keyframes defCardDrop { 0%{transform:translateY(-15px) scale(1.05);opacity:0} 100%{transform:translateY(0) scale(1);opacity:1} }`}</style>
      <SocialCaption t={t} cues={CAPTIONS.slide_tpv}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideTpv });