/**
 * Layout base de todos los emails. Espejea la identidad visual de horux360.com:
 *   - Gradiente primary→secondary (azul→morado) en el header
 *   - Tipografías Montserrat (headings) e Inter (body) cargadas vía Google Fonts
 *     (Apple Mail, Outlook desktop las respetan; Gmail las ignora y cae al
 *     stack sans-serif del sistema — ambos se ven correctos).
 *   - Ancho 600px, bordes redondeados, sombra suave
 *   - Footer en gris claro con color muted del design system
 *
 * Diseño limitado por restricciones de email HTML: usamos tablas + inline
 * styles, nada de flexbox/grid ni CSS externo. Las variables de CSS no
 * funcionan (Gmail las ignora), por eso los hex están hardcoded.
 */

// Tokens del design system de horux360.com — replicados aquí para los emails
const BRAND = {
  primary: '#2563EB',
  secondary: '#7C3AED',
  accent: '#10B981',
  textPrimary: '#1E293B',
  textMuted: '#64748B',
  bgLight: '#F8FAFC',
  bgWhite: '#FFFFFF',
  border: '#E2E8F0',
  gradient: 'linear-gradient(135deg, #2563EB 0%, #7C3AED 100%)',
};

// Una sola tipografia (Inter) para mantener consistencia con el design system
// del sitio. Stack fallback cubre los clientes que no soportan webfonts (Gmail).
// IMPORTANTE: usar comillas simples para envolver familias con espacios.
// Comillas dobles dentro de un style="..." rompen el atributo HTML.
const FONT = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";

export function baseTemplate(content: string): string {
  const year = new Date().getFullYear();
  return `<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { margin:0; padding:0; }
    a { color: ${BRAND.primary}; }
  </style>
</head>
<body style="margin:0;padding:0;background-color:${BRAND.bgLight};font-family:${FONT};color:${BRAND.textPrimary};">
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:${BRAND.bgLight};padding:32px 12px;">
    <tr>
      <td align="center">
        <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;background-color:${BRAND.bgWhite};border-radius:12px;overflow:hidden;box-shadow:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.05);">
          <!-- Header con gradiente de marca -->
          <tr>
            <td style="background:${BRAND.gradient};background-color:${BRAND.primary};padding:36px 32px;text-align:left;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td style="vertical-align:middle;">
                    <span style="display:inline-block;font-family:${FONT};font-weight:700;font-size:32px;color:#ffffff;letter-spacing:-0.02em;line-height:1;">Horux 360</span>
                  </td>
                  <td style="vertical-align:middle;text-align:right;">
                    <span style="display:inline-block;font-family:${FONT};font-size:18px;font-weight:500;color:#ffffff;letter-spacing:0;line-height:1.2;">Plataforma fiscal inteligente</span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Body inyectado por cada template -->
          <tr>
            <td style="padding:40px 32px;font-family:${FONT};font-size:15px;line-height:1.65;color:${BRAND.textPrimary};">
              ${content}
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td style="background-color:${BRAND.bgLight};padding:24px 32px;text-align:center;font-family:${FONT};font-size:12px;color:${BRAND.textMuted};border-top:1px solid ${BRAND.border};">
              <p style="margin:0 0 8px;">
                <a href="https://horux360.com" style="color:${BRAND.primary};text-decoration:none;font-weight:500;">horux360.com</a>
                &nbsp;·&nbsp;
                <a href="https://horuxfin.com" style="color:${BRAND.primary};text-decoration:none;font-weight:500;">horuxfin.com</a>
              </p>
              <p style="margin:0;">&copy; ${year} Horux 360 — Soluciones financieras y tecnológicas para empresas</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>`;
}

/**
 * Helper para botón primario consistente con el design system. Usa color
 * sólido primary Y gradiente; el cliente que no soporte gradientes cae al
 * sólido. Sombra ligera para dar profundidad.
 */
export function primaryButton(label: string, href: string): string {
  return `<a href="${href}" style="display:inline-block;background-color:${BRAND.primary};background-image:${BRAND.gradient};color:#ffffff;padding:14px 28px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;font-family:${FONT};box-shadow:0 4px 6px -1px rgba(37,99,235,0.3);">${label}</a>`;
}

/** Caja destacada para info secundaria (credenciales, totales, etc). */
export function infoBox(content: string): string {
  return `<div style="background-color:${BRAND.bgLight};border:1px solid ${BRAND.border};border-radius:8px;padding:16px 20px;margin:20px 0;font-family:${FONT};color:${BRAND.textPrimary};">${content}</div>`;
}

/** Heading H2 con tipografía de marca. */
export function heading(text: string): string {
  return `<h2 style="font-family:${FONT};font-weight:700;color:${BRAND.textPrimary};margin:0 0 16px;font-size:22px;letter-spacing:-0.01em;">${text}</h2>`;
}

export const BRAND_COLORS = BRAND;
