<?php
/// file: app/View/admin/login.php

declare(strict_types=1);

/** @var string|null $error */
/** @var \App\Core\App $app */
$brand = (string) $app->config('app.name', 'SANEKSA');
?>
<div class="w-full max-w-[420px]">
    <div class="mb-10 flex flex-col items-center text-center">
        <?php \App\Core\View::component('site-logo', ['brand' => $brand, 'class' => 'h-9 w-auto drop-shadow-[0_0_28px_rgba(56,189,248,0.15)]']); ?>
        <p class="muted-label mt-8">Secure area</p>
        <h1 class="mt-2 font-display text-[2rem] leading-tight tracking-tight text-white sm:text-4xl">Admin access</h1>
        <p class="mt-3 max-w-[280px] text-sm leading-relaxed text-silver-500">
            Sign in to manage studio content, journal, and site settings.
        </p>
    </div>

    <div class="relative">
        <div
            class="admin-auth-card-glow pointer-events-none absolute -inset-px rounded-[1.35rem] bg-gradient-to-b from-white/[0.14] via-electric-500/30 to-violet-500/[0.12] opacity-60 blur-lg"
            aria-hidden="true"
        ></div>
        <div
            class="relative rounded-[1.25rem] border border-white/[0.09] bg-[#0c0c0e]/[0.72] p-8 shadow-[0_0_0_1px_rgba(255,255,255,0.04)_inset,0_28px_90px_rgba(0,0,0,0.55),0_0_80px_rgba(14,165,233,0.06)] backdrop-blur-2xl sm:p-10"
        >
            <?php if (! empty($error)): ?>
                <div
                    class="mb-6 rounded-xl border border-red-500/25 bg-red-500/[0.08] px-4 py-3 text-sm text-red-200/95 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
                    role="alert"
                >
                    <?= e($error) ?>
                </div>
            <?php endif; ?>

            <form method="post" action="<?= e(url('/admin/login')) ?>" class="space-y-5">
                <?= \App\Core\Csrf::field() ?>
                <div>
                    <label for="admin-email" class="muted-label">Email</label>
                    <input
                        id="admin-email"
                        type="email"
                        name="email"
                        required
                        autocomplete="username"
                        class="mt-2 w-full rounded-xl border border-white/[0.1] bg-carbon/90 px-4 py-3 text-sm text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] outline-none transition duration-200 placeholder:text-silver-600 focus:border-electric-400/45 focus:ring-2 focus:ring-electric-500/20"
                        placeholder="you@studio.com"
                    >
                </div>
                <div>
                    <label for="admin-password" class="muted-label">Password</label>
                    <input
                        id="admin-password"
                        type="password"
                        name="password"
                        required
                        autocomplete="current-password"
                        class="mt-2 w-full rounded-xl border border-white/[0.1] bg-carbon/90 px-4 py-3 text-sm text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] outline-none transition duration-200 placeholder:text-silver-600 focus:border-electric-400/45 focus:ring-2 focus:ring-electric-500/20"
                        placeholder="••••••••"
                    >
                </div>
                <div class="pt-2">
                    <button
                        type="submit"
                        class="admin-auth-submit w-full rounded-full bg-white px-6 py-3.5 text-[0.7rem] font-semibold uppercase tracking-[0.22em] text-carbon shadow-[0_0_0_1px_rgba(255,255,255,0.08)_inset] transition duration-300 ease-outexpo hover:shadow-[0_0_48px_rgba(56,189,248,0.28)]"
                    >
                        Sign in
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
