import Link from "next/link";
import { Logo } from "@/components/brand/logo";
import { ThemeToggle } from "@/components/marketing/theme-toggle";

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative flex min-h-dvh flex-col overflow-x-clip">
      <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(ellipse_80%_55%_at_50%_0%,black_20%,transparent_100%)] dark:opacity-40" />
      <header className="relative z-10 flex h-14 items-center justify-between px-5 sm:px-8">
        <Link href="/" className="rounded-md" aria-label="PolyLLM home">
          <Logo size={24} />
        </Link>
        <ThemeToggle />
      </header>
      <main className="relative z-10 flex flex-1 items-start justify-center px-4 pb-10 pt-6 sm:items-center sm:pt-0">
        <div className="w-full max-w-[400px]">{children}</div>
      </main>
      <footer className="relative z-10 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 px-4 pb-[calc(env(safe-area-inset-bottom)+20px)] text-xs text-fg-subtle">
        <span>© {new Date().getFullYear()} PolyLLM</span>
        <Link href="/privacy" className="hover:text-fg">
          Privacy
        </Link>
        <Link href="/terms" className="hover:text-fg">
          Terms
        </Link>
        <Link href="/#faq" className="hover:text-fg">
          Help
        </Link>
      </footer>
    </div>
  );
}