<div class="min-h-screen grid lg:grid-cols-2">

    {{-- LEFT SIDE (BRANDING) --}}
    <div class="hidden lg:flex flex-col justify-between bg-gradient-to-br from-primary to-primary/80 text-white p-10">
        <div>
            <x-logo mode="!fill-white" class="w-40 h-16"/>
        </div>
        <div class="space-y-6 max-w-md">
            <h1 class="text-3xl font-semibold leading-tight">
                {{ t('auth.login.hero.title') }}
            </h1>
            <p class="text-sm text-white/80">
                {{ t('auth.login.hero.subtitle') }}
            </p>
        </div>
        <div class="text-xs text-white/50">
            © {{ date('Y') }} {{ config('app.name') }}. {{ t('auth.hero.copyright') }}
        </div>
    </div>

    {{-- RIGHT SIDE --}}
    <div class="flex items-center justify-center p-6">
        <div class="w-full max-w-md space-y-6">

            <div class="lg:hidden text-center">
                <x-logo class="w-40 h-16 mx-auto"/>
            </div>

            <div class="bg-surface border border-border rounded-2xl p-6 shadow-card space-y-5">

                @if($sent)
                    <div class="text-center py-4">
                        <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-4">
                            <x-heroicon-o-check-circle class="w-8 h-8 text-green-500"/>
                        </div>
                        <h2 class="text-xl font-semibold text-gray-900 mb-2">E-Mail gesendet</h2>
                        <p class="text-gray-500 text-sm">
                            Falls ein Konto mit dieser Adresse existiert, erhältst du eine E-Mail mit einem Reset-Link.
                        </p>
                        <a href="/login" class="inline-block mt-6 text-sm text-indigo-600 hover:underline">
                            ← Zurück zum Login
                        </a>
                    </div>
                @else
                    <div>
                        <a href="/login" class="text-sm text-indigo-600 flex items-center gap-1 mb-4">
                            <x-heroicon-o-arrow-left class="w-4 h-4"/> Zurück zum Login
                        </a>
                        <h2 class="text-xl font-semibold text-text">Passwort vergessen?</h2>
                        <p class="text-sm text-text-muted mt-1">
                            Gib deine E-Mail ein und wir senden dir einen Reset-Link.
                        </p>
                    </div>

                    <form wire:submit.prevent="send" class="space-y-4">
                        <div>
                            <input
                                type="email"
                                wire:model="email"
                                placeholder="deine@email.com"
                                class="w-full border rounded-xl px-4 py-3 text-sm
                                    {{ $errors->has('email') ? 'border-danger' : 'border-border' }}"
                            >
                            @error('email')
                                <p class="text-xs text-danger mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <button
                            type="submit"
                            class="w-full bg-primary text-white py-3 rounded-xl transition hover:opacity-90 text-sm font-medium"
                        >
                            <span wire:loading.remove>Reset-Link senden</span>
                            <span wire:loading>Wird gesendet…</span>
                        </button>
                    </form>
                @endif

            </div>
        </div>
    </div>

</div>
