/**
 * Public auth composition: generated compute field, grain and real form UI.
 *
 * The artwork is decoration only. Auth copy and controls stay in the normal
 * document flow, so a missing image changes the mood rather than the task.
 */
import type { ReactNode } from 'react';
import { PublicHeader } from './PublicHeader';

export function AuthShell({ children, onSignIn }: { children: ReactNode; onSignIn?: () => void }) {
  return (
    <div className="auth-shell relative isolate flex min-h-dvh min-w-0 flex-col overflow-hidden bg-bg text-fg">
      <PublicHeader current="sign-in" onSignIn={onSignIn} />
      <main className="relative grid min-w-0 flex-1 lg:grid-cols-[minmax(0,1.08fr)_minmax(30rem,0.92fr)]">
        <div
          className="auth-visual pointer-events-none absolute inset-0 lg:relative lg:inset-auto"
          aria-hidden
        >
          <div className="auth-field-motion absolute -inset-[4%]">
            <img
              src="/images/pig-compute-field.webp"
              alt=""
              className="size-full object-cover object-[46%_50%]"
              decoding="async"
              fetchPriority="high"
            />
          </div>
          <div className="auth-visual-vignette absolute inset-0" />
        </div>

        <section className="relative z-10 flex min-w-0 items-center justify-center px-4 py-6 sm:px-8 sm:py-10 lg:border-l lg:border-border/70 lg:bg-bg/90 lg:px-12 xl:px-16">
          <div className="w-full min-w-0 max-w-lg">{children}</div>
        </section>
      </main>
    </div>
  );
}