// === Escena 10 — "Cierre: trae esos excels" · audio real 24.50s ===
// LOCUCIÓN: "Así que haz una cosa: piensa cuántos excels, grupos de WhatsApp y libretas están
//   sosteniendo hoy procesos de tu negocio. Esa lista es exactamente lo que trae la gente a la
//   primera sesión. Una hora, tus procesos encima de la mesa, y salimos con el primero elegido.
//   Pídela en dinaup punto com... y trae esos excels."
// BEATS: el bloc se apunta solo (Typewriter por mención) · se inclina hacia cámara · check
//   manuscrito en "autorizaciones" (callback D7) · cartel final + click en la URL · bloc mini.
function Escena10({ t }){
  const T = {
    bloc:     0.3,   // "Así que haz una cosa"                 → bloc
    lineas:   [2.8, 3.9, 5.2, 6.2, 7.1],                    // (apoyo) las líneas del bloc
    inclina: 11.2,   // "lo que trae la gente a la primera sesión" → inclina
    check:   16.9,   // "salimos con el primero elegido"       → check
    cartel:  19.0,   // "Pídela en dinaup punto com"           → cartel
    logo:    19.2,                                          // (apoyo) logo
    url:     19.7,                                         // (apoyo) url
    click:   20.6,                                          // (apoyo) click
    titular: 21.4,  // "trae esos excels"                    → titular
    blocMini:21.7,                                          // (apoyo) bloc mini
  };
  const blocP = clamp((t-T.bloc)/0.6, 0, 1), blocE = Easing.easeOutCubic(blocP);
  const inclinaP = clamp((t-T.inclina)/0.8, 0, 1), inclinaE = Easing.easeOutCubic(inclinaP);
  const checkP = clamp((t-T.check)/0.7, 0, 1);
  const cartelP = clamp((t-T.cartel)/0.8, 0, 1);
  const logoP = clamp((t-T.logo)/0.5, 0, 1), logoE = Easing.easeOutCubic(logoP);
  const titP = clamp((t-T.titular)/0.55, 0, 1), titE = Easing.easeOutCubic(titP);
  const urlP = clamp((t-T.url)/0.5, 0, 1);
  const clicked = t >= T.click;
  const ringP = clamp((t-T.click)/0.5, 0, 1);
  const miniP = clamp((t-T.blocMini)/0.5, 0, 1), miniE = Easing.easeOutBack(miniP);
  const glow = 0.5+0.5*Math.sin(Math.max(0, t-T.url)*2.4);

  const LINEAS = [
    'tiempos del taller',
    'autorizaciones',
    'partes de trabajo',
    'checklist calidad',
    'turnos',
  ];

  const blocContenido = (compact)=> (
    <div style={{background:'#FFFDF5', borderRadius:12, border:'1px solid #E8E2CF', padding: compact?'10px 14px 10px 26px':'26px 34px 26px 56px', position:'relative', boxShadow: compact?'0 8px 22px rgba(15,23,42,0.12)':'0 30px 80px rgba(15,23,42,0.2)'}}>
      <div style={{position:'absolute', left: compact?9:22, top: compact?8:22, bottom: compact?8:22, width:1.5, background:'#E4B4B4'}}/>
      <div className="f-plex" style={{fontSize: compact?9:17, fontWeight:800, color:'#44403C', marginBottom: compact?5:14}}>Para la sesión — lo que nos sostiene en apaños:</div>
      {LINEAS.map((l,i)=>{
        const p = compact ? 1 : clamp((t-T.lineas[i])/0.15, 0, 1);
        const esCheck = i===1;
        return (
          <div key={i} style={{display:'flex', alignItems:'center', gap: compact?6:12, marginBottom: compact?3:10, opacity:p}}>
            <span style={{position:'relative', width: compact?9:20, height: compact?9:20, border:`${compact?1.5:2.5}px solid #A8A29E`, borderRadius: compact?2:4, background:'#fff', flexShrink:0}}>
              {esCheck && checkP > 0 && !compact && (
                <svg style={{position:'absolute', inset:-6}} width="32" height="32" viewBox="0 0 32 32">
                  <path d="M6 16 L 13 24 L 27 7" fill="none" stroke="#1E3A8A" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="42" strokeDashoffset={42*(1-Easing.easeInOutCubic(checkP))}/>
                </svg>
              )}
              {esCheck && compact && <span style={{position:'absolute', inset:-2, color:'#1E3A8A', fontSize:10, fontWeight:900}}>✓</span>}
            </span>
            <span className="f-plex" style={{fontSize: compact?8.5:17, fontStyle:'italic', color:'#57534E', fontWeight: esCheck&&checkP>0?700:400}}>
              {compact ? l : <Typewriter text={l} start={T.lineas[i]} cps={26} t={t}/>}
            </span>
            {esCheck && checkP >= 1 && !compact && (
              <span className="f-plex" style={{fontSize:12, fontStyle:'italic', color:'#1E3A8A', fontWeight:700, opacity:clamp((checkP-0.8)*5,0,1)}}>← el primero</span>
            )}
          </div>
        );
      })}
    </div>
  );

  return (
    <SlideCanvas variant="light-soft">
      {/* Fase A: el bloc */}
      <div style={{position:'absolute', inset:0, opacity:1-cartelP}}>
        <div style={{position:'absolute', top:74, left:0, right:0, textAlign:'center', zIndex:5}}>
          <div className="f-mono" style={{fontSize:13, letterSpacing:'3px', color:'#64748B', marginBottom:9}}>HAZ UNA COSA</div>
          <div className="f-plex" style={{fontSize:42, fontWeight:800, color:'#0F172A', letterSpacing:'-0.03em'}}>¿Cuántos apaños sostienen tu negocio?</div>
        </div>
        <div style={{position:'absolute', left:'50%', top:270, width:560, transform:`translateX(-50%) perspective(900px) rotateX(${inclinaE*7}deg) rotate(${lerp(-1.2, 0, inclinaE)}deg) translateY(${(1-blocE)*30}px)`, opacity:blocP, transformOrigin:'50% 100%'}}>
          {blocContenido(false)}
          <div className="f-mono" style={{textAlign:'center', marginTop:16, fontSize:11, color:'#94A3B8', opacity:clamp((t-T.inclina-0.4)/0.5,0,1)}}>esa lista es lo que se trae a la primera sesión · una hora · tus procesos</div>
        </div>
      </div>

      {/* Fase B: cartel final */}
      {cartelP > 0 && (
        <div style={{position:'absolute', inset:0, background:'#F8FAFC', opacity:cartelP, zIndex:12, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
          <div style={{opacity:logoP, transform:`translateY(${(1-logoE)*16}px)`}}>
            <DinaupLogo size={52}/>
          </div>
          <RuedaDivider style={{width:280, margin:'26px 0 34px', opacity:clamp((t-T.logo-0.3)/0.5,0,1)}}/>
          <h1 className="f-plex" style={{fontSize:64, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A', margin:0, opacity:titP, transform:`translateY(${(1-titE)*18}px)`}}>
            Trae <span className="grad-text">esos excels</span>
          </h1>
          <div className="f-plex" style={{fontSize:17, color:'#64748B', marginTop:14, opacity:titP}}>Una hora. Tus procesos encima de la mesa. Salimos con el primero elegido.</div>
          <div style={{position:'relative', marginTop:34, opacity:urlP, display:'flex', alignItems:'center', gap:22}}>
            <span className="f-mono" style={{fontSize:30, fontWeight:700, color:'#0085FF', padding:'14px 34px', background:'#fff', border:'2px solid rgba(0,133,255,0.4)', borderRadius:100, boxShadow:`0 ${14+glow*10}px ${40+glow*16}px rgba(0,133,255,${0.16+glow*0.1})`, display:'inline-block', transform:`scale(${clicked?lerp(1,0.97,Math.min(1,ringP*2)):1})`}}>dinaup.com</span>
            {clicked && ringP < 1 && (
              <span style={{position:'absolute', left:130, top:'50%', width:70, height:70, borderRadius:100, border:'3px solid rgba(0,133,255,0.8)', transform:`translate(-50%,-50%) scale(${lerp(0.5,2.4,Easing.easeOutCubic(ringP))})`, opacity:1-ringP}}/>
            )}
            {/* Bloc mini junto a la URL */}
            {miniP > 0 && (
              <div style={{width:150, transform:`rotate(3deg) scale(${lerp(0.6,1,miniE)})`, opacity:clamp(miniP*1.3,0,1)}}>
                {blocContenido(true)}
              </div>
            )}
          </div>
          <CineCursor x={960 + lerp(280, 10, Easing.easeInOutCubic(clamp((t-T.url-0.15)/1.1,0,1)))} y={758 + lerp(110, 4, Easing.easeInOutCubic(clamp((t-T.url-0.15)/1.1,0,1)))} clicking={t>=T.click && t<T.click+0.3}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { Escena10 });