import { Brand } from "@/components/brand";

export default function AuthLayout({ children }: LayoutProps<"/">) {
  return (
    <div className="grid min-h-dvh lg:grid-cols-[minmax(0,5fr)_minmax(0,6fr)]">
      <aside className="relative hidden overflow-hidden bg-ink p-12 text-white lg:flex lg:flex-col">
        <Brand />
        <div className="mt-auto max-w-md">
          <p className="text-[34px] font-semibold leading-[1.15] tracking-[-0.015em]">
            Every customer conversation on WhatsApp, run from one place.
          </p>
          <p className="mt-4 text-[15px] text-white/65">
            Keep your contacts consented and organised, reach them with approved templates, and let bots handle the routine replies.
          </p>
        </div>
        {/* Decorative chat bubbles echoing the brand mark */}
        <div aria-hidden className="pointer-events-none absolute right-12 top-32 flex flex-col items-end gap-3">
          <div className="rounded-2xl rounded-br-sm bg-mint px-5 py-3 text-sm font-medium text-ink">Your order has shipped 📦</div>
          <div className="mr-16 rounded-2xl rounded-bl-sm bg-ink-2 px-5 py-3 text-sm text-white/80">Thanks! When will it arrive?</div>
          <div className="rounded-2xl rounded-br-sm bg-mint/90 px-5 py-3 text-sm font-medium text-ink">Tomorrow, before 6 pm</div>
        </div>
        <p className="mt-10 text-xs text-white/40">Devwebs Tech Solution</p>
      </aside>
      <main className="flex items-center justify-center bg-white px-6 py-12">
        <div className="w-full max-w-[400px]">
          <div className="mb-8 lg:hidden">
            <Brand tone="dark" />
          </div>
          {children}
        </div>
      </main>
    </div>
  );
}