import { Body, Container, Head, Heading, Hr, Html, Preview, Section, Text, Button, } from '@react-email/components'; import * as React from 'react'; interface BrochureDeliveryEmailProps { _email: string; brochureUrl: string; locale: 'en' | 'de'; } export const BrochureDeliveryEmail = ({ _email, brochureUrl, locale = 'en', }: BrochureDeliveryEmailProps) => { const t = locale === 'de' ? { subject: 'Ihr KLZ Kabelkatalog', greeting: 'Vielen Dank für Ihr Interesse an KLZ Cables.', body: 'Anbei erhalten Sie den Link zu unserem aktuellen Produktkatalog. Dieser enthält alle wichtigen technischen Spezifikationen und detaillierten Produktdaten.', button: 'Katalog herunterladen', footer: 'Diese E-Mail wurde von klz-cables.com gesendet.', } : { subject: 'Your KLZ Cable Catalog', greeting: 'Thank you for your interest in KLZ Cables.', body: 'Below you will find the link to our current product catalog. It contains all key technical specifications and detailed product data.', button: 'Download Catalog', footer: 'This email was sent from klz-cables.com.', }; return ( {t.subject}

{t.subject}

{t.greeting} {t.body}

{t.footer} ); }; export default BrochureDeliveryEmail; const main = { backgroundColor: '#f6f9fc', fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', }; const container = { backgroundColor: '#ffffff', margin: '0 auto', padding: '0 0 48px', marginBottom: '64px', borderRadius: '8px', overflow: 'hidden', border: '1px solid #e6ebf1', }; const headerSection = { backgroundColor: '#000d26', padding: '32px 48px', borderBottom: '4px solid #4da612', }; const h1 = { color: '#ffffff', fontSize: '24px', fontWeight: 'bold', margin: '0', }; const section = { padding: '32px 48px 0', }; const text = { color: '#333', fontSize: '16px', lineHeight: '24px', textAlign: 'left' as const, }; const buttonContainer = { textAlign: 'center' as const, marginTop: '32px', marginBottom: '32px', }; const button = { backgroundColor: '#4da612', borderRadius: '4px', color: '#ffffff', fontSize: '16px', fontWeight: 'bold', textDecoration: 'none', textAlign: 'center' as const, display: 'inline-block', padding: '16px 32px', }; const hr = { borderColor: '#e6ebf1', margin: '20px 0', }; const footer = { color: '#8898aa', fontSize: '12px', lineHeight: '16px', textAlign: 'center' as const, marginTop: '20px', };