<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Client Data (Read-only) -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Dados da Empresa</h3>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-500">Razão Social / Nome</label>
                <p class="mt-1 text-gray-900 font-medium"><?= htmlspecialchars($client['name']) ?></p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500">ASN</label>
                <p class="mt-1 text-gray-900 font-medium"><?= htmlspecialchars($client['asn']) ?></p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500">Email de Contato</label>
                <p class="mt-1 text-gray-900 font-medium"><?= htmlspecialchars($client['email']) ?></p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500">Email Financeiro</label>
                <p class="mt-1 text-gray-900 font-medium"><?= htmlspecialchars($client['financial_email']) ?></p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-500">Telegram ID</label>
                <p class="mt-1 text-gray-900 font-medium"><?= htmlspecialchars($client['telegram_id'] ?? '-') ?></p>
            </div>
        </div>
        <div class="mt-6 p-4 bg-yellow-50 rounded-lg text-sm text-yellow-700">
            Para alterar estes dados, entre em contato com o administrador.
        </div>
    </div>

    <!-- Change Password -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Alterar Senha</h3>



        <form action="/client/profile/password" method="POST">
            <div class="space-y-4">
                <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">
                                A senha deve ter no mínimo <strong>8 caracteres</strong>, contendo pelo menos
                                <strong>uma letra maiúscula</strong> e <strong>um caractere especial</strong>.
                            </p>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nova Senha</label>
                    <input type="password" name="password"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                        required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Confirmar Nova Senha</label>
                    <input type="password" name="confirm_password"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                        required>
                </div>
            </div>
            <div class="mt-6 flex justify-end">
                <button type="submit"
                    class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors">
                    Atualizar Senha
                </button>
            </div>
        </form>
    </div>
</div>