// === Escena 06 — Recapitulación, lo que no hace, la llamada y el eco ===
// Cuatro ideas con su icono, sincronizadas con «Uno… Dos… Tres… Cuatro». Lo que no hace: nada se
// envía solo (no hay envío programado: cada recordatorio sale de un clic). La llamada: Más →
// Utilidades → Por cobrar. Cierra con la Única Cosa.
function EscenaPC06({ t }){
  const G = GUION[5];
  const T = {
    ideas:B(G,'en cuatro ideas'),          // "en cuatro ideas"
    uno:B(G,'Uno:'),                       // "Uno: arriba, cuánto te deben"
    dos:B(G,'Dos:'),                       // "Dos: la lista por tramos"
    tres:B(G,'Tres:'),                     // "Tres: filtros"
    cuatro:B(G,'Cuatro:'),                 // "Cuatro: dos botones por cliente"
    noHace:B(G,'Y una cosa'),              // "Y una cosa que no hace"
    nada:B(G,'nada se envía'),             // "nada se envía solo"
    abre:B(G,'Abre Utilidades'),           // "Abre Utilidades, Por cobrar"
    arriba:B(G,'Arriba,'),                 // "Arriba, lo que más tiempo lleva vencido"
    lado:B(G,'Al lado'),                   // "Al lado, el botón para reclamarlo"
  };
  const salida = ap(t, T.arriba - 0.4, 0.9);
  const dimIdeas = 1 - 0.55 * ap(t, T.noHace, 0.6);

  const ideas = [
    { t:T.uno,    ico:'payments',             txt:'Cuánto te deben y cuánto está vencido' },
    { t:T.dos,    ico:'format_list_bulleted', txt:'La lista por tramos, lo más viejo primero' },
    { t:T.tres,   ico:'filter_alt',           txt:'Filtros: nombre, antigüedad e importe' },
    { t:T.cuatro, ico:'send',                 txt:'Email o WhatsApp, ya escrito' },
  ];
  const mini = (i) => {
    if (i === 0) return <div style={{ display:'flex', gap:10 }}><Kpi k={KPIS[0]} x={0} y={0} w={270} h={86} valorSize={22}/><div style={{ width:200 }}/></div>;
    if (i === 1) return (
      <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
        {['critical', 'warning', 'recent', 'ok'].map(k => <div key={k} style={{ width:300, height:16, borderRadius:4, background:TRAMOS[k].bg, borderLeft:`5px solid ${TRAMOS[k].borde}` }}/>)}
      </div>
    );
    if (i === 2) return (
      <div style={{ display:'flex', gap:8 }}>
        {['Buscar cliente...', 'Antigüedad', 'Importe'].map(s => <span key={s} style={{ fontFamily:ROBOTO, fontSize:15, color:'#8a93a0', border:'1px solid #c9d1db', borderRadius:6, padding:'8px 10px', background:'#fff', whiteSpace:'nowrap' }}>{s}</span>)}
      </div>
    );
    return <div style={{ display:'flex', gap:8, fontFamily:ROBOTO }}><BotonEmail/><BotonWa/></div>;
  };

  return (
    <Fondo>
      <div style={{ position:'absolute', inset:0, opacity:1 - salida }}>
        <Cabecera t={t} eyebrow="EN RESUMEN" titulo="Lo que acabas de ver"/>
        <div style={{ position:'absolute', left:150, top:190, width:1620, display:'grid', gridTemplateColumns:'1fr 1fr', gap:28 }}>
          {ideas.map((d, i) => {
            const e = ap(t, d.t, 0.8);
            return (
              <div key={i} style={{ position:'relative', height:220, background:'#fff', borderRadius:18, border:`1px solid ${PC.borde}`, boxShadow:'0 14px 34px rgba(15,23,42,0.06)',
                padding:'26px 32px', boxSizing:'border-box', opacity:e * dimIdeas, transform:`translateY(${(1 - e) * 14}px)` }}>
                <div style={{ display:'flex', alignItems:'center', gap:18 }}>
                  <div style={{ width:54, height:54, borderRadius:14, background:'rgba(29,115,226,0.10)', display:'flex', alignItems:'center', justifyContent:'center' }}><Ico n={d.ico} s={30} c={PC.azul}/></div>
                  <span className="f-mono" style={{ fontSize:18, fontWeight:700, color:'#94A3B8' }}>{i + 1}</span>
                  <span className="f-plex" style={{ fontSize:28, fontWeight:700, color:'#0F172A' }}>{d.txt}</span>
                </div>
                <div style={{ position:'absolute', left:32, bottom:28, height:86, display:'flex', alignItems:'center' }}>{mini(i)}</div>
              </div>
            );
          })}
        </div>

        {/* Lo que no hace */}
        {(() => { const e = ap(t, T.nada, 0.8); return e > 0 && (
          <div style={{ position:'absolute', left:0, right:0, top:690, display:'flex', justifyContent:'center', opacity:e * (1 - ap(t, T.abre - 0.3, 0.6) * 0.5), transform:`translateY(${(1 - e) * 12}px)` }}>
            <div style={{ display:'flex', alignItems:'center', gap:18, padding:'20px 34px', borderRadius:16, background:'#fff', border:`2px solid ${PC.naranja}` }}>
              <Ico n="touch_app" s={36} c={PC.naranjaTxt}/>
              <span className="f-plex" style={{ fontSize:30, fontWeight:700, color:'#0F172A' }}>Nada se envía solo:</span>
              <span className="f-plex" style={{ fontSize:30, color:'#334155' }}>cada recordatorio lo mandas tú.</span>
            </div>
          </div>
        ); })()}

        {/* La llamada */}
        {(() => { const e = ap(t, T.abre, 0.8); return e > 0 && (
          <div style={{ position:'absolute', left:0, right:0, top:840, display:'flex', flexDirection:'column', alignItems:'center', gap:14, opacity:e, transform:`translateY(${(1 - e) * 12}px)` }}>
            <div style={{ display:'flex', alignItems:'center', gap:14, fontFamily:ROBOTO, fontSize:30, color:PC.tinta }}>
              <span>Más</span><Ico n="chevron_right" s={30} c="#94A3B8"/>
              <span style={{ display:'flex', alignItems:'center', gap:8 }}><Ico n="handyman" s={30} c={PC.texto}/>Utilidades</span><Ico n="chevron_right" s={30} c="#94A3B8"/>
              <span style={{ display:'flex', alignItems:'center', gap:8, color:PC.azul, fontWeight:500 }}><Ico n="pending_actions" s={30} c={PC.azul}/>Por cobrar</span>
            </div>
            <div className="f-mono" style={{ fontSize:20, color:'#64748B' }}>play.dinaup.com/App/Pymes/Receivables</div>
          </div>
        ); })()}
      </div>

      <UnicaCosa t={t} t1={T.arriba} t2={T.lado} y={400}/>
      {(() => { const e = ap(t, T.lado + 1.0, 0.9); return e > 0 && (
        <div style={{ position:'absolute', left:0, right:0, top:700, display:'flex', justifyContent:'center', opacity:e }}><DinaupLogo size={46}/></div>
      ); })()}
    </Fondo>
  );
}
Object.assign(window, { EscenaPC06 });