// === Slide 01 — Portada (7s) ===
// "Toda tu empresa. Un solo sitio." + chips de las 7 apps en cascada.

function Slide01({ t }){
  const title1 = "Toda tu empresa.";
  const logoP   = clamp(t/0.8, 0, 1);
  const logoE   = Easing.easeOutCubic(logoP);
  const subP    = clamp((t - 0.4)/0.5, 0, 1);
  const taglineP = clamp((t-2.4)/0.6, 0, 1);
  const apps = [
    { n:'Pymes',  c:'#0085FF' },
    { n:'CRM',    c:'#8B5CF6' },
    { n:'TPV',    c:'#F59E0B' },
    { n:'RRHH',   c:'#10B981' },
    { n:'Tareas', c:'#EF4444' },
    { n:'Yo',     c:'#06B6D4' },
    { n:'API',    c:'#64748B' },
  ];

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

      <div style={{position:'absolute',left:100,top:100,opacity:logoE,transform:`translateY(${(1-logoE)*30}px)`}}>
        <DinaupLogo size={54}/>
      </div>

      <div style={{position:'absolute',left:100,right:100,top:310}}>
        <div className="f-plex" style={{fontSize:14,fontWeight:600,letterSpacing:'2px',color:'var(--dn-primary)',opacity:subP,transform:`translateY(${(1-subP)*10}px)`,marginBottom:32}}>
          DINAUP · LA PLATAFORMA
        </div>
        <h1 className="f-plex" style={{fontSize:116,fontWeight:800,letterSpacing:'-0.035em',lineHeight:1.0,margin:0,color:'#0F172A'}}>
          <span style={{display:'block'}}>
            {title1.split('').map((c,i)=>{
              const st = 0.9 + i*0.025;
              const p = clamp((t - st)/0.35, 0, 1);
              const e = Easing.easeOutCubic(p);
              return <span key={i} style={{display:'inline-block',opacity:e,transform:`translateY(${(1-e)*30}px)`,whiteSpace:'pre'}}>{c}</span>;
            })}
          </span>
          {(() => {
            const p = clamp((t - 1.7)/0.7, 0, 1);
            const e = Easing.easeOutCubic(p);
            return (
              <span className="grad-text" style={{display:'block',letterSpacing:'-0.035em',opacity:e,transform:`translateY(${(1-e)*30}px)`}}>Un solo sitio.</span>
            );
          })()}
        </h1>
        <div style={{marginTop:44,fontSize:25,color:'#64748B',opacity:taglineP,transform:`translateY(${(1-taglineP)*10}px)`,maxWidth:1000,lineHeight:1.4}}>
          Facturas, banco, ventas, equipo y local. <span style={{color:'#0F172A',fontWeight:600}}>Sin teclear el mismo dato dos veces.</span>
        </div>

        {/* Chips de apps */}
        <div style={{marginTop:42,display:'flex',gap:12,flexWrap:'wrap'}}>
          {apps.map((a,i)=>{
            const p = clamp((t - 3.2 - i*0.14)/0.4, 0, 1);
            const e = Easing.easeOutBack(p);
            return (
              <span key={i} style={{
                display:'inline-flex',alignItems:'center',gap:8,
                padding:'9px 18px',background:'#fff',
                border:'1px solid #E2E8F0',borderRadius:100,
                fontSize:15,fontWeight:600,color:'#0F172A',
                fontFamily:"'IBM Plex Sans',sans-serif",
                boxShadow:'0 4px 14px rgba(15,23,42,0.07)',
                opacity:clamp(p*1.3,0,1),
                transform:`scale(${lerp(0.6,1,e)})`,
              }}>
                <span style={{width:9,height:9,borderRadius:100,background:a.c}}/>
                {a.n}
              </span>
            );
          })}
        </div>
      </div>

      <div style={{position:'absolute',left:100,bottom:60,display:'flex',alignItems:'center',gap:10,opacity:clamp((t-4.5)/0.5,0,1)}}>
        <div className="pulse-dot"/>
        <span className="f-mono" style={{fontSize:12,color:'#64748B',letterSpacing:1}}>UN DÍA ENTERO · DE 08:30 AL CIERRE · TODO SON DEMOS REALES</span>
      </div>
    </SlideCanvas>
  );
}

Object.assign(window, { Slide01 });