import * as React from 'npm:react@18.3.1' import { Body, Container, Head, Heading, Html, Preview, Text, Button } from 'npm:@react-email/components@0.0.22' import type { TemplateEntry } from './registry.ts' const SITE_NAME = 'Avria Community Management' interface Props { ownerName?: string electionTitle?: string associationName?: string deadline?: string votingUrl?: string } const ElectionInviteEmail = ({ ownerName, electionTitle, associationName, deadline, votingUrl }: Props) => ( Cast your vote — {electionTitle || 'Election'} Election Ballot — {electionTitle || 'Election'} Dear {ownerName || 'Owner'}, You are eligible to vote in the {electionTitle || 'election'} {associationName ? ` for ${associationName}` : ''}. {deadline && ⏰ Deadline: {deadline}} This is a secure, tokenized link tied to your unit. Your vote is anonymous — we record that you voted but not how you voted. You may change your vote until the deadline by clicking the link again. If you did not expect this email, please contact your association manager. — {SITE_NAME} ) export const template = { component: ElectionInviteEmail, subject: (d: Record) => `Vote Now: ${d.electionTitle || 'Election'}${d.associationName ? ` — ${d.associationName}` : ''}`, displayName: 'Election invite', previewData: { ownerName: 'Jane Owner', electionTitle: '2026 Board Election', associationName: 'Sample HOA', deadline: 'January 15, 2026 5:00 PM', votingUrl: 'https://avria.cloud/vote/xxx?token=yyy' }, } satisfies TemplateEntry const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' } const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' } const h1 = { color: '#111827', fontSize: '22px', lineHeight: '30px', margin: '0 0 14px', fontWeight: '700' } const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 14px' } const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '0 0 10px' } const button = { backgroundColor: '#2941a4', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px', margin: '12px 0 18px' } const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }