pn-new-crm/src/components/shared/branded-auth-shell.tsx

const DEFAULT_BG_URL = 'https://s3.portnimara.com/images/Overhead_1_blur.png';
const DEFAULT_LOGO_URL =
  'https://s3.portnimara.com/images/Port%20Nimara%20New%20Logo-Circular%20Frame_250px.png';

interface BrandedAuthShellProps {
  children: React.ReactNode;
  /** Per-port branding override resolved server-side by the page that
   *  renders the shell. When omitted, falls back to the Port Nimara
   *  defaults so single-tenant deployments remain unaffected. Pages
   *  that know their portId at render time should pass the result of
   *  `getPortBrandingConfig(portId)`. */
  branding?: {
    logoUrl?: string | null;
    appName?: string | null;
  };
}

/**
 * Branded shell shared by every auth/form surface - CRM login, portal login,
 * password set/reset/activate, forgot-password. Renders the blurred
 * background, the logo, and a centered white card that consumers
 * populate with their own form/content.
 *
 * Multi-tenant note (R2-H15): the per-port logoUrl from
 * /admin/branding is rendered when the parent page passes a `branding`
 * prop. The background image stays as the marina default for all
 * deployments — admin-authored backgrounds aren't part of the v1
 * branding surface.
 */
export function BrandedAuthShell({ children, branding }: BrandedAuthShellProps) {
  const logoUrl = branding?.logoUrl || DEFAULT_LOGO_URL;
  const altText = branding?.appName || 'Port Nimara';
  // fixed inset-0 anchors the auth surface to the viewport directly —
  // iOS Safari ignores overflow-hidden on inner divs for body-level
  // scrolling, so a regular `h-[100dvh] overflow-hidden` wrapper doesn't
  // stop the rubber-band bounce. Pinning to the viewport via position
  // fixed does. The fixed-position shell then uses flex to center the
  // card within the visible area.
  return (
    <div className="fixed inset-0 flex items-center justify-center px-4 py-8 overscroll-none">
      <div
        aria-hidden
        className="absolute inset-0 -z-10"
        style={{
          backgroundImage: `url('${DEFAULT_BG_URL}')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundColor: '#f2f2f2',
        }}
      />
      <div className="w-full max-w-md">
        <div className="bg-white rounded-lg shadow-lg p-8">
          <div className="flex justify-center mb-6">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={logoUrl} alt={altText} className="w-24 h-auto" />
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}