@extends('layouts.base')
@section('title', $mode === 'register' ? 'Crear cuenta · DummyBot' : 'Entrar · DummyBot')

@section('content')
<div class="min-h-screen flex">
    {{-- LEFT: Form --}}
    <div class="flex-1 flex items-center justify-center px-6 py-12">
        <div class="w-full max-w-sm anim-up">

            {{-- Logo --}}
            <a href="{{ route('home') }}" class="inline-flex items-center gap-2.5 mb-10">
                <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-glow">
                    <svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="4" y="8" width="16" height="12" rx="2"></rect>
                        <circle cx="9" cy="14" r="1.5" fill="currentColor"></circle>
                        <circle cx="15" cy="14" r="1.5" fill="currentColor"></circle>
                        <path d="M12 4v4"></path>
                    </svg>
                </div>
                <span class="font-bold text-lg">DummyBot</span>
            </a>

            <h1 class="text-2xl font-bold mb-1">
                {{ $mode === 'register' ? 'Crea tu cuenta' : 'Bienvenido de vuelta' }}
            </h1>
            <p class="text-zinc-400 text-sm mb-8">
                {{ $mode === 'register' ? 'Tus tareas, en un bot con carita kawaii.' : 'Entra para ver qué tienes pendiente.' }}
            </p>

            @if ($errors->any())
                <div class="mb-5 p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-300 text-sm anim-down">
                    @if($errors->count() === 1)
                        {{ $errors->first() }}
                    @else
                        <ul class="list-disc list-inside space-y-0.5">
                            @foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach
                        </ul>
                    @endif
                </div>
            @endif

            <form method="POST" action="{{ $mode === 'register' ? route('register') : route('login') }}" class="space-y-4">
                @csrf

                @if($mode === 'register')
                <div>
                    <label class="label">Nombre</label>
                    <input type="text" name="name" required autofocus class="input" value="{{ old('name') }}" autocomplete="name">
                </div>
                @endif

                <div>
                    <label class="label">Email</label>
                    <input type="email" name="email" required class="input" value="{{ old('email') }}" autocomplete="email" {{ $mode === 'login' ? 'autofocus' : '' }}>
                </div>

                <div>
                    <label class="label">Contraseña{{ $mode === 'register' ? ' (mín. 8)' : '' }}</label>
                    <input type="password" name="password" required minlength="{{ $mode === 'register' ? 8 : 1 }}" class="input" autocomplete="{{ $mode === 'register' ? 'new-password' : 'current-password' }}">
                </div>

                @if($mode === 'register')
                <div>
                    <label class="label">Repite la contraseña</label>
                    <input type="password" name="password_confirmation" required minlength="8" class="input" autocomplete="new-password">
                </div>
                @endif

                <button type="submit" class="btn btn-primary w-full justify-center mt-6">
                    {{ $mode === 'register' ? 'Crear cuenta' : 'Entrar' }}
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </button>
            </form>

            <div class="mt-8 pt-6 border-t border-white/5 text-center text-sm text-zinc-500">
                @if($mode === 'register')
                    ¿Ya tienes cuenta? <a href="{{ route('login') }}" class="text-indigo-400 hover:text-indigo-300 font-medium">Entrar</a>
                @else
                    ¿No tienes cuenta? <a href="{{ route('register') }}" class="text-indigo-400 hover:text-indigo-300 font-medium">Crear una gratis</a>
                @endif
            </div>
        </div>
    </div>

    {{-- RIGHT: Decoration --}}
    <div class="hidden lg:flex flex-1 relative items-center justify-center p-12 border-l border-white/5 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-transparent"></div>
        <div class="absolute inset-0" style="background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 24px 24px;"></div>

        <div class="relative max-w-md anim-up" style="animation-delay: 0.1s">
            <div class="mx-auto w-64 h-64 rounded-3xl bg-gradient-to-br from-zinc-800 to-zinc-900 shadow-2xl border border-white/10 flex items-center justify-center p-6 mb-8">
                <div class="w-full aspect-square rounded-2xl bg-black border-4 border-zinc-800 flex flex-col items-center justify-center p-3 text-center">
                    <div class="text-[8px] text-zinc-500 mb-1">DummyBot</div>
                    <div class="w-12 h-px bg-zinc-800 mb-2"></div>
                    <div class="text-lg font-bold text-white leading-tight">Hola,<br>listo para<br>empezar</div>
                    <div class="text-[8px] text-zinc-500 mt-2">👋</div>
                </div>
            </div>

            <div class="text-center">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs text-zinc-300 mb-4">
                    <span class="w-1.5 h-1.5 rounded-full bg-green-400 pulse-dot"></span>
                    Open source · MIT
                </div>
                <h2 class="text-2xl font-bold mb-2">Hecho con cariño</h2>
                <p class="text-zinc-400 text-sm leading-relaxed">
                    Un bot físico para personas con TDAH. Sin nubes invasivas, sin notificaciones, sin agobio.
                </p>
            </div>
        </div>
    </div>
</div>
@endsection