// === Escena 01 — Contrato: para quién es, qué promete, y la Única Cosa en dos tarjetas ===
// «Primero, quién es. Después, cómo trabajas con él.» (promesa). Sin play todavía: solo la idea.
function PasoTarjeta({ t, x, num, titulo, entra, chips, color }){
  const a = pe(t, entra, 0.8);
  return (
    <div style={{ position:'absolute', left:x, top:470, width:760, height:330, background:'#fff', borderRadius:16,
                  border:`1px solid ${C.linea}`, boxShadow:'0 8px 28px rgba(15,23,42,0.08)', padding:'36px 42px', boxSizing:'border-box',
                  opacity:a, transform:`translateY(${(1 - a) * 16}px)` }}>
      <div style={{ display:'flex', alignItems:'center', gap:18 }}>
        <div className="f-plex" style={{ width:52, height:52, borderRadius:26, background:color, color:'#fff', display:'flex',
                                         alignItems:'center', justifyContent:'center', fontSize:26, fontWeight:700 }}>{num}</div>
        <div className="f-plex" style={{ fontSize:40, fontWeight:700, color:C.tinta, letterSpacing:'-0.02em' }}>{titulo}</div>
      </div>
      <div style={{ display:'flex', flexWrap:'wrap', gap:14, marginTop:34 }}>
        {chips.map(([texto, ic, t0]) => {
          const c = pe(t, t0, 0.5);
          return (
            <div key={texto} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 18px', borderRadius:10, background:C.base100,
                                      opacity:c, transform:`translateY(${(1 - c) * 10}px)` }}>
              <MI n={ic} s={24} c={color}/>
              <span style={{ fontFamily:FR, fontSize:23, color:C.tinta }}>{texto}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function EscenaAC01({ t }){
  useVoz(0);
  const G = GUION[0];
  const T = {
    facturar: B(G, 'Antes de facturar'),            // → título de la pieza
    existir:  B(G, 'tiene que existir'),    // → subtítulo «en Dinaup»
    minutos:  B(G, 'Vas a ver dónde'),              // → «cliente o proveedor»
    pasos:    B(G, 'El alta tiene dos pasos'),      // → sitio para las dos tarjetas
    quien:    B(G, 'Primero, quién es'),            // → tarjeta 1
    nombre:   B(G, 'su nombre'),
    ident:    B(G, 'su identificación fiscal'),
    contacto: B(G, 'cómo contactarle'),
    como:     B(G, 'Después, cómo trabajas'),       // → tarjeta 2
    fiscales: B(G, 'sus datos fiscales'),
    vendes:   B(G, 'cómo le vendes'),
    cuenta:   B(G, 'su cuenta contable'),
    puente:   B(G, 'encontrar la puerta'),          // → flecha hacia la siguiente
  };
  const tit = pe(t, T.facturar, 0.9);
  const sub = pe(t, T.minutos, 0.7);
  const sep = pe(t, T.pasos, 0.8);
  const pu = pe(t, T.puente, 0.7);
  return (
    <SlideCanvas variant="light" bg={C.fondo} grid={false}>
      <div style={{ position:'absolute', top:120, left:0, right:0, textAlign:'center', opacity:tit, transform:`translateY(${(1 - tit) * 14}px)` }}>
        <div className="f-mono" style={{ fontSize:20, fontWeight:600, letterSpacing:'3px', color:C.primario }}>TUTORIAL · DINAUP PYMES</div>
        <div className="f-plex" style={{ fontSize:76, fontWeight:700, letterSpacing:'-0.03em', color:C.tinta, marginTop:18 }}>
          Dar de alta un cliente o un proveedor
        </div>
      </div>
      <div style={{ position:'absolute', top:330, left:0, right:0, textAlign:'center', opacity:sub * (1 - 0.5 * sep) }}>
        <span style={{ fontFamily:FR, fontSize:30, color:C.texto }}>Dónde se abre, qué es obligatorio y qué puedes dejar vacío</span>
      </div>
      <PasoTarjeta t={t} x={160} num="1" titulo="Quién es" entra={T.quien} color={C.primario}
                   chips={[['Nombre', 'badge', T.nombre], ['Identificación fiscal', 'contact_page', T.ident], ['Correo y teléfono', 'call', T.contacto]]}/>
      <PasoTarjeta t={t} x={1000} num="2" titulo="Cómo trabajas con él" entra={T.como} color={C.exito}
                   chips={[['Datos fiscales', 'badge', T.fiscales], ['Venta o compra', 'category', T.vendes], ['Cuenta contable', 'account_balance', T.cuenta]]}/>
      <div style={{ position:'absolute', top:880, left:0, right:0, textAlign:'center', opacity:pu, transform:`translateY(${(1 - pu) * 10}px)` }}>
        <span style={{ fontFamily:FR, fontSize:28, color:C.texto }}>Primero: dónde se abre</span>
        <MI n="arrow_forward" s={30} c={C.primario} style={{ marginLeft:12, verticalAlign:'-6px' }}/>
      </div>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaAC01 });