@extends('layouts.app', [
    'title' => ($appBranding['name'] ?? config('app.name', 'FinCoreHub')).' | Login',
    'metaDescription' => 'Sign in to your account.',
    'hideHeader' => true,
])

@section('content')
<section class="flex min-h-screen items-center justify-center px-4 py-10 sm:px-6 lg:px-8">
    <div class="w-full max-w-md">
        <div class="pointer-events-none absolute left-1/2 top-1/2 -z-10 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-cyan-400/20 blur-3xl"></div>

        <div class="rounded-[2rem] border border-[var(--fc-border)] bg-[var(--fc-surface-strong)] p-8 shadow-panel backdrop-blur-xl sm:p-10">
            <div class="flex flex-col items-center text-center">
                <div class="flex h-24 w-24 items-center justify-center overflow-hidden rounded-[1.75rem] border border-white/10 bg-white/5 p-2 shadow-glow">
                    <img src="{{ asset($appBranding['logo'] ?? 'brand/fincorehub-round.png') }}" alt="{{ $appBranding['name'] ?? config('app.name', 'FinCoreHub') }} logo" class="max-h-full max-w-full rounded-[1.2rem] object-contain">
                </div>
                <h1 class="mt-5 font-display text-3xl font-semibold text-[var(--fc-heading)]">{{ $appBranding['name'] ?? config('app.name', 'FinCoreHub') }}</h1>
                <p class="mt-2 text-sm text-[var(--fc-muted)]">Sign in to continue</p>
            </div>

            <form method="POST" action="{{ route('login.store') }}" class="mt-8 space-y-5">
                @csrf
                <div>
                    <label for="email" class="mb-2 block text-sm font-medium text-[var(--fc-text)]">Email address</label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" placeholder="name@company.com" title="Enter the email address linked to your account" class="w-full rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-white placeholder:text-slate-400 focus:border-cyan-300 focus:ring-cyan-300" required>
                </div>

                <div>
                    <label for="password" class="mb-2 block text-sm font-medium text-[var(--fc-text)]">Password</label>
                    <input id="password" type="password" name="password" placeholder="Enter your password" title="Use the password for your customer or admin account" class="w-full rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-white placeholder:text-slate-400 focus:border-cyan-300 focus:ring-cyan-300" required>
                </div>

                <label class="flex items-center gap-3 text-sm text-[var(--fc-muted)]">
                    <input type="checkbox" name="remember" value="1" class="rounded border-white/20 bg-slate-950/60 text-brand-500 focus:ring-cyan-300">
                    Remember me
                </label>

                <button type="submit" class="w-full rounded-2xl bg-gradient-to-r from-brand-500 to-cyan-400 px-5 py-3 font-semibold text-white shadow-glow transition hover:-translate-y-0.5">
                    Login
                </button>

                <a href="{{ route('password.request') }}" class="block text-center text-sm text-cyan-200 transition hover:text-white">
                    Forgot password?
                </a>
            </form>
        </div>
    </div>
</section>
@endsection