import { Link, usePage } from '@inertiajs/react';
import { Scale, ShieldCheck, Sparkles } from 'lucide-react';
import AppLogoIcon from '@/components/app-logo-icon';
import { home } from '@/routes';

const highlights = [
    {
        icon: ShieldCheck,
        title: 'Secure by design',
        body: 'Two-factor authentication, full audit trails and least-privilege access.',
    },
    {
        icon: Scale,
        title: 'Built for the firm',
        body: 'Matters, litigation, billing, trust accounting and documents in one place.',
    },
    {
        icon: Sparkles,
        title: 'Clarity every day',
        body: 'Your day, deadlines and approvals — surfaced the moment you sign in.',
    },
];

export default function AuthLayout({
    title = '',
    description = '',
    children,
}: {
    title?: string;
    description?: string;
    children: React.ReactNode;
}) {
    const { name } = usePage().props;

    return (
        <div className="grid min-h-dvh lg:grid-cols-2">
            {/* Brand panel */}
            <div className="relative hidden overflow-hidden bg-brand-charcoal p-10 lg:flex lg:flex-col lg:justify-between">
                <div
                    aria-hidden
                    className="pointer-events-none absolute inset-0 opacity-[0.14]"
                    style={{
                        background:
                            'radial-gradient(60rem 60rem at 15% -10%, var(--brand-gold) 0%, transparent 55%), radial-gradient(40rem 40rem at 110% 110%, var(--brand-gold-muted) 0%, transparent 50%)',
                    }}
                />
                <Link
                    href={home()}
                    className="relative z-10 flex items-center gap-3"
                >
                    <span className="flex size-10 items-center justify-center rounded-lg bg-brand-gold text-brand-charcoal">
                        <AppLogoIcon className="size-6 fill-current" />
                    </span>
                    <span className="font-heading text-lg font-semibold text-brand-gold">
                        {name}
                    </span>
                </Link>

                <div className="relative z-10 max-w-md space-y-8">
                    <div className="space-y-3">
                        <h2 className="font-heading text-3xl leading-tight font-semibold text-brand-text">
                            Legal practice management,{' '}
                            <span className="text-brand-gold">
                                done properly.
                            </span>
                        </h2>
                        <p className="text-sm text-brand-text-muted">
                            One secure platform for every matter, deadline and
                            naira — from intake to judgment.
                        </p>
                    </div>

                    <ul className="space-y-5">
                        {highlights.map((h) => (
                            <li key={h.title} className="flex gap-3">
                                <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg bg-brand-gold/10 text-brand-gold">
                                    <h.icon className="size-5" />
                                </span>
                                <div>
                                    <p className="font-medium text-brand-text">
                                        {h.title}
                                    </p>
                                    <p className="text-sm text-brand-text-muted">
                                        {h.body}
                                    </p>
                                </div>
                            </li>
                        ))}
                    </ul>
                </div>

                <p className="relative z-10 text-xs text-brand-text-muted">
                    © {new Date().getFullYear()} {name}. All rights reserved.
                </p>
            </div>

            {/* Form panel */}
            <div className="flex items-center justify-center bg-background px-6 py-12">
                <div className="w-full max-w-sm">
                    <Link
                        href={home()}
                        className="mb-8 flex items-center justify-center gap-2 lg:hidden"
                    >
                        <span className="flex size-9 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                            <AppLogoIcon className="size-5 fill-current" />
                        </span>
                        <span className="font-heading text-lg font-semibold text-primary">
                            {name}
                        </span>
                    </Link>

                    <div className="mb-6 space-y-1.5">
                        <h1 className="font-heading text-2xl font-semibold text-primary">
                            {title}
                        </h1>
                        {description && (
                            <p className="text-sm text-muted-foreground">
                                {description}
                            </p>
                        )}
                    </div>

                    {children}
                </div>
            </div>
        </div>
    );
}