import { ThemeToggle } from "@/components/ThemeToggle";
import { ShieldCheck } from "lucide-react";

export function AuthFrame({ children, title, description, firstLogin = false }: {
  children: React.ReactNode; title: string; description: string; firstLogin?: boolean;
}) {
  return <main className="flex min-h-[100svh] items-center justify-center px-4 py-6 sm:px-8 sm:py-12">
    <div className="grid w-full max-w-5xl overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-xl shadow-[#003D5B]/5 dark:border-border dark:bg-surface lg:grid-cols-[0.9fr_1fr]">
      <aside className="relative hidden flex-col justify-between overflow-hidden bg-[#003D5B] p-10 text-white lg:flex">
        <div className="relative z-10 flex items-center gap-3">
          <img src="/brand/logo.png" alt="Mega Plant" className="h-14 w-14 rounded-2xl bg-white object-contain p-1" />
          <div><p className="text-xl font-semibold">Mega Plant</p><p className="mt-0.5 text-xs uppercase tracking-[0.16em] text-white/60">Mega Infrastructure</p></div>
        </div>
        <div className="relative z-10 my-20">
          <div className="mb-6 h-1 w-12 rounded-full bg-[#EDAE49]" />
          <h2 className="max-w-xs text-4xl font-semibold leading-tight tracking-tight">Your plant.<br />One clear view.</h2>
          <p className="mt-5 max-w-xs text-sm leading-relaxed text-white/65">Fleet, income and running costs, together in one place.</p>
        </div>
        <div className="relative z-10 flex items-center gap-2 text-xs text-white/65"><ShieldCheck className="h-4 w-4" />Your team's workspace</div>
        <svg className="pointer-events-none absolute -bottom-8 -right-12 h-80 w-80 text-white/5" viewBox="0 0 300 300" fill="none" aria-hidden="true">
          <path d="M30 265H290M90 265V75M105 265V75M55 75H270L95 25L55 75ZM230 75V160M220 160H240V180H220Z" stroke="currentColor" strokeWidth="8" />
          <path d="M90 125L105 150L90 175L105 200L90 225L105 250M55 75L95 25L130 75L165 42L195 75L225 59L270 75" stroke="currentColor" strokeWidth="3" />
        </svg>
      </aside>
      <section className="min-w-0 px-6 py-7 sm:px-10 sm:py-10 lg:px-12 lg:py-12">
        <div className="mb-10 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3 lg:hidden">
            <img src="/brand/logo.png" alt="Mega Plant" className="h-12 w-12 rounded-xl bg-white object-contain" />
            <span className="text-base font-semibold">Mega Plant</span>
          </div>
          <p className="hidden text-xs font-medium uppercase tracking-[0.16em] text-gray-400 lg:block">{firstLogin ? "First sign-in" : "Team access"}</p>
          <ThemeToggle />
        </div>
        <h1 className="text-3xl font-semibold tracking-tight text-[#003D5B] dark:text-white">{title}</h1>
        <p className="mb-7 mt-3 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{description}</p>
        {children}
        <p className="mt-10 text-xs text-gray-400 dark:text-gray-500">Mega Infrastructure · Plant operations</p>
      </section>
    </div>
  </main>;
}