feat(emails): sales send-out flows + brochures + email-from settings

Phase 7 of the berth-recommender refactor (plan §3.3, §4.8, §4.9, §5.7,
§5.8, §5.9, §11.1, §14.7, §14.9). Adds the rep-driven send-out path for
per-berth PDFs and port-wide brochures, the per-port sales SMTP/IMAP
config + body templates, and the supporting admin UI.

Migration: 0031_brochures_and_document_sends.sql

Schema additions:
  - brochures (port-wide, with isDefault marker + archive)
  - brochure_versions (versioned uploads, storageKey per §4.7a)
  - document_sends (audit log of every rep-initiated send; failures
    captured with failedAt + errorReason). berthPdfVersionId is a plain
    text column (no FK) — loose-coupled to Phase 6b's berth_pdf_versions
    so the two phases stay independent.

§14.7 critical mitigations:
  - Body XSS: rep-authored markdown goes through renderEmailBody()
    (HTML-escape first, then a tight allowlist of bold/italic/code/link
    rules). https:// + mailto: only — javascript:/data: URLs stripped.
    Tested against script/img/iframe/svg/onerror polyglots.
  - Recipient typo: strict email regex + two-step confirm modal that
    shows the exact recipient before send.
  - Unresolved merge fields: pre-send dry-run /preview endpoint blocks
    submission until findUnresolvedTokens() returns empty.
  - SMTP failure: every transport rejection writes a document_sends row
    with failedAt + errorReason; UI surfaces the message.
  - Hourly per-user rate limit: 50 sends/user/hour via existing
    checkRateLimit().
  - Size threshold fallback (§11.1): files above
    email_attach_threshold_mb (default 15) ship as a 24h signed-URL
    download link in the body instead of an attachment. Storage stream
    flows directly to nodemailer to avoid buffering 20MB+.

§14.10 critical mitigation:
  - SMTP/IMAP passwords encrypted at rest via the existing
    EMAIL_CREDENTIAL_KEY (AES-256-GCM). The /api/v1/admin/email/
    sales-config GET endpoint never returns the decrypted value — only
    a *PassIsSet boolean. PATCH treats empty string as "leave unchanged"
    and explicit null as "clear", so the masked-placeholder UI round-
    trips without forcing re-entry on every save.

system_settings keys (per-port unless noted):
  - sales_from_address, sales_smtp_{host,port,secure,user,pass_encrypted}
  - sales_imap_{host,port,user,pass_encrypted}
  - sales_auth_method (default app_password)
  - noreply_from_address
  - email_template_send_berth_pdf_body, email_template_send_brochure_body
  - brochure_max_upload_mb (default 50)
  - email_attach_threshold_mb (default 15)

UI surfaces (per §5.7, §5.8, §5.9):
  - <SendDocumentDialog> shared 2-step compose+confirm flow.
  - <SendBerthPdfDialog>, <SendDocumentsDialog>, <SendFromInterestButton>
    wrappers per detail page.
  - /[portSlug]/admin/brochures: list, upload (direct-to-storage
    presigned PUT for the 20MB+ files per §11.1), default toggle,
    archive.
  - /[portSlug]/admin/email extended with <SalesEmailConfigCard>:
    SMTP + IMAP creds, body templates, threshold/max settings.

Storage: every upload + download goes through getStorageBackend() —
no direct minio imports, per Phase 6a contract.

Tests: 1145 vitest passing (+ 50 new in
markdown-email-sanitization.test.ts, document-sends-validators.test.ts,
sales-email-config-validators.test.ts).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/admin/brochures-admin-panel.tsx

