// === F8 · Flex — Tu IA ya lo entiende (13s) — el remate del acto Flex ===
// Concepto: la ventana de chat de Dinaup (panel oscuro, estilo slide-agente)
// con las TRES secciones recién creadas con Flex como chips arriba. El
// asistente ya las conoce sin entrenar ni configurar: saluda con sugerencias
// que citan Partidas y Vehículos, María TECLEA su pregunta en la casilla de
// entrada (regla global de chat: se teclea abajo, se envía, la casilla se
// vacía y ENTONCES aparece la burbuja), el chip Partidas se ilumina al
// consultarse y la respuesta se construye línea a línea. Cierre: candado +
// "Con los permisos de cada persona".
// Sincronizado con CAPTIONS.slide_flexiaglobal (0.5-3.0 / 3.0-5.8 / 5.8-8.8 / 8.8-11.0 / 11.0-12.7).

function SlideFlexIAGlobal({ t }){
  // --- Timeline (sincronizada con los cues) ---
  const winT     = 0.5;                 // cue 0.5-3.0 · entra la ventana…
  const chipTs   = [1.3, 1.9, 2.5];     // …y los 3 chips de sección, uno a uno
  const sealT    = 2.8;                 // sello "creadas con Flex"
  const dividerT = 3.2;                 // cue 3.0-5.8 · "Sin entrenar. Sin configurar."
  const helloT   = 3.9;                 // el asistente saluda: ya conoce las secciones
  const sugTs    = [4.6, 5.1];          // sugerencias que citan Partidas y Vehículos
  const typeT    = 6.05;                // cue 5.8-8.8 · María teclea EN LA CASILLA…
  const ASK_TXT  = '¿Cuántas partidas hubo ayer en la pista 4?';
  const ASK_CPS  = 18;                  // 42 caracteres → tecleado ~8.4
  const sendT    = 8.6;                 // …envía (pulso del botón, la casilla se vacía)…
  const bubbleT  = 8.65;                // …y ENTONCES aparece su burbuja en el hilo
  const consultT = 8.9;                 // cue 8.8-11.0 · el chip Partidas se ilumina
  const ansT     = 9.4;                 // la respuesta se construye…
  const rowTs    = [9.5, 10.1, 10.7];   // …línea a línea
  const checkT   = 9.7;                 // spinner → check en el chip consultado
  const lockT    = 11.1;                // cue 11.0-12.7 · candado — reposo a 12.2 (dur 13)

  // --- Geometría ---
  // Ventana: (400,168) 1120×640 → base 808. Dentro (rel.): cabecera 0-64 ·
  // chips 64-152 · divider 168 · saludo 204-250 · sugerencias 262-296 ·
  // pregunta 308-380 · respuesta 398-530 · input 584-640.
  // Candado centrado a y 828-882 (la caption pill entra a ~896: sin solape).
  const secciones = [
    { name:'Partidas',  sub:'Minigolf',               color:'#0085FF', icon:'flag' },
    { name:'Vehículos', sub:'Autodesguaces Alicante', color:'#FF6751', icon:'car'  },
    { name:'Licencias', sub:'Drivioon',               color:'#56E16A', icon:'key'  },
  ];
  const sugerencias = ['¿Cuántas partidas hubo ayer?', '¿Qué vehículos entraron esta semana?'];
  const filas = [
    { icon:'flag',  strong:'12 partidas',  soft:'ayer, en la pista 4',  mono:false },
    { icon:'euro',  strong:'96,00 €',      soft:'en tickets de venta',  mono:true  },
    { icon:'clock', strong:'18:00–19:00',  soft:'hora punta',           mono:true  },
  ];

  const winP = clamp((t - winT)/0.65, 0, 1);
  const winE = Easing.easeOutCubic(winP);
  const consulting = t >= consultT;

  // --- Iconos SVG de línea (cero emojis en la UI) ---
  const ic = (kind, size, color) => {
    const s = { stroke:color, strokeWidth:1.9, strokeLinecap:'round', strokeLinejoin:'round', fill:'none' };
    const g = {
      flag:   <><path d="M6 21 V4" {...s}/><path d="M6 4.5 H17.5 L15 8 L17.5 11.5 H6" {...s}/></>,
      car:    <><path d="M4 15.5 L4.7 12.5 C4.9 11.8 5.4 11.3 6.1 11.2 L8.2 10.9 L10.2 8.5 C10.6 8 11.2 7.7 11.8 7.7 H14.2 C14.9 7.7 15.5 8 15.9 8.6 L17.7 10.9 L19.7 11.3 C20.4 11.5 20.9 12.1 20.9 12.8 V15.5" {...s}/><circle cx="8" cy="15.7" r="1.9" {...s}/><circle cx="16.8" cy="15.7" r="1.9" {...s}/><path d="M10 15.7 H14.8" {...s}/></>,
      key:    <><circle cx="8" cy="12" r="3.4" {...s}/><path d="M11.4 12 H20 M16.8 12 V15.2 M20 12 V14.6" {...s}/></>,
      puzzle: <path d="M6 6 H9.6 A2.4 2.4 0 0 1 14.4 6 H18 V9.6 A2.4 2.4 0 0 1 18 14.4 V18 H6 Z" {...s}/>,
      lock:   <><rect x="5" y="10.5" width="14" height="9.5" rx="2.4" {...s}/><path d="M8 10.5 V7.5 A4 4 0 0 1 16 7.5 V10.5" {...s}/><circle cx="12" cy="15.2" r="1.5" fill={color} stroke="none"/></>,
      clock:  <><circle cx="12" cy="12" r="8.5" {...s}/><path d="M12 7.5 V12 L15.2 14" {...s}/></>,
      euro:   <><path d="M16.5 7.5 A5.6 5.6 0 1 0 16.5 16.5" {...s}/><path d="M6.5 10.6 H13 M6.5 13.4 H13" {...s}/></>,
      check:  <path d="M5 12.5 L10 17.3 L19 7" {...s}/>,
    };
    return <svg width={size} height={size} viewBox="0 0 24 24" style={{display:'block', flexShrink:0}}>{g[kind]}</svg>;
  };

  const robot = (size) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 3 V6" stroke="#fff" strokeWidth="1.7" strokeLinecap="round"/>
      <circle cx="12" cy="2.6" r="1.3" fill="#fff"/>
      <rect x="5" y="6.5" width="14" height="11" rx="3.2" stroke="#fff" strokeWidth="1.7"/>
      <circle cx="9.4" cy="11.4" r="1.35" fill="#fff"/>
      <circle cx="14.6" cy="11.4" r="1.35" fill="#fff"/>
      <path d="M9.4 14.8 H14.6" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
      <path d="M3 10.5 V13.5 M21 10.5 V13.5" stroke="#fff" strokeWidth="1.7" strokeLinecap="round"/>
    </svg>
  );

  const spinner = (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{transform:`rotate(${(t*340)%360}deg)`, display:'block'}}>
      <path d="M12 3 A9 9 0 0 1 21 12" stroke="#9BD5FF" strokeWidth="3.2" strokeLinecap="round"/>
    </svg>
  );

  return (
    <SlideCanvas variant="dark-deep">

      {/* ===== Cabecera ===== */}
      {(()=>{
        const eyeP = clamp((t - 0.3)/0.5, 0, 1);
        const hP = clamp((t - 0.45)/0.7, 0, 1);
        const hE = Easing.easeOutCubic(hP);
        return (
          <div style={{position:'absolute', top:46, left:0, right:0, textAlign:'center', zIndex:5}}>
            <div className="f-plex" style={{fontSize:14, fontWeight:600, letterSpacing:'2px', color:'#62B4FF', opacity:eyeP}}>FLEX · LA IA DE TU NEGOCIO</div>
            <h2 className="f-plex" style={{fontSize:40, fontWeight:700, letterSpacing:'-0.03em', margin:'14px 0 0', color:'#fff', opacity:hE, transform:`translateY(${(1-hE)*12}px)`}}>
              Lo construyes tú. <span className="grad-text">Lo entiende tu IA.</span>
            </h2>
          </div>
        );
      })()}

      {/* ===== Ventana de chat Dinaup (panel oscuro) ===== */}
      <div style={{position:'absolute', left:400, top:168, width:1120, height:640, background:'#101C31', border:'1px solid rgba(255,255,255,0.10)', borderRadius:18, boxShadow:'0 30px 90px rgba(0,0,0,0.5)', overflow:'hidden', opacity:winP, transform:`translateY(${(1-winE)*24}px)`}}>
        <div style={{position:'absolute', inset:0, background:'radial-gradient(circle at 15% 10%, rgba(0,133,255,0.14), transparent 50%), radial-gradient(circle at 88% 90%, rgba(139,92,246,0.12), transparent 45%)', pointerEvents:'none'}}/>

        {/* Cabecera del chat */}
        <div style={{position:'absolute', top:0, left:0, right:0, height:64, padding:'0 20px', display:'flex', alignItems:'center', gap:12, borderBottom:'1px solid rgba(255,255,255,0.08)'}}>
          <div style={{width:34, height:34, borderRadius:10, background:'linear-gradient(135deg,#0085FF,#8B5CF6)', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 0 22px rgba(0,133,255,0.4)', flexShrink:0}}>
            {robot(18)}
          </div>
          <div style={{flex:1, minWidth:0}}>
            <div className="f-plex" style={{fontSize:15, fontWeight:700, color:'#fff'}}>Asistente Dinaup <span style={{fontSize:9, color:'rgba(255,255,255,0.5)', fontWeight:500, marginLeft:6, padding:'2px 8px', background:'rgba(255,255,255,0.08)', borderRadius:100, letterSpacing:0.5}}>IA</span></div>
            <div style={{fontSize:11, color:'rgba(255,255,255,0.5)', marginTop:2, display:'flex', alignItems:'center', gap:6}}>
              <span style={{width:6, height:6, borderRadius:100, background:'#10B981', boxShadow:`0 0 ${5 + 3*Math.sin(t*3)}px #10B981`}}/>
              {consulting && t < checkT + 0.4 ? 'Consultando la sección Partidas…' : 'En línea · conoce tus secciones'}
            </div>
          </div>
        </div>

        {/* Franja de chips: las 3 secciones recién creadas + sello Flex */}
        <div style={{position:'absolute', top:64, left:0, right:0, height:88, background:'rgba(255,255,255,0.03)', borderBottom:'1px solid rgba(255,255,255,0.08)', display:'flex', alignItems:'center', gap:14, padding:'0 24px'}}>
          {secciones.map((c, i)=>{
            const p = clamp((t - chipTs[i])/0.5, 0, 1);
            const e = Easing.easeOutBack(p);
            if (p <= 0) return null;
            const hot = i === 0 && consulting;
            return (
              <div key={i} style={{
                display:'flex', alignItems:'center', gap:11, height:56, padding:'0 16px',
                background: hot ? 'rgba(0,133,255,0.14)' : 'rgba(255,255,255,0.05)',
                border:`1.5px solid ${hot ? 'rgba(0,133,255,0.75)' : 'rgba(255,255,255,0.13)'}`,
                borderRadius:14,
                boxShadow: hot ? `0 0 ${22 + 8*Math.sin(t*2.6)}px rgba(0,133,255,${0.30 + 0.14*Math.sin(t*2.3)})` : 'none',
                opacity: clamp(p*1.25, 0, 1),
                transform:`translateY(${(1-e)*14}px) scale(${lerp(0.85, 1, e)})`,
              }}>
                <div style={{width:30, height:30, borderRadius:9, background:`${c.color}26`, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                  {ic(c.icon, 18, c.color)}
                </div>
                <div>
                  <div className="f-plex" style={{fontSize:15.5, fontWeight:700, color:'#fff', lineHeight:1.05, whiteSpace:'nowrap'}}>{c.name}</div>
                  <div className="f-mono" style={{fontSize:8.5, fontWeight:600, color:'rgba(255,255,255,0.45)', letterSpacing:'1.4px', textTransform:'uppercase', marginTop:3, whiteSpace:'nowrap'}}>{c.sub}</div>
                </div>
                {i === 0 && (
                  <div style={{width:17, height:17, marginLeft:4, display:'flex', alignItems:'center', justifyContent:'center'}}>
                    {consulting && t < checkT && spinner}
                    {t >= checkT && (()=>{
                      const cp = clamp((t - checkT)/0.35, 0, 1);
                      const ce = Easing.easeOutBack(cp);
                      return <div style={{transform:`scale(${lerp(0.4, 1, ce)})`, opacity:cp}}>{ic('check', 16, '#56E16A')}</div>;
                    })()}
                  </div>
                )}
              </div>
            );
          })}
          <div style={{flex:1}}/>
          {t >= sealT && (()=>{
            const p = clamp((t - sealT)/0.5, 0, 1);
            const e = Easing.easeOutBack(p);
            return (
              <div className="f-mono" style={{display:'flex', alignItems:'center', gap:8, padding:'8px 14px', background:'rgba(0,133,255,0.10)', border:'1px solid rgba(0,133,255,0.35)', borderRadius:100, fontSize:10, fontWeight:700, letterSpacing:'1.6px', color:'#7CC4FF', textTransform:'uppercase', whiteSpace:'nowrap', opacity:clamp(p*1.3, 0, 1), transform:`scale(${lerp(0.8, 1, e)})`}}>
                {ic('puzzle', 13, '#7CC4FF')} Creadas con Flex
              </div>
            );
          })()}
        </div>

        {/* Línea de contexto: sin entrenar, sin configurar */}
        {t >= dividerT && (()=>{
          const p = clamp((t - dividerT)/0.55, 0, 1);
          const e = Easing.easeOutCubic(p);
          return (
            <div style={{position:'absolute', top:168, left:0, right:0, display:'flex', alignItems:'center', justifyContent:'center', gap:14, opacity:p, transform:`translateY(${(1-e)*8}px)`}}>
              <div style={{width:120, height:1, background:'linear-gradient(90deg, transparent, rgba(255,255,255,0.25))'}}/>
              <span className="f-mono" style={{fontSize:12.5, fontWeight:700, letterSpacing:'2.5px', color:'#7CC4FF', textTransform:'uppercase', whiteSpace:'nowrap'}}>Sin entrenar. Sin configurar.</span>
              <div style={{width:120, height:1, background:'linear-gradient(270deg, transparent, rgba(255,255,255,0.25))'}}/>
            </div>
          );
        })()}

        {/* Saludo del asistente: ya conoce las secciones */}
        {t >= helloT && (()=>{
          const p = clamp((t - helloT)/0.45, 0, 1);
          return (
            <div style={{position:'absolute', top:204, left:20, display:'flex', alignItems:'flex-start', gap:12, opacity:p, transform:`translateY(${(1-Easing.easeOutCubic(p))*10}px)`}}>
              <div style={{width:30, height:30, borderRadius:9, background:'linear-gradient(135deg,#0085FF,#8B5CF6)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:2}}>
                {robot(16)}
              </div>
              <div className="f-plex" style={{background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:'16px 16px 16px 4px', padding:'12px 16px', fontSize:15.5, color:'rgba(255,255,255,0.92)', lineHeight:1.45, whiteSpace:'nowrap'}}>
                Hola, María. Ya conozco tus <span style={{fontWeight:700, color:'#fff'}}>secciones nuevas</span>. Pregúntame, por ejemplo:
              </div>
            </div>
          );
        })()}

        {/* Sugerencias que citan Partidas y Vehículos */}
        <div style={{position:'absolute', top:262, left:62, display:'flex', gap:10}}>
          {sugerencias.map((s, i)=>{
            const p = clamp((t - sugTs[i])/0.45, 0, 1);
            const e = Easing.easeOutBack(p);
            if (p <= 0) return null;
            return (
              <div key={i} className="f-plex" style={{padding:'8px 15px', border:'1px solid rgba(0,133,255,0.45)', background:'rgba(0,133,255,0.10)', borderRadius:100, fontSize:13, fontWeight:600, color:'#BFE3FF', whiteSpace:'nowrap', opacity:clamp(p*1.3, 0, 1), transform:`scale(${lerp(0.8, 1, e)})`}}>{s}</div>
            );
          })}
        </div>

        {/* Pregunta de María — la burbuja aparece al ENVIAR (se tecleó en la casilla) */}
        {t >= bubbleT && (()=>{
          const p = clamp((t - bubbleT)/0.4, 0, 1);
          return (
            <div style={{position:'absolute', top:308, right:24, textAlign:'right', opacity:p, transform:`translateY(${(1-Easing.easeOutCubic(p))*8}px)`}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'flex-end', gap:8, marginBottom:6}}>
                <span className="f-plex" style={{fontSize:11.5, fontWeight:600, color:'rgba(255,255,255,0.55)'}}>María · Minigolf</span>
                <div style={{width:22, height:22, borderRadius:100, background:'linear-gradient(135deg,#0085FF,#56E16A)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:700, color:'#fff', fontFamily:"'IBM Plex Sans',sans-serif"}}>M</div>
              </div>
              <div style={{display:'inline-block', minWidth:30, background:'rgba(0,133,255,0.18)', border:'1px solid rgba(0,133,255,0.35)', borderRadius:'16px 16px 4px 16px', padding:'11px 15px', fontSize:16, color:'#fff', lineHeight:1.4, whiteSpace:'nowrap'}}>
                {ASK_TXT}
              </div>
            </div>
          );
        })()}

        {/* Respuesta: se construye línea a línea con datos de Partidas */}
        {t >= ansT && (()=>{
          const p = clamp((t - ansT)/0.45, 0, 1);
          return (
            <div style={{position:'absolute', top:398, left:20, display:'flex', alignItems:'flex-start', gap:12, opacity:p, transform:`translateY(${(1-Easing.easeOutCubic(p))*10}px)`}}>
              <div style={{width:30, height:30, borderRadius:9, background:'linear-gradient(135deg,#0085FF,#8B5CF6)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:2}}>
                {robot(16)}
              </div>
              <div style={{background:'rgba(255,255,255,0.06)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:'16px 16px 16px 4px', padding:'13px 18px', display:'flex', flexDirection:'column', gap:8}}>
                {filas.map((r, i)=>{
                  const rp = clamp((t - rowTs[i])/0.45, 0, 1);
                  const re = Easing.easeOutCubic(rp);
                  if (rp <= 0) return null;
                  return (
                    <div key={i} style={{height:30, display:'flex', alignItems:'center', gap:10, opacity:rp, transform:`translateX(${(1-re)*-12}px)`}}>
                      {ic(r.icon, 18, '#62B4FF')}
                      <span className={r.mono ? 'f-mono' : 'f-plex'} style={{fontSize:17, fontWeight:700, color:'#fff', whiteSpace:'nowrap'}}>{r.strong}</span>
                      <span className="f-plex" style={{fontSize:13.5, color:'rgba(255,255,255,0.55)', whiteSpace:'nowrap'}}>{r.soft}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })()}

        {/* Input del chat — María teclea AQUÍ y envía (regla global de chat) */}
        {(()=>{
          const typing = t >= typeT && t < sendT;
          const nChars = clamp(Math.floor((t - typeT) * ASK_CPS), 0, ASK_TXT.length);
          const sendPulse = t >= sendT && t < sendT + 0.35;
          return (
            <div style={{position:'absolute', left:0, right:0, bottom:0, height:56, padding:'0 16px', borderTop:'1px solid rgba(255,255,255,0.08)', background:'rgba(0,0,0,0.25)', display:'flex', alignItems:'center'}}>
              <div style={{flex:1, display:'flex', alignItems:'center', gap:9, background: typing ? 'rgba(255,255,255,0.09)' : 'rgba(255,255,255,0.05)', border:`1px solid ${typing ? 'rgba(0,133,255,0.55)' : 'rgba(255,255,255,0.1)'}`, borderRadius:10, padding:'7px 12px'}}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" style={{opacity:0.55, flexShrink:0}}><path d="M20 11 L11.5 19.5 A5 5 0 0 1 4.5 12.5 L13 4 A3.5 3.5 0 0 1 18 9 L9.8 17.2 A2 2 0 0 1 7 14.4 L14.5 7" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/></svg>
                {typing
                  ? <span style={{flex:1, minWidth:0, color:'#fff', fontSize:13, whiteSpace:'nowrap', overflow:'hidden'}}>{ASK_TXT.slice(0, nChars)}<span className="caret"/></span>
                  : <span style={{flex:1, color:'rgba(255,255,255,0.45)', fontSize:12}}>Pregunta a tu IA en tus palabras…</span>}
                <span style={{padding:'4px 9px', background:'var(--dn-primary)', borderRadius:6, color:'#fff', fontSize:10.5, fontWeight:600, flexShrink:0, transform: sendPulse ? 'scale(1.25)' : 'scale(1)', boxShadow: sendPulse ? '0 0 14px rgba(0,133,255,0.8)' : 'none'}}>↑</span>
              </div>
            </div>
          );
        })()}
      </div>

      {/* ===== Candado de permisos (bajo el chat) ===== */}
      {t >= lockT && (()=>{
        const p = clamp((t - lockT)/0.55, 0, 1);
        const e = Easing.easeOutBack(p);
        const ee = Easing.easeOutCubic(p);
        return (
          <div style={{position:'absolute', top:828, left:0, right:0, display:'flex', justifyContent:'center', opacity:clamp(p*1.25, 0, 1), transform:`translateY(${(1-ee)*16}px)`}}>
            <div style={{display:'inline-flex', alignItems:'center', gap:13, padding:'10px 24px 10px 12px', background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.13)', borderRadius:100, transform:`scale(${lerp(0.8, 1, e)})`}}>
              <div style={{width:34, height:34, borderRadius:10, background:'linear-gradient(135deg,#0085FF,#56E16A)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, boxShadow:'0 0 20px rgba(0,133,255,0.4)'}}>
                {ic('lock', 17, '#fff')}
              </div>
              <span className="f-plex" style={{fontSize:19, fontWeight:500, color:'rgba(255,255,255,0.88)', letterSpacing:'-0.01em', whiteSpace:'nowrap'}}>
                Con <span style={{fontWeight:700, color:'#fff'}}>los permisos de cada persona</span>
              </span>
            </div>
          </div>
        );
      })()}

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

Object.assign(window, { SlideFlexIAGlobal });
