@extends('layouts.app')

@section('content')


<!-- Header Section -->
<div class="relative pt-32 pb-12 bg-[#15171e] border-b border-white/5">
    <div class="absolute inset-0 bg-gradient-to-b from-mwb-secondary/5 to-transparent pointer-events-none"></div>
    <div class="max-w-4xl mx-auto px-4 text-center relative z-10">
        <h1 class="text-4xl md:text-5xl font-bold display-font text-white mb-6">
            Claim Your <span class="text-transparent bg-clip-text bg-gradient-to-r from-mwb-secondary to-mwb-accent">Share</span>
        </h1>
        <p class="text-gray-400 text-lg max-w-xl mx-auto">
            Join the network today. Secure your identity, start accumulating MeWeBe Coin, and be part of the future of shared prosperity.
        </p>
    </div>
</div>

<!-- Main Registration Section -->
<div class="py-16 bg-[#1a1c23]">
    <div class="max-w-md mx-auto px-4">
        
        <div class="bg-mwb-card border border-white/5 rounded-2xl p-8 shadow-2xl">
            
            <!-- Social Login -->
            <div class="space-y-3 mb-8">
                <a href="{{ route('google.login') }}" class="w-full bg-white text-gray-900 font-bold py-3 px-4 rounded-xl hover:bg-gray-100 transition-colors flex items-center justify-center gap-3">
                    <img src="https://www.svgrepo.com/show/475656/google-color.svg" class="w-5 h-5" alt="Google">
                    Continue with Google
                </a>
                <div class="grid grid-cols-2 gap-3">
                    <button class="w-full bg-[#111] border border-gray-700 text-white font-medium py-3 px-4 rounded-xl hover:bg-gray-800 transition-colors flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="w-5 h-5 fill-current"><path _ngcontent-ng-c4271298201="" d="M447.1 332.7C446.9 296 463.5 268.3 497.1 247.9C478.3 221 449.9 206.2 412.4 203.3C376.9 200.5 338.1 224 323.9 224C308.9 224 274.5 204.3 247.5 204.3C191.7 205.2 132.4 248.8 132.4 337.5C132.4 363.7 137.2 390.8 146.8 418.7C159.6 455.4 205.8 545.4 254 543.9C279.2 543.3 297 526 329.8 526C361.6 526 378.1 543.9 406.2 543.9C454.8 543.2 496.6 461.4 508.8 424.6C443.6 393.9 447.1 334.6 447.1 332.7zM390.5 168.5C417.8 136.1 415.3 106.6 414.5 96C390.4 97.4 362.5 112.4 346.6 130.9C329.1 150.7 318.8 175.2 321 202.8C347.1 204.8 370.9 191.4 390.5 168.5z"></path></svg>
                        Apple
                    </button>
                    <button class="w-full bg-[#0077b5] text-white font-medium py-3 px-4 rounded-xl hover:opacity-90 transition-colors flex items-center justify-center gap-2">
                        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
                        LinkedIn
                    </button>
                </div>
            </div>

            <!-- Divider -->
            <div class="relative flex py-2 items-center mb-8">
                <div class="flex-grow border-t border-gray-700"></div>
                <span class="flex-shrink-0 mx-4 text-gray-500 text-xs uppercase tracking-widest">Or Sign In with Email</span>
                <div class="flex-grow border-t border-gray-700"></div>
            </div>

            <!-- Manual Form -->
            <form method="POST" action="{{ route('login') }}">
                @csrf
                <div class="space-y-1">
                    <label class="text-sm text-gray-400 font-medium ml-1">Email Address</label>
                    <div class="relative">
                        <span class="absolute left-3 top-3 text-gray-500 material-symbols-outlined text-lg">mail</span>
                        <input id="email" type="email" class="form-control w-full form-input rounded-lg py-3 pl-10 pr-4 mb-3 text-black @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="jane@example.com">
                        @error('email')
                            <span class="invalid-feedback text-red-700" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                
                <div class="space-y-1">
                    <label class="text-sm text-gray-400 font-medium ml-1 flex justify-between">
                        <span>Password</span>
                    <a href="{{ route('forgetpassword') }}" class="text-xs text-mwb-primary hover:underline"> Forgot Password? </a>
                    </label>
                    <div class="relative">
                        <span class="absolute left-3 top-3 text-gray-500 material-symbols-outlined text-lg">lock</span>
                        <input id="password" type="password" class="form-control w-full form-input rounded-lg py-3 pl-10 pr-4 mb-3 text-black @error('password') is-invalid @enderror" name="password" required autocomplete="current-password"  placeholder="••••••••">
                        @error('password')
                            <span class="invalid-feedback text-red-700" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="space-y-1">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                        <label class="form-check-label" for="remember">
                            {{ __('Remember Me') }}
                        </label>
                    </div>
                </div>

                <button type="submit" class="w-full py-4 bg-gradient-to-r from-mwb-secondary to-mwb-accent text-black font-bold text-lg rounded-xl hover:opacity-90 transition-all shadow-lg flex items-center justify-center gap-2 mt-3">
                     Sign In to Your Account 
                    <span class="material-symbols-outlined">arrow_forward</span>
                </button>

                <p class="text-center text-sm text-gray-500 mt-6">
                    Don't have an account? <a href="{{ route('register') }}" class="text-mwb-secondary hover:underline font-medium"> Join the Network </a>
                </p>

            </form>
        </div>

        <div class="text-center mt-8 opacity-60">
            <p class="text-xs text-gray-500 flex items-center justify-center gap-2">
                <span class="material-symbols-outlined text-sm">lock</span>
                Your data is encrypted and secure.
            </p>
        </div>
    </div>
</div>

@endsection