import { baseTemplate, heading, primaryButton, BRAND_COLORS as C } from './base.js';

export function paymentFailedEmail(data: { nombre: string; amount: number; plan: string }): string {
  return baseTemplate(`
    ${heading('Problema con tu pago')}
    <p style="color:${C.textPrimary};margin:0 0 16px;">Hola <strong>${data.nombre}</strong>,</p>
    <p style="color:${C.textPrimary};margin:0 0 20px;">No pudimos procesar tu pago. Esto suele deberse a fondos insuficientes, tarjeta vencida o rechazo del banco emisor.</p>
    <div style="background-color:#fef2f2;border-left:4px solid #ef4444;border-radius:8px;padding:16px 20px;margin:20px 0;">
      <p style="margin:0 0 8px;color:${C.textMuted};font-size:13px;">Monto pendiente</p>
      <p style="margin:0 0 12px;color:${C.textPrimary};font-size:22px;font-weight:700;">$${data.amount.toLocaleString('es-MX', { minimumFractionDigits: 2 })} MXN</p>
      <p style="margin:0;color:${C.textPrimary};"><span style="color:${C.textMuted};">Plan:</span> <strong>${data.plan}</strong></p>
    </div>
    <p style="color:${C.textPrimary};margin:0 0 24px;">Verifica tu método de pago en la plataforma para que tu servicio no se interrumpa:</p>
    ${primaryButton('Actualizar método de pago', 'https://horuxfin.com/configuracion/suscripcion')}
    <p style="color:${C.textMuted};margin:24px 0 0;font-size:13px;">Si necesitas ayuda, responde a este correo y nuestro equipo te contactará.</p>
  `);
}
