import { NextIntlClientProvider } from "next-intl"
import { getMessages } from "next-intl/server"
import { Cannabis, ClipboardCheck, Scale, Users } from "lucide-react"

import type { ReactNode } from "react"

export default async function AuthLayout({
  children,
}: {
  children: ReactNode
}) {
  const messages = await getMessages()

  return (
    <NextIntlClientProvider messages={messages}>
      <div className="fixed inset-0 z-50 flex min-h-screen bg-background text-foreground">
        {/* Left panel — branding (hidden on mobile) */}
        <div className="hidden md:flex md:w-1/2 lg:w-[55%] flex-col items-center justify-center bg-gradient-to-br from-primary/10 via-primary/5 to-background p-12 relative overflow-hidden">
          {/* Decorative background blur */}
          <div className="absolute inset-0 -z-10">
            <div className="absolute top-1/4 left-1/4 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
            <div className="absolute bottom-1/4 right-1/4 h-48 w-48 rounded-full bg-primary/5 blur-2xl" />
          </div>

          <div className="flex flex-col items-center gap-8 max-w-sm text-center">
            {/* Logo */}
            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 border border-primary/20">
              <Cannabis className="h-9 w-9 text-primary" />
            </div>

            {/* App name & tagline */}
            <div className="space-y-2">
              <h1 className="text-2xl font-bold">CannaManage</h1>
              <p className="text-muted-foreground">
                Dein Verein, digital verwaltet
              </p>
            </div>

            {/* Feature highlights */}
            <div className="space-y-4 text-left w-full">
              <div className="flex items-start gap-3">
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                  <ClipboardCheck className="h-4 w-4 text-primary" />
                </div>
                <div>
                  <p className="text-sm font-medium">
                    KCanG-Compliance
                  </p>
                  <p className="text-xs text-muted-foreground">
                    Automatische Vorgaben-Überwachung
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                  <Users className="h-4 w-4 text-primary" />
                </div>
                <div>
                  <p className="text-sm font-medium">
                    Mitgliederverwaltung
                  </p>
                  <p className="text-xs text-muted-foreground">
                    Portal, Profile und Dokumente
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                  <Scale className="h-4 w-4 text-primary" />
                </div>
                <div>
                  <p className="text-sm font-medium">
                    Abgabe-Tracking
                  </p>
                  <p className="text-xs text-muted-foreground">
                    25g/Tag und 50g/Monat automatisch
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right panel — form */}
        <div className="w-full md:w-1/2 lg:w-[45%] flex items-center justify-center p-6 sm:p-8">
          {children}
        </div>
      </div>
    </NextIntlClientProvider>
  )
}