@extends('layouts.app')

@section('title', 'Login to Your Account')

@section('content')

<div class="max-w-4xl mx-auto my-6 grid grid-cols-1 md:grid-cols-2 rounded-3xl bg-ink-card border border-white/10 overflow-hidden shadow-2xl">
    
    <!-- Left Hero Art / Features -->
    <div class="bg-gradient-to-br from-brand-dark via-brand to-ink p-8 sm:p-10 flex flex-col justify-between text-white relative overflow-hidden">
        <div class="relative z-10">
            <div class="flex items-center gap-2 mb-6">
                <img src="{{ asset('images/logo.jpg') }}" class="h-10 w-10 rounded-full object-cover ring-2 ring-brand-light">
                <span class="font-display font-black text-xl">2BROTHER<span class="text-brand-light">.HUB</span></span>
            </div>
            <h2 class="font-display font-black text-2xl sm:text-3xl leading-tight mb-3">Welcome to The Sneakerhead Hub</h2>
            <p class="text-slate-200 text-xs sm:text-sm leading-relaxed mb-6">
                Login to access your tracked shipments, exclusive footwear drops, member discounts, and express checkout.
            </p>
        </div>

        <div class="space-y-3 text-xs relative z-10 border-t border-white/10 pt-6">
            <div class="flex items-center gap-2.5">
                <span class="w-5 h-5 rounded-full bg-brand-light/20 text-brand-light flex items-center justify-center font-bold">✓</span>
                <span>Real-time Live Order Tracking</span>
            </div>
            <div class="flex items-center gap-2.5">
                <span class="w-5 h-5 rounded-full bg-brand-light/20 text-brand-light flex items-center justify-center font-bold">✓</span>
                <span>Special 10% Member Voucher Active</span>
            </div>
            <div class="flex items-center gap-2.5">
                <span class="w-5 h-5 rounded-full bg-brand-light/20 text-brand-light flex items-center justify-center font-bold">✓</span>
                <span>100% Authentic Original Footwear</span>
            </div>
        </div>
    </div>

    <!-- Right Login Form -->
    <div class="p-8 sm:p-10 flex flex-col justify-between" x-data="{ showPass: false }">
        <div>
            <div class="mb-6">
                <h3 class="font-display font-bold text-xl text-white">Sign In</h3>
                <p class="text-xs text-slate-400 mt-1">Enter your email and password to access your account.</p>
            </div>

            <!-- Demo Login Shortcut Chips -->
            <div class="mb-6 p-3 rounded-2xl bg-ink border border-white/5 text-xs">
                <p class="text-[10px] uppercase font-bold text-brand-light tracking-wider mb-2">⚡ One-Click Demo Credentials:</p>
                <div class="flex flex-wrap gap-2">
                    <button type="button" 
                            onclick="document.getElementById('email').value='admin@2brotherhub.com'; document.getElementById('password').value='password';"
                            class="px-2.5 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-slate-200 text-[11px] font-semibold transition border border-white/5">
                        👑 Admin: admin@2brotherhub.com
                    </button>
                    <button type="button" 
                            onclick="document.getElementById('email').value='customer@example.com'; document.getElementById('password').value='password';"
                            class="px-2.5 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-slate-200 text-[11px] font-semibold transition border border-white/5">
                        👟 Customer: customer@example.com
                    </button>
                </div>
            </div>

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

                <div>
                    <label class="text-xs font-bold text-slate-300 block mb-1.5">Email Address</label>
                    <input type="email" id="email" name="email" value="{{ old('email') }}" required autofocus
                           class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
                    @error('email')<p class="text-rose-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="text-xs font-bold text-slate-300 block mb-1.5">Password</label>
                    <div class="relative">
                        <input :type="showPass ? 'text' : 'password'" id="password" name="password" required
                               class="w-full bg-ink border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white placeholder-slate-500 focus:ring-2 focus:ring-brand-light focus:outline-none">
                        <button type="button" @click="showPass = !showPass" class="absolute right-3 top-2.5 text-xs text-slate-400 hover:text-white">
                            <span x-text="showPass ? 'Hide' : 'Show'"></span>
                        </button>
                    </div>
                    @error('password')<p class="text-rose-400 text-xs mt-1">{{ $message }}</p>@enderror
                </div>

                <div class="flex items-center justify-between text-xs text-slate-400 pt-1">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="remember" class="rounded bg-ink border-white/20 text-brand focus:ring-brand">
                        <span>Remember me</span>
                    </label>
                </div>

                <button type="submit" class="w-full bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold py-3.5 rounded-full text-xs shadow-glow hover:shadow-glow-lg transition">
                    Sign In to Account
                </button>
            </form>
        </div>

        <div class="text-center text-xs text-slate-400 border-t border-white/10 pt-4 mt-6">
            Don't have an account yet? 
            <a href="{{ route('register') }}" class="text-brand-light font-bold hover:underline">Create an Account</a>
        </div>
    </div>

</div>

@endsection