Consolidate audit-fixes branch: webhooks, integrations, and deploy hardening

Batch commit of the pending working tree on security/audit-fixes-2026-07.
Major areas:
- Outbound webhooks / Zapier: schema + signed delivery with retries, public
  v1 API (REST-hook subscribe/unsubscribe), settings UI, cron drain.
- Deploy hardening: email via SMTP2GO (Resend fully removed), verified DB TLS
  (DATABASE_SSL=require + DATABASE_CA), storage fails loud in production when
  Spaces is unconfigured instead of silently using ephemeral disk.
- Integrations & features (concurrent work): accounting (QuickBooks/Xero),
  e-signature (DocuSign/Dropbox Sign), PayPal, geocoding/maps, onboarding,
  expanded legal pages.
- DB migrations 0006–0009.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

components/shared/logo.tsx

@@ -1,64 +1,73 @@
 import Link from "next/link"
-import { Building2 } from "lucide-react"
+import Image from "next/image"
 import { cn } from "@/lib/utils"
 
 type Size = "sm" | "md" | "lg"
+type Theme = "light" | "dark"
 
-const SIZES: Record<Size, { box: string; icon: string; title: string; sub: string; gap: string }> = {
-  sm: { box: "h-7 w-7",  icon: "h-4 w-4",       title: "text-xs",     sub: "text-[9px]",  gap: "gap-2" },
-  md: { box: "h-8 w-8",  icon: "h-[18px] w-[18px]", title: "text-[13px]", sub: "text-[10px]", gap: "gap-2.5" },
-  lg: { box: "h-9 w-9",  icon: "h-5 w-5",       title: "text-[15px]", sub: "text-[11px]", gap: "gap-2.5" },
+// Wordmark lockup height per size — width follows the image's aspect ratio.
+const WORDMARK_H: Record<Size, string> = {
+  sm: "h-6", // 24px
+  md: "h-7", // 28px
+  lg: "h-8", // 32px
 }
 
-/** The brand mark — gradient rounded square with the building glyph. */
+// Square brand-mark box per size.
+const MARK_BOX: Record<Size, string> = {
+  sm: "h-7 w-7",
+  md: "h-8 w-8",
+  lg: "h-9 w-9",
+}
+
+/** The square brand mark (framework "monster") — used where space is tight, e.g. the collapsed sidebar. */
 export function LogoMark({ size = "md", className }: { size?: Size; className?: string }) {
-  const s = SIZES[size]
   return (
-    <div
-      className={cn(
-        "flex shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-lg shadow-indigo-500/25",
-        s.box,
-        className
-      )}
-    >
-      <Building2 className={s.icon} />
-    </div>
+    <Image
+      src="/logo-mark.png"
+      alt="Property Management Network"
+      width={512}
+      height={512}
+      priority
+      className={cn("shrink-0 rounded-lg object-contain", MARK_BOX[size], className)}
+    />
   )
 }
 
 /**
- * Full brand lockup: mark + "Property Management" / "Network" wordmark.
- * Designed for the app's dark surfaces (white title, indigo accent).
+ * Full brand wordmark lockup (mark + "Property Management Network").
+ * `theme="light"` (default) renders the white wordmark for dark surfaces;
+ * `theme="dark"` renders the dark wordmark for light surfaces.
  * Pass `href={null}` to render a non-link version.
  */
 export function Logo({
   size = "md",
+  theme = "light",
   className,
   href = "/",
 }: {
   size?: Size
+  theme?: Theme
   className?: string
   href?: string | null
 }) {
-  const s = SIZES[size]
-
-  const content = (
-    <>
-      <LogoMark size={size} />
-      <span className="flex flex-col leading-none">
-        <span className={cn("font-bold tracking-tight text-white", s.title)}>Property Management</span>
-        <span className={cn("font-semibold uppercase tracking-[0.18em] text-indigo-400", s.sub)}>Network</span>
-      </span>
-    </>
+  const img = (
+    <Image
+      src={theme === "dark" ? "/logo-dark.png" : "/logo-light.png"}
+      alt="Property Management Network"
+      width={375}
+      height={40}
+      priority
+      className={cn("w-auto", WORDMARK_H[size])}
+    />
   )
 
-  const classes = cn("flex items-center", s.gap, className)
+  const classes = cn("flex items-center", className)
 
   return href ? (
-    <Link href={href} className={classes}>
-      {content}
+    <Link href={href} className={classes} aria-label="Property Management Network">
+      {img}
     </Link>
   ) : (
-    <div className={classes}>{content}</div>
+    <div className={classes}>{img}</div>
   )
 }

components/shared/maintenance-screen.tsx

@@ -0,0 +1,20 @@
+import { Logo } from "@/components/shared/logo"
+
+/**
+ * Full-screen "we'll be right back" notice rendered in place of the app when
+ * site maintenance mode is on (for everyone except admins).
+ */
+export function MaintenanceScreen({ message }: { message?: string | null }) {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-[#09090b] px-6 text-center text-white">
+      <Logo size="lg" href={null} />
+      <div className="max-w-md">
+        <h1 className="text-3xl font-bold tracking-tight">We&apos;ll be right back</h1>
+        <p className="mt-3 text-white/60 leading-relaxed">
+          {message ||
+            "The site is temporarily offline for scheduled maintenance. Please check back shortly — thanks for your patience."}
+        </p>
+      </div>
+    </div>
+  )
+}

components/shared/turnstile-widget.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import { cn } from "@/lib/utils"
+
+declare global {
+  interface Window {
+    turnstile?: {
+      render: (el: HTMLElement, opts: Record<string, unknown>) => string
+      remove: (id: string) => void
+      reset: (id?: string) => void
+    }
+  }
+}
+
+const SCRIPT_ID = "cf-turnstile-script"
+const SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
+
+/**
+ * Cloudflare Turnstile widget (explicit render).
+ *
+ * Renders inside the enclosing <form>; on success Turnstile injects a hidden
+ * <input name="cf-turnstile-response"> that is submitted with the form and
+ * verified server-side by verifyTurnstile(). Renders nothing when the public
+ * site key is not configured, so the forms still work without Turnstile.
+ */
+export function TurnstileWidget({ className }: { className?: string }) {
+  const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY
+  const containerRef = useRef<HTMLDivElement>(null)
+  const widgetIdRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!siteKey) return
+    let cancelled = false
+
+    const render = () => {
+      if (cancelled || widgetIdRef.current || !containerRef.current || !window.turnstile) return
+      widgetIdRef.current = window.turnstile.render(containerRef.current, {
+        sitekey: siteKey,
+        theme: "dark",
+      })
+    }
+
+    if (!document.getElementById(SCRIPT_ID)) {
+      const script = document.createElement("script")
+      script.id = SCRIPT_ID
+      script.src = SCRIPT_SRC
+      script.async = true
+      script.defer = true
+      script.onload = render
+      document.head.appendChild(script)
+    } else {
+      render()
+    }
+
+    // Fallback: the script may already be cached/loaded so onload won't fire.
+    const poll = window.setInterval(() => {
+      if (window.turnstile) {
+        render()
+        window.clearInterval(poll)
+      }
+    }, 150)
+
+    return () => {
+      cancelled = true
+      window.clearInterval(poll)
+      if (widgetIdRef.current && window.turnstile) {
+        try {
+          window.turnstile.remove(widgetIdRef.current)
+        } catch {
+          // widget already removed
+        }
+        widgetIdRef.current = null
+      }
+    }
+  }, [siteKey])
+
+  if (!siteKey) return null
+  return <div ref={containerRef} className={cn("min-h-[65px]", className)} />
+}