import { Logo } from "@/components/brand/logo";

const STATS = [
  { n: "12K+", l: "Students placed" },
  { n: "30+", l: "Destinations" },
  { n: "98%", l: "Visa success" },
];

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="grid min-h-screen lg:grid-cols-[1.05fr_0.95fr]">
      {/* Brand panel — aubergine canvas, mesh, grain, editorial type */}
      <div className="atlas-canvas grain relative hidden flex-col justify-between overflow-hidden p-14 text-white lg:flex">
        <div className="relative z-10 flex items-center gap-3">
          <Logo variant="light" className="text-2xl" />
        </div>

        <div className="relative z-10 max-w-xl">
          <p
            className="eyebrow reveal text-[var(--gold)]"
            style={{ animationDelay: "60ms" }}
          >
            EduAdvise International · Est. Goa
          </p>
          <h1
            className="font-display reveal mt-6 text-balance text-6xl font-light leading-[0.98] tracking-tight"
            style={{ animationDelay: "140ms" }}
          >
            Where ambition
            <br />
            finds its
            <span className="italic text-[var(--gold)]"> destination.</span>
          </h1>
          <p
            className="reveal mt-7 max-w-md text-lg leading-relaxed text-white/70"
            style={{ animationDelay: "240ms" }}
          >
            The operating system behind every offer letter, visa and boarding
            pass. Guiding students from first enquiry to first day abroad.
          </p>

          <div
            className="reveal mt-12 flex gap-10"
            style={{ animationDelay: "360ms" }}
          >
            {STATS.map((s) => (
              <div key={s.l}>
                <div className="font-display text-4xl font-light text-white">
                  {s.n}
                </div>
                <div className="mt-1 text-xs uppercase tracking-widest text-white/50">
                  {s.l}
                </div>
              </div>
            ))}
          </div>
        </div>

        <p
          className="reveal relative z-10 text-sm text-white/40"
          style={{ animationDelay: "480ms" }}
        >
          © {new Date().getFullYear()} EduAdvise International · Margao, Goa
        </p>

        {/* oversized decorative serif glyph bleeding off-canvas */}
        <span
          className="font-display pointer-events-none absolute -bottom-24 -right-10 z-0 select-none text-[22rem] leading-none text-white/[0.04]"
          aria-hidden
        >
          e
        </span>
      </div>

      {/* Form side — ivory, generous negative space */}
      <div className="flex items-center justify-center bg-[oklch(0.99_0.005_320)] p-6 sm:p-10">
        <div className="w-full max-w-sm">
          <div className="mb-10 lg:hidden">
            <Logo />
          </div>
          {children}
        </div>
      </div>
    </div>
  );
}