edr-platform/apps/edr-freight-web/portal/src/components/auth/AuthLayout.tsx

import { cn } from "@/lib/utils";
import { Box, Group, Stack, Text, ThemeIcon, Title } from "@mantine/core";
import { ShieldCheck, Train } from "lucide-react";
import type { ReactNode } from "react";

export interface AuthLayoutProps {
  children: ReactNode;
  parentClassName?: string;
  contentClassName?: string;
  left: {
    badge: string;
    title: string;
    description: string;
    features: string[];
    stats: {
      label: string;
      value: string;
      footer: string;
      progress: string;
    };
  };
}

export default function AuthLayout({
  children,
  parentClassName,
  contentClassName,
  left,
}: AuthLayoutProps) {
  return (
    <Box className="min-h-screen bg-white text-[var(--mantine-color-gray-9)]">
      <Box className={cn("grid min-h-screen lg:grid-cols-2", parentClassName)}>
        {/* ── Left: branded panel ─────────────────────────────────────── */}
        <Box className="relative hidden overflow-hidden bg-gradient-to-br from-emerald-900 via-emerald-700 to-emerald-600 px-12 py-10 text-white lg:flex lg:flex-col lg:justify-between">
          {/* rail-line motif */}
          <Box
            aria-hidden
            className="pointer-events-none absolute inset-y-0 right-0 w-[360px] opacity-10 bg-[repeating-linear-gradient(90deg,#fff_0,#fff_2px,transparent_2px,transparent_18px)] [mask-image:linear-gradient(90deg,transparent_0%,#000_90%)] [-webkit-mask-image:linear-gradient(90deg,transparent_0%,#000_90%)]"
          />
          {/* corner glow */}
          <Box
            aria-hidden
            className="pointer-events-none absolute -right-24 -top-24 h-[320px] w-[320px] rounded-full blur-2xl bg-[radial-gradient(circle,rgba(255,255,255,0.16),transparent_70%)]"
          />

          {/* Brand */}
          <Group gap="sm" className="relative z-10">
            <Box className="flex size-14 items-center justify-center rounded-3xl border border-white/20 bg-white/10 backdrop-blur">
              <Train className="size-7" />
            </Box>
            <Box>
              <Text fw={700} fz={20} className="leading-tight">
                EDR Freight
              </Text>
              <Text fz="sm" className="text-white/70">
                Railway Logistics Platform
              </Text>
            </Box>
          </Group>

          {/* Headline + features */}
          <Box className="relative z-10 my-10 max-w-lg">
            <Box className="inline-flex rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-semibold backdrop-blur">
              {left.badge}
            </Box>
            <Title
              order={1}
              mt="lg"
              c="white"
              className="text-4xl! font-bold! leading-tight tracking-tight"
            >
              {left.title}
            </Title>
            <Text mt="lg" fz="lg" className="leading-8 text-white/85">
              {left.description}
            </Text>

            <Stack gap="md" mt={40}>
              {left.features.map((item) => (
                <Group key={item} gap="sm" wrap="nowrap">
                  <Box className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-white/10">
                    <ShieldCheck className="size-5" />
                  </Box>
                  <Text fw={500} className="text-white/95">
                    {item}
                  </Text>
                </Group>
              ))}
            </Stack>
          </Box>

          {/* spacer keeps brand pinned top / content centered */}
          <Box className="relative z-10" />
        </Box>

        {/* ── Right: form area ────────────────────────────────────────── */}
        <Box
          className={cn(
            "flex items-center justify-center bg-[var(--mantine-color-gray-0)] p-6 md:p-10",
            contentClassName,
          )}
        >
          <Box className="w-full max-w-xl">
            {/* Mobile brand */}
            <Group gap="sm" mb="xl" className="lg:hidden!">
              <ThemeIcon
                size={48}
                radius="lg"
                variant="gradient"
                gradient={{ from: "edr-green.5", to: "edr-green.7", deg: 135 }}
              >
                <Train className="size-6" />
              </ThemeIcon>
              <Box>
                <Text fw={700} fz={22}>
                  EDR Freight
                </Text>
                <Text fz="sm" c="dimmed">
                  Railway Logistics Platform
                </Text>
              </Box>
            </Group>
            <Box>{children}</Box>
          </Box>
        </Box>
      </Box>
    </Box>
  );
}