<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= e($pageTitle ?? 'Login') ?> - <?= e(appName()) ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'DM Sans', system-ui, sans-serif; }
        .fade-in { animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body class="h-full bg-slate-900">
    <div class="min-h-full flex">
        <!-- Left branding panel -->
        <div class="hidden lg:flex lg:flex-1 flex-col justify-between p-12 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
            <div>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center font-bold text-white">R</div>
                    <span class="text-2xl font-bold text-white tracking-tight"><?= e(appName()) ?></span>
                </div>
            </div>
            <div>
                <h1 class="text-4xl font-bold text-white leading-tight mb-4">AI-Powered Property<br>Management Platform</h1>
                <p class="text-lg text-slate-400 max-w-md">Manage properties, tenants, leases, payments, and maintenance — all from one intelligent platform.</p>
            </div>
            <div class="flex items-center gap-8 text-sm text-slate-500">
                <span>Properties</span>
                <span class="w-1 h-1 rounded-full bg-slate-600"></span>
                <span>Tenants</span>
                <span class="w-1 h-1 rounded-full bg-slate-600"></span>
                <span>Payments</span>
                <span class="w-1 h-1 rounded-full bg-slate-600"></span>
                <span>AI Agents</span>
            </div>
        </div>

        <!-- Right form panel -->
        <div class="flex-1 flex items-center justify-center p-6 bg-white lg:max-w-xl">
            <div class="w-full max-w-sm fade-in">
                <!-- Mobile logo -->
                <div class="lg:hidden flex items-center gap-3 mb-10">
                    <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center font-bold text-white text-sm">R</div>
                    <span class="text-xl font-bold text-gray-900"><?= e(appName()) ?></span>
                </div>

                <?php if ($error = flash('error')): ?>
                    <div class="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 border border-red-200 text-red-700 text-sm">
                        <svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <?= e($error) ?>
                    </div>
                <?php endif; ?>

                <?php if ($success = flash('success')): ?>
                    <div class="mb-6 flex items-center gap-3 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-700 text-sm">
                        <svg class="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <?= e($success) ?>
                    </div>
                <?php endif; ?>

                <?= $content ?? '' ?>
            </div>
        </div>
    </div>
</body>
</html>
