<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    <title>{{ $appName }} is under maintenance</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen bg-slate-50 text-slate-900 antialiased">
    <main class="flex min-h-screen items-center justify-center px-6 py-12">
        <section class="w-full max-w-xl rounded-3xl border border-slate-200 bg-white p-8 text-center shadow-sm sm:p-10">
            <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-teal-50 text-teal-700">
                <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6l4 2" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
            </div>

            <p class="mt-6 text-sm font-semibold uppercase tracking-[0.18em] text-teal-700">Maintenance mode</p>
            <h1 class="mt-3 text-3xl font-semibold tracking-normal text-slate-950 sm:text-4xl">
                {{ $appName }} will be back shortly
            </h1>
            <p class="mx-auto mt-4 max-w-md text-base leading-7 text-slate-600">
                {{ $message }}
            </p>
            <p class="mt-8 text-sm text-slate-500">
                Admin access remains available for platform maintenance.
            </p>
        </section>
    </main>
</body>
</html>
