@extends('layouts.auth')

@section('title', 'Login - DigitalStore')

@push('styles')
<style>
    .login-visual-bg {
        background: radial-gradient(circle at 30% 30%, #1a1a2e 0%, #0c0c10 100%);
    }
    .feature-icon-container {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
    }
    .feature-icon-container:hover {
        background: rgba(108, 99, 255, 0.1);
        border-color: rgba(108, 99, 255, 0.3);
        transform: translateY(-2px);
    }
    .input-group:focus-within .input-icon {
        color: #6c63ff;
    }
    .social-btn {
        transition: all 0.2s ease;
        border: 1px solid #e5e7eb;
    }
    .social-btn:hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-1px);
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-20px); }
    }
    .floating-illustration {
        animation: float 6s ease-in-out infinite;
    }
</style>
@endpush

@section('content')
<div class="min-h-screen flex flex-col md:flex-row">
    {{-- Left Side: Visual --}}
    <div class="hidden md:flex md:w-1/2 login-visual-bg relative overflow-hidden flex-col justify-center px-12 lg:px-20 py-12">
        {{-- Decorative Elements --}}
        <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none">
            <div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] rounded-full blur-[120px] bg-brand-500/30"></div>
            <div class="absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] rounded-full blur-[100px] bg-purple-500/20"></div>
        </div>

        <div class="relative z-10 space-y-10">
            {{-- Badge --}}
            <div class="inline-flex items-center gap-2 bg-white/5 backdrop-blur-md border border-white/10 rounded-full px-4 py-2">
                <div class="w-5 h-5 bg-brand-500 rounded-full flex items-center justify-center">
                    <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                </div>
                <span class="text-white/90 text-xs font-semibold tracking-wide uppercase">Welcome Back!</span>
            </div>

            {{-- Text Content --}}
            <div class="max-w-md">
                <h1 class="text-4xl lg:text-5xl font-800 text-white leading-tight mb-6 tracking-tight">
                    Login to your<br>account
                </h1>
                <p class="text-gray-400 text-lg leading-relaxed">
                    Access your purchases, downloads and exclusive offers all in one place.
                </p>
            </div>

            {{-- Features --}}
            <div class="space-y-6 max-w-sm">
                <div class="flex items-center gap-4 group">
                    <div class="w-12 h-12 rounded-xl feature-icon-container flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-700 text-sm">Access Your Purchases</h3>
                        <p class="text-gray-500 text-xs">View your order history and download products</p>
                    </div>
                </div>

                <div class="flex items-center gap-4 group">
                    <div class="w-12 h-12 rounded-xl feature-icon-container flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-700 text-sm">Instant Downloads</h3>
                        <p class="text-gray-500 text-xs">Get instant access to your digital products</p>
                    </div>
                </div>

                <div class="flex items-center gap-4 group">
                    <div class="w-12 h-12 rounded-xl feature-icon-container flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                    </div>
                    <div>
                        <h3 class="text-white font-700 text-sm">Exclusive Offers</h3>
                        <p class="text-gray-500 text-xs">Get personalized deals and discounts</p>
                    </div>
                </div>
            </div>

            {{-- Illustration --}}
            <div class="pt-10">
                <img src="{{ asset('themes/digital_agence/assets/images/signup_visual.png') }}" alt="DigitalStore" class="w-full max-w-[450px] floating-illustration drop-shadow-2xl">
            </div>
        </div>
    </div>

    {{-- Right Side: Form --}}
    <div class="w-full md:w-1/2 bg-white flex items-center justify-center px-8 lg:px-20 py-12 lg:py-24">
        <div class="w-full max-w-[440px]">
            <div class="mb-10 text-center md:text-left">
                <h2 class="text-3xl font-800 text-gray-900 mb-3 tracking-tight">Login</h2>
                <p class="text-gray-500 text-[15px]">Welcome back! Please enter your details.</p>
            </div>

            <form method="POST" action="{{ route('login') }}" class="space-y-6">
                @csrf

                {{-- Email --}}
                <div class="space-y-2">
                    <label for="email" class="text-sm font-600 text-gray-700 block">Email Address</label>
                    <div class="relative input-group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <svg class="w-5 h-5 text-gray-400 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        </div>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" required autofocus
                            class="block w-full pl-11 pr-4 py-3.5 bg-white border border-gray-200 rounded-xl text-gray-900 text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all placeholder:text-gray-400"
                            placeholder="you@example.com">
                    </div>
                    @error('email')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Password --}}
                <div class="space-y-2">
                    <div class="flex justify-between items-center">
                        <label for="password" class="text-sm font-600 text-gray-700">Password</label>
                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="text-xs font-600 text-brand-500 hover:text-brand-600 transition-colors">Forgot Password?</a>
                        @endif
                    </div>
                    <div class="relative input-group">
                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                            <svg class="w-5 h-5 text-gray-400 input-icon transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        </div>
                        <input type="password" id="password" name="password" required
                            class="block w-full pl-11 pr-12 py-3.5 bg-white border border-gray-200 rounded-xl text-gray-900 text-sm focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 outline-none transition-all placeholder:text-gray-400"
                            placeholder="Enter your password">
                        <button type="button" class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </button>
                    </div>
                    @error('password')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Remember Me --}}
                <div class="flex items-center">
                    <input id="remember_me" name="remember" type="checkbox"
                        class="w-4 h-4 text-brand-500 border-gray-300 rounded focus:ring-brand-500 outline-none transition-all">
                    <label for="remember_me" class="ml-2 block text-sm font-500 text-gray-600">Remember me</label>
                </div>

                {{-- Submit --}}
                <button type="submit"
                    class="w-full py-4 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-xl shadow-lg shadow-brand-500/25 transition-all active:scale-[0.98] focus:ring-4 focus:ring-brand-500/20">
                    Login
                </button>

                @if($hasSocialLogins)
                {{-- Divider --}}
                <div class="relative py-4">
                    <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-100"></div></div>
                    <div class="relative flex justify-center text-xs uppercase"><span class="bg-white px-4 text-gray-400 font-500">Or continue with</span></div>
                </div>
                @endif

                {{-- Social Logins --}}
                @if($hasSocialLogins)
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @if($socialLogins['google'])
                    <a href="{{ route('social.redirect', 'google') }}" class="social-btn flex items-center justify-center gap-3 py-3 rounded-xl bg-white shadow-sm">
                        <svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#EA4335" d="M12 5.04c1.94 0 3.46.83 4.21 1.54l3.14-3.08C17.43 1.63 15 1 12 1 7.21 1 3.19 3.84 1.14 7.95l3.65 2.85c.87-2.6 3.28-4.76 7.21-4.76z"/><path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58l3.7 2.88c2.16-1.99 3.42-4.93 3.42-8.7z"/><path fill="#FBBC05" d="M4.79 14.8c-.23-.68-.37-1.41-.37-2.17s.14-1.49.37-2.17L1.14 7.95C.41 9.42 0 11.05 0 12.78s.41 3.36 1.14 4.83l3.65-2.81z"/><path fill="#34A853" d="M12 23c3.15 0 5.79-1.03 7.72-2.8l-3.7-2.88c-1.03.69-2.35 1.1-4.02 1.1-3.93 0-6.34-2.16-7.21-4.76l-3.65 2.81C3.19 20.16 7.21 23 12 23z"/></svg>
                        <span class="text-sm font-600 text-gray-700">Google</span>
                    </a>
                    @endif
                    
                    @if($socialLogins['apple'])
                    <a href="{{ route('social.redirect', 'apple') }}" class="social-btn flex items-center justify-center gap-3 py-3 rounded-xl bg-white shadow-sm">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.073 2.132c-.754 0-1.714.453-2.261 1.053-.547.6-.967 1.467-.967 2.333 0 .1.013.2.026.3-.967-.04-1.927.467-2.527 1.127-.6.66-.96 1.547-.96 2.427 0 .093.013.187.027.28-1.507-.067-2.86.68-3.667 1.767-.787 1.087-1.08 2.487-1.08 3.88 0 2.227 1.52 5.047 3.333 6.94 1.44 1.507 3.013 2.493 4.467 2.493 1.187 0 2.053-.627 3.347-.627 1.28 0 2.133.627 3.347.627 1.454 0 3.027-.987 4.467-2.493 1.227-1.28 2.373-3.08 2.893-4.64-.32.093-.653.147-.987.147-1.893 0-3.413-1.4-3.413-3.267 0-1.52.987-2.827 2.36-3.267-.28-.707-.733-1.347-1.307-1.867-.84-.76-1.92-1.2-3.093-1.2"/></svg>
                        <span class="text-sm font-600 text-gray-700">Apple</span>
                    </a>
                    @endif

                    @if($socialLogins['facebook'])
                    <a href="{{ route('social.redirect', 'facebook') }}" class="social-btn flex items-center justify-center gap-3 py-3 rounded-xl bg-white shadow-sm">
                        <svg class="w-5 h-5 text-[#1877F2]" fill="currentColor" viewBox="0 0 24 24"><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"/></svg>
                        <span class="text-sm font-600 text-gray-700">Facebook</span>
                    </a>
                    @endif

                    @if($socialLogins['github'])
                    <a href="{{ route('social.redirect', 'github') }}" class="social-btn flex items-center justify-center gap-3 py-3 rounded-xl bg-white shadow-sm">
                        <svg class="w-5 h-5 text-[#181717]" fill="currentColor" viewBox="0 0 24 24"><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"/></svg>
                        <span class="text-sm font-600 text-gray-700">GitHub</span>
                    </a>
                    @endif
                </div>
                @endif

                {{-- Sign Up Link --}}
                <div class="pt-10 text-center">
                    <p class="text-sm text-gray-500">
                        Don't have an account? 
                        <a href="{{ route('register') }}" class="font-700 text-brand-500 hover:text-brand-600 transition-colors ml-1">Sign up</a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection