// === 18:30 · ¿Equipo técnico? (13s) — curl → 200 OK + webhooks salientes ===
// Todo lo visto durante el día también es API: terminal real, evento real.

function SlideApi({ t }){
  const curlCode = 'curl "https://api.dinaup.com/v2/el-molino" \\\n  -H "Authorization: Bearer dn_live_4f7a9b2c..."';
  const respAt = 5.2;
  const hookAt = 7.8;
  const tools = [
    { n:'n8n',        c:'#EA4B71', at:8.4 },
    { n:'Zapier',     c:'#FF4F00', at:8.7 },
    { n:'Tu app .NET',c:'#512BD4', at:9.0 },
  ];

  return (
    <SlideCanvas variant="dark-deep">
      <TimeBadge t={t} hora="API" label="Para quien construye"/>
      <div style={{position:'absolute',top:40,left:0,right:0,textAlign:'center',opacity:clamp(t/0.5,0,1),zIndex:5}}>
        <div className="f-plex" style={{fontSize:14,fontWeight:600,letterSpacing:'2px',color:'#62B4FF'}}>DEV · API · WEBHOOKS · SDK</div>
        <h2 className="f-plex" style={{fontSize:42,fontWeight:700,letterSpacing:'-0.03em',margin:'14px 0 0',color:'#fff'}}>
          ¿Equipo técnico? <span className="grad-text">Dinaup es tu backend.</span>
        </h2>
      </div>

      {/* Terminal */}
      <div style={{position:'absolute',top:270,left:150,width:900,borderRadius:12,overflow:'hidden',boxShadow:'0 40px 100px rgba(0,0,0,0.5)',opacity:clamp((t-0.6)/0.6,0,1),transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-0.6)/0.6,0,1)))*20}px)`}}>
        <TerminalChrome title="bash — el-molino"/>
        <div style={{background:'#1E1E1E',padding:'24px 26px',fontFamily:"'JetBrains Mono',monospace",fontSize:16,color:'#D4D4D4',minHeight:240}}>
          <div style={{display:'flex',gap:10}}>
            <span style={{color:'#56E16A'}}>$</span>
            <span style={{whiteSpace:'pre-wrap',flex:1}}>
              <Typewriter text={curlCode} start={2.4} cps={34} t={t} caret/>
            </span>
          </div>
          {t >= respAt && (
            <div style={{marginTop:20}}>
              <HttpResponseBubble t={t} start={respAt} status={200} time="80 ms" body={'{ "status": "ok", "empresa": "Panadería El Molino S.L.",\n  "facturas_hoy": 129 }'}/>
            </div>
          )}
          {t >= 10.5 && (()=>{
            const p = clamp((t-10.5)/0.5, 0, 1);
            return (
              <div style={{marginTop:20,display:'flex',gap:10,opacity:p}}>
                <span style={{color:'#56E16A'}}>$</span>
                <span style={{color:'#D4D4D4'}}>dotnet add package <span style={{color:'#62B4FF',fontWeight:700}}>Dinaup</span></span>
              </div>
            );
          })()}
        </div>
      </div>

      {/* Webhook saliente */}
      <div style={{position:'absolute',top:270,left:1100,width:670,opacity:clamp((t-hookAt)/0.6,0,1),transform:`translateY(${(1-Easing.easeOutCubic(clamp((t-hookAt)/0.6,0,1)))*20}px)`}}>
        <div style={{background:'rgba(255,255,255,0.04)',border:'1px solid rgba(255,255,255,0.12)',borderRadius:14,padding:'22px 26px'}}>
          <div className="f-mono" style={{fontSize:10,fontWeight:700,letterSpacing:2,color:'rgba(255,255,255,0.5)',textTransform:'uppercase',marginBottom:14}}>Webhooks salientes</div>

          {/* Evento */}
          <div style={{display:'flex',alignItems:'center',gap:10,padding:'12px 16px',background:'rgba(0,133,255,0.12)',border:'1px solid rgba(0,133,255,0.4)',borderRadius:10,marginBottom:16}}>
            <span style={{width:9,height:9,borderRadius:100,background:'#56E16A',boxShadow:'0 0 8px #56E16A'}}/>
            <span className="f-mono" style={{fontSize:13,fontWeight:700,color:'#93C5FD'}}>factura.creada</span>
            <span className="f-mono" style={{fontSize:11,color:'rgba(255,255,255,0.5)'}}>F-2025-0252 · Acme Corp</span>
            <span className="f-mono" style={{marginLeft:'auto',fontSize:10,color:'rgba(255,255,255,0.4)'}}>hace 0 s</span>
          </div>

          {/* Flecha + pulso */}
          <div style={{position:'relative',height:38,marginBottom:8}}>
            <svg width="100%" height="38" viewBox="0 0 620 38" style={{opacity:clamp((t-8.2)/0.4,0,1)}}>
              <path d="M310 0 V22" stroke="rgba(98,180,255,0.5)" strokeWidth="1.5"/>
              <path d="M60 22 H560" stroke="rgba(98,180,255,0.5)" strokeWidth="1.5"/>
              <path d="M60 22 V34 M310 22 V34 M560 22 V34" stroke="rgba(98,180,255,0.5)" strokeWidth="1.5"/>
              {t >= 9.2 && [60,310,560].map((dx,i)=>{
                const cyc = ((t-9.2)*0.8) % 1;
                return <circle key={i} cx={lerp(310, dx, Math.max(0,cyc*2-1))} cy={lerp(0, 22, Math.min(1,cyc*2))} r="4" fill="#62B4FF" opacity={1-cyc*0.5}/>;
              })}
            </svg>
          </div>

          {/* Destinos */}
          <div style={{display:'flex',justifyContent:'space-between',gap:10}}>
            {tools.map((tool,i)=>(
              <ToolBadge key={i} name={tool.n} color={tool.c} t={t} start={tool.at} dark/>
            ))}
          </div>

          {/* Entregas */}
          {t >= 10.2 && (()=>{
            const p = clamp((t-10.2)/0.5, 0, 1);
            return (
              <div className="f-mono" style={{marginTop:16,padding:'10px 14px',background:'rgba(16,185,129,0.1)',border:'1px solid rgba(16,185,129,0.35)',borderRadius:8,fontSize:11,color:'#6EE7B7',opacity:p}}>
                ✓ 3/3 entregados · 120 ms · reintentos automáticos si tu endpoint cae
              </div>
            );
          })()}
        </div>

      </div>

      {/* Direcciones del dato — fila completa bajo las dos columnas */}
      <div style={{position:'absolute',top:710,left:150,right:150,display:'flex',gap:16,opacity:clamp((t-11.4)/0.5,0,1)}}>
        {[
          { i:'🔌', l:'API REST',           d:'lee y escribe todo lo que viste durante el día' },
          { i:'📩', l:'Webhooks entrantes', d:'recibe pedidos y eventos desde fuera' },
          { i:'⚙️', l:'SDK .NET',           d:'cliente tipado, publicado en NuGet' },
        ].map((x,i)=>(
          <div key={i} style={{flex:1,display:'flex',alignItems:'center',gap:14,padding:'16px 20px',background:'rgba(255,255,255,0.04)',border:'1px solid rgba(255,255,255,0.1)',borderRadius:12}}>
            <span style={{fontSize:22}}>{x.i}</span>
            <div>
              <div className="f-plex" style={{fontSize:15,fontWeight:700,color:'#fff'}}>{x.l}</div>
              <div style={{fontSize:12,color:'rgba(255,255,255,0.5)',marginTop:3}}>{x.d}</div>
            </div>
          </div>
        ))}
      </div>

      <SocialCaption t={t} cues={CAPTIONS.slide_api}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideApi });