@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 py-10">
    <div class="w-full max-w-[460px] 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">Create your business account</p>
        </div>

        <div class="p-6">
            <form action="{{ route('register') }}" method="POST" class="space-y-4">
                @csrf
                
                <div>
                    <label class="app-label mb-1 block">Business / Company Name</label>
                    <input type="text" name="company_name" value="{{ old('company_name') }}" required 
                           class="w-full qbo-input h-9 px-3 font-medium" 
                           placeholder="e.g. ZedBank Solutions">
                    @error('company_name')
                        <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="app-label mb-1 block">First Name</label>
                        <input type="text" name="first_name" value="{{ old('first_name') }}" required 
                               class="w-full qbo-input h-9 px-3 font-medium" 
                               placeholder="Mateyo">
                        @error('first_name')
                            <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="app-label mb-1 block">Last Name</label>
                        <input type="text" name="last_name" value="{{ old('last_name') }}" required 
                               class="w-full qbo-input h-9 px-3 font-medium" 
                               placeholder="Maikabo">
                        @error('last_name')
                            <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-1">
                        <label class="app-label mb-1 block">Personal Phone</label>
                        <input type="text" name="phone_number" value="{{ old('phone_number') }}" required 
                               class="w-full qbo-input h-9 px-3 font-medium" 
                               placeholder="097.......">
                        @error('phone_number')
                            <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="col-span-1">
                        <label class="app-label mb-1 block">Work Email</label>
                        <input type="email" name="email" value="{{ old('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="grid grid-cols-2 gap-4">
                    <div>
                        <label class="app-label mb-1 block">Password</label>
                        <input type="password" name="password" required 
                               class="w-full qbo-input h-9 px-3 font-mono" 
                               placeholder="••••••••">
                        @error('password')
                            <p class="text-[10px] text-red-500 font-bold mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="app-label mb-1 block">Confirm</label>
                        <input type="password" name="password_confirmation" required 
                               class="w-full qbo-input h-9 px-3 font-mono" 
                               placeholder="••••••••">
                    </div>
                </div>

                <div class="pt-2">
                    <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">
                        Create Business Account
                    </button>
                </div>
            </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">
                Already have an account? <a href="{{ route('login') }}" class="text-indigo-600 hover:underline ml-1">Sign In instead</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 256-bit AES Encryption</span>
    </div>
</div>
@endsection