// === Escena 05 — Reclamar (clímax) ===
// «Email» abre la plantilla de recordatorio de la empresa (por defecto «Email recordatorio de pago»,
// DemoUp.MyDinaup/DocDinamicos) en el visor de documentos, con «Imprimir», «Enviar por email» y
// «Cerrar» (DnzDynamicDocumentView.razor:80-98). El botón verde abre «Recordatorio de pago»
// (RecordatorioWhatsAppDialog.razor): pestañas Cordial · Formal · Directo · Urgente, el texto con
// el total y cada factura, y «Enviar por WhatsApp», que abre wa.me con el texto: el contacto lo
// eliges tú. Los botones y pestañas de Radzen Material van en mayúsculas.
function EscenaPC05({ t }){
  const G = GUION[4];
  const T = {
    botones:B(G,'dos botones'),            // "Cada cliente tiene dos botones"
    azul:B(G,'El azul'),                   // "El azul, Email" -> clic en EMAIL
    abre:B(G,'abre tu plantilla'),         // "abre tu plantilla de recordatorio de pago"
    total:B(G,'el total pendiente'),       // "el total pendiente"
    detalle:B(G,'el detalle'),             // "el detalle de cada factura"
    pulsasEmail:B(G,'y pulsas Enviar'),    // "y pulsas Enviar por email"
    verde:B(G,'El verde'),                 // "El verde es WhatsApp" -> clic en el botón verde
    seAbre:B(G,'Se abre el'),              // "Se abre el recordatorio"
    cordial:B(G,'cordial,'),               // "cordial"
    formal:B(G,'formal,'),                 // "formal"
    directo:B(G,'directo'),                // "directo"
    urgente:B(G,'urgente.'),               // "urgente"
    cambias:B(G,'Cambias de'),             // "Cambias de pestaña y el texto cambia" -> clic en FORMAL
    mensaje:B(G,'El mensaje ya'),          // "El mensaje ya lleva el total"
    cadaFac:B(G,'cada factura con'),       // "y cada factura con su importe"
    pulsasWa:B(G,'Pulsas Enviar'),         // "Pulsas Enviar por WhatsApp"
    abreWa:B(G,'se abre WhatsApp'),        // "se abre WhatsApp con el texto escrito"
    contacto:B(G,'Tú eliges'),             // "Tú eliges el contacto y lo envías"
    arriba:B(G,'De la deuda'),             // "De la deuda al mensaje" (en pantalla, la frase que lo resume)
    lado:B(G,'sin escribir una línea'),  // "sin escribir una línea"
  };
  const clicEmail = T.azul + 0.9, clicEnviar = T.pulsasEmail + 0.9, cierraEmail = T.pulsasEmail + 1.6;
  const clicWa = T.verde + 0.8, clicFormal = T.cambias + 0.6, clicEnviarWa = T.pulsasWa + 1.3;

  const dlgEmail = ap(t, T.abre - 0.2, 0.6) * (1 - ap(t, cierraEmail, 0.5));
  const dlgWa = ap(t, T.seAbre - 0.4, 0.6) * (1 - ap(t, clicEnviarWa + 0.3, 0.5));
  const scrim = Math.max(dlgEmail, dlgWa);
  const resultado = ap(t, T.abreWa, 0.8);
  const final = ap(t, T.arriba - 0.3, 0.9);

  const tabs = [
    { id:'cordial', txt:'CORDIAL', ico:'sentiment_satisfied', t:T.cordial },
    { id:'formal',  txt:'FORMAL',  ico:'business_center',     t:T.formal },
    { id:'directo', txt:'DIRECTO', ico:'priority_high',       t:T.directo },
    { id:'urgente', txt:'URGENTE', ico:'warning',             t:T.urgente },
  ];
  const sel = t >= clicFormal ? 1 : 0;
  const cambio = ap(t, clicFormal, 0.6);

  const lineasFac = ['  - Factura #F-2026-0712 (11 jul): 380,00 €', '  - Factura #F-2026-0790 (28 ago): 240,00 €'];
  const MSG = {
    cordial:['Hola Bar La Plaza,', '', `Te escribimos desde ${EMPRESA} para recordarte que tienes facturas pendientes de pago por un total de @T.`, '', 'Detalle:', '@F', '', 'Si ya has realizado el pago, por favor ignora este mensaje.', '', 'Gracias,', EMPRESA],
    formal:['Estimado/a Bar La Plaza,', '', `Le contactamos desde ${EMPRESA} para informarle que tiene facturas pendientes de pago por un importe total de @T.`, '', 'Detalle de facturas:', '@F', '', 'Le rogamos proceda a la regularizacion a la mayor brevedad posible. Si el pago ya ha sido efectuado, le agradecemos que nos lo comunique.', '', 'Atentamente,', EMPRESA],
  };
  const realTotal = foco(t, T.mensaje + 0.6, T.cadaFac, 0.4), realFac = foco(t, T.cadaFac, T.pulsasWa, 0.4);
  const Mensaje = ({ k, op }) => (
    <div style={{ position:'absolute', left:22, top:18, width:740, padding:'14px 18px 26px', background:'#fff', borderRadius:12, borderTopLeftRadius:4,
      boxShadow:'0 1px 3px rgba(0,0,0,0.06)', fontSize:17, lineHeight:1.55, color:PC.tinta, opacity:op }}>
      {MSG[k].map((l, i) => {
        if (l === '') return <div key={i} style={{ height:12 }}/>;
        if (l === '@F') return lineasFac.map(f => <div key={f} style={{ whiteSpace:'pre', borderRadius:4, background:`rgba(29,115,226,${0.12 * realFac})` }}>{f}</div>);
        if (l.includes('@T')) { const [a, b] = l.split('@T'); return <div key={i}>{a}<span style={{ borderRadius:4, padding:'0 2px', background:`rgba(29,115,226,${0.16 * realTotal})`, fontWeight: realTotal > 0.5 ? 700 : 400 }}>620,00 €</span>{b}</div>; }
        return <div key={i}>{l}</div>;
      })}
      <span style={{ position:'absolute', right:12, bottom:6, fontSize:12, color:'#9aa3af' }}>10:24</span>
    </div>
  );

  return (
    <Fondo>
      <Cabecera t={t} eyebrow="4 · RECLAMAR" titulo="Email o WhatsApp, ya escrito"/>
      <Ventana op={1 - 0.93 * final}>
        <TituloPantalla op={0.6}/>
        <Tramo clave="critical" n={2} total={910} x={40} y={96} w={1620}/>
        <Cliente c={CLI.plaza} x={40} y={156} w={1620} conTabla realceBotones={foco(t, T.botones, T.azul, 0.4)}
                 realceEmail={foco(t, T.azul, T.verde, 0.4)} pulsoEmail={foco(t, clicEmail, clicEmail + 0.3, 0.15)}
                 realceWa={foco(t, T.verde, 99, 0.4)} pulsoWa={foco(t, clicWa, clicWa + 0.3, 0.15)}/>
        <Cliente c={CLI.alba} x={40} y={156 + 284} w={1620} op={0.5}/>

        {scrim > 0 && <div style={{ position:'absolute', inset:0, background:`rgba(15,23,42,${0.35 * scrim})` }}/>}

        {/* ── Visor del documento: «Email recordatorio de pago» ── */}
        {dlgEmail > 0 && (
          <div style={{ position:'absolute', left:350, top:30 + (1 - dlgEmail) * 12, width:1000, height:700, background:'#fff', borderRadius:10, opacity:dlgEmail,
            boxShadow:'0 24px 60px rgba(15,23,42,0.25)', overflow:'hidden' }}>
            <div style={{ height:60, display:'flex', alignItems:'center', padding:'0 24px', fontSize:21, fontWeight:500, borderBottom:`1px solid ${PC.borde}` }}>Email recordatorio de pago</div>
            <div style={{ position:'absolute', left:0, right:0, top:60, bottom:64, background:'#f6f9fc', overflow:'hidden' }}>
              <div style={{ position:'absolute', left:150, top:22, width:700, background:'#fff', borderRadius:8, boxShadow:'0 2px 5px rgba(0,0,0,0.05)', overflow:'hidden', fontFamily:"'Helvetica Neue', Arial, sans-serif" }}>
                <div style={{ background:'#0a2540', color:'#fff', textAlign:'center', padding:'20px 0', fontSize:21, fontWeight:700, letterSpacing:'1px' }}>{EMPRESA}</div>
                <div style={{ padding:'22px 34px', color:'#525f7f', fontSize:16, lineHeight:1.55 }}>
                  <div><b>Bar La Plaza</b>,</div>
                  <div style={{ marginTop:10 }}>Nos ponemos en contacto para actualizar la información relacionada con vuestra cuenta.</div>
                  <div style={{ marginTop:14, background:'#f7fafc', borderLeft:'4px solid #635BFF', padding:'12px 18px', borderRadius:4,
                    boxShadow: foco(t, T.total, T.detalle, 0.4) > 0 ? `0 0 0 ${3 * foco(t, T.total, T.detalle, 0.4)}px rgba(29,115,226,0.5)` : 'none' }}>
                    <div style={{ fontSize:13, color:'#8898aa', letterSpacing:'0.5px' }}>IMPORTE TOTAL PENDIENTE</div>
                    <div style={{ fontSize:26, fontWeight:700, color:'#0a2540', marginTop:2 }}>620,00 €</div>
                  </div>
                  <div style={{ marginTop:16, fontSize:15, fontWeight:700, color:'#32325d' }}>Detalle de facturas pendientes:</div>
                  <div style={{ marginTop:8, border:'1px solid #e6ebf1', borderRadius:4, fontSize:15,
                    boxShadow: foco(t, T.detalle, T.pulsasEmail, 0.4) > 0 ? `0 0 0 ${3 * foco(t, T.detalle, T.pulsasEmail, 0.4)}px rgba(29,115,226,0.5)` : 'none' }}>
                    <div style={{ display:'flex', background:'#f6f9fc', color:'#8898aa', fontSize:12, padding:'9px 12px' }}><span style={{ width:180 }}>FECHA</span><span style={{ flex:1 }}>Nº FACTURA</span><span>IMPORTE</span></div>
                    {[['11/07/2026', 'F-2026-0712', '380,00 €'], ['28/08/2026', 'F-2026-0790', '240,00 €']].map(r => (
                      <div key={r[1]} style={{ display:'flex', padding:'9px 12px', borderTop:'1px solid #eee', color:'#32325d' }}><span style={{ width:180 }}>{r[0]}</span><span style={{ flex:1 }}>{r[1]}</span><span>{r[2]}</span></div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
            <div style={{ position:'absolute', left:0, right:0, bottom:0, height:64, borderTop:`1px solid ${PC.borde}`, display:'flex', alignItems:'center', padding:'0 18px', gap:8 }}>
              <span style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 14px', color:PC.azul, fontSize:17, fontWeight:500, letterSpacing:'1px' }}><Ico n="print" s={22} c={PC.azul}/>IMPRIMIR</span>
              <span style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 14px', borderRadius:6, color:'#085786', fontSize:17, fontWeight:500, letterSpacing:'1px',
                background:`rgba(8,87,134,${0.12 * foco(t, T.pulsasEmail, cierraEmail + 1, 0.3)})` }}><Ico n="send" s={22} c="#085786"/>ENVIAR POR EMAIL</span>
              <span style={{ flex:1 }}/>
              <span style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 14px', color:PC.rojo, fontSize:17, fontWeight:500, letterSpacing:'1px' }}><Ico n="close" s={22} c={PC.rojo}/>CERRAR</span>
            </div>
          </div>
        )}

        {/* ── «Recordatorio de pago» por WhatsApp ── */}
        {dlgWa > 0 && (
          <div style={{ position:'absolute', left:450, top:24 + (1 - dlgWa) * 12, width:800, height:716, background:'#fff', borderRadius:10, opacity:dlgWa,
            boxShadow:'0 24px 60px rgba(15,23,42,0.25)', overflow:'hidden' }}>
            <div style={{ height:60, display:'flex', alignItems:'center', gap:12, padding:'0 24px', fontSize:21, fontWeight:500, borderBottom:`1px solid ${PC.borde}` }}>
              <div style={{ width:34, height:34, borderRadius:8, background:PC.wa, display:'flex', alignItems:'center', justifyContent:'center' }}><Ico n="chat" s={20} c="#fff"/></div>
              Recordatorio de pago
            </div>
            <div style={{ position:'absolute', left:20, right:20, top:76, height:76, borderRadius:14, border:`1px solid ${PC.borde}`, display:'flex', alignItems:'center', gap:16, padding:'0 18px' }}>
              <Avatar c={CLI.plaza} s={48}/>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:19, fontWeight:600 }}>Bar La Plaza</div>
                <div style={{ fontSize:15, color:PC.gris }}>2 facturas pendientes</div>
              </div>
              <div style={{ fontSize:26 }}>620,00 €</div>
            </div>
            <div style={{ position:'absolute', left:20, right:20, top:166, bottom:76, borderRadius:14, border:`1px solid ${PC.borde}`, overflow:'hidden' }}>
              <div style={{ height:54, display:'flex', borderBottom:`1px solid ${PC.base200}` }}>
                {tabs.map((tb, i) => {
                  const nom = foco(t, tb.t - 0.1, i < 3 ? tabs[i + 1].t - 0.1 : T.urgente + 0.8, 0.25);
                  const on = i === sel;
                  return (
                    <div key={tb.id} style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:8, fontSize:16, fontWeight:500, letterSpacing:'1px',
                      color: on ? PC.azul : PC.texto, borderBottom: on ? `3px solid ${PC.azul}` : '3px solid transparent', background:`rgba(29,115,226,${0.08 * nom})` }}>
                      <Ico n={tb.ico} s={22} c={on ? PC.azul : '#7a8494'}/>{tb.txt}
                    </div>
                  );
                })}
              </div>
              <div style={{ position:'absolute', left:16, right:16, top:68, height:330, background:PC.base100, borderRadius:12, overflow:'hidden' }}>
                <Mensaje k="cordial" op={1 - cambio}/>
                {cambio > 0 && <Mensaje k="formal" op={cambio}/>}
              </div>
              <div style={{ position:'absolute', left:0, right:0, top:414, display:'flex', justifyContent:'center' }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, background:PC.wa, color:'#fff', borderRadius:12, padding:'12px 30px', fontSize:17, fontWeight:600, letterSpacing:'1px',
                  boxShadow:'0 2px 8px rgba(37,211,102,0.3)', transform:`scale(${1 - 0.04 * foco(t, clicEnviarWa, clicEnviarWa + 0.3, 0.15)})` }}>
                  <WaLogo s={20}/>ENVIAR POR WHATSAPP
                </div>
              </div>
            </div>
            <div style={{ position:'absolute', right:18, bottom:14, display:'flex', alignItems:'center', gap:8, padding:'8px 14px', color:PC.rojo, fontSize:17, fontWeight:500, letterSpacing:'1px' }}>
              <Ico n="close" s={22} c={PC.rojo}/>CERRAR
            </div>
          </div>
        )}

        {/* ── Lo que pasa después: WhatsApp con el texto; el contacto lo eliges tú ── */}
        {resultado > 0 && (
          <div style={{ position:'absolute', left:470, top:250 + (1 - resultado) * 12, width:760, background:'#fff', borderRadius:16, border:`1px solid ${PC.borde}`,
            boxShadow:'0 24px 60px rgba(15,23,42,0.16)', padding:'26px 30px', opacity:resultado }}>
            <div style={{ display:'flex', alignItems:'center', gap:16 }}>
              <div style={{ width:52, height:52, borderRadius:99, background:PC.wa, display:'flex', alignItems:'center', justifyContent:'center' }}><WaLogo s={28}/></div>
              <div className="f-plex" style={{ fontSize:26, fontWeight:700, color:'#0F172A' }}>WhatsApp, con el texto escrito</div>
            </div>
            <div style={{ marginTop:16, padding:'14px 18px', borderRadius:10, background:PC.base100, fontSize:17, lineHeight:1.5, color:PC.texto }}>
              Estimado/a Bar La Plaza,<br/>Le contactamos desde {EMPRESA} para informarle…
            </div>
            <div style={{ marginTop:16, display:'flex', alignItems:'center', gap:12, opacity:ap(t, T.contacto, 0.6) }}>
              <Ico n="person_search" s={28} c={PC.azul}/>
              <span className="f-plex" style={{ fontSize:22, fontWeight:600, color:'#0F172A' }}>Tú eliges el contacto y lo envías</span>
            </div>
          </div>
        )}

        <Cursor t={t} puntos={[
          { t:T.azul, x:1300, y:300 }, { t:clicEmail - 0.1, x:1525, y:200 }, { t:T.pulsasEmail, x:1100, y:500 }, { t:clicEnviar - 0.1, x:650, y:697 },
          { t:T.verde, x:1100, y:500 }, { t:clicWa - 0.1, x:1607, y:200 }, { t:T.cambias, x:1000, y:600 }, { t:clicFormal - 0.1, x:755, y:217 },
          { t:T.pulsasWa, x:1000, y:500 }, { t:clicEnviarWa - 0.1, x:850, y:628 },
        ]} clicks={[clicEmail, clicEnviar, clicWa, clicFormal, clicEnviarWa]}/>
      </Ventana>

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