// === El mapa — "Esta presentación, en dos partes" ===
// LOCUCIÓN (bloque 33, audio real 23.68s): «en dos partes» [0.0] → titular · «La primera: la base,
//   la que ya viene hecha» [3.73] → card 1 · «un día entero... hora a hora... mañana a noche»
//   [7.70-11.53] → mini-timeline del día · «Y la segunda: lo que montas tú encima» [13.38] → card 2 ·
//   «eso que solo tu negocio hace... sin escribir una línea de código» [17.09-19.10] → detalle Flex ·
//   «empezamos por la base» [22.07] → la parte 1 se ilumina.
function SlideMapa({ t }){
  const T = { title:0.3, card1:3.73, day:7.70, card2:13.38, p2:17.09, empezamos:22.07 };

  const titleP = clamp((t-T.title)/0.6, 0, 1), titleE = Easing.easeOutCubic(titleP);
  const c1P = clamp((t-T.card1)/0.6, 0, 1), c1E = Easing.easeOutBack(c1P);
  const c2P = clamp((t-T.card2)/0.6, 0, 1), c2E = Easing.easeOutBack(c2P);
  const empezamos = t >= T.empezamos;
  const emP = clamp((t-T.empezamos)/0.5, 0, 1), emE = Easing.easeOutBack(emP);

  // Hitos del día (parte 1) — se encienden hora a hora [7.70 → 11.53]
  const HITOS = ['08:12','09:04','11:30','13:05','17:00','19:42'];
  const dayStart = T.day, dayStep = (11.9 - T.day) / HITOS.length;

  // Bloques Flex (parte 2) — aparecen en «lo que montas tú» / «sin código» [14.8 → 19.6]
  const BLOCKS = [
    { at:15.4, c:'#0085FF', w:'60%' },
    { at:16.4, c:'#10B981', w:'42%' },
    { at:17.6, c:'#F59E0B', w:'52%' },
  ];

  return (
    <SlideCanvas variant="hero" particles={8}>
      <RuedaDivider style={{position:'absolute',top:0,left:80,right:80,height:4,overflow:'hidden'}}/>

      {/* Titular */}
      <div style={{position:'absolute', top:104, left:0, right:0, textAlign:'center', opacity:titleP, transform:`translateY(${(1-titleE)*-12}px)`}}>
        <div className="f-mono" style={{fontSize:13, fontWeight:600, letterSpacing:'3px', color:'#64748B'}}>LA PRESENTACIÓN</div>
        <h2 className="f-plex" style={{fontSize:56, fontWeight:800, letterSpacing:'-0.035em', color:'#0F172A', margin:'16px 0 0'}}>
          En <span className="grad-text">dos partes.</span>
        </h2>
      </div>

      <div style={{position:'absolute', top:308, left:170, right:170, display:'flex', gap:26, alignItems:'stretch'}}>

        {/* ===== Parte 1 — La base ===== */}
        <div style={{flex:1, position:'relative', background:'#fff', border:`2px solid ${empezamos?'#0085FF':'rgba(0,133,255,0.30)'}`, borderRadius:20, padding:'26px 30px', boxShadow:`0 22px 56px rgba(0,133,255,${empezamos?0.22:0.12})`, opacity:clamp(c1P*1.3,0,1), transform:`translateY(${(1-c1E)*28}px) scale(${lerp(0.94,1,c1E)})`}}>
          <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:8}}>
            <span className="f-mono" style={{width:44, height:44, borderRadius:12, background:'linear-gradient(135deg,#0085FF,#0066CC)', color:'#fff', fontSize:20, fontWeight:800, display:'inline-flex', alignItems:'center', justifyContent:'center', boxShadow:'0 8px 20px rgba(0,133,255,0.4)'}}>1</span>
            <div>
              <div className="f-plex" style={{fontSize:26, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>La base, ya hecha</div>
              <div style={{fontSize:14, color:'#64748B'}}>Facturas, banco, ventas, equipo — funcionando</div>
            </div>
          </div>
          <div style={{fontSize:16, color:'#334155', margin:'12px 0 18px', lineHeight:1.45}}>
            Un <b style={{color:'#0F172A'}}>día entero</b> de tu empresa, hora a hora — de la mañana a la noche.
          </div>
          {/* Mini-timeline del día */}
          <div style={{position:'relative', height:60, marginTop:6}}>
            <div style={{position:'absolute', left:6, right:6, top:14, height:3, background:'#E2E8F0', borderRadius:2}}/>
            <div style={{position:'absolute', left:6, top:14, height:3, background:'linear-gradient(90deg,#0085FF,#56E16A)', borderRadius:2, width:`${clamp((t-dayStart)/(11.9-dayStart),0,1)*97}%`, transition:'none'}}/>
            <div style={{display:'flex', justifyContent:'space-between', position:'relative'}}>
              {HITOS.map((h,i)=>{
                const on = t >= dayStart + i*dayStep;
                const p = clamp((t-(dayStart+i*dayStep))/0.3, 0, 1);
                return (
                  <div key={h} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:8, width:44}}>
                    <span style={{width:14, height:14, borderRadius:100, background: on?'#0085FF':'#CBD5E1', boxShadow: on?'0 0 0 4px rgba(0,133,255,0.15)':'none', transform:`scale(${on?lerp(0.6,1,Easing.easeOutBack(p)):1})`}}/>
                    <span className="f-mono" style={{fontSize:10.5, fontWeight:700, color: on?'#0066CC':'#CBD5E1'}}>{h}</span>
                  </div>
                );
              })}
            </div>
          </div>
          {/* Badge EMPEZAMOS AQUÍ */}
          {empezamos && (
            <div style={{position:'absolute', top:-14, right:22, opacity:clamp(emP*1.3,0,1), transform:`scale(${lerp(0.6,1,emE)})`}}>
              <span className="f-mono" style={{fontSize:11, fontWeight:800, letterSpacing:'1px', color:'#fff', background:'linear-gradient(135deg,#0085FF,#0066CC)', borderRadius:100, padding:'6px 15px', boxShadow:'0 8px 20px rgba(0,133,255,0.45)'}}>▶ EMPEZAMOS AQUÍ</span>
            </div>
          )}
        </div>

        {/* ===== Parte 2 — Lo que montas tú ===== */}
        <div style={{flex:1, background:'#fff', border:`2px solid ${empezamos?'#E2E8F0':'rgba(16,185,129,0.30)'}`, borderRadius:20, padding:'26px 30px', boxShadow:`0 22px 56px rgba(16,185,129,0.12)`, opacity:clamp(c2P*1.3,0,1)*(empezamos?0.72:1), transform:`translateY(${(1-c2E)*28}px) scale(${lerp(0.94,1,c2E)})`, filter:empezamos?'saturate(0.9)':'none'}}>
          <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:8}}>
            <span className="f-mono" style={{width:44, height:44, borderRadius:12, background:'linear-gradient(135deg,#10B981,#059669)', color:'#fff', fontSize:20, fontWeight:800, display:'inline-flex', alignItems:'center', justifyContent:'center', boxShadow:'0 8px 20px rgba(16,185,129,0.4)'}}>2</span>
            <div>
              <div className="f-plex" style={{fontSize:26, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>Lo que montas tú</div>
              <div style={{fontSize:14, color:'#64748B'}}>Lo único que hace especial a tu negocio</div>
            </div>
          </div>
          <div style={{fontSize:16, color:'#334155', margin:'12px 0 16px', lineHeight:1.45}}>
            Eso que <b style={{color:'#0F172A'}}>solo tu negocio hace</b> — sin escribir una línea de código.
          </div>
          {/* Mini-lienzo Flex */}
          <div className="dot-grid-bg" style={{position:'relative', height:104, borderRadius:12, border:'1.5px dashed #CBD5E1', background:'#FAFCFF', padding:'12px 14px', display:'flex', flexDirection:'column', gap:8, justifyContent:'center'}}>
            {BLOCKS.map((b,i)=>{
              const p = clamp((t-b.at)/0.4, 0, 1), e = Easing.easeOutBack(p);
              return <div key={i} style={{height:16, width:b.w, background:b.c, borderRadius:6, opacity:clamp(p*1.3,0,1), transform:`translateX(${(1-e)*-14}px) scaleX(${lerp(0.5,1,e)})`, transformOrigin:'left center', boxShadow:`0 4px 12px ${b.c}44`}}/>;
            })}
            {t >= T.p2 && (
              <div className="f-mono" style={{position:'absolute', right:12, bottom:10, fontSize:10, fontWeight:700, color:'#94A3B8', background:'#fff', border:'1px solid #E2E8F0', borderRadius:7, padding:'3px 9px', opacity:clamp((t-T.p2)/0.5,0,1)}}>+ tu sección · sin código</div>
            )}
          </div>
        </div>
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { SlideMapa });