// === escena-01 — El mes de teclear (CONTRATO) ===
// Beats del align (toma borrador, 40,25 s). Anclados a su frase: una toma nueva se recalibra sola.

function EscenaCC01({ t }){

  const T = {
    pila:     0.10,   // "Cada mes llega la misma pila"
    origenes: 5.79,   // "cobros, pagos y nóminas"
    unaauna: 10.46,   // "una a una"
    cuenta:  11.97,   // "Tecleas la cuenta"
    cuadras: 14.96,   // "cuadras el debe"
    duda:    20.32,   // "volver a mirarlo todo"
    marca:   22.41,   // "Esto es la contabilidad de Dinaup"
    dentro:  26.88,   // "la factura ya está dentro"
    solo:    29.95,   // "no hace falta escribirlo"
    uc1:     32.21,   // ÚNICA COSA · mitad 1 (promesa)
    uc2:     35.06,   // mitad 2
    salida:  37.70,   // "Empecemos por la primera mitad"
  };

  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));
  const ORIGENES = [
    { n:'Facturas emitidas',  i:'show_chart' },
    { n:'Facturas recibidas', i:'payments' },
    { n:'Cobros',             i:'wallet' },
    { n:'Pagos',              i:'send' },
    { n:'Nóminas',            i:'badge' },
  ];

  // Todo lo del problema se apaga cuando entra la marca: el bloque muere, no se acumula.
  const vivoProblema = 1 - ap(T.marca, 0.7);

  return (
    <SlideCanvas variant={t < T.marca ? 'problem' : 'promise'}>

      <DemoHeader t={t} eyebrow="CONTABILIDAD DE DINAUP" title="Cada mes, la misma pila" />

      {/* ── La pila de documentos por contabilizar ── */}
      <div style={{position:'absolute', left:150, top:250, width:640, opacity:vivoProblema}}>
        {ORIGENES.map((o,i)=>{
          const p = ap(T.origenes + i*0.22, 0.5, Easing.easeOutBack);
          return (
            <div key={o.n} style={{
              display:'flex', alignItems:'center', justifyContent:'space-between',
              padding:'20px 26px', marginBottom:12,
              background:'#fff', borderRadius:14, border:'1px solid #E2E8F0',
              boxShadow:'0 6px 20px rgba(15,23,42,0.06)',
              opacity:p, transform:`translateX(${(1-p)*-30}px)`,
            }}>
              <span className="f-plex" style={{fontSize:24, color:'#0F172A'}}>{o.n}</span>
              <span className="f-mono" style={{fontSize:19, color:'#EF4444'}}>sin asiento</span>
            </div>
          );
        })}
      </div>

      {/* ── El asiento tecleado a mano: campo a campo ── */}
      <div style={{
        position:'absolute', left:860, top:250, width:900,
        opacity: vivoProblema * ap(T.unaauna, 0.6),
      }}>
        <div style={{
          background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
          boxShadow:'0 20px 50px rgba(15,23,42,0.10)', padding:'26px 30px',
        }}>
          <div className="f-mono" style={{fontSize:16, color:'#64748B', letterSpacing:'.08em'}}>ASIENTO NUEVO</div>

          {[
            { l:'Subcuenta', v:'430000012 · Cliente', beat:T.cuenta },
            { l:'Debe',      v:'1.210,00',            beat:T.cuadras },
            { l:'Subcuenta', v:'700000001 · Ventas',  beat:T.cuadras + 0.5 },
            { l:'Haber',     v:'1.000,00',            beat:T.cuadras + 1.0 },
            { l:'Subcuenta', v:'477000021 · iva',     beat:T.cuadras + 1.5 },
            { l:'Haber',     v:'210,00',              beat:T.cuadras + 2.0 },
          ].map((f,i)=>{
            const p = ap(f.beat, 0.35);
            const activo = t >= f.beat && t < f.beat + 1.2;
            return (
              <div key={i} style={{
                display:'grid', gridTemplateColumns:'190px 1fr', alignItems:'center', gap:16,
                padding:'13px 14px', marginTop:10, borderRadius:10,
                background: activo ? 'rgba(0,133,255,0.07)' : '#F8FAFC',
                border:`1px solid ${activo ? 'rgba(0,133,255,0.4)' : '#EEF2F7'}`,
                opacity:p,
              }}>
                <span style={{fontSize:18, color:'#64748B'}}>{f.l}</span>
                <span className="f-mono" style={{fontSize:20, color:'#0F172A'}}>{f.v}</span>
              </div>
            );
          })}

          {/* La duda: al terminar, no sabes si está bien */}
          <div style={{
            marginTop:20, padding:'16px 18px', borderRadius:12,
            background:'rgba(239,68,68,0.07)', border:'1px solid rgba(239,68,68,0.32)',
            opacity: ap(T.duda, 0.6), transform:`translateY(${(1-ap(T.duda,0.6))*14}px)`,
          }}>
            <span className="f-plex" style={{fontSize:24, color:'#EF4444'}}>
              ¿está bien? · hay que volver a mirarlo todo
            </span>
          </div>
        </div>
      </div>

      {/* ── EL GIRO: la factura ya está dentro, el asiento se dibuja solo ── */}
      {t >= T.marca - 0.5 && (
        <div style={{position:'absolute', inset:0, opacity: ap(T.marca, 0.7)}}>

          <div style={{position:'absolute', left:'50%', top:210, transform:'translateX(-50%)'}}>
            <DinaupLogo size={46} />
          </div>

          {/* La factura, ya dentro del programa */}
          <div style={{
            position:'absolute', left:300, top:330, width:560,
            opacity: ap(T.dentro, 0.6), transform:`translateY(${(1-ap(T.dentro,0.6))*20}px)`,
          }}>
            <BrowserChrome url="play.dinaup.com/App/Pymes/Sales" title="Factura FC-35810">
              <div style={{padding:'22px 26px', background:'#fff'}}>
                <div style={{fontSize:22, color:'#0F172A', fontWeight:600}}>FC-35810</div>
                <div style={{fontSize:19, color:'#64748B', marginTop:6}}>Talleres Marbán, S.L.</div>
                <div className="f-mono" style={{fontSize:30, color:'#0F172A', marginTop:14}}>1.210,00 €</div>
              </div>
            </BrowserChrome>
          </div>

          {/* El conector SE DIBUJA (dasharray), no aparece */}
          <svg style={{position:'absolute', left:860, top:430, width:220, height:60, overflow:'visible'}}>
            <path d="M0,30 L200,30" stroke="#0085FF" strokeWidth="3" fill="none"
              strokeDasharray="200" strokeDashoffset={200 * (1 - ap(T.solo, 0.7, Easing.easeInOutCubic))} />
            <polygon points="200,30 188,24 188,36" fill="#0085FF" opacity={ap(T.solo + 0.6, 0.3)} />
          </svg>

          {/* El asiento, que no hace falta escribir */}
          <div style={{
            position:'absolute', left:1090, top:330, width:520,
            opacity: ap(T.solo + 0.4, 0.6),
          }}>
            <div style={{
              background:'#fff', borderRadius:16, border:'1px solid rgba(16,185,129,0.4)',
              boxShadow:'0 24px 60px rgba(16,185,129,0.16)', padding:'22px 26px',
            }}>
              <div className="f-mono" style={{fontSize:15, color:'#10B981', letterSpacing:'.08em'}}>ASIENTO 1.284</div>
              {[['430 Clientes','1.210,00',''],['700 Ventas','','1.000,00'],['477 iva','','210,00']].map((r,i)=>(
                <div key={i} style={{
                  display:'grid', gridTemplateColumns:'1fr 110px 110px', gap:10,
                  padding:'10px 0', borderTop: i ? '1px solid #F1F5F9' : 'none',
                  fontSize:18, color:'#0F172A',
                  opacity: ap(T.solo + 0.5 + i*0.12, 0.35),
                }}>
                  <span>{r[0]}</span>
                  <span className="f-mono" style={{textAlign:'right'}}>{r[1]}</span>
                  <span className="f-mono" style={{textAlign:'right'}}>{r[2]}</span>
                </div>
              ))}
            </div>
          </div>

          {/* LA ÚNICA COSA — promesa */}
          <div style={{position:'absolute', left:0, right:0, top:720, textAlign:'center'}}>
            <div className="f-plex grad-text" style={{
              fontSize:70, fontWeight:800, letterSpacing:'-0.02em', lineHeight:1.15,
              opacity: ap(T.uc1, 0.6), transform:`translateY(${(1-ap(T.uc1,0.6))*18}px)`,
            }}>Tus asientos salen de tus facturas.</div>
            <div className="f-plex" style={{
              fontSize:70, fontWeight:800, letterSpacing:'-0.02em', color:'#0F172A', marginTop:6,
              opacity: ap(T.uc2, 0.6), transform:`translateY(${(1-ap(T.uc2,0.6))*18}px)`,
            }}>Y se comprueban contra ellas.</div>
          </div>
        </div>
      )}

    </SlideCanvas>
  );
}

Object.assign(window, { EscenaCC01 });