feat(mail): add client-safe context evaluations to analytics template

packages/mail/src/templates/AnalyticsTemplate.tsx

@@ -56,7 +56,7 @@ export const AnalyticsTemplate = ({
                       <div style={card}>
                         <Text style={cardTitle}>Besucher</Text>
                         <Text style={cardValue}>{period.visitors.toLocaleString("de-DE")}</Text>
-                        <Text style={cardExplanation}>Wie viele verschiedene Personen Ihre Website besucht haben.</Text>
+                        <Text style={cardExplanation}>Personen, die Ihre Website besucht haben.</Text>
                       </div>
                     </td>
                     <td width="2%" />
@@ -64,7 +64,7 @@ export const AnalyticsTemplate = ({
                       <div style={card}>
                         <Text style={cardTitle}>Besuche</Text>
                         <Text style={cardValue}>{period.visits.toLocaleString("de-DE")}</Text>
-                        <Text style={cardExplanation}>Wie oft Ihre Website insgesamt aufgerufen wurde.</Text>
+                        <Text style={cardExplanation}>Gesamtzahl aller Sitzungen auf Ihrer Seite.</Text>
                       </div>
                     </td>
                     <td width="2%" />
@@ -72,7 +72,7 @@ export const AnalyticsTemplate = ({
                       <div style={card}>
                         <Text style={cardTitle}>Seitenaufrufe</Text>
                         <Text style={cardValue}>{period.views.toLocaleString("de-DE")}</Text>
-                        <Text style={cardExplanation}>Wie viele einzelne Unterseiten angeschaut wurden.</Text>
+                        <Text style={cardExplanation}>Wie viele einzelne Unterseiten angesehen wurden.</Text>
                       </div>
                     </td>
                   </tr>
@@ -81,7 +81,12 @@ export const AnalyticsTemplate = ({
                       <div style={card}>
                         <Text style={cardTitle}>Absprungrate</Text>
                         <Text style={cardValue}>{period.bounceRate}%</Text>
-                        <Text style={cardExplanation}>Anteil der Besucher, die nach nur einer Seite sofort wieder gehen.</Text>
+                        <Text style={cardExplanation}>Anteil der Besucher, die nach einer Seite gehen.</Text>
+                        {period.bounceRate > 65 ? (
+                          <Text style={badgeNeutral}>Effizient: Besucher finden Infos (z.B. Kontakt) sofort.</Text>
+                        ) : (
+                          <Text style={badgePositive}>Stark: Besucher klicken sich durch mehrere Seiten.</Text>
+                        )}
                       </div>
                     </td>
                     <td width="2%" />
@@ -89,7 +94,12 @@ export const AnalyticsTemplate = ({
                       <div style={card}>
                         <Text style={cardTitle}>Verweildauer</Text>
                         <Text style={cardValue}>{period.visitDuration}</Text>
-                        <Text style={cardExplanation}>Wie lange Besucher im Schnitt auf der Website bleiben.</Text>
+                        <Text style={cardExplanation}>Durchschnittliche Zeit auf der Website.</Text>
+                        {period.visitDuration.includes("m") || parseInt(period.visitDuration) > 45 ? (
+                          <Text style={badgePositive}>Intensiv: Ihre Inhalte werden aufmerksam gelesen.</Text>
+                        ) : (
+                          <Text style={badgeNeutral}>Zielgerichtet: Schnelle Informationsaufnahme.</Text>
+                        )}
                       </div>
                     </td>
                     <td width="2%" />
@@ -316,3 +326,17 @@ const divider = {
   borderRight: "none",
   margin: "32px 0 0 0",
 };
+
+const badgePositive = {
+  fontSize: "11px",
+  fontWeight: "bold",
+  color: "#16a34a",
+  margin: "12px 0 0 0",
+};
+
+const badgeNeutral = {
+  fontSize: "11px",
+  fontWeight: "bold",
+  color: "#6b7280",
+  margin: "12px 0 0 0",
+};