export function AuthShell({
  title,
  subtitle,
  children,
}: {
  title: string
  subtitle?: string
  children: React.ReactNode
}) {
  return (
    <div className="flex min-h-dvh items-center justify-center bg-background px-4 py-8">
      <div className="w-full max-w-sm">
        {/* ZunoChat brand lockup. The PNG already contains both the
            gradient chat-bubble icon AND the dark wordmark, so we
            render it as a single image (no separate icon + text) and
            provide an sr-only heading for screen readers. */}
        <div className="mb-6 flex items-center justify-center">
          <h1 className="sr-only">ZunoChat</h1>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/brand/zunochat-logo.png"
            alt="ZunoChat"
            className="h-10 w-auto select-none md:h-12"
            draggable={false}
          />
        </div>
        <div className="rounded-2xl border border-border bg-card p-6 shadow-sm md:p-8">
          <div className="mb-5 space-y-1 text-center">
            <h1 className="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
            {subtitle && (
              <p className="text-sm text-muted-foreground">{subtitle}</p>
            )}
          </div>
          {children}
        </div>
      </div>
    </div>
  )
}