@component('layouts.app', [
    'title' => 'Login',
    'metaDescription' => 'Log in to your Yatra Card account to manage your balance, trip history, and card settings.',
])
    <section class="flex min-h-[80vh] items-center justify-center px-6 py-32 dark:bg-ink">
        <div class="reveal w-full max-w-md">
            <div class="mb-8 text-center">
                <a href="{{ route('home') }}" class="mb-6 inline-flex items-center gap-2 font-heading text-xl font-extrabold">
                    <span class="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-primary to-secondary text-white shadow-md">
                        <i class="fa-solid fa-train-subway text-sm"></i>
                    </span>
                    <span class="text-primary">Yatra</span><span class="text-secondary">Card</span>
                </a>
                <h1 class="font-heading text-2xl font-extrabold text-slate-900 dark:text-white">Welcome Back</h1>
                <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">Log in to manage your card and account.</p>
            </div>

            <form @submit.prevent="window.location.href = '{{ route('dashboard') }}'"
                  class="rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel">
                <div class="mb-4">
                    <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Email or Phone</label>
                    <input type="text" required placeholder="you@example.com"
                           class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                </div>
                <div class="mb-2">
                    <label class="mb-1.5 block text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">Password</label>
                    <input type="password" required placeholder="••••••••"
                           class="w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-surface dark:text-white dark:focus:border-secondary">
                </div>
                <div class="mb-6 text-right">
                    <a href="#" class="text-xs font-semibold text-secondary hover:underline">Forgot password?</a>
                </div>
                <button type="submit" class="w-full rounded-xl bg-primary py-3.5 text-sm font-semibold text-white shadow-lg transition duration-300 hover:scale-[1.01] dark:bg-secondary">
                    Log In
                </button>
                <p class="mt-3 text-center text-[11px] text-slate-400 dark:text-slate-500">
                    This is a static preview — logging in opens the sample dashboard.
                </p>
            </form>

            <p class="mt-6 text-center text-sm text-slate-500 dark:text-slate-400">
                Don't have a card yet?
                <a href="{{ route('cards') }}" class="font-semibold text-primary hover:underline dark:text-secondary">Apply for one</a>
            </p>
        </div>
    </section>
@endcomponent