@extends('layouts.responsive')

@section('title', 'Sign In')

@section('meta')
<meta name="description" content="Login securely to your SwiftPay account to send money, buy data, and get virtual cards.">
<meta name="keywords" content="SwiftPay login, secure banking, Nigeria fintech">
@endsection

@section('content')
<div class="min-h-screen lg:grid lg:grid-cols-2">
    <!-- Desktop Sidebar - Hidden on mobile -->
    <div class="hidden lg:flex lg:flex-col lg:justify-center lg:items-center bg-gradient-to-br from-primary-600 via-primary-700 to-primary-800 relative overflow-hidden">
        <!-- Background Pattern -->
        <div class="absolute inset-0 opacity-10">
            <svg class="w-full h-full" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                <pattern id="fintech-pattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
                    <circle cx="25" cy="25" r="20" stroke="currentColor" stroke-width="1" fill="none" opacity="0.5"/>
                    <circle cx="25" cy="25" r="10" stroke="currentColor" stroke-width="1" fill="none" opacity="0.3"/>
                    <circle cx="25" cy="25" r="5" fill="currentColor" opacity="0.6"/>
                </pattern>
                <rect width="100%" height="100%" fill="url(#fintech-pattern)"/>
            </svg>
        </div>
        
        <!-- Fintech Illustration -->
        <div class="relative z-10 text-center px-8 max-w-md">
            <!-- Mobile Banking Illustration -->
            <div class="mb-8 relative">
                <div class="w-64 h-80 bg-white/10 backdrop-blur-sm rounded-3xl shadow-2xl mx-auto relative overflow-hidden border border-white/20">
                    <!-- Phone Screen -->
                    <div class="absolute inset-4 bg-slate-900 rounded-2xl overflow-hidden">
                        <!-- Status Bar -->
                        <div class="h-6 bg-slate-800 flex items-center justify-between px-4 text-xs text-white/60">
                            <span>9:41</span>
                            <span>●●●</span>
                        </div>
                        
                        <!-- App Content -->
                        <div class="p-4 space-y-3">
                            <!-- Balance Card -->
                            <div class="h-20 bg-gradient-to-r from-primary-500 to-primary-600 rounded-xl flex items-center justify-between px-4">
                                <div>
                                    <div class="text-white/60 text-xs">Balance</div>
                                    <div class="text-white font-bold">₦125,000</div>
                                </div>
                                <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
                                    <i class="fas fa-eye text-white text-xs"></i>
                                </div>
                            </div>
                            
                            <!-- Quick Actions -->
                            <div class="grid grid-cols-4 gap-2">
                                <div class="h-12 bg-blue-500/20 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-paper-plane text-blue-400 text-xs"></i>
                                </div>
                                <div class="h-12 bg-green-500/20 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-plus text-green-400 text-xs"></i>
                                </div>
                                <div class="h-12 bg-purple-500/20 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-qrcode text-purple-400 text-xs"></i>
                                </div>
                                <div class="h-12 bg-orange-500/20 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-mobile-alt text-orange-400 text-xs"></i>
                                </div>
                            </div>
                            
                            <!-- Transactions -->
                            <div class="space-y-2">
                                <div class="flex items-center justify-between p-2 bg-slate-800/50 rounded-lg">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-6 h-6 bg-green-500/20 rounded-full flex items-center justify-center">
                                            <i class="fas fa-arrow-down text-green-400 text-xs"></i>
                                        </div>
                                        <div class="text-xs text-white/80">Received</div>
                                    </div>
                                    <div class="text-xs text-green-400">+₦5,000</div>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-slate-800/50 rounded-lg">
                                    <div class="flex items-center space-x-2">
                                        <div class="w-6 h-6 bg-blue-500/20 rounded-full flex items-center justify-center">
                                            <i class="fas fa-mobile-alt text-blue-400 text-xs"></i>
                                        </div>
                                        <div class="text-xs text-white/80">Airtime</div>
                                    </div>
                                    <div class="text-xs text-red-400">-₦500</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Floating Elements -->
                    <div class="absolute -top-4 -right-4 w-12 h-12 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm border border-white/30">
                        <i class="fas fa-credit-card text-white"></i>
                    </div>
                    <div class="absolute -bottom-4 -left-4 w-10 h-10 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm border border-white/30">
                        <i class="fas fa-shield-alt text-white"></i>
                    </div>
                </div>
            </div>
            
            <!-- Text Content -->
            <h2 class="text-3xl font-bold text-white mb-4">
                Secure & Fast Digital Banking
            </h2>
            <p class="text-white/80 text-lg leading-relaxed">
                Experience the future of Nigerian fintech with {{ setting('business.name', 'AbokiPay') }}. 
                Send money, pay bills, and manage your finances with confidence.
            </p>
            
            <!-- Features List -->
            <div class="mt-8 space-y-4 text-left">
                <div class="flex items-center space-x-3 text-white/90">
                    <div class="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-sm"></i>
                    </div>
                    <span>Bank-level security & encryption</span>
                </div>
                <div class="flex items-center space-x-3 text-white/90">
                    <div class="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-sm"></i>
                    </div>
                    <span>Instant money transfers</span>
                </div>
                <div class="flex items-center space-x-3 text-white/90">
                    <div class="w-6 h-6 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-check text-sm"></i>
                    </div>
                    <span>Virtual cards for online payments</span>
                </div>
            </div>
        </div>
        
        <!-- Decorative elements -->
        <div class="absolute top-20 left-10 w-6 h-6 bg-white/10 rounded-full animate-pulse"></div>
        <div class="absolute bottom-32 right-16 w-4 h-4 bg-white/10 rounded-full animate-pulse delay-1000"></div>
        <div class="absolute top-1/2 left-6 w-2 h-2 bg-white/10 rounded-full animate-pulse delay-500"></div>
    </div>

    <!-- Login Form - Full height on mobile, centered on desktop -->
    <div class="flex items-center justify-center p-4 lg:p-8">
        <div class="w-full max-w-sm">
            <div class="text-center mb-8">
                <div class="flex justify-center mb-6">
                    <div class="w-20 h-20 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl flex items-center justify-center shadow-2xl">
                        <i class="fas fa-wallet text-white text-2xl"></i>
                    </div>
                </div>
                <h1 class="text-3xl font-bold text-white mb-2">{{ setting('business.name', config('app.name', 'SwiftPay')) }}</h1>
                <p class="text-gray-400">Welcome back! Sign in to continue</p>
            </div>
            
            <form method="POST" action="{{ route('login') }}" class="space-y-6">
                @csrf
                
                <div>
                    <label for="email" class="form-label">
                        Email or Phone Number
                    </label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" 
                           class="form-input @error('email') border-red-500 @enderror" 
                           placeholder="Enter your email or phone"
                           required autofocus>
                    @error('email')
                        <p class="mt-2 text-sm text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <div>
                    <label for="password" class="form-label">
                        Password
                    </label>
                    <input id="password" type="password" name="password" 
                           class="form-input @error('password') border-red-500 @enderror" 
                           placeholder="Enter your password"
                           required>
                    @error('password')
                        <p class="mt-2 text-sm text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                        </p>
                    @enderror
                </div>

                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 bg-dark-800 border-dark-600 rounded">
                        <label for="remember" class="ml-2 block text-sm text-gray-300">
                            Remember me
                        </label>
                    </div>

                    <div class="text-sm">
                        <a href="#" class="font-medium text-primary-400 hover:text-primary-300 transition-colors">
                            Forgot Password?
                        </a>
                    </div>
                </div>

                <div>
                    <button type="submit" class="btn btn-primary w-full py-4 text-base font-semibold">
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        Sign In to {{ setting('business.name', config('app.name', 'SwiftPay')) }}
                    </button>
                </div>
            </form>

            <div class="mt-8">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-dark-700"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-slate-950 text-gray-400">New to {{ setting('business.name', config('app.name', 'SwiftPay')) }}?</span>
                    </div>
                </div>

                <div class="mt-6 text-center">
                    <p class="text-gray-400">
                        Don't have an account? 
                        <a href="{{ route('register') }}" class="font-medium text-primary-400 hover:text-primary-300 transition-colors">
                            Sign up for free
                        </a>
                    </p>
                </div>
            </div>

            <!-- Security Notice -->
            <div class="mt-8 p-4 bg-dark-800/30 backdrop-blur-sm border border-dark-700 rounded-2xl">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fas fa-shield-alt text-green-400 text-lg"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-gray-300">
                            <span class="text-green-400 font-semibold">Secure Login:</span> Your connection is encrypted and protected by bank-grade security.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection