import Link from "next/link";

import { siteConfig } from "@/lib/constants/site";

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="relative flex min-h-screen flex-col lg:grid lg:grid-cols-2">
      <div className="mesh-hero border-border/50 relative hidden flex-col justify-between border-b p-10 lg:flex lg:border-b-0 lg:border-r">
        <Link
          href="/"
          className="font-display text-foreground text-lg font-semibold tracking-tight transition-premium hover:text-primary"
        >
          {siteConfig.name}
        </Link>
        <div className="max-w-md space-y-4">
          <p className="text-primary text-xs font-semibold uppercase tracking-widest">
            Member platform
          </p>
          <h1 className="font-display text-3xl font-semibold leading-tight tracking-tight text-foreground xl:text-4xl">
            Programs, receipts, and support — in one calm dashboard.
          </h1>
          <p className="text-muted-foreground text-sm leading-relaxed">
            Sign in to access purchases, downloads, and member-only WhatsApp support.
          </p>
        </div>
        <p className="text-muted-foreground text-xs">© {new Date().getFullYear()} {siteConfig.name}</p>
      </div>

      <div className="grain-soft flex flex-1 flex-col items-center justify-center px-4 py-12 sm:px-8">
        <Link
          href="/"
          className="font-display text-foreground mb-8 text-lg font-semibold tracking-tight transition-premium hover:text-primary lg:hidden"
        >
          {siteConfig.name}
        </Link>
        <div className="w-full max-w-[400px]">{children}</div>
      </div>
    </div>
  );
}