// === Escena 01 — Contrato: para quién es, qué promete, cómo se entra y la frase que se queda ===
// Quién / cuánto / desde cuándo, y reclamar sin escribir. Después la entrada real: menú «Más» →
// «Utilidades» → fila «Por cobrar» (UtilidadesSubpage.razor:62-64; PymesPage.razor:101-105).
// Cierra con la Única Cosa como promesa.
function EscenaPC01({ t }){
  const G = GUION[0];
  const T = {
    debe:B(G,'te debe dinero'),           // "alguien te debe dinero"
    quien:B(G,'quién,'),                   // "quién"
    cuanto:B(G,'cuánto y'),                // "cuánto"
    desde:B(G,'desde cuándo'),             // "desde cuándo"
    reclamar:B(G,'reclamarlo sin'),        // "reclamarlo sin escribir el mensaje"
    para:B(G,'Es para quien'),             // "Es para quien lleva los cobros"
    entra:B(G,'Se entra por'),             // "Se entra por" -> la ventana sustituye a las tarjetas
    utilidades:B(G,'Utilidades,'),         // "Utilidades" -> se marca en el menú y se abre la lista
    porCobrar:B(G,'Por cobrar.'),          // "Por cobrar" -> la fila se marca y se pulsa
    idea:B(G,'se lee así'),                 // "Todo cabe en una idea" -> la ventana se atenúa
    arriba:B(G,'arriba, lo que'),          // "arriba, lo que más tiempo lleva vencido"
    lado:B(G,'Al lado'),                   // "Al lado, el botón para reclamarlo"
  };

  const sale = clamp((t - T.entra) / 0.6, 0, 1);              // salen las tarjetas del contrato
  const ven = ap(t, T.entra + 0.2, 0.9);                      // entra la ventana
  const atenua = 1 - 0.93 * ap(t, T.idea, 0.9);                // la ventana se queda detrás

  const tres = [
    { t:T.quien,  ico:'person',   txt:'Quién' },
    { t:T.cuanto, ico:'euro',     txt:'Cuánto' },
    { t:T.desde,  ico:'event',    txt:'Desde cuándo' },
  ];

  const MENU = [
    { ico:'handyman',    txt:'Utilidades' },
    { ico:'draw',        txt:'Firmas' },
    { ico:'leaderboard', txt:'Análisis' },
    { ico:'folder',      txt:'Drive' },
    { ico:'settings',    txt:'Configuración' },
    { ico:'science',     txt:'Labs' },
  ];
  const UTIL = [
    { ico:'update',          t:'Ponerse al día',   d:'Recupera meses atrasados: te va pidiendo lo que falta hasta dejar tu empresa al corriente.' },
    { ico:'pending_actions', t:'Por cobrar',       d:'Qué facturas te deben tus clientes y desde cuándo, para reclamar con criterio.', id:'pc' },
    { ico:'account_balance', t:'Liquidación de IVA', d:'Calcula cuánto IVA pagas o te devuelven cada trimestre a partir de tus facturas.' },
    { ico:'rule',            t:'Reconciliar IVA',  d:'Compara el IVA que tienes registrado con lo que ya declaraste y detecta descuadres.' },
    { ico:'file_download',   t:'Exportación',      d:'Descarga en Excel tus libros de ventas y compras y los extractos de banco del periodo, para tu asesoría.' },
    { ico:'fact_check',      t:'Existencia de proveedores', d:'Sube un Excel (Nombre y NIF) y comprueba cuáles ya existen como proveedores tuyos.' },
  ];
  const menuSel = ap(t, T.utilidades, 0.5);
  const lista = ap(t, T.utilidades + 0.4, 0.8);
  const filaSel = ap(t, T.porCobrar, 0.5);
  const clic = T.porCobrar + 0.6;

  return (
    <Fondo>
      <Cabecera t={t} eyebrow="DINAUP · PYMES · UTILIDADES" titulo="Lo que te deben"/>

      {/* ── Contrato: tres preguntas y la promesa ── */}
      {sale < 1 && (
        <div style={{ position:'absolute', inset:0, opacity:1 - sale }}>
          <div style={{ position:'absolute', left:0, right:0, top:260, display:'flex', justifyContent:'center', gap:30 }}>
            {tres.map((p, i) => {
              const e = ap(t, p.t, 0.7);
              return (
                <div key={i} style={{ width:430, height:150, borderRadius:18, background:'#fff', border:`1px solid ${PC.borde}`, boxShadow:'0 14px 34px rgba(15,23,42,0.06)',
                  display:'flex', alignItems:'center', gap:22, padding:'0 34px', boxSizing:'border-box', opacity:e, transform:`translateY(${(1 - e) * 14}px)` }}>
                  <Ico n={p.ico} s={46} c={PC.azul}/>
                  <span className="f-plex" style={{ fontSize:38, fontWeight:700, color:'#0F172A' }}>{p.txt}</span>
                </div>
              );
            })}
          </div>
          {(() => { const e = ap(t, T.reclamar, 0.8); return (
            <div style={{ position:'absolute', left:0, right:0, top:470, display:'flex', justifyContent:'center', opacity:e, transform:`translateY(${(1 - e) * 12}px)` }}>
              <div style={{ display:'flex', alignItems:'center', gap:20, padding:'22px 34px', borderRadius:18, background:'#fff', border:`1px solid ${PC.borde}` }}>
                <BotonEmail/><BotonWa/>
                <span className="f-plex" style={{ fontSize:32, fontWeight:600, color:'#0F172A', marginLeft:8 }}>Reclamar, sin escribir el mensaje</span>
              </div>
            </div>
          ); })()}
          {(() => { const e = ap(t, T.para, 0.8); return (
            <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:640, textAlign:'center', fontSize:28, color:'#64748B', opacity:e }}>
              Para quien lleva los cobros: el dueño o la administración.
            </div>
          ); })()}
        </div>
      )}

      {/* ── La entrada: Más → Utilidades → Por cobrar ── */}
      {ven > 0 && (
        <Ventana y={150 + (1 - ven) * 16} op={ven * atenua} url={t < clic ? 'play.dinaup.com/App/Pymes/Tools' : 'play.dinaup.com/App/Pymes/Receivables'}>
          <div style={{ position:'absolute', left:0, top:0, bottom:0, width:330, background:'#fafbfc', borderRight:`1px solid ${PC.borde}`, padding:'26px 18px', boxSizing:'border-box' }}>
            <div style={{ fontSize:15, fontWeight:700, letterSpacing:'1.6px', color:PC.gris, padding:'0 14px 12px' }}>MÁS</div>
            {MENU.map((m, i) => {
              const on = i === 0 ? menuSel : 0;
              return (
                <div key={m.txt} style={{ display:'flex', alignItems:'center', gap:16, height:54, padding:'0 14px', borderRadius:8,
                  background:`rgba(29,115,226,${0.10 * on})`, color: on > 0.5 ? PC.azul : PC.texto }}>
                  <Ico n={m.ico} s={26} c={on > 0.5 ? PC.azul : '#7a8494'}/>
                  <span style={{ fontSize:20, fontWeight: on > 0.5 ? 500 : 400 }}>{m.txt}</span>
                </div>
              );
            })}
          </div>

          {lista > 0 && (
            <div style={{ position:'absolute', left:370, top:28, width:1290, background:'#fff', borderRadius:12, border:`1px solid ${PC.borde}`,
              boxShadow:'0 2px 8px rgba(15,23,42,0.05)', opacity:lista, transform:`translateY(${(1 - lista) * 12}px)`, padding:'22px 28px 10px', boxSizing:'border-box' }}>
              <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                <Ico n="handyman" s={30} c={PC.azul}/>
                <div>
                  <div style={{ fontSize:24, fontWeight:500 }}>Utilidades</div>
                  <div style={{ fontSize:16, color:PC.gris, marginTop:2 }}>Herramientas puntuales para ponerte al día, cobrar y cuadrar tu contabilidad.</div>
                </div>
              </div>
              <div style={{ marginTop:14 }}>
                {UTIL.map((u, i) => {
                  const on = u.id === 'pc' ? filaSel : 0;
                  return (
                    <div key={u.t} style={{ display:'flex', alignItems:'center', gap:18, height:90, padding:'0 16px', borderTop: i ? `1px solid ${PC.base200}` : 'none',
                      borderRadius:8, background:`rgba(29,115,226,${0.07 * on})`, boxShadow: on > 0 ? `inset 0 0 0 ${2 * on}px rgba(29,115,226,0.6)` : 'none' }}>
                      <Ico n={u.ico} s={28} c={on > 0.5 ? PC.azul : '#7a8494'}/>
                      <div style={{ flex:1, minWidth:0 }}>
                        <div style={{ fontSize:20, fontWeight:500, color: on > 0.5 ? PC.azul : PC.tinta }}>{u.t}</div>
                        <div style={{ fontSize:16, color:PC.gris, marginTop:3, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{u.d}</div>
                      </div>
                      <Ico n="chevron_right" s={26} c={on > 0.5 ? PC.azul : '#9aa3af'}/>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
          <Cursor t={t} puntos={[{ t:T.utilidades - 0.6, x:520, y:420 }, { t:T.utilidades, x:150, y:83 }, { t:T.porCobrar - 0.2, x:150, y:83 }, { t:T.porCobrar + 0.5, x:560, y:280 }]}
                  clicks={[T.utilidades + 0.05, clic]}/>
        </Ventana>
      )}

      <UnicaCosa t={t} t1={T.arriba} t2={T.lado} y={430}/>
    </Fondo>
  );
}
Object.assign(window, { EscenaPC01 });