@extends('default::layouts.app')

@section('content')
<main id="main-content" class="flex-grow w-full max-w-[1920px] mx-auto">
    <div class="flex flex-col lg:flex-row h-full">

        <!-- Left Column - Auth Forms -->
        <div class="w-full lg:w-1/2 xl:w-[45%] flex flex-col items-center pt-8 md:pt-16 pb-16 px-4 md:px-12 lg:px-20 xl:px-32 bg-white">

            <!-- Auth Container -->
            <div class="w-full max-w-md mx-auto">

                <!-- Sign In Panel -->
                <div id="panel-signin" role="tabpanel" class="fade-enter-active">
                    <!-- Social Logins -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-8">
                        <button type="button" class="flex items-center justify-center px-4 py-3 border border-gray-300 hover:bg-gray-50 transition-colors text-sm font-medium focus:ring-2 focus:ring-primary focus:ring-offset-1 rounded-sm">
                            <span class="mr-2 font-bold text-lg text-[#1877F2]" aria-hidden="true">f</span>
                            <span class="sr-only">Sign in with</span> Facebook
                        </button>
                        <button type="button" class="flex items-center justify-center px-4 py-3 border border-gray-300 hover:bg-gray-50 transition-colors text-sm font-medium focus:ring-2 focus:ring-primary focus:ring-offset-1 rounded-sm">
                            <span class="mr-2 font-bold text-lg" aria-hidden="true">G</span>
                            <span class="sr-only">Sign in with</span> Google
                        </button>
                        <button type="button" class="flex items-center justify-center px-4 py-3 border border-gray-300 hover:bg-gray-50 transition-colors text-sm font-medium focus:ring-2 focus:ring-primary focus:ring-offset-1 rounded-sm">
                            <span class="mr-2 text-lg" aria-hidden="true"></span>
                            <span class="sr-only">Sign in with</span> Apple
                        </button>
                    </div>

                    <div class="relative flex items-center justify-center my-8">
                        <div class="absolute border-t border-gray-300 w-full"></div>
                        <span class="relative bg-white px-4 text-xs uppercase tracking-widest text-gray-500 font-serif italic">or</span>
                    </div>

                    <form class="space-y-6" action="{{ route('login') }}" method="POST">
                        @csrf
                        <div class="relative group">
                            <label for="email" class="sr-only">Email Address</label>
                            <input type="email" id="email" name="email" placeholder="Email Address *" class="w-full px-0 py-3 border-b border-gray-300 focus:border-primary focus:outline-none placeholder-gray-500 text-sm transition-colors bg-transparent rounded-none" required autocomplete="email" />
                        </div>

                        <div class="relative group">
                            <label for="password" class="sr-only">Password</label>
                            <input type="password" id="password" name="password" placeholder="Password *" class="w-full px-0 py-3 border-b border-gray-300 focus:border-primary focus:outline-none placeholder-gray-500 text-sm transition-colors bg-transparent pr-10 rounded-none" required autocomplete="current-password" />
                            <button type="button" class="absolute right-0 top-3 text-gray-400 hover:text-gray-600 focus:text-primary rounded-sm" aria-label="Toggle password visibility">
                                <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                                </svg>
                            </button>
                        </div>

                        <div class="flex items-center justify-between pt-2">
                            <label class="flex items-center space-x-2 cursor-pointer group select-none">
                                <input type="checkbox" class="w-4 h-4 border-gray-300 text-primary focus:ring-primary rounded-sm" />
                                <span class="text-xs text-gray-600 group-hover:text-black transition-colors">Remember Me</span>
                            </label>
                            <a href="#" class="text-xs text-gray-500 underline hover:text-black transition-colors focus:text-black focus:outline-none focus:ring-1 focus:ring-primary rounded">Forgot Password?</a>
                        </div>

                        <button type="submit" class="w-full bg-primary text-white py-4 text-xs font-bold uppercase tracking-widest hover:bg-primary/90 transition-colors mt-8 focus:ring-2 focus:ring-offset-2 focus:ring-primary rounded-sm shadow-sm">
                            Sign In
                        </button>
                    </form>
                </div>

                <!-- Order Tracking -->
                <div class="w-full mt-16 pt-16 border-t border-gray-200">
                    <div class="text-center">
                        <h3 class="font-serif text-xl md:text-2xl text-primary mb-3">Order Status Tracking</h3>
                        <p class="text-sm text-gray-500 mb-6">Track your recent order below</p>
                        <a href="{{ route('track.order') }}" class="bg-white border border-primary text-primary px-12 py-3 text-xs font-bold uppercase tracking-widest hover:bg-primary hover:text-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-primary rounded-sm inline-block text-center">
                            Find My Order
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <!-- Right Column - Visual/Benefits -->
        <div class="w-full lg:w-1/2 xl:w-[55%] hidden lg:block relative min-h-[800px] bg-gray-100 overflow-hidden group">
            <!-- Background Image -->
            <img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?q=80&w=1974&auto=format&fit=crop" 
                 alt="Model wearing elegant fashion in a dimly lit studio" 
                 width="1974" height="2000"
                 class="absolute inset-0 w-full h-full object-cover transition-transform duration-[20s] ease-linear group-hover:scale-110"
                 loading="lazy" 
                 decoding="async" />

            <!-- Overlay Gradient -->
            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>

            <!-- Content -->
            <div class="absolute bottom-0 left-0 w-full p-16 text-white">
                <div class="mb-10 max-w-lg">
                    <h2 class="font-serif text-4xl italic mb-4">RL Account Benefits</h2>
                    <p class="text-sm font-light tracking-wide opacity-90 leading-relaxed">
                        Join us to access a world of style. Enjoy complimentary shipping, personalized recommendations, and exclusive access to new arrivals.
                    </p>
                </div>

                <!-- Interactive Benefits Widget -->
                <div class="bg-white/10 backdrop-blur-md border border-white/20 p-8 max-w-sm rounded-sm hover:bg-white/15 transition-colors cursor-default">
                    <div class="flex flex-col space-y-4">
                        <div>
                            <h3 class="font-serif text-2xl mb-2">Complimentary Shipping</h3>
                            <p class="text-xs font-light leading-relaxed opacity-90">
                                Enjoy free Fast Shipping on all orders when you sign in to your Ralph Lauren account.
                            </p>
                        </div>
                    </div>

                    <!-- Progress Bar Animation -->
                    <div class="w-full bg-white/30 h-0.5 mt-8 mb-2 overflow-hidden" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                        <div class="bg-white h-full w-1/4 animate-[pulse_3s_ease-in-out_infinite]"></div>
                    </div>
                    <div class="text-[10px] tracking-widest text-right opacity-80">01 / 04</div>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection