import { Link } from '@inertiajs/react';
import AppLogoIcon from '@/components/app-logo-icon';
import { home } from '@/routes';
import type { AuthLayoutProps } from '@/types';

export default function AuthSimpleLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    return (
        <div className="min-h-svh bg-[radial-gradient(circle_at_top,_rgba(189,139,56,0.18),_transparent_30%),linear-gradient(180deg,_var(--background),_color-mix(in_oklab,_var(--background)_92%,_black))] p-4 md:p-8">
            <div className="mx-auto grid min-h-[calc(100svh-2rem)] w-full max-w-6xl overflow-hidden rounded-[2rem] border border-border/70 bg-card/95 shadow-xl backdrop-blur md:grid-cols-[1.1fr_0.9fr]">
                <div className="relative hidden flex-col justify-between overflow-hidden border-r border-border/70 bg-[linear-gradient(180deg,_rgba(28,41,37,0.96),_rgba(19,26,24,0.98))] p-10 text-white md:flex">
                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(196,143,50,0.22),_transparent_34%)]" />
                    <div className="relative">
                        <Link
                            href={home()}
                            className="inline-flex items-center gap-3 font-medium"
                        >
                            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/10">
                                <AppLogoIcon className="size-6 fill-current text-white" />
                            </div>
                            <div>
                                <p className="text-base font-semibold">
                                    Clay Shooter
                                </p>
                                <p className="text-xs text-white/60">
                                    Sporting clays scoring platform
                                </p>
                            </div>
                        </Link>
                    </div>

                    <div className="relative space-y-6">
                        <div className="space-y-3">
                            <p className="text-sm font-medium uppercase tracking-[0.22em] text-[#d1b16f]">
                                Built for the range
                            </p>
                            <h2 className="max-w-md text-4xl font-semibold leading-tight">
                                Fast, professional course management on desktop and mobile.
                            </h2>
                            <p className="max-w-md text-sm leading-6 text-white/72">
                                Set up locations, define stand layouts, manage staff access, and prepare the ground for score entry with a calm, field-ready interface.
                            </p>
                        </div>
                        <div className="grid gap-3">
                            <div className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-white/80">
                                Role-based admin controls for venue staff
                            </div>
                            <div className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-white/80">
                                Stand and clay setup information in one place
                            </div>
                            <div className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-white/80">
                                Mobile-friendly layouts for use at the clubhouse or on course
                            </div>
                        </div>
                    </div>

                    <div className="relative text-xs uppercase tracking-[0.18em] text-white/45">
                        Clean setup now, scoring workflow next
                    </div>
                </div>

                <div className="flex items-center justify-center p-6 md:p-10">
                    <div className="w-full max-w-md">
                        <div className="mb-8 flex flex-col gap-4">
                            <Link
                                href={home()}
                                className="inline-flex items-center gap-3 md:hidden"
                            >
                                <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary text-primary-foreground shadow-sm">
                                    <AppLogoIcon className="size-6 fill-current" />
                                </div>
                                <div>
                                    <p className="font-semibold">Clay Shooter</p>
                                    <p className="text-xs text-muted-foreground">
                                        Sporting clays scoring platform
                                    </p>
                                </div>
                            </Link>

                            <div className="space-y-2">
                                <h1 className="text-2xl font-semibold">
                                    {title}
                                </h1>
                                <p className="text-sm leading-6 text-muted-foreground">
                                    {description}
                                </p>
                            </div>
                        </div>

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