<div x-data="{ saving: false, saved: false }" class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow p-8">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Profile Settings</h2>
    <form @submit.prevent="saving = true; setTimeout(() => { saving = false; saved = true; setTimeout(() => saved = false, 3000); }, 1500)">
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div><label class="block text-sm font-medium mb-2">First Name</label><input type="text" value="John" class="w-full px-4 py-2 border rounded-lg dark:bg-gray-700"></div>
            <div><label class="block text-sm font-medium mb-2">Last Name</label><input type="text" value="Doe" class="w-full px-4 py-2 border rounded-lg dark:bg-gray-700"></div>
        </div>
        <div class="flex items-center gap-4">
            <button type="submit" :disabled="saving" class="px-6 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50">
                <span x-show="!saving">Save Changes</span>
                <span x-show="saving">Saving...</span>
            </button>
            <span x-show="saved" class="text-green-600 text-sm">Changes saved!</span>
        </div>
    </form>
</div>