@extends('layouts.public')

@section('title', __('auth.login_title'))

@section('content')
<section class="bg-gradient-to-br from-cyan-50 via-white to-emerald-50">
    <div class="mx-auto grid min-h-[calc(100svh-4rem)] max-w-7xl items-center gap-8 px-4 py-10 lg:grid-cols-[1fr_.9fr] lg:px-6">
        <div class="hidden lg:block">
            <div class="overflow-hidden rounded-lg bg-gradient-to-br from-cyan-600 via-sky-500 to-emerald-500 text-white shadow-sm">
                <img src="https://images.unsplash.com/photo-1575429198097-0414ec08e8cd?auto=format&fit=crop&w=1200&q=85" alt="{{ __('app.brand.full') }}" class="h-72 w-full object-cover opacity-90">
                <div class="p-6">
                    <p class="text-sm font-black text-amber-100">{{ __('app.brand.name') }}</p>
                    <h1 class="mt-3 text-4xl font-black leading-tight">{{ __('auth.login_heading') }}</h1>
                    <div class="mt-6 grid gap-3 sm:grid-cols-3">
                        @foreach([
                            ['ticket', 'Tiket'],
                            ['scan-line', 'QR Scan'],
                            ['waves', 'Program'],
                        ] as [$icon, $label])
                            <div class="rounded-lg border border-white/30 bg-white/20 p-4">
                                <i data-lucide="{{ $icon }}" class="h-5 w-5 text-amber-100"></i>
                                <p class="mt-3 text-sm font-black">{{ $label }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm sm:p-7">
            <div class="flex items-start justify-between gap-3">
                <div class="flex items-start gap-3">
                    <span class="grid h-11 w-11 place-items-center rounded-md bg-cyan-100 text-cyan-700">
                        <i data-lucide="log-in" class="h-5 w-5"></i>
                    </span>
                    <div>
                        <h1 class="text-2xl font-black text-cyan-950">{{ __('auth.login_title') }}</h1>
                        <p class="mt-1 text-sm leading-6 text-slate-600">{{ __('auth.login_intro') }}</p>
                    </div>
                </div>
                <x-language-switcher compact />
            </div>

            <form method="POST" action="{{ route('login.store') }}" class="mt-6 grid gap-4">
                @csrf
                <label class="grid gap-2 text-sm font-bold text-slate-700">
                    {{ __('auth.email') }}
                    <input name="email" type="email" value="{{ old('email') }}" autocomplete="email" placeholder="name@example.com" class="rounded-md border border-slate-300 px-3 py-3 text-slate-900" required>
                </label>
                <label class="grid gap-2 text-sm font-bold text-slate-700">
                    {{ __('auth.password') }}
                    <input name="password" type="password" autocomplete="current-password" placeholder="{{ __('auth.password_placeholder') }}" class="rounded-md border border-slate-300 px-3 py-3 text-slate-900" required>
                </label>
                <div class="flex flex-wrap items-center justify-between gap-3">
                    <label class="flex items-center gap-2 text-sm font-semibold text-slate-600">
                        <input name="remember" type="checkbox" class="h-4 w-4 rounded border-cyan-300 text-cyan-700">
                        {{ __('auth.remember') }}
                    </label>
                    <a href="{{ route('password.request') }}" class="text-sm font-black text-cyan-700 hover:text-orange-600">{{ __('auth.forgot') }}</a>
                </div>
                <button class="inline-flex items-center justify-center gap-2 rounded-md bg-cyan-600 px-4 py-3 font-black text-white hover:bg-orange-400 hover:text-cyan-950">
                    <i data-lucide="arrow-right" class="h-4 w-4"></i>
                    {{ __('auth.submit_login') }}
                </button>
                <a href="{{ route('register') }}" class="text-center text-sm font-black text-cyan-700 hover:text-orange-600">{{ __('auth.register_link') }}</a>
            </form>

            <details class="mt-6 rounded-lg border border-cyan-100 bg-cyan-50 p-4 text-sm text-slate-600">
                <summary class="cursor-pointer font-black text-cyan-950">{{ __('auth.demo_accounts') }}</summary>
                <div class="mt-3 grid gap-2 text-xs font-semibold leading-6 sm:grid-cols-2">
                    <p>Owner: owner@karyamuda.com</p>
                    <p>Admin: admin@karyamuda.com</p>
                    <p>Trainer: trainer@karyamuda.com</p>
                    <p>User: user@karyamuda.com</p>
                    <p class="sm:col-span-2">Password: password123</p>
                </div>
            </details>
        </div>
    </div>
</section>
@endsection