@extends('layouts.auth')
@section('title', 'JAM Members Club — Sign In')

@section('content')
<div class="min-h-screen flex">

    {{-- Left: Restaurant image + brand copy --}}
    <div class="hidden lg:flex lg:w-1/2 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-black/70 via-black/40 to-black/60 z-10"></div>
        <div class="absolute inset-0 bg-cover bg-center z-0"
             style="background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1200&q=80');">
        </div>
        <div class="relative z-20 flex flex-col justify-between p-12 w-full">
            <div>
                <p class="text-[#D4B84A] text-xs tracking-[0.4em] uppercase font-medium mb-1">Jam Corner</p>
                <p class="text-white/50 text-xs tracking-widest uppercase">EST. 2001 · South Townsville</p>
            </div>
            <div>
                <h1 class="text-5xl font-bold leading-tight mb-8" style="font-family: 'Playfair Display', serif;">
                    Where every<br>visit becomes<br><em class="text-[#D4B84A] not-italic">a memory.</em>
                </h1>
                <div class="space-y-5">
                    <div class="flex items-start gap-4">
                        <span class="text-[#D4B84A] text-lg mt-0.5">★</span>
                        <div>
                            <p class="text-white font-medium text-sm">Tiered Membership Rewards</p>
                            <p class="text-white/50 text-xs mt-1">Earn recognition and exclusive benefits with every qualifying visit.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <span class="text-[#D4B84A] text-lg mt-0.5">◆</span>
                        <div>
                            <p class="text-white font-medium text-sm">Three Curated Tiers</p>
                            <p class="text-white/50 text-xs mt-1">Invited, Indulged, and Limitless — each with progressively elevated privileges.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <span class="text-[#D4B84A] text-lg mt-0.5">✦</span>
                        <div>
                            <p class="text-white font-medium text-sm">Priority Event Access</p>
                            <p class="text-white/50 text-xs mt-1">One week early access to all JAM-hosted events, ahead of public release.</p>
                        </div>
                    </div>
                </div>
            </div>
            <p class="text-white/20 text-xs">© {{ date('Y') }} JAM Members Club · 1 Palmer St, South Townsville QLD</p>
        </div>
    </div>

    {{-- Right: Auth form --}}
    <div class="w-full lg:w-1/2 flex flex-col justify-center items-center px-8 py-12 bg-[#111111]">
        <div class="w-full max-w-md">

            {{-- Mobile logo --}}
            <div class="lg:hidden text-center mb-8">
                <p class="text-[#D4B84A] text-xs tracking-[0.4em] uppercase font-medium">Jam Corner</p>
                <p class="text-white/40 text-xs tracking-widest uppercase mt-1">Members Club</p>
            </div>

            <h2 class="text-3xl font-semibold mb-1 text-center" style="font-family: 'Playfair Display', serif;">
                Welcome back
            </h2>
            <p class="text-white/40 text-sm text-center mb-8">Enter your credentials to access the club.</p>

            {{-- Tab toggle + Forms — single Alpine scope --}}
            <div x-data="{ tab: '{{ old('_tab', 'login') }}' }">
                <div class="flex rounded-full border border-[#2a2a2a] p-1 mb-8">
                    <button @click="tab = 'login'" type="button"
                            :class="tab === 'login' ? 'bg-[#D4B84A] text-black' : 'text-white/50 hover:text-white'"
                            class="flex-1 py-2 rounded-full text-xs font-semibold tracking-widest uppercase transition-all duration-200">
                        Login
                    </button>
                    <button @click="tab = 'signup'" type="button"
                            :class="tab === 'signup' ? 'bg-[#D4B84A] text-black' : 'text-white/50 hover:text-white'"
                            class="flex-1 py-2 rounded-full text-xs font-semibold tracking-widest uppercase transition-all duration-200">
                        Sign Up
                    </button>
                </div>

                @if ($errors->any())
                    <div class="bg-red-900/30 border border-red-700/50 rounded-lg p-4 mb-6">
                        @foreach ($errors->all() as $error)
                            <p class="text-red-400 text-sm">{{ $error }}</p>
                        @endforeach
                    </div>
                @endif

                @if (session('status'))
                    <div class="bg-green-900/30 border border-green-700/50 rounded-lg p-4 mb-6">
                        <p class="text-green-400 text-sm">{{ session('status') }}</p>
                    </div>
                @endif

                {{-- LOGIN FORM --}}
                <div x-show="tab === 'login'" x-transition>
                    <form method="POST" action="{{ route('login') }}" class="space-y-6">
                        @csrf
                        <input type="hidden" name="_tab" value="login">
                        <div>
                            <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Email Address</label>
                            <input type="email" name="email" value="{{ old('email') }}" required
                                   placeholder="your@email.com"
                                   class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
                        </div>
                        <div>
                            <div class="flex justify-between items-center mb-2">
                                <label class="text-xs tracking-widest uppercase text-white/40">Password</label>
                                <a href="{{ route('password.request') }}" class="text-xs text-[#D4B84A] hover:text-[#E8D080] transition-colors">Forgot?</a>
                            </div>
                            <input type="password" name="password" required
                                   placeholder="••••••••"
                                   class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
                        </div>
                        <div class="flex items-center gap-3">
                            <input type="checkbox" name="remember" id="remember" class="w-4 h-4 accent-[#D4B84A]">
                            <label for="remember" class="text-xs text-white/40">Keep me signed in</label>
                        </div>
                        <button type="submit"
                                class="w-full bg-[#D4B84A] hover:bg-[#E8D080] text-black font-semibold text-sm tracking-widest uppercase py-4 rounded-full transition-colors duration-200">
                            Authorize Access
                        </button>
                    </form>
                </div>

                {{-- SIGNUP FORM --}}
                <div x-show="tab === 'signup'" x-transition style="display:none;">
                    <form method="POST" action="{{ route('register') }}" class="space-y-5">
                        @csrf
                        <input type="hidden" name="_tab" value="signup">
                        <div>
                            <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Full Name</label>
                            <input type="text" name="name" value="{{ old('name') }}" required
                                   placeholder="Jane Smith"
                                   class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
                        </div>
                        <div>
                            <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Email Address</label>
                            <input type="email" name="email" value="{{ old('email') }}" required
                                   placeholder="your@email.com"
                                   class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
                        </div>
                        <div>
                            <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Phone</label>
                            <input type="tel" name="phone" value="{{ old('phone') }}" required
                                   placeholder="+61 4XX XXX XXX"
                                   class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
                        </div>
                        <div>
                            <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Password</label>
                            <input type="password" name="password" required
                                   placeholder="Min. 8 characters"
                                   class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
                        </div>
                        <div>
                            <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Confirm Password</label>
                            <input type="password" name="password_confirmation" required
                                   placeholder="Repeat password"
                                   class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white placeholder-white/20 py-3 text-sm transition-colors duration-200">
                        </div>
                        <button type="submit"
                                class="w-full bg-[#D4B84A] hover:bg-[#E8D080] text-black font-semibold text-sm tracking-widest uppercase py-4 rounded-full transition-colors duration-200">
                            Create Membership
                        </button>
                    </form>
                </div>
            </div>

            <p class="text-center text-white/20 text-xs mt-8">
                © {{ date('Y') }} JAM Members Club ·
                <a href="mailto:manager@jamcorner.com.au" class="hover:text-white/40 transition-colors">Contact</a>
            </p>
        </div>
    </div>
</div>
@endsection