@extends('layouts.responsive')

@section('title', 'Create Account')

@section('meta')
<meta name="description" content="Join SwiftPay today and enjoy seamless money transfers, bill payments, and virtual cards in Nigeria.">
<meta name="keywords" content="SwiftPay registration, Nigeria fintech, create account">
@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">
            <!-- Registration Success 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>
                        
                        <!-- Welcome Screen -->
                        <div class="p-4 text-center mt-8">
                            <!-- Welcome Icon -->
                            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-check text-white text-xl"></i>
                            </div>
                            
                            <!-- Welcome Text -->
                            <div class="text-white text-sm font-semibold mb-2">Welcome!</div>
                            <div class="text-white/60 text-xs mb-6">Account created successfully</div>
                            
                            <!-- Quick Setup Steps -->
                            <div class="space-y-3 text-left">
                                <div class="flex items-center space-x-3">
                                    <div class="w-6 h-6 bg-green-500/20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-check text-green-400 text-xs"></i>
                                    </div>
                                    <div class="text-xs text-white/80">Create account</div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="w-6 h-6 bg-yellow-500/20 rounded-full flex items-center justify-center">
                                        <span class="text-yellow-400 text-xs">2</span>
                                    </div>
                                    <div class="text-xs text-white/80">Verify identity</div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="w-6 h-6 bg-gray-500/20 rounded-full flex items-center justify-center">
                                        <span class="text-gray-400 text-xs">3</span>
                                    </div>
                                    <div class="text-xs text-white/60">Start transacting</div>
                                </div>
                            </div>
                            
                            <!-- Get Started Button -->
                            <div class="mt-6">
                                <div class="h-10 bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
                                    <span class="text-white text-xs font-semibold">Get Started</span>
                                </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-user-plus 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-gift text-white"></i>
                    </div>
                </div>
            </div>
            
            <!-- Text Content -->
            <h2 class="text-3xl font-bold text-white mb-4">
                Join Over 50,000 Users
            </h2>
            <p class="text-white/80 text-lg leading-relaxed">
                Start your financial journey with {{ setting('business.name', 'AbokiPay') }}. 
                Quick registration, instant access to all features.
            </p>
            
            <!-- Benefits 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-gift text-sm"></i>
                    </div>
                    <span>Free account creation</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-clock text-sm"></i>
                    </div>
                    <span>Setup in under 5 minutes</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-shield-alt text-sm"></i>
                    </div>
                    <span>Bank-level security protection</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>

    <!-- Register 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-md">
            <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-user-plus text-white text-2xl"></i>
                    </div>
                </div>
                <h1 class="text-3xl font-bold text-white mb-2">Join {{ setting('business.name', config('app.name', 'SwiftPay')) }}</h1>
                <p class="text-gray-400">Create your account to get started</p>
            </div>
            
            <form method="POST" action="{{ route('register') }}" class="space-y-6">
                @csrf
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="first_name" class="form-label">
                            First Name *
                        </label>
                        <input id="first_name" type="text" name="first_name" value="{{ old('first_name') }}" 
                               class="form-input @error('first_name') border-red-500 @enderror" 
                               placeholder="Enter your first name"
                               required autofocus>
                        @error('first_name')
                            <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="last_name" class="form-label">
                            Last Name *
                        </label>
                        <input id="last_name" type="text" name="last_name" value="{{ old('last_name') }}" 
                               class="form-input @error('last_name') border-red-500 @enderror" 
                               placeholder="Enter your last name"
                               required>
                        @error('last_name')
                            <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>

                <div>
                    <label for="email" class="form-label">
                        Email Address *
                    </label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" 
                           class="form-input @error('email') border-red-500 @enderror" 
                           placeholder="Enter your email address"
                           required>
                    @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="phone" class="form-label">
                        Phone Number *
                    </label>
                    <input id="phone" type="tel" name="phone" value="{{ old('phone') }}" 
                           class="form-input @error('phone') border-red-500 @enderror" 
                           placeholder="08012345678"
                           required>
                    @error('phone')
                        <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="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="date_of_birth" class="form-label">
                            Date of Birth *
                        </label>
                        <input id="date_of_birth" type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" 
                               class="form-input @error('date_of_birth') border-red-500 @enderror" 
                               required>
                        @error('date_of_birth')
                            <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="gender" class="form-label">
                            Gender *
                        </label>
                        <select id="gender" name="gender" 
                                class="form-input @error('gender') border-red-500 @enderror" 
                                required>
                            <option value="">Select Gender</option>
                            <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('gender')
                            <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>

                <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="Create a strong 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
                    <p class="mt-1 text-sm text-gray-400">Must be at least 8 characters long</p>
                </div>

                <div>
                    <label for="password_confirmation" class="form-label">
                        Confirm Password *
                    </label>
                    <input id="password_confirmation" type="password" name="password_confirmation" 
                           class="form-input" 
                           placeholder="Confirm your password"
                           required>
                </div>

                <div>
                    <label class="flex items-start space-x-3">
                        <input type="checkbox" name="terms" class="h-4 w-4 text-primary-600 focus:ring-primary-500 bg-dark-800 border-dark-600 rounded mt-1" required>
                        <span class="text-sm text-gray-300">
                            I agree to {{ setting('business.name', config('app.name', 'SwiftPay')) }}'s <a href="#" class="font-medium text-primary-400 hover:text-primary-300">Terms of Service</a> 
                            and <a href="#" class="font-medium text-primary-400 hover:text-primary-300">Privacy Policy</a>
                        </span>
                    </label>
                </div>

                <div>
                    <button type="submit" class="btn btn-primary w-full py-4 text-base font-semibold">
                        <i class="fas fa-user-plus mr-2"></i>
                        Create {{ setting('business.name', config('app.name', 'SwiftPay')) }} Account
                    </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">Already have an account?</span>
                    </div>
                </div>

                <div class="mt-6 text-center">
                    <p class="text-gray-400">
                        <a href="{{ route('login') }}" class="font-medium text-primary-400 hover:text-primary-300 transition-colors">
                            Sign in to your account
                        </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 Registration:</span> Your data is encrypted and protected. We never share your personal information.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection