@extends('layouts.app')

@section('content')
<style>
    .qbo-input {
        @apply border-slate-300 rounded-sm text-sm shadow-sm transition-all duration-200;
        border-width: 1.5px;
    }
    .qbo-input:focus {
        @apply border-indigo-500 ring-2 ring-indigo-100 outline-none;
    }
    .app-label { 
        font-size: 11px; 
        font-weight: 700; 
        color: #64748b; 
    }
</style>

<div class="flex flex-col items-center justify-center min-h-screen bg-slate-50 px-4">
    <div class="w-full max-w-[360px] bg-white border border-slate-300 rounded-sm shadow-sm overflow-hidden">
        
        <div class="p-5 border-b border-slate-100 bg-white flex flex-col items-center">
            <div class="flex items-center gap-2 group cursor-default">
                <div class="w-8 h-8 bg-indigo-600 rounded flex items-center justify-center shadow-md shadow-indigo-100 group-hover:bg-indigo-700 transition-colors duration-300">
                    <span class="text-white text-lg font-light tracking-tighter">A</span>
                </div>
                <div class="text-lg font-black tracking-tighter text-slate-900">
                    AuraAccountify
                </div>
            </div>
            <p class="app-label mt-2 opacity-70">Business Intelligence & Accounting</p>
        </div>

        <div class="p-6">
            <form action="{{ route('login') }}" method="POST" class="space-y-4">
                @csrf
                
                <div>
                    <label class="app-label mb-1 block">Email Address</label>
                    <input type="email" name="email" required 
                           class="w-full qbo-input h-9 px-3 font-medium" 
                           placeholder="name@company.com">
                    @error('email')
                        <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <div class="flex justify-between items-center mb-1">
                        <label class="app-label block">Password</label>
                        <a href="#" class="text-[10px] font-bold text-indigo-600 hover:underline">Forgot?</a>
                    </div>
                    <input type="password" name="password" required 
                           class="w-full qbo-input h-9 px-3 font-mono" 
                           placeholder="••••••••">
                </div>

                <div class="flex items-center gap-2 py-0.5">
                    <input type="checkbox" id="remember" name="remember" class="w-3.5 h-3.5 rounded-sm border-slate-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer">
                    <label for="remember" class="text-[11px] font-bold text-slate-500 cursor-pointer">Keep me signed in</label>
                </div>

                <button type="submit" class="w-full h-10 bg-indigo-600 text-white rounded-sm text-[12px] font-bold shadow-sm hover:bg-indigo-700 transition mt-1">
                    Sign In to Portal
                </button>
            </form>
        </div>

        <div class="bg-slate-50 p-4 border-t border-slate-200 text-center">
            <p class="text-[11px] font-bold text-slate-500">
                New business? <a href="{{ route('register') }}" class="text-indigo-600 hover:underline ml-1">Create an Account</a>
            </p>
        </div>
    </div>

    <div class="mt-6 flex items-center gap-2 opacity-40">
        <svg class="w-3 h-3 text-slate-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-[9px] font-bold text-slate-500">Secure SSL Encrypted Environment</span>
    </div>
</div>
@endsection