<div class="max-w-2xl mx-auto">
    <h2 class="text-2xl font-bold text-white mb-6">Account Settings ⚙️</h2>

    <div class="glass-panel p-8 rounded-xl">
        <form action="/profile.php?action=update" method="POST">
            
            <div class="flex items-center gap-4 mb-8">
                <div class="w-16 h-16 rounded-full bg-gradient-to-br from-rose-500 to-purple-600 flex items-center justify-center text-2xl font-bold text-white shadow-lg shadow-rose-500/20">
                    <?= substr($user['name'], 0, 1) ?>
                </div>
                <div>
                    <h3 class="text-white font-bold text-lg"><?= htmlspecialchars($user['name']) ?></h3>
                    <p class="text-gray-400 text-sm"><?= htmlspecialchars($user['role']) ?></p>
                </div>
            </div>

            <div class="mb-6">
                <label class="block text-gray-300 text-sm font-bold mb-2">Full Name</label>
                <input type="text" name="name" value="<?= htmlspecialchars($user['name']) ?>" required class="w-full bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-rose-500 transition">
            </div>

            <div class="mb-6">
                <label class="block text-gray-300 text-sm font-bold mb-2">Email Address</label>
                <input type="email" name="email" value="<?= htmlspecialchars($user['email']) ?>" required class="w-full bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-rose-500 transition">
            </div>

            <hr class="border-gray-700 my-8">

            <h3 class="text-white font-bold mb-4">Change Password</h3>
            <p class="text-gray-500 text-xs mb-4">Leave this blank if you don't want to change it.</p>

            <div class="mb-8">
                <label class="block text-gray-300 text-sm font-bold mb-2">New Password</label>
                <input type="password" name="new_password" class="w-full bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-rose-500 transition" placeholder="••••••••">
            </div>

            <div class="flex justify-end gap-4">
                <a href="/" class="px-6 py-3 text-gray-400 hover:text-white transition">Cancel</a>
                <button type="submit" class="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white font-bold py-3 px-6 rounded-lg transition shadow-lg">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>