@extends('layouts.app')

@section('title', 'Agent and Staff Portal Login - Frantyapp')

@section('content')
<div class="bg-black text-white py-14 border-b border-neutral-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center max-w-2xl">
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-gray-400 block">Secure Authentication</span>
        <div class="w-12 h-[2px] bg-brand-blue mx-auto mt-2 mb-3"></div>
        <h1 class="font-serif-heading font-extrabold text-3xl sm:text-4xl mt-2">Frantyapp Portal Sign In</h1>
        <p class="text-gray-400 text-xs sm:text-sm mt-1 font-light">Sign in to manage your agent profile, publish new property listings, or review leads.</p>
    </div>
</div>

<div class="max-w-md mx-auto px-4 py-16">
    <div class="border border-gray-200 p-8 bg-white shadow-xl">
        
        <form action="{{ route('login') }}" method="POST" class="space-y-5">
            @csrf

            @if($errors->any())
                <div class="p-3 bg-red-50 border border-red-200 text-red-700 text-xs rounded-none">
                    {{ $errors->first() }}
                </div>
            @endif

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Email Address</label>
                <input type="email" name="email" value="{{ old('email') }}" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-brand-blue">
            </div>

            <div x-data="{ showPassword: false }">
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Password</label>
                <div class="relative">
                    <input :type="showPassword ? 'text' : 'password'" name="password" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-brand-blue pr-10">
                    <button type="button" @click="showPassword = !showPassword" class="absolute right-3 top-3 text-gray-400 hover:text-black focus:outline-none text-xs">
                        <i class="fa-solid" :class="showPassword ? 'fa-eye-slash' : 'fa-eye'"></i>
                    </button>
                </div>
            </div>

            <div class="flex items-center justify-between text-xs">
                <label class="flex items-center space-x-2 text-gray-600">
                    <input type="checkbox" name="remember" class="w-4 h-4 text-brand-blue border-gray-300">
                    <span>Remember me</span>
                </label>
            </div>

            <button type="submit" class="w-full py-3.5 bg-brand-blue text-white text-xs font-bold uppercase tracking-[0.2em] hover:bg-brand-darkblue transition-colors shadow-md rounded-none">
                Sign In To Portal
            </button>
        </form>

    </div>
</div>
@endsection