@@ -0,0 +1,345 @@
+'use client';
+
+/**
+ * Brochures admin panel (Phase 7 §5.8).
+ *
+ * Lists every brochure for the port (including archived). Lets a
+ * `manage_settings` admin:
+ *   - Create new brochures.
+ *   - Upload a new version (direct-to-storage presigned PUT, see §11.1).
+ *   - Mark default / archive.
+ */
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Archive, FileText, Loader2, Plus, Star, Upload } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { apiFetch } from '@/lib/api/client';
+
+interface BrochureRow {
+  id: string;
+  label: string;
+  description: string | null;
+  isDefault: boolean;
+  archivedAt: string | null;
+  versionCount: number;
+  currentVersion: {
+    id: string;
+    fileName: string;
+    fileSizeBytes: number;
+    uploadedAt: string;
+  } | null;
+}
+
+interface BrochuresResponse {
+  data: BrochureRow[];
+}
+
+interface UploadGrantResponse {
+  data: { storageKey: string; uploadUrl: string; method: 'PUT'; maxBytes: number };
+}
+
+export function BrochuresAdminPanel() {
+  const queryClient = useQueryClient();
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const brochuresQuery = useQuery<BrochuresResponse>({
+    queryKey: ['brochures', 'admin'],
+    queryFn: () => apiFetch('/api/v1/admin/brochures'),
+  });
+
+  const rows = brochuresQuery.data?.data ?? [];
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-end">
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" /> New brochure
+        </Button>
+      </div>
+
+      {brochuresQuery.isLoading && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" /> Loading…
+        </div>
+      )}
+
+      {!brochuresQuery.isLoading && rows.length === 0 && (
+        <Card>
+          <CardContent className="py-8 text-center text-sm text-muted-foreground">
+            No brochures yet. Click &ldquo;New brochure&rdquo; to add one.
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="space-y-3">
+        {rows.map((b) => (
+          <BrochureCard
+            key={b.id}
+            brochure={b}
+            onChange={() => {
+              void queryClient.invalidateQueries({ queryKey: ['brochures', 'admin'] });
+              void queryClient.invalidateQueries({ queryKey: ['brochures', 'list'] });
+            }}
+          />
+        ))}
+      </div>
+
+      <CreateBrochureDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onCreated={() => {
+          void queryClient.invalidateQueries({ queryKey: ['brochures', 'admin'] });
+        }}
+      />
+    </div>
+  );
+}
+
+function BrochureCard({ brochure, onChange }: { brochure: BrochureRow; onChange: () => void }) {
+  const [uploading, setUploading] = useState(false);
+
+  const setDefaultMutation = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/admin/brochures/${brochure.id}`, {
+        method: 'PATCH',
+        body: { isDefault: true },
+      }),
+    onSuccess: () => {
+      toast.success('Default brochure updated');
+      onChange();
+    },
+  });
+
+  const archiveMutation = useMutation({
+    mutationFn: () => apiFetch(`/api/v1/admin/brochures/${brochure.id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      toast.success('Brochure archived');
+      onChange();
+    },
+  });
+
+  async function handleUpload(file: File) {
+    setUploading(true);
+    try {
+      const grant: UploadGrantResponse = await apiFetch(
+        `/api/v1/admin/brochures/${brochure.id}/versions`,
+      );
+      if (file.size > grant.data.maxBytes) {
+        throw new Error(
+          `File is too large. Max is ${(grant.data.maxBytes / 1024 / 1024).toFixed(0)}MB.`,
+        );
+      }
+      // Direct-to-storage PUT (§11.1).
+      const putRes = await fetch(grant.data.uploadUrl, {
+        method: 'PUT',
+        body: file,
+        headers: { 'Content-Type': 'application/pdf' },
+      });
+      if (!putRes.ok) throw new Error(`Upload failed: ${putRes.status}`);
+
+      const sha = await sha256Hex(file);
+      await apiFetch(`/api/v1/admin/brochures/${brochure.id}/versions`, {
+        method: 'POST',
+        body: {
+          storageKey: grant.data.storageKey,
+          fileName: file.name,
+          fileSizeBytes: file.size,
+          contentSha256: sha,
+        },
+      });
+      toast.success('New version uploaded');
+      onChange();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Upload failed');
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  return (
+    <Card className={brochure.archivedAt ? 'opacity-60' : ''}>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between text-base">
+          <span className="flex items-center gap-2">
+            <FileText className="h-4 w-4" /> {brochure.label}
+            {brochure.isDefault && (
+              <span className="flex items-center gap-1 rounded bg-primary/10 px-2 py-0.5 text-xs text-primary">
+                <Star className="h-3 w-3" /> default
+              </span>
+            )}
+            {brochure.archivedAt && (
+              <span className="rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                archived
+              </span>
+            )}
+          </span>
+          <span className="text-xs text-muted-foreground">{brochure.versionCount} versions</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {brochure.description && (
+          <p className="text-sm text-muted-foreground">{brochure.description}</p>
+        )}
+        {brochure.currentVersion && (
+          <p className="text-xs text-muted-foreground">
+            Latest: {brochure.currentVersion.fileName} (
+            {(brochure.currentVersion.fileSizeBytes / 1024 / 1024).toFixed(2)} MB,{' '}
+            {new Date(brochure.currentVersion.uploadedAt).toLocaleDateString()})
+          </p>
+        )}
+        <div className="flex gap-2 pt-2">
+          {!brochure.archivedAt && (
+            <>
+              <label className="cursor-pointer">
+                <input
+                  type="file"
+                  accept="application/pdf"
+                  className="hidden"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0];
+                    if (file) void handleUpload(file);
+                    e.target.value = '';
+                  }}
+                />
+                <Button asChild variant="outline" size="sm" disabled={uploading}>
+                  <span>
+                    {uploading ? (
+                      <Loader2 className="mr-2 h-3 w-3 animate-spin" />
+                    ) : (
+                      <Upload className="mr-2 h-3 w-3" />
+                    )}
+                    Upload version
+                  </span>
+                </Button>
+              </label>
+              {!brochure.isDefault && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setDefaultMutation.mutate()}
+                  disabled={setDefaultMutation.isPending}
+                >
+                  <Star className="mr-2 h-3 w-3" /> Mark default
+                </Button>
+              )}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => archiveMutation.mutate()}
+                disabled={archiveMutation.isPending}
+              >
+                <Archive className="mr-2 h-3 w-3" /> Archive
+              </Button>
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function CreateBrochureDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: {
+  open: boolean;
+  onOpenChange: (o: boolean) => void;
+  onCreated: () => void;
+}) {
+  const [label, setLabel] = useState('');
+  const [description, setDescription] = useState('');
+  const [isDefault, setIsDefault] = useState(false);
+
+  const createMutation = useMutation({
+    mutationFn: () =>
+      apiFetch('/api/v1/admin/brochures', {
+        method: 'POST',
+        body: {
+          label,
+          description: description || null,
+          isDefault,
+        },
+      }),
+    onSuccess: () => {
+      toast.success('Brochure created. Upload a version next.');
+      setLabel('');
+      setDescription('');
+      setIsDefault(false);
+      onCreated();
+      onOpenChange(false);
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New brochure</DialogTitle>
+          <DialogDescription>
+            Create the brochure container, then upload a PDF version on the card that appears.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Label htmlFor="b-label">Label</Label>
+            <Input
+              id="b-label"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder="General overview"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="b-desc">Description (optional)</Label>
+            <Textarea
+              id="b-desc"
+              rows={2}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="b-def">Set as default</Label>
+            <Switch id="b-def" checked={isDefault} onCheckedChange={setIsDefault} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            disabled={!label.trim() || createMutation.isPending}
+            onClick={() => createMutation.mutate()}
+          >
+            {createMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+async function sha256Hex(file: File): Promise<string> {
+  const buf = await file.arrayBuffer();
+  const hash = await crypto.subtle.digest('SHA-256', buf);
+  return Array.from(new Uint8Array(hash))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+}

src/components/admin/sales-email-config-card.tsx

@@ -0,0 +1,381 @@
+'use client';
+
+/**
+ * Sales send-from config card (Phase 7 §5.9).
+ *
+ * Lives on /[portSlug]/admin/email below the existing noreply transport
+ * card. Lets per-port admins configure the SMTP/IMAP creds + body templates
+ * that the document-sends flow uses.
+ *
+ * §14.10 enforcement: passwords are write-only. The GET endpoint never
+ * returns the decrypted value — only a `*PassIsSet` boolean. Empty
+ * password input means "leave unchanged"; explicit `null` sent over the
+ * wire means "clear".
+ */
+import { useEffect, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { apiFetch } from '@/lib/api/client';
+
+interface SalesConfigResponse {
+  data: {
+    email: {
+      fromAddress: string;
+      smtpHost: string | null;
+      smtpPort: number;
+      smtpSecure: boolean;
+      smtpUser: string | null;
+      authMethod: string;
+      smtpPassIsSet: boolean;
+      isUsable: boolean;
+    };
+    imap: {
+      imapHost: string | null;
+      imapPort: number;
+      imapUser: string | null;
+      imapPassIsSet: boolean;
+      isUsable: boolean;
+    };
+    content: {
+      noreplyFromAddress: string;
+      templateBerthPdfBody: string;
+      templateBrochureBody: string;
+      brochureMaxUploadMb: number;
+      emailAttachThresholdMb: number;
+    };
+  };
+}
+
+interface FormState {
+  fromAddress: string;
+  smtpHost: string;
+  smtpPort: number | '';
+  smtpSecure: boolean;
+  smtpUser: string;
+  smtpPass: string; // empty = unchanged
+  imapHost: string;
+  imapPort: number | '';
+  imapUser: string;
+  imapPass: string;
+  noreplyFromAddress: string;
+  templateBerthPdfBody: string;
+  templateBrochureBody: string;
+  brochureMaxUploadMb: number | '';
+  emailAttachThresholdMb: number | '';
+}
+
+const EMPTY_FORM: FormState = {
+  fromAddress: '',
+  smtpHost: '',
+  smtpPort: 587,
+  smtpSecure: false,
+  smtpUser: '',
+  smtpPass: '',
+  imapHost: '',
+  imapPort: 993,
+  imapUser: '',
+  imapPass: '',
+  noreplyFromAddress: '',
+  templateBerthPdfBody: '',
+  templateBrochureBody: '',
+  brochureMaxUploadMb: 50,
+  emailAttachThresholdMb: 15,
+};
+
+export function SalesEmailConfigCard() {
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [smtpPassSet, setSmtpPassSet] = useState(false);
+  const [imapPassSet, setImapPassSet] = useState(false);
+  const [form, setForm] = useState<FormState>(EMPTY_FORM);
+
+  async function refresh() {
+    setLoading(true);
+    try {
+      const res: SalesConfigResponse = await apiFetch('/api/v1/admin/email/sales-config');
+      setSmtpPassSet(res.data.email.smtpPassIsSet);
+      setImapPassSet(res.data.imap.imapPassIsSet);
+      setForm({
+        fromAddress: res.data.email.fromAddress,
+        smtpHost: res.data.email.smtpHost ?? '',
+        smtpPort: res.data.email.smtpPort,
+        smtpSecure: res.data.email.smtpSecure,
+        smtpUser: res.data.email.smtpUser ?? '',
+        smtpPass: '',
+        imapHost: res.data.imap.imapHost ?? '',
+        imapPort: res.data.imap.imapPort,
+        imapUser: res.data.imap.imapUser ?? '',
+        imapPass: '',
+        noreplyFromAddress: res.data.content.noreplyFromAddress,
+        templateBerthPdfBody: res.data.content.templateBerthPdfBody,
+        templateBrochureBody: res.data.content.templateBrochureBody,
+        brochureMaxUploadMb: res.data.content.brochureMaxUploadMb,
+        emailAttachThresholdMb: res.data.content.emailAttachThresholdMb,
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void refresh();
+  }, []);
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const payload: Record<string, unknown> = {
+        fromAddress: form.fromAddress || null,
+        smtpHost: form.smtpHost || null,
+        smtpPort: typeof form.smtpPort === 'number' ? form.smtpPort : null,
+        smtpSecure: form.smtpSecure,
+        smtpUser: form.smtpUser || null,
+        imapHost: form.imapHost || null,
+        imapPort: typeof form.imapPort === 'number' ? form.imapPort : null,
+        imapUser: form.imapUser || null,
+        noreplyFromAddress: form.noreplyFromAddress || null,
+        templateBerthPdfBody: form.templateBerthPdfBody,
+        templateBrochureBody: form.templateBrochureBody,
+        brochureMaxUploadMb:
+          typeof form.brochureMaxUploadMb === 'number' ? form.brochureMaxUploadMb : null,
+        emailAttachThresholdMb:
+          typeof form.emailAttachThresholdMb === 'number' ? form.emailAttachThresholdMb : null,
+      };
+      // Only send password fields when the user actually typed something.
+      if (form.smtpPass !== '') payload.smtpPass = form.smtpPass;
+      if (form.imapPass !== '') payload.imapPass = form.imapPass;
+
+      await apiFetch('/api/v1/admin/email/sales-config', { method: 'PATCH', body: payload });
+      toast.success('Sales email settings saved');
+      await refresh();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Save failed');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center gap-2 py-6 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" /> Loading sales email config…
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Sales send-from account</CardTitle>
+          <CardDescription>
+            SMTP credentials for human-touch outbound (brochures + per-berth PDFs). IMAP creds
+            enable the bounce monitor — leave blank to disable bounce-rejection banners. Passwords
+            are encrypted at rest and never returned by the API.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-3 md:grid-cols-2">
+            <Field label="From address" id="sef-from">
+              <Input
+                id="sef-from"
+                type="email"
+                value={form.fromAddress}
+                onChange={(e) => update('fromAddress', e.target.value)}
+                placeholder="sales@portnimara.com"
+              />
+            </Field>
+            <Field label="SMTP host" id="sef-smtp-host">
+              <Input
+                id="sef-smtp-host"
+                value={form.smtpHost}
+                onChange={(e) => update('smtpHost', e.target.value)}
+                placeholder="smtp.gmail.com"
+              />
+            </Field>
+            <Field label="SMTP port" id="sef-smtp-port">
+              <Input
+                id="sef-smtp-port"
+                type="number"
+                value={form.smtpPort}
+                onChange={(e) =>
+                  update('smtpPort', e.target.value === '' ? '' : Number(e.target.value))
+                }
+              />
+            </Field>
+            <div className="flex items-end justify-between gap-2">
+              <Label htmlFor="sef-smtp-secure" className="text-sm">
+                SSL (true=465, false=STARTTLS on 587)
+              </Label>
+              <Switch
+                id="sef-smtp-secure"
+                checked={form.smtpSecure}
+                onCheckedChange={(v) => update('smtpSecure', v)}
+              />
+            </div>
+            <Field label="SMTP username" id="sef-smtp-user">
+              <Input
+                id="sef-smtp-user"
+                value={form.smtpUser}
+                onChange={(e) => update('smtpUser', e.target.value)}
+              />
+            </Field>
+            <Field
+              label={`SMTP password ${smtpPassSet ? '(stored — leave blank to keep)' : ''}`}
+              id="sef-smtp-pass"
+            >
+              <Input
+                id="sef-smtp-pass"
+                type="password"
+                value={form.smtpPass}
+                onChange={(e) => update('smtpPass', e.target.value)}
+                placeholder={smtpPassSet ? '••••••••' : 'app password'}
+              />
+            </Field>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Bounce monitor (IMAP)</CardTitle>
+          <CardDescription>
+            Required only for the async-bounce banner (§14.9). Same provider account as SMTP in most
+            setups.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-3 md:grid-cols-2">
+          <Field label="IMAP host" id="sef-imap-host">
+            <Input
+              id="sef-imap-host"
+              value={form.imapHost}
+              onChange={(e) => update('imapHost', e.target.value)}
+              placeholder="imap.gmail.com"
+            />
+          </Field>
+          <Field label="IMAP port" id="sef-imap-port">
+            <Input
+              id="sef-imap-port"
+              type="number"
+              value={form.imapPort}
+              onChange={(e) =>
+                update('imapPort', e.target.value === '' ? '' : Number(e.target.value))
+              }
+            />
+          </Field>
+          <Field label="IMAP username" id="sef-imap-user">
+            <Input
+              id="sef-imap-user"
+              value={form.imapUser}
+              onChange={(e) => update('imapUser', e.target.value)}
+            />
+          </Field>
+          <Field
+            label={`IMAP password ${imapPassSet ? '(stored — leave blank to keep)' : ''}`}
+            id="sef-imap-pass"
+          >
+            <Input
+              id="sef-imap-pass"
+              type="password"
+              value={form.imapPass}
+              onChange={(e) => update('imapPass', e.target.value)}
+              placeholder={imapPassSet ? '••••••••' : 'app password'}
+            />
+          </Field>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Body templates</CardTitle>
+          <CardDescription>
+            Default markdown bodies used when a rep doesn&rsquo;t write a custom one. Tokens like{' '}
+            <code>{'{{client.fullName}}'}</code> are expanded server-side.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Field label="Berth PDF body" id="sef-tmpl-berth">
+            <Textarea
+              id="sef-tmpl-berth"
+              rows={6}
+              value={form.templateBerthPdfBody}
+              onChange={(e) => update('templateBerthPdfBody', e.target.value)}
+              className="font-mono text-sm"
+            />
+          </Field>
+          <Field label="Brochure body" id="sef-tmpl-broc">
+            <Textarea
+              id="sef-tmpl-broc"
+              rows={6}
+              value={form.templateBrochureBody}
+              onChange={(e) => update('templateBrochureBody', e.target.value)}
+              className="font-mono text-sm"
+            />
+          </Field>
+          <div className="grid gap-3 md:grid-cols-2">
+            <Field label="Brochure max upload (MB)" id="sef-broc-max">
+              <Input
+                id="sef-broc-max"
+                type="number"
+                value={form.brochureMaxUploadMb}
+                onChange={(e) =>
+                  update('brochureMaxUploadMb', e.target.value === '' ? '' : Number(e.target.value))
+                }
+              />
+            </Field>
+            <Field label="Attach-vs-link threshold (MB)" id="sef-attach">
+              <Input
+                id="sef-attach"
+                type="number"
+                value={form.emailAttachThresholdMb}
+                onChange={(e) =>
+                  update(
+                    'emailAttachThresholdMb',
+                    e.target.value === '' ? '' : Number(e.target.value),
+                  )
+                }
+              />
+            </Field>
+          </div>
+          <Field label="Noreply from address" id="sef-noreply">
+            <Input
+              id="sef-noreply"
+              type="email"
+              value={form.noreplyFromAddress}
+              onChange={(e) => update('noreplyFromAddress', e.target.value)}
+            />
+          </Field>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button onClick={handleSave} disabled={saving}>
+          {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Save sales email settings
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, id, children }: { label: string; id: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1">
+      <Label htmlFor={id}>{label}</Label>
+      {children}
+    </div>
+  );
+}