<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<x-source-comment />
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ $title ?? 'Clusev' }}</title>
    @include('partials.head-icons')
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body class="min-h-screen bg-void font-sans text-ink antialiased selection:bg-accent/25">
    <div class="grid min-h-screen lg:grid-cols-[1.05fr_0.95fr]">
        {{-- Brand panel — hidden below lg --}}
        <aside class="relative hidden overflow-hidden border-r border-line bg-base p-10 lg:flex lg:flex-col lg:justify-between xl:p-12">
            {{-- atmospheric glow mesh --}}
            <div class="pointer-events-none absolute -left-28 -top-28 h-96 w-96 rounded-full bg-accent/10 blur-3xl" aria-hidden="true"></div>
            <div class="pointer-events-none absolute -bottom-32 -right-24 h-96 w-96 rounded-full bg-cyan/[0.07] blur-3xl" aria-hidden="true"></div>

            {{-- top: wordmark --}}
            <div class="relative z-10 flex items-center gap-2.5">
                <span class="grid h-9 w-9 place-items-center rounded-md border border-accent/25 bg-accent/10 text-accent shadow-[0_0_18px_-2px_var(--color-accent)]">
                    <x-icon name="server" class="h-5 w-5" />
                </span>
                <span class="font-display text-xl font-semibold tracking-wide text-ink">Clus<span class="text-accent">e</span>v</span>
            </div>

            {{-- middle: headline + faux terminal --}}
            <div class="relative z-10 flex max-w-md flex-col gap-7">
                <div class="space-y-3">
                    <h1 class="text-balance font-display text-4xl font-bold leading-[1.12] tracking-tight text-ink">
                        {{ __('auth.brand_headline_lead') }} <span class="text-accent">{{ __('auth.brand_headline_accent') }}</span>.
                    </h1>
                    <p class="max-w-sm text-sm leading-relaxed text-ink-2">
                        {{ __('auth.brand_tagline') }}
                    </p>
                </div>

                <div class="overflow-hidden rounded-lg border border-line bg-inset shadow-panel">
                    <div class="flex items-center gap-2 border-b border-line bg-raised px-3 py-2.5">
                        <span class="flex gap-1.5">
                            <span class="h-2 w-2 rounded-full bg-offline/50"></span>
                            <span class="h-2 w-2 rounded-full bg-warning/50"></span>
                            <span class="h-2 w-2 rounded-full bg-online/50"></span>
                        </span>
                        <span class="font-mono text-[10px] text-ink-4">{{ __('auth.terminal_title') }}</span>
                    </div>
                    <div class="space-y-2.5 p-4 font-mono text-xs leading-relaxed">
                        <p class="flex items-center gap-2.5 text-ink-2"><span class="w-8 shrink-0 text-accent-text">ssh</span> {{ __('auth.terminal_ssh') }}</p>
                        <p class="flex items-center gap-2.5 text-ink-2"><span class="w-8 shrink-0 text-accent-text">key</span> {{ __('auth.terminal_key') }}</p>
                        <p class="flex items-center gap-2.5 text-ink-2"><span class="w-8 shrink-0 text-accent-text">2fa</span> {{ __('auth.terminal_2fa') }}</p>
                        <p class="flex items-center gap-2.5 text-ink-2"><span class="w-8 shrink-0 text-accent-text">log</span> {{ __('auth.terminal_log') }}</p>
                        <p class="flex items-center gap-2.5 text-ink-3"><span class="w-8 shrink-0 text-cyan">core</span> {{ __('auth.terminal_core') }}</p>
                    </div>
                </div>
            </div>

            {{-- bottom: copyright + status --}}
            <div class="relative z-10 flex items-center justify-between gap-4 font-mono text-[11px] text-ink-4">
                <span>{{ __('auth.footer_copyright', ['year' => date('Y')]) }}</span>
                <span class="inline-flex items-center gap-1.5"><span class="h-1.5 w-1.5 rounded-full bg-online"></span> {{ __('auth.footer_operational') }}</span>
            </div>
        </aside>

        {{-- Form panel --}}
        <main class="relative flex items-center justify-center px-5 py-10 sm:px-8">
            <div class="absolute right-5 top-5 sm:right-8"><x-lang-switch /></div>
            <div class="w-full max-w-sm">
                {{-- wordmark for small screens (brand panel hidden) --}}
                <div class="mb-8 flex items-center gap-2.5 lg:hidden">
                    <span class="grid h-9 w-9 place-items-center rounded-md border border-accent/25 bg-accent/10 text-accent shadow-[0_0_18px_-2px_var(--color-accent)]">
                        <x-icon name="server" class="h-5 w-5" />
                    </span>
                    <span class="font-display text-xl font-semibold tracking-wide text-ink">Clus<span class="text-accent">e</span>v</span>
                </div>

                {{ $slot }}
            </div>
        </main>
    </div>
    @include('partials.toaster')
    @livewireScripts
</body>
</html>
