@extends('layouts.guest')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900 relative overflow-hidden">

    {{-- Animated background blobs --}}
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute top-40 left-40 w-80 h-80 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <div class="relative z-10 w-full max-w-3xl mx-auto px-6 py-10">

        {{-- ── Hero Header ── --}}
        <div class="rounded-t-3xl overflow-hidden bg-gradient-to-r from-purple-700 via-purple-600 to-pink-600 px-8 pt-8 pb-6 text-center shadow-2xl">
            <div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-white/20 mb-4">
                <i class="fas fa-shield-alt text-2xl text-white"></i>
            </div>
            <h1 class="text-2xl font-bold text-white leading-tight">
                {{ $organization?->name ?? config('app.name') }}
            </h1>
            <p class="mt-1 text-purple-200 text-sm font-medium tracking-wide">
                Welcome — sign in to your account
            </p>
        </div>

        {{-- ── Login Form Card (attached directly below hero) ── --}}
        <div class="rounded-b-3xl bg-white/10 backdrop-blur-xl px-8 py-8 shadow-2xl border border-white/20 border-t-0">

            @if (session('status'))
                <div class="mb-5 p-4 rounded-xl bg-green-500/20 border border-green-500/30 text-green-300 text-sm">
                    <i class="fas fa-check-circle mr-2"></i>{{ session('status') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="mb-5 p-4 rounded-xl bg-red-500/20 border border-red-500/30 text-red-300 text-sm">
                    <i class="fas fa-exclamation-circle mr-2"></i>{{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('login.submit') }}" x-data="{ showPassword: false }">
                @csrf

                {{-- Email or Username --}}
                <div class="mb-5">
                    <label class="block text-gray-300 text-sm font-medium mb-2">
                        <i class="fas fa-user mr-2"></i>Email or Username
                    </label>
                    <input
                        type="text"
                        name="login"
                        id="login"
                        value="{{ old('login') }}"
                        class="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
                        placeholder="Enter your email or username"
                        required
                        autocomplete="username"
                        autofocus
                    >
                    @error('login')
                        <p class="mt-2 text-red-400 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Password --}}
                <div class="mb-5">
                    <label class="block text-gray-300 text-sm font-medium mb-2">
                        <i class="fas fa-lock mr-2"></i>Password
                    </label>
                    <div class="relative">
                        <input
                            :type="showPassword ? 'text' : 'password'"
                            name="password"
                            id="password"
                            class="w-full px-4 py-3 pr-12 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
                            placeholder="Enter your password"
                            required
                            autocomplete="current-password"
                        >
                        <button
                            type="button"
                            @click="showPassword = !showPassword"
                            class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
                        >
                            <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                        </button>
                    </div>
                    @error('password')
                        <p class="mt-2 text-red-400 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Remember Me & Forgot Password --}}
                <div class="flex items-center justify-between mb-6">
                    <label class="flex items-center cursor-pointer group">
                        <input
                            type="checkbox"
                            name="remember"
                            class="w-4 h-4 rounded border-white/20 bg-white/5 text-purple-500 focus:ring-purple-500 focus:ring-offset-0"
                        >
                        <span class="ml-2 text-sm text-gray-400 group-hover:text-white transition-colors">Remember me</span>
                    </label>
                    <a href="{{ route('password.request') }}" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">
                        Forgot password?
                    </a>
                </div>

                {{-- Submit --}}
                <button
                    type="submit"
                    class="w-full py-3 px-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-purple-500/25 transition-all duration-300 flex items-center justify-center"
                >
                    <i class="fas fa-sign-in-alt mr-2"></i>Sign In
                </button>
            </form>

            {{-- Divider --}}
            <div class="relative my-6">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-white/10"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-4 bg-transparent text-gray-400">Or continue with</span>
                </div>
            </div>

            {{-- Social Login Buttons --}}
            <div class="flex flex-col gap-3">

                {{-- Google --}}
                <a href="{{ route('auth.social.redirect', 'google') }}"
                   class="group flex items-center gap-3 w-full px-4 py-3 rounded-xl border border-white/10 bg-white hover:bg-gray-50 transition-all duration-200 shadow-sm hover:shadow-md">
                    <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                    </svg>
                    <span class="flex-1 text-sm font-medium text-gray-700 group-hover:text-gray-900">Continue with Google</span>
                    <i class="fas fa-arrow-right text-xs text-gray-400 group-hover:text-gray-600 transition-colors"></i>
                </a>

                {{-- Facebook --}}
                <a href="{{ route('auth.social.redirect', 'facebook') }}"
                   class="group flex items-center gap-3 w-full px-4 py-3 rounded-xl border border-[#1877F2]/30 bg-[#1877F2] hover:bg-[#166FE5] transition-all duration-200 shadow-sm hover:shadow-md">
                    <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" fill="#ffffff"/>
                    </svg>
                    <span class="flex-1 text-sm font-medium text-white">Continue with Facebook</span>
                    <i class="fas fa-arrow-right text-xs text-blue-200 group-hover:text-white transition-colors"></i>
                </a>

                {{-- GitHub --}}
                <a href="{{ route('auth.social.redirect', 'github') }}"
                   class="group flex items-center gap-3 w-full px-4 py-3 rounded-xl border border-white/10 bg-[#24292F] hover:bg-[#1c2128] transition-all duration-200 shadow-sm hover:shadow-md">
                    <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" fill="#ffffff"/>
                    </svg>
                    <span class="flex-1 text-sm font-medium text-white">Continue with GitHub</span>
                    <i class="fas fa-arrow-right text-xs text-gray-400 group-hover:text-gray-200 transition-colors"></i>
                </a>

            </div>
        </div>

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

    </div>
</div>

<style>
    @keyframes blob {
        0%   { transform: translate(0px, 0px) scale(1); }
        33%  { transform: translate(30px, -50px) scale(1.1); }
        66%  { transform: translate(-20px, 20px) scale(0.9); }
        100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob { animation: blob 7s infinite; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
</style>
@endsection