@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">

                <!-- Create Account Panel -->
                <div id="panel-create" role="tabpanel" class="fade-enter-active">
                    <p class="text-sm text-gray-600 mb-6 font-light">
                        Create an account to enjoy exclusive services and keep track of your orders.
                    </p>
                    <form class="space-y-6" action="{{ route('register') }}" method="POST">
                        @csrf
                        <div class="group">
                            <label for="name" class="sr-only">Full Name</label>
                            <input type="text" id="name" name="name" placeholder="Full Name *" class="w-full px-0 py-3 border-b border-gray-300 focus:border-primary focus:outline-none placeholder-gray-500 text-sm rounded-none" required autocomplete="name" />
                        </div>
                        <div class="group">
                            <label for="reg-email" class="sr-only">Email Address</label>
                            <input type="email" id="reg-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 rounded-none" required autocomplete="email" />
                        </div>
                        <div class="group">
                            <label for="reg-password" class="sr-only">Password</label>
                            <input type="password" id="reg-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 rounded-none" required autocomplete="new-password" />
                        </div>
                        <div class="group">
                            <label for="password_confirmation" class="sr-only">Confirm Password</label>
                            <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password *" class="w-full px-0 py-3 border-b border-gray-300 focus:border-primary focus:outline-none placeholder-gray-500 text-sm rounded-none" required autocomplete="new-password" />
                        </div>

                        <div class="text-[10px] text-gray-500 leading-relaxed">
                            By creating an account, you agree to our <a href="#" class="underline hover:text-black">Terms of Use</a> and <a href="#" class="underline hover:text-black">Privacy Policy</a>.
                        </div>

                        <button type="submit" class="w-full bg-white border border-primary text-primary py-4 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">
                            Create Account
                        </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