anouma/lib/email/reminderTemplate.ts

export type ReminderEmailData = {
  recipientName: string;
  eventTitle: string;
  dateLabel: string;
  timeLabel: string;
  joinUrl: string;
  meetingPassword: string;
  minutesBefore: number;
};

const colors = {
  mauveDark: "#8b616d",
  plum: "#66505f",
  cream: "#f2e2d6",
  creamLight: "#fbf6f1",
};

/** Table-based HTML email (inline styles only) matching the ANOUMA design. */
export function renderReminderEmailHtml(data: ReminderEmailData): string {
  const { recipientName, eventTitle, dateLabel, timeLabel, joinUrl, meetingPassword, minutesBefore } = data;

  return `<!doctype html>
<html lang="de">
  <head>
    <style>
      @font-face { font-family: 'Antropos'; src: url('https://anouma.org/fonts/baar-antropos.ttf') format('truetype'); font-style: normal; font-weight: 100 900; }
    </style>
  </head>
  <body style="margin:0;padding:0;background:${colors.creamLight};font-family:'Antropos',Georgia,'Times New Roman',serif;">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${colors.creamLight};padding:32px 16px;font-family:'Antropos',Georgia,'Times New Roman',serif;">
      <tr>
        <td align="center">
          <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:480px;background:#ffffff;border-radius:24px;overflow:hidden;font-family:'Antropos',Georgia,'Times New Roman',serif;">
            <tr>
              <td style="background:${colors.mauveDark};padding:28px 32px;text-align:center;font-family:'Antropos',Georgia,'Times New Roman',serif;">
                <span style="color:#ffffff;font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:22px;letter-spacing:0.12em;font-weight:600;">ANOUMA</span>
              </td>
            </tr>
            <tr>
              <td style="padding:32px;font-family:'Antropos',Georgia,'Times New Roman',serif;">
                <p style="margin:0 0 20px;color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:16px;line-height:1.6;">
                  Hallo ${escapeHtml(recipientName)},
                </p>
                <p style="margin:0 0 24px;color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:18px;line-height:1.6;font-style:italic;">
                  Dein Online-Termin bei ANOUMA beginnt in ${minutesBefore} Minuten.
                </p>
                <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:${colors.cream};border-radius:16px;">
                  <tr>
                    <td style="padding:20px 24px;font-family:'Antropos',Georgia,'Times New Roman',serif;">
                      <p style="margin:0 0 12px;color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:14px;">
                        <strong>Termin:</strong><br />${escapeHtml(eventTitle)}
                      </p>
                      <p style="margin:0 0 12px;color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:14px;">
                        <strong>Datum:</strong><br />${escapeHtml(dateLabel)}
                      </p>
                      <p style="margin:0;color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:14px;">
                        <strong>Uhrzeit:</strong><br />${escapeHtml(timeLabel)} Uhr
                      </p>
                    </td>
                  </tr>
                </table>
                <table role="presentation" cellpadding="0" cellspacing="0" style="margin:28px auto;">
                  <tr>
                    <td style="border-radius:999px;background:${colors.mauveDark};">
                      <a href="${joinUrl}" style="display:inline-block;padding:14px 32px;color:#ffffff;text-decoration:none;font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:14px;font-weight:600;letter-spacing:0.02em;">
                        Meeting betreten
                      </a>
                    </td>
                  </tr>
                </table>
                <p style="margin:0 0 4px;color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:14px;">
                  <strong>Meeting-Passwort:</strong>
                </p>
                <p style="margin:0 0 20px;color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:20px;letter-spacing:0.08em;">
                  ${escapeHtml(meetingPassword)}
                </p>
                <p style="margin:0;color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:13px;line-height:1.6;">
                  Bitte halte dein Passwort bereit. Beim Betreten des Meetings wirst du außerdem nach deinem Namen gefragt.
                </p>
              </td>
            </tr>
            <tr>
              <td style="padding:20px 32px;background:${colors.cream};text-align:center;font-family:'Antropos',Georgia,'Times New Roman',serif;">
                <span style="color:${colors.plum};font-family:'Antropos',Georgia,'Times New Roman',serif;font-size:12px;">Räume für Verbindung - mit dir selbst, miteinander und mit der Natur.</span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>`;
}

export function renderReminderEmailText(data: ReminderEmailData): string {
  const { recipientName, eventTitle, dateLabel, timeLabel, joinUrl, meetingPassword, minutesBefore } = data;
  return [
    `Hallo ${recipientName},`,
    "",
    `Dein Online-Termin bei ANOUMA beginnt in ${minutesBefore} Minuten.`,
    "",
    `Termin: ${eventTitle}`,
    `Datum: ${dateLabel}`,
    `Uhrzeit: ${timeLabel} Uhr`,
    "",
    `Meeting betreten: ${joinUrl}`,
    `Meeting-Passwort: ${meetingPassword}`,
    "",
    "Bitte halte dein Passwort bereit. Beim Betreten des Meetings wirst du außerdem nach deinem Namen gefragt.",
  ].join("\n");
}

function escapeHtml(value: string): string {
  return value
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}