// === escena-03 — Lo que la máquina no toca (VALLE) ===
// Escena tranquila a propósito: una casilla, una lista, cero cifras. Protege el clímax de la 04.

function EscenaCC03({ t }){

  const T = {
    honesta:  0.10,   // "Ahora la parte honesta"
    ejemplos: 6.06,   // "Un leasing"
    marcas:  12.95,   // "Marcas ese tipo como manual"
    nodesap: 17.44,   // "Pero no desaparece"
    selector:20.56,   // "cambias de automáticos a manuales"
    nomarca: 26.40,   // "no viene nada premarcado"
    decides: 32.40,   // "tú decides la cuenta"
    salida:  35.29,   // "Ahora viene la segunda mitad"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const EJEMPLOS = ['Un leasing', 'Una compra de inmovilizado', 'Cualquier tipo que lleves tú'];

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="LA PARTE HONESTA" title="Hay cosas que no quieres automáticas" />

      {/* Los ejemplos, en cascada tranquila */}
      <div style={{position:'absolute', left:150, top:270, width:620}}>
        {EJEMPLOS.map((e,i)=>{
          const p = ap(T.ejemplos + i*0.9, 0.55);
          return (
            <div key={e} style={{
              padding:'22px 26px', marginBottom:14, background:'#fff', borderRadius:14,
              border:'1px solid #E2E8F0', boxShadow:'0 6px 20px rgba(15,23,42,0.05)',
              fontSize:26, color:'#0F172A',
              opacity:p, transform:`translateY(${(1-p)*16}px)`,
            }}>{e}</div>
          );
        })}

        {/* La casilla del tipo, que es el gesto entero */}
        <div style={{
          marginTop:34, padding:'24px 26px', background:'#fff', borderRadius:16,
          border:`1px solid ${t>=T.marcas ? 'rgba(251,140,0,0.5)':'#E2E8F0'}`,
          boxShadow: t>=T.marcas ? '0 20px 50px rgba(251,140,0,0.14)':'0 6px 20px rgba(15,23,42,0.05)',
          opacity: ap(T.marcas - 0.8, 0.6),
        }}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>
            TIPO DE COMPRA · LEASING
          </div>
          <div style={{display:'flex', alignItems:'center', gap:14, marginTop:16}}>
            <div style={{
              width:28, height:28, borderRadius:7,
              border:`2px solid ${t>=T.marcas ? '#CBD5E1':'#0085FF'}`,
              background: t>=T.marcas ? 'transparent':'#0085FF',
              transition:'none',
              transform:`scale(${1 + 0.10*Math.sin(clamp((t-T.marcas)/0.5,0,1)*Math.PI)})`,
            }}/>
            <span style={{fontSize:22, color: t>=T.marcas ? '#94A3B8':'#0F172A'}}>
              Disponible en contabilidad automática
            </span>
          </div>
        </div>
      </div>

      {/* El generador con su selector: el mismo sitio, otra fuente */}
      <div style={{position:'absolute', left:850, top:250, width:930, opacity:ap(T.nodesap,0.6)}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/Accounting" title="Generar asientos">
          <div style={{background:'#fff', padding:'22px 26px', minHeight:520}}>

            {/* El selector [Automáticos | Manuales] */}
            <div style={{
              display:'inline-flex', borderRadius:10, overflow:'hidden',
              border:'1px solid #E2E8F0', opacity:ap(T.selector-0.8,0.5),
            }}>
              {['Automáticos','Manuales'].map((m,i)=>{
                const elegido = (i===1) === (t >= T.selector);
                return (
                  <div key={m} style={{
                    padding:'11px 20px', fontSize:19,
                    background: elegido ? '#0085FF' : '#fff',
                    color: elegido ? '#fff' : '#64748B',
                    fontWeight: elegido ? 600 : 400,
                  }}>{m}</div>
                );
              })}
            </div>

            {/* La lista: existe, y viene SIN premarcar */}
            <div style={{marginTop:22, opacity: ap(T.selector+0.4, 0.6)}}>
              {[
                { op:'Leasing furgoneta · Renting Sur', imp:'  512,00' },
                { op:'Leasing maquinaria · BBVA',       imp:'1.340,00' },
                { op:'Compra elevador · Talleres SL',   imp:'2.900,00' },
              ].map((f,i)=>{
                const p = ap(T.selector + 0.5 + i*0.18, 0.45);
                return (
                  <div key={i} style={{
                    display:'grid', gridTemplateColumns:'34px 1fr 220px 130px', alignItems:'center', gap:14,
                    padding:'16px 0', borderTop: i ? '1px solid #F1F5F9':'none',
                    opacity:p, transform:`translateY(${(1-p)*12}px)`,
                  }}>
                    {/* La casilla VACÍA: es la idea del bloque */}
                    <div style={{
                      width:24, height:24, borderRadius:6, border:'2px solid #CBD5E1',
                      boxShadow: t>=T.nomarca && t<T.nomarca+1.4 ? '0 0 0 4px rgba(251,140,0,0.22)':'none',
                    }}/>
                    <span style={{fontSize:20, color:'#0F172A'}}>{f.op}</span>
                    {/* El hueco de la cuenta, vacío: lo que decide el humano */}
                    <span className="f-mono" style={{
                      fontSize:18,
                      color: t>=T.decides ? '#FB8C00' : '#CBD5E1',
                      borderBottom:`2px dashed ${t>=T.decides ? '#FB8C00':'#E2E8F0'}`,
                      paddingBottom:2,
                    }}>{t>=T.decides ? 'elige la cuenta' : '—'}</span>
                    <span className="f-mono" style={{fontSize:19, textAlign:'right', color:'#0F172A'}}>{f.imp} €</span>
                  </div>
                );
              })}
            </div>

            <div className="f-plex" style={{
              marginTop:26, fontSize:30, fontWeight:600, color:'#0F172A',
              opacity: ap(T.nomarca, 0.6),
            }}>Nada viene premarcado</div>
            <div style={{fontSize:20, color:'#64748B', marginTop:6, opacity:ap(T.nomarca+0.4,0.6)}}>
              La máquina propone. Marcar es tu gesto.
            </div>
          </div>
        </BrowserChrome>
      </div>

    </SlideCanvas>
  );
}
Object.assign(window, { EscenaCC03 });