<table width="100%" bgcolor="#f1f5f9" cellpadding="0" cellspacing="0" border="0"
  style="padding: 6rem; color: #1e293b; font-family: Arial;">
  <tr>
    <td align="center">
      <table width="750" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0"
        style="border-radius: 10px; overflow: hidden; padding: 3rem;">
        <tr>
          <td style="padding: 0.5rem 0;">
            <h1
              style="font-family: Arial, Helvetica, sans-serif; text-align: center; text-transform: uppercase; font-size: 28px; margin: 0;">
              Confirma tu correo electrónico
            </h1>
          </td>
        </tr>
        <tr>
          <td
            style="font-family: Arial, Helvetica, sans-serif; text-align: center; padding: 0.5rem 3rem; font-size: 16px;">
            <p style="font-size: 20px; margin: 0; color: #1e293b;">Hola, <%= user.name %>!</p>
            <p style="margin: 1rem 0; color: #1e293b;">Gracias por registrarte en nuestro servicio. Para activar tu
              cuenta, por favor
              utiliza el siguiente código de activación:</p>
            <div style="text-align: center; padding: 1rem 0;">
              <div
                style="background: #a4c6f5; display: inline-block; padding: 1rem 3rem; font-size: 24px; font-weight: 700; border-radius: 4px;">
                <span>
                  <%= props?.activationCode %>
                </span>
              </div>
              <p style="margin: 0.5rem 0; color: #1e293b;"><small>Este código expira en 24 horas.</small></p>
            </div>
            <p style="margin: 1rem 0; color: #1e293b;">Si no solicitaste este correo, por favor ignóralo.</p>
          </td>
        </tr>
      </table>
      <p style="font-size: 14px; text-align: center; margin: 1rem 0 0;">
        <span>&copy; Copyright <%= new Date().getFullYear() %> <a href="<%= props?.appUrl %>">
              <%= props?.appName %>
            </a></span>
      </p>
    </td>
  </tr>
</table>
