import { Body, Button, Container, Head, Heading, Hr, Html, Preview, Section, Text, } from "@react-email/components"; type AlertEmailProps = { date: string; childName: string; confirmLink: string; }; export function AlertEmail({ date, childName, confirmLink, }: AlertEmailProps) { return ( Dringender Notdienst-Alarm fuer {date}

Dringend Notdienst heute bestaetigen Eine Fachkraft ist ausgefallen. Fuer {childName} ist ein Notdienst-Einsatz am {date} hinterlegt.

Bitte bestaetige schnell, ob du den Notdienst uebernehmen kannst, damit die Kita den Tag verlaesslich planen kann.

Einsatzdatum {date} Kind {childName}

Falls der Button nicht funktioniert, kopiere diesen Link in deinen Browser: {confirmLink}

Diese Nachricht wurde automatisch vom Kita-Planer versendet. ); } const styles = { body: { margin: 0, backgroundColor: "#fff7ed", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', color: "#30170f", }, container: { width: "100%", maxWidth: "600px", margin: "0 auto", padding: "32px 20px", }, alertBar: { padding: "26px 28px", backgroundColor: "#9f1239", borderRadius: "8px 8px 0 0", }, kicker: { display: "inline-block", margin: "0 0 18px", padding: "6px 10px", backgroundColor: "#fed7aa", color: "#7f1d1d", borderRadius: "999px", fontSize: "12px", fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase" as const, }, heading: { margin: "0 0 12px", color: "#ffffff", fontSize: "30px", lineHeight: "1.16", fontWeight: 850, }, lead: { margin: 0, color: "#ffe4e6", fontSize: "16px", lineHeight: "1.55", }, card: { padding: "28px", backgroundColor: "#ffffff", border: "1px solid #fed7aa", borderTop: "0", borderRadius: "0 0 8px 8px", }, text: { margin: "0 0 22px", color: "#44251a", fontSize: "16px", lineHeight: "1.65", }, button: { display: "inline-block", padding: "14px 22px", backgroundColor: "#ea580c", color: "#ffffff", borderRadius: "6px", fontSize: "15px", fontWeight: 800, textDecoration: "none", }, detailBox: { margin: "28px 0 0", padding: "18px", backgroundColor: "#fff7ed", border: "1px solid #fdba74", borderRadius: "6px", }, detailLabel: { margin: "0 0 4px", color: "#9a3412", fontSize: "12px", fontWeight: 800, letterSpacing: "0.06em", textTransform: "uppercase" as const, }, detailValue: { margin: "0 0 14px", color: "#30170f", fontSize: "16px", fontWeight: 700, }, fallbackText: { margin: "26px 0 8px", color: "#7c5a4b", fontSize: "13px", lineHeight: "1.5", }, linkText: { margin: 0, color: "#be123c", fontSize: "13px", lineHeight: "1.5", wordBreak: "break-all" as const, }, hr: { margin: "24px 0", borderColor: "#fed7aa", }, footer: { margin: 0, color: "#8b6f63", fontSize: "12px", lineHeight: "1.5", textAlign: "center" as const, }, };