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

/**
 * Branded shell shared by every auth/form surface — CRM login, portal login,
 * password set/reset/activate, forgot-password. Renders the blurred Port
 * Nimara overhead background, the circular logo, and a centered white card
 * that consumers populate with their own form/content.
 */
export function BrandedAuthShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative min-h-screen min-h-[100dvh] flex items-center justify-center px-4 py-8">
      {/*
        Full-viewport background layer — pinned to the visible viewport via
        `fixed inset-0` so the marina image always reaches the actual screen
        edges regardless of the iOS Safari URL bar showing/hiding. The shell's
        layout layer above sits on top via z-index.
      */}
      <div
        aria-hidden
        className="fixed inset-0 -z-10"
        style={{
          backgroundImage: `url('${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={LOGO_URL} alt="Port Nimara" className="w-24 h-auto" />
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}